make prettier play nice with (almost) everything 👸

2025-07-17 11:15:30 -04:00 · 2020-05-11 19:28:03 -04:00
parent e793ef43d4
commit 917fde01dd
12 changed files with 106 additions and 128 deletions
--- a/assets/sass/abstracts/_functions.scss
+++ b/assets/sass/abstracts/_functions.scss
@@ -3,10 +3,10 @@
 // Gradient hack to get our custom underline to wrap:
 // https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
@function underline-hack($color) {
-  // Calculate lighter underline color compared to text color by
-  // mix()'ing with background (#fff) to give the impression of
-  // opacity but with MUCH better compatibility.
-  $color-opaque-hex: mix($color, $link-opacity-color, $link-underline-opacity);
+  // [deprecated] Calculate lighter underline color compared to text
+  // color by mix()'ing with background (#fff) to give the impression
+  // of opacity but with MUCH better compatibility.
+  // $color-opaque-hex: mix($color, $link-opacity-color, $link-underline-opacity);

  // Less compatible but better for light/dark mode switching.
  $color-opaque-alpha: rgba($color, $link-underline-opacity / 100%);
@@ -16,22 +16,47 @@
 }

 // Web fonts (see components/_fonts.scss)
-@mixin font-face(
-  $family,
-  $src,
-  $weight: normal,
-  $style: normal,
-  $display: swap
-) {
+@mixin font-face($family, $src, $weight: normal, $style: normal, $display: swap) {
  @font-face {
    font-family: $family;
    font-style: $style;
    font-weight: $weight;
    font-display: $display;
-    src: url($base-url + $src + ".woff2") format("woff2"),
-      url($base-url + $src + ".woff") format("woff");
+    src: url($base-url + $src + ".woff2") format("woff2"), url($base-url + $src + ".woff") format("woff");

-    // Allow additional declarations to be passed in:
+    // Allow additional rules to be passed in:
    @content;
  }
 }
+
+// Simple dark/light theme switching via <body> class and $themes map in abstracts/_themes.scss
+// https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
+@mixin themed() {
+  @each $theme, $map in $themes {
+    body.#{$theme} & {
+      $theme-map: () !global;
+      @each $key, $submap in $map {
+        $value: map-get(map-get($themes, $theme), "#{$key}");
+        $theme-map: map-merge(
+          $theme-map,
+          (
+            $key: $value,
+          )
+        ) !global;
+      }
+      @content;
+      $theme-map: null !global;
+    }
+  }
+}
+
+// Just @include themed() and call t() when a rule depends on which theme is active, eg:
+//    a {
+//      text-decoration: none;
+//      @include themed() {
+//        color: t(links);
+//      }
+//    }
+@function t($key) {
+  @return map-get($theme-map, $key);
+}
--- a/assets/sass/abstracts/_settings.scss
+++ b/assets/sass/abstracts/_settings.scss
@@ -6,13 +6,10 @@ $webfont-mono: "Hack", monospace;

 // System fonts
 // https://markdotto.com/2018/02/07/github-system-fonts/
-$system-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-  "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-  "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-  "Segoe UI Symbol";
+$system-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+  "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 $system-fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-$system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono",
-  "Menlo", "Courier", monospace;
+$system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;

 // Width at which to switch to mobile styles
 $responsive-width: 830px;
