v5: Revenge of the JavaScript 🦸 (#711)

Hugo ➡️ Next.js
2026-07-30 11:45:21 -04:00 · 2021-12-30 08:18:41 -05:00
parent b7505fa260
commit 9979e1bf3f
577 changed files with 8019 additions and 11864 deletions
@@ -0,0 +1,47 @@
+/* stylelint-disable no-duplicate-selectors */
+
+:root {
+  --background-inner: #ffffff;
+  --background-outer: #fcfcfc;
+  --background-header: rgb(252 252 252 / 70%);
+  --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: rgb(14 109 194 / 40%);
+  --success: #44a248;
+  --error: #ff1b1b;
+}
+
+[data-theme="dark"] {
+  --background-inner: #1e1e1e;
+  --background-outer: #252525;
+  --background-header: rgb(37 37 37 / 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: rgb(136 199 255 / 40%);
+  --success: #78df55;
+  --error: #ff5151;
+}
+
+// https://web.dev/color-scheme/#the-color-scheme-css-property
+
+:root {
+  color-scheme: light;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+}
@@ -0,0 +1,3 @@
+// Browser reset:
+// https://github.com/sindresorhus/modern-normalize
+@import "~modern-normalize/modern-normalize.css";
@@ -0,0 +1,8 @@
+@use "sass:meta";
+
+// hacky way to assign different HLJS themes to light/dark mode
+@include meta.load-css("../node_modules/highlight.js/styles/stackoverflow-light.css");
+
+[data-theme="dark"] {
+  @include meta.load-css("../node_modules/highlight.js/styles/stackoverflow-dark.css");
+}
@@ -0,0 +1,41 @@
+@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
+// stylelint-disable-next-line value-keyword-case
+$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);
+
+// stylelint-disable scss/operator-no-unspaced
+// 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),
+);
+// stylelint-enable scss/operator-no-unspaced
+
+// 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);
@@ -0,0 +1,158 @@
+@use "reset";
+@use "typography";
+@use "colors";
+@use "syntax";
+
+// Global Styles
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  scroll-behavior: smooth;
+  background-color: var(--background-outer);
+  font-family: typography.$font-stack-sans;
+  font-kerning: normal;
+  font-variant-ligatures: normal;
+  font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
+
+  // global base font size:
+  font-size: 0.975em;
+  line-height: 1.5;
+}
+
+code,
+kbd,
+samp,
+pre,
+.monospace {
+  font-family: typography.$font-stack-mono;
+  letter-spacing: normal;
+}
+
+// override above font-family if browser supports variable fonts
+// https://caniuse.com/#feat=variable-fonts
+@supports (font-variation-settings: normal) {
+  body {
+    font-family: typography.$font-stack-sans-variable;
+    font-optical-sizing: auto;
+  }
+
+  code,
+  kbd,
+  samp,
+  pre,
+  .monospace {
+    font-family: typography.$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;
+    }
+  }
+}
+
+a {
+  color: var(--link); // also set in JSX (pages/_app.tsx)
+  text-decoration: none;
+  background-position: 0% 100%;
+  background-repeat: no-repeat;
+  background-size: 0% 2px;
+  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
+.no-underline {
+  background: none !important;
+  padding-bottom: 0;
+}
+
+// make SVG icons relative to surrounding text
+// https://github.com/twitter/twemoji#inline-styles
+.icon {
+  display: inline-block;
+  height: 1.2em;
+  width: 1.2em;
+  margin: 0 0.05em;
+  vertical-align: -0.22em;
+  border: 0;
+  cursor: inherit;
+}
+
+// all code
+code {
+  font-size: 0.925em;
+  letter-spacing: normal;
+  page-break-inside: avoid;
+}
+
+// inline code in paragraphs/elsewhere (single backticks)
+:not(pre) > code {
+  padding: 0.075em 0.25em;
+  border: 1px solid var(--kinda-light);
+}
+
+.center {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// AnchorJS styles
+.h-anchor {
+  margin: 0 0.25em;
+  padding: 0 0.25em;
+  color: var(--medium-light) !important;
+  background: none !important;
+  font-weight: 300;
+  line-height: 1;
+  opacity: 0; // overridden by JS on mobile devices
+  user-select: none;
+
+  &::before {
+    content: "\0023"; // pound sign
+  }
+
+  &:hover {
+    color: var(--link) !important;
+  }
+}
+
+h2,
+h3,
+h4 {
+  &:hover {
+    .h-anchor {
+      opacity: 1;
+    }
+  }
+}
+
+// https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+}