use separate prism stylesheet

diff --git a/src/layouts/base.astro b/src/layouts/base.astro
index a090dd9f00b5947ec2a426c90ee952e2efc97b23..9629c2bebae94659d5a1ac9338e7ecd3fecd3312 100644 (file)
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -1,6 +1,7 @@
 ---
 import '@styles/reset.css';
 import '@styles/style.css';
+import '@styles/prism-a11y-dark.css';
 import HeadBase from '@components/head/base.astro';
 import PostHog from '@components/head/posthog.astro';
 import HeadPage from '@components/head/page.astro';

diff --git a/src/styles/prism-a11y-dark.css b/src/styles/prism-a11y-dark.css
new file mode 100644 (file)
index 0000000..ec71a52
--- /dev/null
+++ b/src/styles/prism-a11y-dark.css
@@ -0,0 +1,163 @@
+/**
+ * a11y-dark theme for JavaScript, CSS, and HTML
+ * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
+ * @author ericwbailey
+ * Tweaks by Cameron
+ */
+
+code[class*='language-'],
+pre[class*='language-'] {
+  color: #f8f8f2;
+  background: none;
+  font-family: var(--font-mono);
+  font-size: 0.9rem;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background: #2b2b2b;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #d4d0ab;
+}
+
+.token.punctuation {
+  color: #fefefe;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #ffa07a;
+}
+
+.token.boolean,
+.token.number {
+  color: #00e0e0;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #abe338;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+  color: #00e0e0;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function {
+  color: #ffd700;
+}
+
+.token.keyword {
+  color: #00e0e0;
+}
+
+.token.regex,
+.token.important {
+  color: #ffd700;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  code[class*='language-'],
+  pre[class*='language-'] {
+    color: windowText;
+    background: window;
+  }
+
+  :not(pre) > code[class*='language-'],
+  pre[class*='language-'] {
+    background: window;
+  }
+
+  .token.important {
+    background: highlight;
+    color: window;
+    font-weight: normal;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.function,
+  .token.keyword,
+  .token.operator,
+  .token.selector {
+    font-weight: bold;
+  }
+
+  .token.attr-value,
+  .token.comment,
+  .token.doctype,
+  .token.function,
+  .token.keyword,
+  .token.operator,
+  .token.property,
+  .token.string {
+    color: highlight;
+  }
+
+  .token.attr-value,
+  .token.url {
+    font-weight: normal;
+  }
+}

diff --git a/src/styles/style.css b/src/styles/style.css
index 6827a0c58ec860d57ed3e54063af0c42b2bb8146..182f55ddefef4039a12dee5447bd644324644f1d 100644 (file)
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -144,88 +144,6 @@ td {
   vertical-align: middle;
   padding: 0.5rem;
 }
-code,
-.astro-code,
-code[class*='language-'],
-pre:has(> code[class*='language-']) {
-  font-family: var(--font-mono);
-}
-code {
-  font-size: 0.9rem;
-}
-.astro-code,
-pre:has(> code[class*='language-']) {
-  margin-block-end: 1rem;
-  padding: 0.75rem 1rem;
-  overflow-x: auto;
-  color: var(--color-code-text);
-  background-color: var(--color-code-bg);
-  border: 1px solid var(--color-code-border);
-  border-radius: 0.25rem;
-}
-code[class*='language-'],
-pre:has(> code[class*='language-']) {
-  font-size: 0.9rem;
-  line-height: 1.5;
-  text-shadow: none;
-}
-pre:has(> code[class*='language-']) > code[class*='language-'] {
-  display: block;
-}
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: var(--color-code-comment);
-}
-.token.punctuation {
-  color: var(--color-code-text);
-}
-.token.boolean,
-.token.constant,
-.token.deleted,
-.token.number,
-.token.property,
-.token.symbol,
-.token.tag {
-  color: var(--color-code-number);
-}
-.token.attr-name,
-.token.builtin,
-.token.char,
-.token.inserted,
-.token.selector,
-.token.string {
-  color: var(--color-code-string);
-}
-.language-css .token.string,
-.style .token.string,
-.token.entity,
-.token.operator,
-.token.url,
-.token.variable {
-  color: var(--color-code-text);
-}
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: var(--color-code-keyword);
-}
-.token.class-name,
-.token.function {
-  color: var(--color-code-function);
-}
-.token.important,
-.token.regex {
-  color: var(--color-code-important);
-}
-.token.bold,
-.token.important {
-  font-weight: 700;
-}
-.token.italic {
-  font-style: italic;
-}
 .footnotes {
   margin-block-start: 1rem;
   padding-block-start: 1rem;