--- a/assets/sass/abstracts/_themes.scss
+++ b/assets/sass/abstracts/_themes.scss
@@ -189,27 +189,3 @@ $color-logo3: #009cdf;
 $icon-bulb-on: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjIgMTEuMDZjMCA2LjQ0LTUgNy40NC01IDEzLjQ0IDAgMy4xLTMuMTIgMy4zNi01LjUgMy4zNi0yLjA1IDAtNi41OS0uNzgtNi41OS0zLjM2IDAtNi00LjkxLTctNC45MS0xMy40NEMwIDUuMDMgNS4yOS4xNCAxMS4wOC4xNCAxNi44OC4xNCAyMiA1LjAzIDIyIDExLjA2eiIgZmlsbD0iI0ZGRDk4MyIvPjxwYXRoIGQ9Ik0xNS4xNyAzMi41YzAgLjgzLTIuMjQgMi41LTQuMTcgMi41LTEuOTMgMC00LjE3LTEuNjctNC4xNy0yLjUgMC0uODMgMi4yNC0uNSA0LjE3LS41IDEuOTMgMCA0LjE3LS4zMyA0LjE3LjV6IiBmaWxsPSIjQ0NENkREIi8+PHBhdGggZD0iTTE1LjcgMTAuM2ExIDEgMCAwMC0xLjQgMEwxMSAxMy41OGwtMy4zLTMuM2ExIDEgMCAxMC0xLjQgMS40MmwzLjcgMy43VjI2YTEgMSAwIDEwMiAwVjE1LjQxbDMuNy0zLjdhMSAxIDAgMDAwLTEuNDJ6IiBmaWxsPSIjRkZDQzREIi8+PHBhdGggZD0iTTE3IDMxYTIgMiAwIDAxLTIgMkg3YTIgMiAwIDAxLTItMnYtNmgxMnY2eiIgZmlsbD0iIzk5QUFCNSIvPjxwYXRoIGQ9Ik01IDMyYTEgMSAwIDAxLS4xNi0xLjk5bDEyLTJhMSAxIDAgMTEuMzMgMS45N2wtMTIgMkEuOTMuOTMgMCAwMTUgMzJ6bTAtNGExIDEgMCAwMS0uMTYtMS45OWwxMi0yYTEgMSAwIDExLjMzIDEuOTdsLTEyIDJBLjkzLjkzIDAgMDE1IDI4eiIgZmlsbD0iI0NDRDZERCIvPjwvZz48L3N2Zz4K";
 // lightbulb off
 $icon-bulb-off: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjIgMTEuMDZjMCA2LjQ0LTUgNy40NC01IDEzLjQ0IDAgMy4xLTMuMTIgMy4zNi01LjUgMy4zNi0yLjA1IDAtNi41OS0uNzgtNi41OS0zLjM2IDAtNi00LjkxLTctNC45MS0xMy40NEMwIDUuMDMgNS4yOS4xNCAxMS4wOC4xNCAxNi44OC4xNCAyMiA1LjAzIDIyIDExLjA2eiIgZmlsbD0iI0NDQ0JDQiIvPjxwYXRoIGQ9Ik0xNS4xNyAzMi41YzAgLjgzLTIuMjQgMi41LTQuMTcgMi41LTEuOTMgMC00LjE3LTEuNjctNC4xNy0yLjUgMC0uODMgMi4yNC0uNSA0LjE3LS41IDEuOTMgMCA0LjE3LS4zMyA0LjE3LjV6IiBmaWxsPSIjQ0NENkREIi8+PHBhdGggZD0iTTE1LjcgMTAuM2ExIDEgMCAwMC0xLjQgMEwxMSAxMy41OGwtMy4zLTMuM2ExIDEgMCAxMC0xLjQgMS40MmwzLjcgMy43VjI2YTEgMSAwIDEwMiAwVjE1LjQxbDMuNy0zLjdhMSAxIDAgMDAwLTEuNDJ6IiBmaWxsPSIjN0Q3QTcyIi8+PHBhdGggZD0iTTE3IDMxYTIgMiAwIDAxLTIgMkg3YTIgMiAwIDAxLTItMnYtNmgxMnY2eiIgZmlsbD0iIzk5QUFCNSIvPjxwYXRoIGQ9Ik01IDMyYTEgMSAwIDAxLS4xNi0xLjk5bDEyLTJhMSAxIDAgMTEuMzMgMS45N2wtMTIgMkEuOTMuOTMgMCAwMTUgMzJ6bTAtNGExIDEgMCAwMS0uMTYtMS45OWwxMi0yYTEgMSAwIDExLjMzIDEuOTdsLTEyIDJBLjkzLjkzIDAgMDE1IDI4eiIgZmlsbD0iI0NDRDZERCIvPjwvZz48L3N2Zz4K";
