mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-09-13 23:45:30 -04:00
scss ➡️ vanilla css (#727)
* scss isn't worth the technical/mental overhead anymore * try to translate my old Hugo pygments themes * update lockfile * consolidate .hljs classes
This commit is contained in:
GitHub
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"extends": ["stylelint-config-standard-scss", "stylelint-prettier/recommended"],
|
||||
"plugins": ["stylelint-scss", "stylelint-prettier"],
|
||||
"extends": ["stylelint-prettier/recommended"],
|
||||
"plugins": ["stylelint-prettier"],
|
||||
"rules": {
|
||||
"alpha-value-notation": "number",
|
||||
"color-function-notation": "legacy",
|
||||
|
||||
66
components/Content.module.css
Normal file
66
components/Content.module.css
Normal file
@@ -0,0 +1,66 @@
|
||||
.content {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.content blockquote {
|
||||
margin-left: 0;
|
||||
padding-left: 1.5em;
|
||||
border-left: 3px solid var(--link);
|
||||
color: var(--medium-dark);
|
||||
}
|
||||
|
||||
.content h2,
|
||||
.content h3,
|
||||
.content h4 {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* special bottom border for H2s */
|
||||
.content h2 {
|
||||
padding-bottom: 0.25em;
|
||||
border-bottom: 1px solid var(--kinda-light);
|
||||
}
|
||||
|
||||
.content figure {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content figure img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.content figure figcaption {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.5;
|
||||
margin-top: 0.3em;
|
||||
color: var(--medium);
|
||||
}
|
||||
|
||||
.content ul,
|
||||
.content ol {
|
||||
margin-left: 1.5em;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.content li {
|
||||
padding-left: 0.25em;
|
||||
}
|
||||
|
||||
.content hr {
|
||||
margin: 1.5em auto;
|
||||
height: 2px;
|
||||
border: 0;
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.content {
|
||||
font-size: 0.925em;
|
||||
line-height: 1.85;
|
||||
}
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
.content {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.7;
|
||||
|
||||
blockquote {
|
||||
margin-left: 0;
|
||||
padding-left: 1.5em;
|
||||
border-left: 3px solid var(--link);
|
||||
color: var(--medium-dark);
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// special bottom border for H2s
|
||||
h2 {
|
||||
padding-bottom: 0.25em;
|
||||
border-bottom: 1px solid var(--kinda-light);
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.5;
|
||||
margin-top: 0.3em;
|
||||
color: var(--medium);
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-left: 1.5em;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
padding-left: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1.5em auto;
|
||||
height: 2px;
|
||||
border: 0;
|
||||
background-color: var(--light);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.content {
|
||||
font-size: 0.925em;
|
||||
line-height: 1.85;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import styles from "./Content.module.scss";
|
||||
import styles from "./Content.module.css";
|
||||
|
||||
type Props = {
|
||||
children: unknown;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import Header from "./page-header/Header";
|
||||
import Footer from "./page-footer/Footer";
|
||||
|
||||
import styles from "./Layout.module.scss";
|
||||
import styles from "./Layout.module.css";
|
||||
|
||||
const Layout = ({ children }) => (
|
||||
<>
|
||||
|
||||
@@ -8,8 +8,9 @@
|
||||
background-color: var(--background-inner);
|
||||
border: 1px solid var(--kinda-light);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.copy_button:hover {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
@@ -22,4 +23,3 @@
|
||||
.octicon-check {
|
||||
color: var(--success);
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,7 @@ import copy from "copy-to-clipboard";
|
||||
import innerText from "react-innertext";
|
||||
import { CopyOcticon, CheckOcticon } from "../icons/octicons";
|
||||
|
||||
import styles from "./CopyButton.module.scss";
|
||||
import styles from "./CopyButton.module.css";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
|
||||
90
components/contact/ContactForm.module.css
Normal file
90
components/contact/ContactForm.module.css
Normal file
@@ -0,0 +1,90 @@
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: 0.8em;
|
||||
margin: 0.6em 0;
|
||||
border: 2px solid;
|
||||
border-radius: 0.3em;
|
||||
color: var(--text);
|
||||
background-color: var(--super-duper-light);
|
||||
border-color: var(--light);
|
||||
}
|
||||
|
||||
textarea.input {
|
||||
height: 12em;
|
||||
min-height: 6em;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.5;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
outline: none;
|
||||
border-color: var(--link);
|
||||
}
|
||||
|
||||
.input.missing {
|
||||
border-color: var(--error);
|
||||
}
|
||||
|
||||
.markdown_tip {
|
||||
font-size: 0.825em;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.markdown_tip a {
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown_tip a:first-of-type {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hcaptcha {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.action_row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 3.75em;
|
||||
}
|
||||
|
||||
.btn_submit {
|
||||
flex-shrink: 0;
|
||||
height: 3.25em;
|
||||
padding: 1em 1.25em;
|
||||
margin-right: 1.5em;
|
||||
border: 0;
|
||||
border-radius: 0.3em;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
color: var(--text);
|
||||
background-color: var(--kinda-light);
|
||||
}
|
||||
|
||||
.btn_submit:hover {
|
||||
color: var(--super-duper-light);
|
||||
background-color: var(--link);
|
||||
}
|
||||
|
||||
.btn_submit .send_icon {
|
||||
margin-right: 0.4em;
|
||||
}
|
||||
|
||||
.result_success,
|
||||
.result_error {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.result_success {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.result_error {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -1,97 +0,0 @@
|
||||
.form {
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 0.8em;
|
||||
margin: 0.6em 0;
|
||||
border: 2px solid;
|
||||
border-radius: 0.3em;
|
||||
color: var(--text);
|
||||
background-color: var(--super-duper-light);
|
||||
border-color: var(--light);
|
||||
|
||||
&:focus {
|
||||
outline: none; // disable browsers' outer border
|
||||
border-color: var(--link);
|
||||
}
|
||||
|
||||
&.missing {
|
||||
border-color: var(--error);
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 12em;
|
||||
min-height: 6em;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.5;
|
||||
|
||||
// allow vertical resizing & disable horizontal
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown_tip {
|
||||
font-size: 0.825em;
|
||||
line-height: 1.75;
|
||||
|
||||
a {
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
|
||||
&:first-of-type {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hcaptcha {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.action_row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 3.75em;
|
||||
}
|
||||
|
||||
.btn_submit {
|
||||
flex-shrink: 0;
|
||||
height: 3.25em;
|
||||
padding: 1em 1.25em;
|
||||
margin-right: 1.5em;
|
||||
border: 0;
|
||||
border-radius: 0.3em;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
color: var(--text);
|
||||
background-color: var(--kinda-light);
|
||||
|
||||
&:hover {
|
||||
color: var(--super-duper-light);
|
||||
background-color: var(--link);
|
||||
}
|
||||
|
||||
.send_icon {
|
||||
margin-right: 0.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.result_success,
|
||||
.result_error {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.result_success {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.result_error {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -9,7 +9,7 @@ import { CheckOcticon, XOcticon } from "../icons/octicons";
|
||||
|
||||
import type { FormikHelpers } from "formik";
|
||||
|
||||
import styles from "./ContactForm.module.scss";
|
||||
import styles from "./ContactForm.module.css";
|
||||
const cx = classNames.bind(styles);
|
||||
|
||||
type Values = {
|
||||
@@ -100,14 +100,14 @@ const ContactForm = () => {
|
||||
{({ setFieldValue, isSubmitting, touched, errors }) => (
|
||||
<Form className={styles.form} name="contact">
|
||||
<Field
|
||||
className={cx({ missing: errors.name && touched.name })}
|
||||
className={cx({ input: true, missing: errors.name && touched.name })}
|
||||
name="name"
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
disabled={success}
|
||||
/>
|
||||
<Field
|
||||
className={cx({ missing: errors.email && touched.email })}
|
||||
className={cx({ input: true, missing: errors.email && touched.email })}
|
||||
name="email"
|
||||
type="email"
|
||||
inputmode="email"
|
||||
@@ -115,7 +115,7 @@ const ContactForm = () => {
|
||||
disabled={success}
|
||||
/>
|
||||
<Field
|
||||
className={cx({ missing: errors.message && touched.message })}
|
||||
className={cx({ input: true, missing: errors.message && touched.message })}
|
||||
name="message"
|
||||
component="textarea"
|
||||
placeholder="Write something..."
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
.section {
|
||||
margin: 2.4em 0;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
.section:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
.section:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.year {
|
||||
font-size: 2.2em;
|
||||
@@ -26,10 +26,10 @@
|
||||
display: flex;
|
||||
line-height: 1.75;
|
||||
margin-bottom: 1em;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.row:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.date {
|
||||
@@ -2,7 +2,7 @@ import Link from "next/link";
|
||||
import Markdown from "markdown-to-jsx";
|
||||
import { format } from "date-fns";
|
||||
|
||||
import styles from "./List.module.scss";
|
||||
import styles from "./List.module.css";
|
||||
|
||||
type NoteProps = {
|
||||
title: string;
|
||||
|
||||
76
components/notes/Meta.module.css
Normal file
76
components/notes/Meta.module.css
Normal file
@@ -0,0 +1,76 @@
|
||||
.meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.825em;
|
||||
line-height: 2.3;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--medium);
|
||||
}
|
||||
|
||||
.meta a {
|
||||
color: inherit;
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.meta > div {
|
||||
display: inline-flex;
|
||||
margin-right: 1.6em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.meta > div:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
|
||||
.date a,
|
||||
.edit a {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.tags {
|
||||
white-space: normal;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tags .tag {
|
||||
text-transform: lowercase;
|
||||
white-space: nowrap;
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
|
||||
.tags .tag::before {
|
||||
content: "#"; /* cosmetically hashtagify tags */
|
||||
padding-right: 0.125em;
|
||||
color: var(--light);
|
||||
}
|
||||
|
||||
.tags .tag:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0.3em 0 0.5em -0.03em;
|
||||
font-size: 2.1em;
|
||||
line-height: 1.3;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.title a {
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.title code {
|
||||
font-size: 1em;
|
||||
background: none !important;
|
||||
border: 0 !important;
|
||||
margin: 0 0.075em !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
.meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.825em;
|
||||
line-height: 2.3;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--medium);
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: inline-flex;
|
||||
margin-right: 1.6em;
|
||||
white-space: nowrap;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
|
||||
.date,
|
||||
.edit {
|
||||
a {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
white-space: normal;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.tag {
|
||||
text-transform: lowercase;
|
||||
white-space: nowrap;
|
||||
margin-right: 0.75em;
|
||||
|
||||
&::before {
|
||||
content: "#"; // cosmetically hashtagify tags
|
||||
padding-right: 0.125em;
|
||||
color: var(--light);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0.3em 0 0.5em -0.03em; // TODO: why is this indented slightly?
|
||||
font-size: 2.1em;
|
||||
line-height: 1.3;
|
||||
font-weight: 700;
|
||||
|
||||
a {
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 1em;
|
||||
background: none !important;
|
||||
border: 0 !important;
|
||||
margin: 0 0.075em !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
@@ -5,7 +5,7 @@ import Hits from "../hits/Hits";
|
||||
import { DateIcon, TagIcon, EditIcon, ViewsIcon } from "../icons";
|
||||
import * as config from "../../lib/config";
|
||||
|
||||
import styles from "./Meta.module.scss";
|
||||
import styles from "./Meta.module.css";
|
||||
|
||||
export type Props = {
|
||||
title: string;
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
padding: 1.25em 1.5em;
|
||||
border-top: 1px solid var(--kinda-light);
|
||||
color: var(--medium-dark);
|
||||
}
|
||||
|
||||
a {
|
||||
.footer a {
|
||||
color: var(--medium-dark);
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
@@ -25,16 +25,16 @@
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 1px solid;
|
||||
border-color: var(--light);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--kinda-light);
|
||||
}
|
||||
|
||||
.view_source:hover {
|
||||
border-color: var(--kinda-light);
|
||||
}
|
||||
|
||||
.beat {
|
||||
display: inline-block;
|
||||
animation: beat 10s infinite; // 6 bpm, call 911 if you see this please.
|
||||
animation-delay: 7.5s; // offset from wave animation
|
||||
animation: beat 10s infinite; /* 6 bpm, call 911 if you see this please. */
|
||||
animation-delay: 7.5s; /* offset from wave animation */
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@@ -42,15 +42,17 @@
|
||||
.footer {
|
||||
padding: 1em 1.25em 0;
|
||||
|
||||
// Safari iOS menu bar reappears below 44px:
|
||||
// https://www.eventbrite.com/engineering/mobile-safari-why/
|
||||
/*
|
||||
* Safari iOS menu bar reappears below 44px:
|
||||
* https://www.eventbrite.com/engineering/mobile-safari-why/
|
||||
*/
|
||||
padding-bottom: 45px !important;
|
||||
|
||||
// Allows you to scroll below the viewport; default value is visible
|
||||
/* Allows you to scroll below the viewport; default value is visible */
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
// stack columns on left instead of flexboxing across
|
||||
/* stack columns on left instead of flexboxing across */
|
||||
.row {
|
||||
font-size: 0.8em;
|
||||
display: block;
|
||||
@@ -74,7 +76,7 @@
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
// pause for ~9 out of 10 seconds
|
||||
/* pause for ~9 out of 10 seconds */
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import Link from "next/link";
|
||||
import { HeartIcon, NextjsIcon } from "../icons";
|
||||
import * as config from "../../lib/config";
|
||||
|
||||
import styles from "./Footer.module.scss";
|
||||
import styles from "./Footer.module.css";
|
||||
|
||||
const Footer = () => (
|
||||
<footer className={styles.footer}>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import Name from "./Name";
|
||||
import Menu from "./Menu";
|
||||
|
||||
import styles from "./Header.module.scss";
|
||||
import styles from "./Header.module.css";
|
||||
|
||||
const Header = () => (
|
||||
<header className={styles.header}>
|
||||
|
||||
67
components/page-header/Menu.module.css
Normal file
67
components/page-header/Menu.module.css
Normal file
@@ -0,0 +1,67 @@
|
||||
.menu {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-left: 1.8em;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.item .link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--medium-dark);
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.item .link:hover {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
.item .icon {
|
||||
width: 1.6em;
|
||||
height: 1.6em;
|
||||
}
|
||||
|
||||
.item .text {
|
||||
font-size: 0.95em;
|
||||
font-weight: 500;
|
||||
margin-top: 0.125em;
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
|
||||
.theme_toggle {
|
||||
margin-left: 1.25em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.menu {
|
||||
max-width: 320px;
|
||||
margin-left: 20px;
|
||||
justify-content: space-between;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.item .icon {
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
}
|
||||
|
||||
/* hide text next to emojis on mobile */
|
||||
.item .text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme_toggle {
|
||||
margin-left: -0.3em;
|
||||
}
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
.menu {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-left: 1.8em;
|
||||
display: inline-flex;
|
||||
|
||||
.link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--medium-dark);
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
|
||||
&:hover {
|
||||
color: var(--link);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.6em;
|
||||
height: 1.6em;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 0.95em;
|
||||
font-weight: 500;
|
||||
margin-top: 0.125em;
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.theme_toggle {
|
||||
margin-left: 1.25em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.menu {
|
||||
max-width: 320px;
|
||||
margin-left: 20px;
|
||||
justify-content: space-between;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-left: 0;
|
||||
|
||||
.icon {
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
}
|
||||
|
||||
// hide text next to emojis on mobile
|
||||
.text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.theme_toggle {
|
||||
margin-left: -0.3em;
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import dynamic from "next/dynamic";
|
||||
import Link from "next/link";
|
||||
import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
|
||||
|
||||
import styles from "./Menu.module.scss";
|
||||
import styles from "./Menu.module.css";
|
||||
|
||||
// ensure the theme toggle isn't evaluated server-side
|
||||
const ThemeToggle = dynamic(() => import("./ThemeToggle"), { ssr: false });
|
||||
|
||||
@@ -4,24 +4,24 @@
|
||||
color: var(--medium-dark);
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.title:hover {
|
||||
color: var(--link);
|
||||
|
||||
.selfie {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selfie {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
img {
|
||||
.selfie img {
|
||||
border: 1px solid var(--light) !important;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.title:hover .selfie {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.name {
|
||||
@@ -3,7 +3,7 @@ import Image from "next/image";
|
||||
|
||||
import meJpg from "../../public/static/images/me.jpg";
|
||||
|
||||
import styles from "./Name.module.scss";
|
||||
import styles from "./Name.module.css";
|
||||
|
||||
const Name = () => (
|
||||
<Link href="/">
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
margin-bottom: 0.6em;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
.title a {
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.title {
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import styles from "./PageTitle.module.scss";
|
||||
import styles from "./PageTitle.module.css";
|
||||
|
||||
type Props = {
|
||||
title: unknown;
|
||||
|
||||
59
components/projects/RepoCard.module.css
Normal file
59
components/projects/RepoCard.module.css
Normal file
@@ -0,0 +1,59 @@
|
||||
.card {
|
||||
width: 100%;
|
||||
padding: 1.2em 1.2em 0.8em;
|
||||
border: 1px solid;
|
||||
border-radius: 0.5em;
|
||||
font-size: 0.85em;
|
||||
color: var(--medium-dark);
|
||||
border-color: var(--kinda-light);
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 1.2em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 0.7em 0 0.5em;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.meta_item {
|
||||
margin-right: 1.5em;
|
||||
font-size: 0.875em;
|
||||
line-height: 2;
|
||||
color: var(--medium);
|
||||
}
|
||||
|
||||
.meta_item a {
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.meta_item a:hover {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
.octicon,
|
||||
.language_color {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: text-bottom;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.language_color {
|
||||
display: inline-block;
|
||||
width: 1.15em;
|
||||
height: 1.15em;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
.card {
|
||||
width: 100%;
|
||||
padding: 1.2em 1.2em 0.8em;
|
||||
border: 1px solid;
|
||||
border-radius: 0.5em;
|
||||
font-size: 0.85em;
|
||||
color: var(--medium-dark);
|
||||
border-color: var(--kinda-light);
|
||||
|
||||
.name {
|
||||
font-size: 1.2em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 0.7em 0 0.5em;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
|
||||
.meta_item {
|
||||
margin-right: 1.5em;
|
||||
font-size: 0.875em;
|
||||
line-height: 2;
|
||||
color: var(--medium);
|
||||
|
||||
a {
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: var(--link);
|
||||
}
|
||||
}
|
||||
|
||||
.octicon,
|
||||
.language_color {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: text-bottom;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.language_color {
|
||||
display: inline-block;
|
||||
width: 1.15em;
|
||||
height: 1.15em;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { intlFormat, formatDistanceToNowStrict } from "date-fns";
|
||||
import { StarOcticon, ForkOcticon } from "../icons/octicons";
|
||||
|
||||
import styles from "./RepoCard.module.scss";
|
||||
import styles from "./RepoCard.module.css";
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.wrapper {
|
||||
position: relative;
|
||||
padding-top: 56.25%; // 100 / (1280 / 720)
|
||||
padding-top: 56.25%; /* 100 / (1280 / 720) */
|
||||
}
|
||||
|
||||
.react_player {
|
||||
@@ -1,7 +1,7 @@
|
||||
import dynamic from "next/dynamic";
|
||||
import type { ReactPlayerProps } from "react-player";
|
||||
|
||||
import styles from "./Video.module.scss";
|
||||
import styles from "./Video.module.css";
|
||||
|
||||
const ReactPlayer = dynamic(() => import("react-player/lazy"));
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
"analyze": "cross-env ANALYZE=true next build",
|
||||
"lint": "run-s lint:*",
|
||||
"lint:next": "next lint",
|
||||
"lint:css": "stylelint '**/*.{css,scss}'",
|
||||
"lint:css": "stylelint '**/*.css'",
|
||||
"lint:prettier": "prettier --check ."
|
||||
},
|
||||
"dependencies": {
|
||||
@@ -42,7 +42,6 @@
|
||||
"feed": "^4.2.2",
|
||||
"formik": "^2.2.9",
|
||||
"gray-matter": "^4.0.3",
|
||||
"highlight.js": "^11.4.0",
|
||||
"html-escaper": "^3.0.3",
|
||||
"is-absolute-url": "^4.0.1",
|
||||
"is-email-like": "^2.0.0",
|
||||
@@ -89,20 +88,17 @@
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.4.5",
|
||||
"prettier": "^2.5.1",
|
||||
"sass": "^1.46.0",
|
||||
"simple-git-hooks": "^2.7.0",
|
||||
"stylelint": "~14.2.0",
|
||||
"stylelint-config-prettier": "~9.0.3",
|
||||
"stylelint-config-standard-scss": "~3.0.0",
|
||||
"stylelint-prettier": "~2.0.0",
|
||||
"stylelint-scss": "~4.1.0",
|
||||
"typescript": "^4.5.4"
|
||||
},
|
||||
"simple-git-hooks": {
|
||||
"pre-commit": "npx lint-staged"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{css,scss}": [
|
||||
"*.css": [
|
||||
"stylelint",
|
||||
"prettier --check"
|
||||
],
|
||||
|
||||
@@ -14,10 +14,10 @@ import meJpg from "../public/static/images/me.jpg";
|
||||
|
||||
// global styles
|
||||
import "modern-normalize/modern-normalize.css";
|
||||
import "../styles/colors.scss";
|
||||
import "../styles/typography.scss";
|
||||
import "../styles/highlight.scss";
|
||||
import "../styles/index.scss";
|
||||
import "../styles/colors.css";
|
||||
import "../styles/typography.css";
|
||||
import "../styles/highlight.css";
|
||||
import "../styles/index.css";
|
||||
|
||||
const App = ({ Component, pageProps }: AppProps) => {
|
||||
const router = useRouter();
|
||||
|
||||
@@ -20,6 +20,9 @@ import img_2009_07 from "../public/static/images/previously/2009_07.png";
|
||||
import img_2012_09 from "../public/static/images/previously/2012_09.png";
|
||||
import img_2018_04 from "../public/static/images/previously/2018_04.png";
|
||||
|
||||
import "@fontsource/comic-neue/latin-400.css";
|
||||
import "@fontsource/comic-neue/latin-700.css";
|
||||
|
||||
const Previously = () => (
|
||||
<>
|
||||
<NextSeo
|
||||
|
||||
63
styles/colors.css
Normal file
63
styles/colors.css
Normal file
@@ -0,0 +1,63 @@
|
||||
:root {
|
||||
--background-inner: #ffffff;
|
||||
--background-outer: #fcfcfc;
|
||||
--background-header: rgba(252, 252, 252, 0.7);
|
||||
--text: #202020;
|
||||
--medium-dark: #515151;
|
||||
--medium: #5e5e5e;
|
||||
--medium-light: #757575;
|
||||
--light: #d2d2d2;
|
||||
--kinda-light: #e3e3e3;
|
||||
--super-light: #f4f4f4;
|
||||
--super-duper-light: #fbfbfb;
|
||||
--link: #0e6dc2;
|
||||
--link-underline: rgba(14, 109, 194, 0.4);
|
||||
--success: #44a248;
|
||||
--error: #ff1b1b;
|
||||
|
||||
/* Syntax Highlighting (light) - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight */
|
||||
--highlight-color: #313131;
|
||||
--highlight-bg: #fbfbfb;
|
||||
--highlight-comment: #656e77;
|
||||
--highlight-keyword: #029cb9;
|
||||
--highlight-attribute: #70a800;
|
||||
--highlight-symbol: #803378;
|
||||
--highlight-namespace: #f92672;
|
||||
--highlight-literal: #ae81ff;
|
||||
--highlight-punctuation: #111111;
|
||||
--highlight-variable: #d88200;
|
||||
--highlight-deletion: #ff1b1b;
|
||||
--highlight-addition: #44a248;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--background-inner: #1e1e1e;
|
||||
--background-outer: #252525;
|
||||
--background-header: rgba(37, 37, 37, 0.85);
|
||||
--text: #f1f1f1;
|
||||
--medium-dark: #d7d7d7;
|
||||
--medium: #b1b1b1;
|
||||
--medium-light: #959595;
|
||||
--light: #646464;
|
||||
--kinda-light: #535353;
|
||||
--super-light: #272727;
|
||||
--super-duper-light: #1f1f1f;
|
||||
--link: #88c7ff;
|
||||
--link-underline: rgba(136, 199, 255, 0.4);
|
||||
--success: #78df55;
|
||||
--error: #ff5151;
|
||||
|
||||
/* Syntax Highlighting (dark) - modified from Dracula: https://github.com/dracula/pygments */
|
||||
--highlight-color: #e4e4e4;
|
||||
--highlight-bg: #212121;
|
||||
--highlight-comment: #929292;
|
||||
--highlight-keyword: #3b9dd2;
|
||||
--highlight-attribute: #78df55;
|
||||
--highlight-symbol: #c59bc1;
|
||||
--highlight-namespace: #f95757;
|
||||
--highlight-literal: #d588fb;
|
||||
--highlight-punctuation: #cccccc;
|
||||
--highlight-variable: #fd992a;
|
||||
--highlight-deletion: #ff5151;
|
||||
--highlight-addition: #78df55;
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
:root {
|
||||
--background-inner: #ffffff;
|
||||
--background-outer: #fcfcfc;
|
||||
--background-header: rgba(252, 252, 252, 0.7);
|
||||
--text: #202020;
|
||||
--medium-dark: #515151;
|
||||
--medium: #5e5e5e;
|
||||
--medium-light: #757575;
|
||||
--light: #d2d2d2;
|
||||
--kinda-light: #e3e3e3;
|
||||
--super-light: #f4f4f4;
|
||||
--super-duper-light: #fbfbfb;
|
||||
--link: #0e6dc2;
|
||||
--link-underline: rgba(14, 109, 194, 0.4);
|
||||
--success: #44a248;
|
||||
--error: #ff1b1b;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--background-inner: #1e1e1e;
|
||||
--background-outer: #252525;
|
||||
--background-header: rgba(37, 37, 37, 0.85);
|
||||
--text: #f1f1f1;
|
||||
--medium-dark: #d7d7d7;
|
||||
--medium: #b1b1b1;
|
||||
--medium-light: #959595;
|
||||
--light: #646464;
|
||||
--kinda-light: #535353;
|
||||
--super-light: #272727;
|
||||
--super-duper-light: #1f1f1f;
|
||||
--link: #88c7ff;
|
||||
--link-underline: rgba(136, 199, 255, 0.4);
|
||||
--success: #78df55;
|
||||
--error: #ff5151;
|
||||
}
|
||||
87
styles/highlight.css
Normal file
87
styles/highlight.css
Normal file
@@ -0,0 +1,87 @@
|
||||
.hljs {
|
||||
color: var(--highlight-color);
|
||||
background: var(--highlight-bg);
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.hljs-comment {
|
||||
color: var(--highlight-comment);
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-doctag,
|
||||
.hljs-section,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-meta,
|
||||
.hljs-meta .hljs-keyword {
|
||||
color: var(--highlight-keyword);
|
||||
}
|
||||
|
||||
.hljs-attr {
|
||||
color: var(--highlight-attribute);
|
||||
}
|
||||
|
||||
.hljs-attribute {
|
||||
color: var(--highlight-symbol);
|
||||
}
|
||||
|
||||
.hljs-name,
|
||||
.hljs-type,
|
||||
.hljs-number,
|
||||
.hljs-selector-id,
|
||||
.hljs-quote,
|
||||
.hljs-template-tag {
|
||||
color: var(--highlight-namespace);
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-regexp,
|
||||
.hljs-symbol,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-link,
|
||||
.hljs-selector-attr,
|
||||
.hljs-meta .hljs-string {
|
||||
color: var(--highlight-variable);
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-title,
|
||||
.hljs-literal {
|
||||
color: var(--highlight-literal);
|
||||
}
|
||||
|
||||
.hljs-bullet,
|
||||
.hljs-code {
|
||||
color: var(--highlight-punctuation);
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: var(--highlight-deletion);
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: var(--highlight-addition);
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-formula,
|
||||
.hljs-operator,
|
||||
.hljs-params,
|
||||
.hljs-property,
|
||||
.hljs-punctuation,
|
||||
.hljs-tag {
|
||||
/* intentionally empty */
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
@use "sass:meta";
|
||||
|
||||
// hacky way to assign different HLJS themes to light/dark mode
|
||||
.markdown {
|
||||
@include meta.load-css("../node_modules/highlight.js/styles/stackoverflow-light.css");
|
||||
}
|
||||
|
||||
[data-theme="dark"] .markdown {
|
||||
@include meta.load-css("../node_modules/highlight.js/styles/stackoverflow-dark.css");
|
||||
}
|
||||
@@ -14,20 +14,22 @@ a {
|
||||
padding-bottom: 2px;
|
||||
transition: background-size 0.25s ease-in-out;
|
||||
background-image: linear-gradient(var(--link-underline), var(--link-underline));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
a:hover {
|
||||
background-size: 100% 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// set an anchor's class to `no-underline` to disable all of this
|
||||
/* set an anchor's class to `no-underline` to disable all of this */
|
||||
.no-underline {
|
||||
background: none !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
// make SVG icons relative to surrounding text
|
||||
// https://github.com/twitter/twemoji#inline-styles
|
||||
/*
|
||||
* make SVG icons relative to surrounding text:
|
||||
* https://github.com/twitter/twemoji#inline-styles
|
||||
*/
|
||||
.icon {
|
||||
display: inline-block;
|
||||
height: 1.2em;
|
||||
@@ -35,16 +37,24 @@ a {
|
||||
vertical-align: -0.2em;
|
||||
}
|
||||
|
||||
// all code
|
||||
/* all code */
|
||||
code {
|
||||
font-size: 0.925em;
|
||||
page-break-inside: avoid;
|
||||
border: 1px solid var(--kinda-light);
|
||||
}
|
||||
|
||||
// inline code in paragraphs/elsewhere (single backticks)
|
||||
:not(pre) > code {
|
||||
padding: 0.075em 0.25em;
|
||||
border: 1px solid var(--kinda-light);
|
||||
/* inline code in paragraphs/elsewhere (single backticks) */
|
||||
:not(pre) code {
|
||||
padding: 0.1em 0.25em;
|
||||
}
|
||||
|
||||
/* code blocks */
|
||||
pre code {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 1em;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.center {
|
||||
@@ -53,37 +63,31 @@ code {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// sub-heading anchor styles
|
||||
/* sub-heading anchor styles */
|
||||
.h-anchor {
|
||||
margin: 0 0.25em;
|
||||
padding: 0 0.25em;
|
||||
color: var(--medium-light);
|
||||
background: none;
|
||||
font-weight: 300;
|
||||
opacity: 0; // overridden on hover
|
||||
opacity: 0; /* overridden on hover */
|
||||
user-select: none;
|
||||
|
||||
&::before {
|
||||
content: "\0023"; // pound sign `#`, done here to keep content DOM cleaner
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.h-anchor::before {
|
||||
content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */
|
||||
}
|
||||
.h-anchor:hover {
|
||||
color: var(--link);
|
||||
}
|
||||
}
|
||||
|
||||
// make anchor `#` link show up on hover over the corresponding heading
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
&:hover {
|
||||
.h-anchor {
|
||||
/* make anchor `#` link show up on hover over the corresponding heading */
|
||||
h2:hover .h-anchor,
|
||||
h3:hover .h-anchor,
|
||||
h4:hover .h-anchor {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// offset (approximately) with sticky header so jumped-to content isn't hiding behind it
|
||||
/* offset (approximately) with sticky header so jumped-to content isn't hiding behind it */
|
||||
h2 {
|
||||
scroll-margin-top: 4em;
|
||||
}
|
||||
@@ -104,7 +108,7 @@ h4 {
|
||||
}
|
||||
}
|
||||
|
||||
// https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites
|
||||
/* https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
::before,
|
||||
63
styles/typography.css
Normal file
63
styles/typography.css
Normal file
@@ -0,0 +1,63 @@
|
||||
@import "@fontsource/inter/latin-400.css";
|
||||
@import "@fontsource/inter/latin-500.css";
|
||||
@import "@fontsource/inter/latin-700.css";
|
||||
@import "@fontsource/inter/variable-full.css";
|
||||
@import "@fontsource/roboto-mono/latin-400.css";
|
||||
@import "@fontsource/roboto-mono/latin-500.css";
|
||||
@import "@fontsource/roboto-mono/latin-700.css";
|
||||
@import "@fontsource/roboto-mono/variable.css";
|
||||
@import "@fontsource/roboto-mono/variable-italic.css";
|
||||
|
||||
body {
|
||||
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
font-kerning: normal;
|
||||
font-variant-ligatures: normal;
|
||||
font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre,
|
||||
.monospace {
|
||||
font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
}
|
||||
|
||||
/*
|
||||
* override above font-family if browser supports variable fonts:
|
||||
* https://caniuse.com/#feat=variable-fonts
|
||||
*/
|
||||
@supports (font-variation-settings: normal) {
|
||||
body {
|
||||
font-family: InterVariable, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
|
||||
sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre,
|
||||
.monospace {
|
||||
font-family: "Roboto MonoVariable", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier,
|
||||
monospace;
|
||||
}
|
||||
|
||||
/*
|
||||
* Chrome doesn't automatically slant multi-axis Inter var, for some reason.
|
||||
* Adding "slnt" -10 fixes Chrome but then over-italicizes in Firefox. AHHHHHHHHHH.
|
||||
*/
|
||||
em {
|
||||
font-style: normal !important;
|
||||
font-variation-settings: "ital" 1, "slnt" -10;
|
||||
}
|
||||
|
||||
/* Roboto Mono doesn't have this problem, but the above fix breaks it, of course. */
|
||||
em code,
|
||||
em kbd,
|
||||
em samp,
|
||||
em pre,
|
||||
em .monospace {
|
||||
font-style: italic !important;
|
||||
}
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
// stylelint-disable value-keyword-case, scss/operator-no-unspaced
|
||||
|
||||
@use "sass:list";
|
||||
@use "~@fontsource/inter/scss/mixins" as Inter;
|
||||
@use "~@fontsource/roboto-mono/scss/mixins" as RobotoMono;
|
||||
@use "~@fontsource/comic-neue/scss/mixins" as ComicNeue;
|
||||
|
||||
// System fonts:
|
||||
// https://primer.style/design/foundations/typography#font-stack
|
||||
$system-fonts-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
$system-fonts-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
|
||||
|
||||
// Prefer web fonts below with system fonts as backup:
|
||||
$font-stack-sans: list.join("Inter", $system-fonts-sans);
|
||||
$font-stack-sans-variable: list.join("Inter var", $system-fonts-sans);
|
||||
$font-stack-mono: list.join("Roboto Mono", $system-fonts-mono);
|
||||
$font-stack-mono-variable: list.join("Roboto Mono var", $system-fonts-mono);
|
||||
|
||||
// prettier-ignore
|
||||
$unicode-latin-only: (
|
||||
latin: (U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD),
|
||||
);
|
||||
|
||||
// Inter
|
||||
@include Inter.fontFaceVariable($fontName: "Inter var", $type: "full", $unicodeMap: $unicode-latin-only);
|
||||
@include Inter.fontFace($fontName: "Inter", $weight: 400, $unicodeMap: $unicode-latin-only);
|
||||
@include Inter.fontFace($fontName: "Inter", $weight: 500, $unicodeMap: $unicode-latin-only);
|
||||
@include Inter.fontFace($fontName: "Inter", $weight: 700, $unicodeMap: $unicode-latin-only);
|
||||
|
||||
// Roboto Mono
|
||||
@include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var", $unicodeMap: $unicode-latin-only);
|
||||
@include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var", $style: italic, $unicodeMap: $unicode-latin-only);
|
||||
@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 400, $unicodeMap: $unicode-latin-only);
|
||||
@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 500, $unicodeMap: $unicode-latin-only);
|
||||
@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 700, $unicodeMap: $unicode-latin-only);
|
||||
|
||||
// Comic Neue
|
||||
@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 400, $unicodeMap: $unicode-latin-only);
|
||||
@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 700, $unicodeMap: $unicode-latin-only);
|
||||
|
||||
body {
|
||||
font-family: $font-stack-sans;
|
||||
font-kerning: normal;
|
||||
font-variant-ligatures: normal;
|
||||
font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre,
|
||||
.monospace {
|
||||
font-family: $font-stack-mono;
|
||||
}
|
||||
|
||||
// override above font-family if browser supports variable fonts
|
||||
// https://caniuse.com/#feat=variable-fonts
|
||||
@supports (font-variation-settings: normal) {
|
||||
body {
|
||||
font-family: $font-stack-sans-variable;
|
||||
font-optical-sizing: auto;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre,
|
||||
.monospace {
|
||||
font-family: $font-stack-mono-variable;
|
||||
}
|
||||
|
||||
// Chrome doesn't automatically slant multi-axis Inter var, for some reason.
|
||||
// Adding "slnt" -10 fixes Chrome but then over-italicizes in Firefox. AHHHHHHHHHH.
|
||||
em {
|
||||
font-style: normal !important;
|
||||
font-variation-settings: "ital" 1, "slnt" -10;
|
||||
|
||||
// Roboto Mono doesn't have this problem, but the above fix breaks it, of course.
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre,
|
||||
.monospace {
|
||||
font-style: italic !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
122
yarn.lock
122
yarn.lock
@@ -1719,14 +1719,6 @@ ansi-styles@^6.0.0:
|
||||
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.1.0.tgz#87313c102b8118abd57371afab34618bf7350ed3"
|
||||
integrity sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ==
|
||||
|
||||
anymatch@~3.1.2:
|
||||
version "3.1.2"
|
||||
resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
|
||||
integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
|
||||
dependencies:
|
||||
normalize-path "^3.0.0"
|
||||
picomatch "^2.0.4"
|
||||
|
||||
argparse@^1.0.7:
|
||||
version "1.0.10"
|
||||
resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
|
||||
@@ -1894,11 +1886,6 @@ big.js@^5.2.2:
|
||||
resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
|
||||
integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
|
||||
|
||||
binary-extensions@^2.0.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
|
||||
integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
|
||||
|
||||
boolbase@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
|
||||
@@ -1926,7 +1913,7 @@ brace-expansion@^1.1.7:
|
||||
balanced-match "^1.0.0"
|
||||
concat-map "0.0.1"
|
||||
|
||||
braces@^3.0.1, braces@~3.0.2:
|
||||
braces@^3.0.1:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
|
||||
integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
|
||||
@@ -2028,21 +2015,6 @@ character-reference-invalid@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
|
||||
integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
|
||||
|
||||
"chokidar@>=3.0.0 <4.0.0":
|
||||
version "3.5.2"
|
||||
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
|
||||
integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
|
||||
dependencies:
|
||||
anymatch "~3.1.2"
|
||||
braces "~3.0.2"
|
||||
glob-parent "~5.1.2"
|
||||
is-binary-path "~2.1.0"
|
||||
is-glob "~4.0.1"
|
||||
normalize-path "~3.0.0"
|
||||
readdirp "~3.6.0"
|
||||
optionalDependencies:
|
||||
fsevents "~2.3.2"
|
||||
|
||||
classnames@^2.3.1:
|
||||
version "2.3.1"
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
|
||||
@@ -2982,11 +2954,6 @@ fs.realpath@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
|
||||
integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
|
||||
|
||||
fsevents@~2.3.2:
|
||||
version "2.3.2"
|
||||
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
|
||||
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
|
||||
|
||||
function-bind@^1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
|
||||
@@ -3034,7 +3001,7 @@ github-slugger@^1.1.1:
|
||||
resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.4.0.tgz#206eb96cdb22ee56fdc53a28d5a302338463444e"
|
||||
integrity sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ==
|
||||
|
||||
glob-parent@^5.1.2, glob-parent@~5.1.2:
|
||||
glob-parent@^5.1.2:
|
||||
version "5.1.2"
|
||||
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
|
||||
integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
|
||||
@@ -3282,7 +3249,7 @@ hastscript@^6.0.0:
|
||||
property-information "^5.0.0"
|
||||
space-separated-tokens "^1.0.0"
|
||||
|
||||
highlight.js@^11.4.0, highlight.js@~11.4.0:
|
||||
highlight.js@~11.4.0:
|
||||
version "11.4.0"
|
||||
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.4.0.tgz#34ceadd49e1596ee5aba3d99346cdfd4845ee05a"
|
||||
integrity sha512-nawlpCBCSASs7EdvZOYOYVkJpGmAOKMYZgZtUqSRqodZE0GRVcFKwo1RcpeOemqh9hyttTdd5wDBwHkuSyUfnA==
|
||||
@@ -3344,11 +3311,6 @@ ignore@^5.1.4, ignore@^5.2.0:
|
||||
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
|
||||
integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
|
||||
|
||||
immutable@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
|
||||
integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==
|
||||
|
||||
import-fresh@^3.0.0, import-fresh@^3.2.1:
|
||||
version "3.3.0"
|
||||
resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
|
||||
@@ -3434,13 +3396,6 @@ is-bigint@^1.0.1:
|
||||
dependencies:
|
||||
has-bigints "^1.0.1"
|
||||
|
||||
is-binary-path@~2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
|
||||
integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
|
||||
dependencies:
|
||||
binary-extensions "^2.0.0"
|
||||
|
||||
is-boolean-object@^1.1.0:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
|
||||
@@ -3505,7 +3460,7 @@ is-fullwidth-code-point@^4.0.0:
|
||||
resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz#fae3167c729e7463f8461ce512b080a49268aa88"
|
||||
integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
|
||||
|
||||
is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
|
||||
is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3:
|
||||
version "4.0.3"
|
||||
resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
|
||||
integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
|
||||
@@ -4179,7 +4134,7 @@ normalize-package-data@^3.0.0:
|
||||
semver "^7.3.4"
|
||||
validate-npm-package-license "^3.0.1"
|
||||
|
||||
normalize-path@^3.0.0, normalize-path@~3.0.0:
|
||||
normalize-path@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
|
||||
integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
|
||||
@@ -4470,7 +4425,7 @@ picocolors@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
|
||||
integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
|
||||
|
||||
picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
|
||||
picomatch@^2.2.3:
|
||||
version "2.3.1"
|
||||
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
|
||||
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
|
||||
@@ -4507,12 +4462,7 @@ postcss-safe-parser@^6.0.0:
|
||||
resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz#bb4c29894171a94bc5c996b9a30317ef402adaa1"
|
||||
integrity sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==
|
||||
|
||||
postcss-scss@^4.0.2:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.2.tgz#39ddcc0ab32f155d5ab328ee91353d67a52d537b"
|
||||
integrity sha512-xfdkU128CkKKKVAwkyt0M8OdnelJ3MRcIRAPPQkRpoPeuzWY3RIeg7piRCpZ79MK7Q16diLXMMAD9dN5mauPlQ==
|
||||
|
||||
postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.7:
|
||||
postcss-selector-parser@^6.0.7:
|
||||
version "6.0.8"
|
||||
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.8.tgz#f023ed7a9ea736cd7ef70342996e8e78645a7914"
|
||||
integrity sha512-D5PG53d209Z1Uhcc0qAZ5U3t5HagH3cxu+WLZ22jt3gLUpXM4eXXfiO14jiDWST3NNooX/E8wISfOhZ9eIjGTQ==
|
||||
@@ -4711,13 +4661,6 @@ readable-stream@^3.5.0:
|
||||
string_decoder "^1.1.1"
|
||||
util-deprecate "^1.0.1"
|
||||
|
||||
readdirp@~3.6.0:
|
||||
version "3.6.0"
|
||||
resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
|
||||
integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
|
||||
dependencies:
|
||||
picomatch "^2.2.1"
|
||||
|
||||
redent@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
|
||||
@@ -4975,15 +4918,6 @@ safe-buffer@~5.2.0:
|
||||
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
|
||||
integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
|
||||
|
||||
sass@^1.46.0:
|
||||
version "1.46.0"
|
||||
resolved "https://registry.yarnpkg.com/sass/-/sass-1.46.0.tgz#923117049525236026a7ede69715580eb0fac751"
|
||||
integrity sha512-Z4BYTgioAOlMmo4LU3Ky2txR8KR0GRPLXxO38kklaYxgo7qMTgy+mpNN4eKsrXDTFlwS5vdruvazG4cihxHRVQ==
|
||||
dependencies:
|
||||
chokidar ">=3.0.0 <4.0.0"
|
||||
immutable "^4.0.0"
|
||||
source-map-js ">=0.6.2 <2.0.0"
|
||||
|
||||
sax@^1.2.4:
|
||||
version "1.2.4"
|
||||
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
|
||||
@@ -5115,7 +5049,7 @@ slice-ansi@^5.0.0:
|
||||
ansi-styles "^6.0.0"
|
||||
is-fullwidth-code-point "^4.0.0"
|
||||
|
||||
"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1:
|
||||
source-map-js@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.1.tgz#a1741c131e3c77d048252adfa24e23b908670caf"
|
||||
integrity sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==
|
||||
@@ -5369,35 +5303,6 @@ stylelint-config-prettier@~9.0.3:
|
||||
resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-9.0.3.tgz#0dccebeff359dcc393c9229184408b08964d561c"
|
||||
integrity sha512-5n9gUDp/n5tTMCq1GLqSpA30w2sqWITSSEiAWQlpxkKGAUbjcemQ0nbkRvRUa0B1LgD3+hCvdL7B1eTxy1QHJg==
|
||||
|
||||
stylelint-config-recommended-scss@^5.0.2:
|
||||
version "5.0.2"
|
||||
resolved "https://registry.yarnpkg.com/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-5.0.2.tgz#193f483861c76a36ece24c52eb6baca4838f4a48"
|
||||
integrity sha512-b14BSZjcwW0hqbzm9b0S/ScN2+3CO3O4vcMNOw2KGf8lfVSwJ4p5TbNEXKwKl1+0FMtgRXZj6DqVUe/7nGnuBg==
|
||||
dependencies:
|
||||
postcss-scss "^4.0.2"
|
||||
stylelint-config-recommended "^6.0.0"
|
||||
stylelint-scss "^4.0.0"
|
||||
|
||||
stylelint-config-recommended@^6.0.0:
|
||||
version "6.0.0"
|
||||
resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-6.0.0.tgz#fd2523a322836005ad9bf473d3e5534719c09f9d"
|
||||
integrity sha512-ZorSSdyMcxWpROYUvLEMm0vSZud2uB7tX1hzBZwvVY9SV/uly4AvvJPPhCcymZL3fcQhEQG5AELmrxWqtmzacw==
|
||||
|
||||
stylelint-config-standard-scss@~3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/stylelint-config-standard-scss/-/stylelint-config-standard-scss-3.0.0.tgz#dafc4fa5538d0ed833bf0a7d391e075683ffd96c"
|
||||
integrity sha512-zt3ZbzIbllN1iCmc94e4pDxqpkzeR6CJo5DDXzltshuXr+82B8ylHyMMARNnUYrZH80B7wgY7UkKTYCFM0UUyw==
|
||||
dependencies:
|
||||
stylelint-config-recommended-scss "^5.0.2"
|
||||
stylelint-config-standard "^24.0.0"
|
||||
|
||||
stylelint-config-standard@^24.0.0:
|
||||
version "24.0.0"
|
||||
resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-24.0.0.tgz#6823f207ab997ae0b641f9a636d007cc44d77541"
|
||||
integrity sha512-+RtU7fbNT+VlNbdXJvnjc3USNPZRiRVp/d2DxOF/vBDDTi0kH5RX2Ny6errdtZJH3boO+bmqIYEllEmok4jiuw==
|
||||
dependencies:
|
||||
stylelint-config-recommended "^6.0.0"
|
||||
|
||||
stylelint-prettier@~2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/stylelint-prettier/-/stylelint-prettier-2.0.0.tgz#ead781aea522379f2ffa2d136bafdfc451d699a5"
|
||||
@@ -5405,17 +5310,6 @@ stylelint-prettier@~2.0.0:
|
||||
dependencies:
|
||||
prettier-linter-helpers "^1.0.0"
|
||||
|
||||
stylelint-scss@^4.0.0, stylelint-scss@~4.1.0:
|
||||
version "4.1.0"
|
||||
resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-4.1.0.tgz#39b808696f8152081163d970449257ff80b5c041"
|
||||
integrity sha512-BNYTo7MMamhFOlcaAWp2dMpjg6hPyM/FFqfDIYzmYVLMmQJqc8lWRIiTqP4UX5bresj9Vo0dKC6odSh43VP2NA==
|
||||
dependencies:
|
||||
lodash "^4.17.21"
|
||||
postcss-media-query-parser "^0.2.3"
|
||||
postcss-resolve-nested-selector "^0.1.1"
|
||||
postcss-selector-parser "^6.0.6"
|
||||
postcss-value-parser "^4.1.0"
|
||||
|
||||
stylelint@~14.2.0:
|
||||
version "14.2.0"
|
||||
resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.2.0.tgz#da4f0f4580e66911c38c376ed82447b78e32b0fb"
|
||||
|
||||
Reference in New Issue
Block a user