make prettier play nice with (almost) everything 👸

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;
 
 /*!

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,