-
-// https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
-@mixin themed() {
-  @each $theme, $map in $themes {
-    body.#{$theme} & {
-      $theme-map: () !global;
-      @each $key, $submap in $map {
-        $value: map-get(map-get($themes, $theme), "#{$key}");
-        $theme-map: map-merge(
-          $theme-map,
-          (
-            $key: $value,
-          )
-        ) !global;
-      }
-      @content;
-      $theme-map: null !global;
-    }
-  }
-}
-
-@function t($key) {
-  @return map-get($theme-map, $key);
-}
--- a/assets/sass/components/_fonts.scss
+++ b/assets/sass/components/_fonts.scss
@@ -3,7 +3,6 @@
 // Note to self: got this list after subsetting Inter with glyphhanger:
 // https://github.com/filamentgroup/glyphhanger
 // ex: glyphhanger --whitelist="" --family="Inter" --formats=woff2,woff --subset="*.woff"
-// prettier-ignore
 $unicode-subset: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF, U+2122;

 /*!
--- a/assets/sass/components/_syntax.scss
+++ b/assets/sass/components/_syntax.scss
@@ -1,16 +1,18 @@
@charset "UTF-8";

-// all code
-code {
-  font-family: $webfont-mono;
-  font-size: 0.95em;
-  letter-spacing: 0;
-  page-break-inside: avoid;
-}
+div#content {
+  // all code
+  code {
+    font-family: $webfont-mono;
+    font-size: 0.95em;
+    letter-spacing: 0;
+    page-break-inside: avoid;
+  }

-// inline code in paragraphs (single tildes)
-p code {
-  padding: 0 0.15em;
+  // inline code in paragraphs (single tildes)
+  p code {
+    padding: 0 0.15em;
+  }
 }

 // code fences
@@ -23,10 +25,6 @@ div.highlight {
  margin: 1em 0;
  border: 1px solid;

-  @include themed() {
-    border-color: t(light);
-  }
-
  pre {
    padding-left: 1.7em;
  }
@@ -80,6 +78,7 @@ body.light {
  div.highlight {
    color: #464646;
    background-color: #fdfdfd;
+    border: 1px solid #d2d2d2;

    .chroma {
      .k,
@@ -153,6 +152,7 @@ body.dark {
  div.highlight {
    color: #dfdfdf;
    background-color: #1f1f1f;
+    border: 1px solid #646464;

    .chroma {
      .k,
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -1,33 +1,37 @@
@charset "UTF-8";

-// all variables set by Hugo's config.toml must go here
-// stylelint-disable
-$max-width: {{ printf "%d%s" .Site.Params.pageMaxWidth "px" }};
-$base-url: "{{ strings.TrimRight "/" .Site.BaseURL }}/";   // consistent trailing forward slash
-// stylelint-enable
+// NOTE: all variables set by Hugo's config.toml MUST go here:
+// prettier-ignore
+$max-width: "{{ printf "%d%s" .Site.Params.pageMaxWidth "px" }}";
+$base-url: "{{ strings.TrimRight "/" .Site.BaseURL }}" + "/";
+
+// those values need quotes because, even though prettier & stylelint are correct
+// in that it's insanely invalid SCSS, they refuse to ignore it. but $max-width is
+// a numerical value that can't have quotes, so let's remove them...
+$max-width: unquote($max-width);

 // Variables & Functions
-@import 'abstracts/settings';
-@import 'abstracts/themes';
-@import 'abstracts/functions';
+@import "abstracts/functions";
+@import "abstracts/settings";
+@import "abstracts/themes";

 // Global Styles
-@import 'components/fonts';
-@import 'components/global';
-@import 'components/header';
-@import 'components/footer';
-@import 'components/content';
+@import "components/fonts";
+@import "components/global";
+@import "components/header";
+@import "components/footer";
+@import "components/content";

 // Pages
-@import 'pages/home';
-@import 'pages/list';
-@import 'pages/single';
-@import 'pages/videos';
-@import 'pages/etc';
+@import "pages/home";
+@import "pages/list";
+@import "pages/single";
+@import "pages/videos";
+@import "pages/etc";

 // Responsive Mixins
-@import 'abstracts/responsive';
+@import "abstracts/responsive";

 // Miscellaneous
-@import 'components/syntax';
-@import 'components/animation';
+@import "components/syntax";
+@import "components/animation";