mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2026-07-30 11:45:21 -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:
@@ -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;
|
||||
}
|
||||
@@ -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 {
|
||||
background-size: 100% 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// set an anchor's class to `no-underline` to disable all of this
|
||||
a:hover {
|
||||
background-size: 100% 2px;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
color: var(--link);
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/* 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,
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user