From 2ee1ebbdc3b8addb3d975aab74e3a9b0fb65aef4 Mon Sep 17 00:00:00 2001
From: Joshua Seigler <joshua@seigler.net>
Date: Sun, 15 Jun 2025 15:58:36 -0400
Subject: [PATCH] light and dark code styles

---
 site/_includes/css/prism-gh.css | 121 -----------------------
 site/_includes/css/prism.css    | 167 ++++++++++++++++++++++++++++++++
 site/_includes/css/site.css     |   6 +-
 site/css.njk                    |   4 +-
 4 files changed, 172 insertions(+), 126 deletions(-)
 delete mode 100644 site/_includes/css/prism-gh.css
 create mode 100644 site/_includes/css/prism.css

diff --git a/site/_includes/css/prism-gh.css b/site/_includes/css/prism-gh.css
deleted file mode 100644
index f545fea..0000000
--- a/site/_includes/css/prism-gh.css
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * GHColors theme by Avi Aryan (http://aviaryan.in)
- * Inspired by Github syntax coloring
- */
-
- code[class*="language-"],
- pre[class*="language-"] {
-   color: #393A34;
-   direction: ltr;
-   text-align: left;
-   white-space: pre;
-   word-spacing: normal;
-   word-break: normal;
-   font-size: .9em;
-   line-height: 1.2em;
-
-   -moz-tab-size: 4;
-   -o-tab-size: 4;
-   tab-size: 4;
-
-   -webkit-hyphens: none;
-   -moz-hyphens: none;
-   -ms-hyphens: none;
-   hyphens: none;
- }
-
- pre > code[class*="language-"] {
-   font-size: 1em;
- }
-
- pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
- code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-   background: #b3d4fc;
- }
-
- pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
- code[class*="language-"]::selection, code[class*="language-"] ::selection {
-   background: #b3d4fc;
- }
-
- /* Code blocks */
- pre[class*="language-"] {
-   padding: 1em;
-   margin: .5em 0;
-   overflow: auto;
-   border: 1px solid #dddddd;
-   background-color: white;
- }
-
- /* Inline code */
- :not(pre) > code[class*="language-"] {
-   padding: .2em;
-   padding-top: 1px;
-   padding-bottom: 1px;
-   background: #f8f8f8;
-   border: 1px solid #dddddd;
- }
-
- .token.comment,
- .token.prolog,
- .token.doctype,
- .token.cdata {
-   color: #999988;
-   font-style: italic;
- }
-
- .token.namespace {
-   opacity: .7;
- }
-
- .token.string,
- .token.attr-value {
-   color: #e3116c;
- }
-
- .token.punctuation,
- .token.operator {
-   color: #393A34; /* no highlight */
- }
-
- .token.entity,
- .token.url,
- .token.symbol,
- .token.number,
- .token.boolean,
- .token.variable,
- .token.constant,
- .token.property,
- .token.regex,
- .token.inserted {
-   color: #36acaa;
- }
-
- .token.atrule,
- .token.keyword,
- .token.attr-name,
- .language-autohotkey .token.selector {
-   color: #00a4db;
- }
-
- .token.function,
- .token.deleted,
- .language-autohotkey .token.tag {
-   color: #9a050f;
- }
-
- .token.tag,
- .token.selector,
- .language-autohotkey .token.keyword {
-   color: #00009f;
- }
-
- .token.important,
- .token.function,
- .token.bold {
-   font-weight: bold;
- }
-
- .token.italic {
-   font-style: italic;
- }
diff --git a/site/_includes/css/prism.css b/site/_includes/css/prism.css
new file mode 100644
index 0000000..32fcac8
--- /dev/null
+++ b/site/_includes/css/prism.css
@@ -0,0 +1,167 @@
+/* Prism Material */
+code[class*="language-"],
+pre[class*="language-"] {
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  font-size: 1em;
+  line-height: 1.5em;
+  color: var(--c-text-dim);
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+:not(pre) > code[class*="language-"] {
+  background: var(--c-text-background-light);
+  white-space: normal;
+  border-radius: 0.2em;
+  padding: 0.1em;
+}
+pre[class*="language-"] {
+  background: var(--c-text-background-light);
+  overflow: auto;
+  position: relative;
+  margin: 0.5em 0;
+  padding: 1.25em 1em;
+}
+[class*="language-"] .namespace {
+  opacity: 0.7;
+}
+.token.id { font-weight: bold; }
+.token.important { font-weight: bold; }
+/* Prism Material Light */
+.language-css > code,
+.language-sass > code,
+.language-scss > code {
+  color: #f76d47;
+}
+.token.atrule { color: #7c4dff; }
+.token.attr-name { color: #39adb5; }
+.token.attr-value { color: #f6a434; }
+.token.attribute { color: #f6a434; }
+.token.boolean { color: #7c4dff; }
+.token.builtin { color: #39adb5; }
+.token.cdata { color: #39adb5; }
+.token.char { color: #39adb5; }
+.token.class { color: #39adb5; }
+.token.class-name { color: #6182b8; }
+.token.comment { color: #aabfc9; }
+.token.constant { color: #7c4dff; }
+.token.deleted { color: #e53935; }
+.token.doctype { color: #aabfc9; }
+.token.entity { color: #e53935; }
+.token.function { color: #7c4dff; }
+.token.hexcode { color: #f76d47; }
+.token.id { color: #7c4dff; }
+.token.important { color: #7c4dff; }
+.token.inserted { color: #39adb5; }
+.token.keyword { color: #7c4dff; }
+.token.number { color: #f76d47; }
+.token.operator { color: #39adb5; }
+.token.prolog { color: #aabfc9; }
+.token.property { color: #39adb5; }
+.token.pseudo-class { color: #f6a434; }
+.token.pseudo-element { color: #f6a434; }
+.token.punctuation { color: #39adb5; }
+.token.regex { color: #6182b8; }
+.token.selector { color: #e53935; }
+.token.string { color: #f6a434; }
+.token.symbol { color: #7c4dff; }
+.token.tag { color: #e53935; }
+.token.unit { color: #f76d47; }
+.token.url { color: #e53935; }
+.token.variable { color: #e53935; }
+/* Prism Material Dark */
+[data-theme="dark"] {
+  .language-css > code,
+  .language-sass > code,
+  .language-scss > code {
+    color: #fd9170;
+  }
+  .token.atrule { color: #c792ea; }
+  .token.attr-name { color: #ffcb6b; }
+  .token.attr-value { color: #a5e844; }
+  .token.attribute { color: #a5e844; }
+  .token.boolean { color: #c792ea; }
+  .token.builtin { color: #ffcb6b; }
+  .token.cdata { color: #80cbc4; }
+  .token.char { color: #80cbc4; }
+  .token.class { color: #ffcb6b; }
+  .token.class-name { color: #f2ff00; }
+  .token.comment { color: #616161; }
+  .token.constant { color: #c792ea; }
+  .token.deleted { color: #ff6666; }
+  .token.doctype { color: #616161; }
+  .token.entity { color: #ff6666; }
+  .token.function { color: #c792ea; }
+  .token.hexcode { color: #f2ff00; }
+  .token.id { color: #c792ea; }
+  .token.important { color: #c792ea; }
+  .token.inserted { color: #80cbc4; }
+  .token.keyword { color: #c792ea; }
+  .token.number { color: #fd9170; }
+  .token.operator { color: #89ddff; }
+  .token.prolog { color: #616161; }
+  .token.property { color: #80cbc4; }
+  .token.pseudo-class { color: #a5e844; }
+  .token.pseudo-element { color: #a5e844; }
+  .token.punctuation { color: #89ddff; }
+  .token.regex { color: #f2ff00; }
+  .token.selector { color: #ff6666; }
+  .token.string { color: #a5e844; }
+  .token.symbol { color: #c792ea; }
+  .token.tag { color: #ff6666; }
+  .token.unit { color: #fd9170; }
+  .token.url { color: #ff6666; }
+  .token.variable { color: #ff6666; }
+}
+@media (prefers-color-scheme: dark) {
+  [data-theme="auto"] {
+    .language-sass > code,
+    .language-scss > code {
+      color: #fd9170;
+    }
+    .token.atrule { color: #c792ea; }
+    .token.attr-name { color: #ffcb6b; }
+    .token.attr-value { color: #a5e844; }
+    .token.attribute { color: #a5e844; }
+    .token.boolean { color: #c792ea; }
+    .token.builtin { color: #ffcb6b; }
+    .token.cdata { color: #80cbc4; }
+    .token.char { color: #80cbc4; }
+    .token.class { color: #ffcb6b; }
+    .token.class-name { color: #f2ff00; }
+    .token.comment { color: #616161; }
+    .token.constant { color: #c792ea; }
+    .token.deleted { color: #ff6666; }
+    .token.doctype { color: #616161; }
+    .token.entity { color: #ff6666; }
+    .token.function { color: #c792ea; }
+    .token.hexcode { color: #f2ff00; }
+    .token.id { color: #c792ea; }
+    .token.important { color: #c792ea; }
+    .token.inserted { color: #80cbc4; }
+    .token.keyword { color: #c792ea; }
+    .token.number { color: #fd9170; }
+    .token.operator { color: #89ddff; }
+    .token.prolog { color: #616161; }
+    .token.property { color: #80cbc4; }
+    .token.pseudo-class { color: #a5e844; }
+    .token.pseudo-element { color: #a5e844; }
+    .token.punctuation { color: #89ddff; }
+    .token.regex { color: #f2ff00; }
+    .token.selector { color: #ff6666; }
+    .token.string { color: #a5e844; }
+    .token.symbol { color: #c792ea; }
+    .token.tag { color: #ff6666; }
+    .token.unit { color: #fd9170; }
+    .token.url { color: #ff6666; }
+    .token.variable { color: #ff6666; }
+  }
+}
diff --git a/site/_includes/css/site.css b/site/_includes/css/site.css
index 4666562..a824291 100644
--- a/site/_includes/css/site.css
+++ b/site/_includes/css/site.css
@@ -21,6 +21,7 @@ body {
 
   --c-text-light: var(--c-highlight);
   --c-text-dark: var(--c-dark);
+  --c-text-dim: color-mix(in lch, var(--c-text-dark), transparent 30%);
 
   --ratio: 1.333;
   --s-5: calc(var(--s-4) / var(--ratio));
@@ -528,7 +529,7 @@ p > code, pre {
   border-radius: 0.5em;
 }
 p > code {
-  margin: -0.1em;
+  margin: -0.1em 0;
   display: inline-block;
 }
 
@@ -571,8 +572,7 @@ body .isso-input-wrapper label {
 body .isso-input-wrapper input,
 input[type='text'],
 body .isso-textarea,
-body .isso-preview,
-pre {
+body .isso-preview {
   color: inherit;
   font-size: 1rem;
   background-color: transparent;
diff --git a/site/css.njk b/site/css.njk
index 8842d42..b940026 100644
--- a/site/css.njk
+++ b/site/css.njk
@@ -2,6 +2,6 @@
 permalink: /site.css
 ---
 {%include "css/inter.css"%}
-{%include "css/ftaurebesh.css"%}
 {%include "css/site.css"%}
-{%include "css/prism-gh.css"%}
+{%include "css/prism.css"%}
+{%include "css/ftaurebesh.css"%}