From e17582823cf530d8686f2e6c7f9745460d2a8de6 Mon Sep 17 00:00:00 2001
From: Inhji <johnnie@posteo.de>
Date: Tue, 12 Sep 2023 20:43:25 +0200
Subject: [PATCH] hljs

---
 assets/css/app.css        |   6 +-
 assets/css/hljs.css       | 196 +++++++++++++++++++-------------------
 assets/tailwind.config.js |  48 +++++-----
 3 files changed, 128 insertions(+), 122 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 963c68c..480a3c8 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -2,9 +2,9 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+@import "./hljs.css";
 @import "./lightbox.css";
 @import "./tablesort.css";
-@import "./tokyo-night-dark.css";
 
 /*
   The base layer is for things like reset rules or default styles applied to plain HTML elements.
@@ -33,6 +33,10 @@
     margin-block-start: var(--flow-space, 1em);
   }
 
+  :root .prose {
+    @apply prose-inhji;
+  }
+
   :root[data-mode=dark] .prose {
     @apply prose-invert;
   }
diff --git a/assets/css/hljs.css b/assets/css/hljs.css
index e65e506..ae3e51b 100644
--- a/assets/css/hljs.css
+++ b/assets/css/hljs.css
@@ -7,94 +7,95 @@
     Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
     */
 
-    .hljs {
+    & .hljs {
         background: #fefefe;
         color: #545454;
     }
 
     /* Comment */
-    .hljs-comment,
-    .hljs-quote {
+    & .hljs-comment,
+    & .hljs-quote {
         color: #696969;
     }
 
     /* Red */
-    .hljs-variable,
-    .hljs-template-variable,
-    .hljs-tag,
-    .hljs-name,
-    .hljs-selector-id,
-    .hljs-selector-class,
-    .hljs-regexp,
-    .hljs-deletion {
+    & .hljs-variable,
+    & .hljs-template-variable,
+    & .hljs-tag,
+    & .hljs-name,
+    & .hljs-selector-id,
+    & .hljs-selector-class,
+    & .hljs-regexp,
+    & .hljs-deletion {
         color: #d91e18;
     }
 
     /* Orange */
-    .hljs-number,
-    .hljs-built_in,
-    .hljs-literal,
-    .hljs-type,
-    .hljs-params,
-    .hljs-meta,
-    .hljs-link {
+    & .hljs-number,
+    & .hljs-built_in,
+    & .hljs-literal,
+    & .hljs-type,
+    & .hljs-params,
+    & .hljs-meta,
+    & .hljs-link {
         color: #aa5d00;
     }
 
     /* Yellow */
-    .hljs-attribute {
+    & .hljs-attribute {
         color: #aa5d00;
     }
 
     /* Green */
-    .hljs-string,
-    .hljs-symbol,
-    .hljs-bullet,
-    .hljs-addition {
+    & .hljs-string,
+    & .hljs-symbol,
+    & .hljs-bullet,
+    & .hljs-addition {
         color: #008000;
     }
 
     /* Blue */
-    .hljs-title,
-    .hljs-section {
+    & .hljs-title,
+    & .hljs-section {
         color: #007faa;
     }
 
     /* Purple */
-    .hljs-keyword,
-    .hljs-selector-tag {
+    & .hljs-keyword,
+    & .hljs-selector-tag {
         color: #7928a1;
     }
 
-    .hljs-emphasis {
+    & .hljs-emphasis {
         font-style: italic;
     }
 
-    .hljs-strong {
+    & .hljs-strong {
         font-weight: bold;
     }
 
     @media screen and (-ms-high-contrast: active) {
-    .hljs-addition,
-    .hljs-attribute,
-    .hljs-built_in,
-    .hljs-bullet,
-    .hljs-comment,
-    .hljs-link,
-    .hljs-literal,
-    .hljs-meta,
-    .hljs-number,
-    .hljs-params,
-    .hljs-string,
-    .hljs-symbol,
-    .hljs-type,
-    .hljs-quote {
-        color: highlight;
-    }
+        & .hljs-addition,
+        & .hljs-attribute,
+        & .hljs-built_in,
+        & .hljs-bullet,
+        & .hljs-comment,
+        & .hljs-link,
+        & .hljs-literal,
+        & .hljs-meta,
+        & .hljs-number,
+        & .hljs-params,
+        & .hljs-string,
+        & .hljs-symbol,
+        & .hljs-type,
+        & .hljs-quote {
+            color: highlight;
+        }
 
-    .hljs-keyword,
-    .hljs-selector-tag {
-        font-weight: bold;
+        & .hljs-keyword,
+        & .hljs-selector-tag {
+            font-weight: bold;
+        }
     }
 }
 
@@ -107,93 +108,94 @@
     Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
     */
 
-    .hljs {
+    & .hljs {
         background: #2b2b2b;
         color: #f8f8f2;
     }
 
     /* Comment */
-    .hljs-comment,
-    .hljs-quote {
+    & .hljs-comment,
+    & .hljs-quote {
         color: #d4d0ab;
     }
 
     /* Red */
-    .hljs-variable,
-    .hljs-template-variable,
-    .hljs-tag,
-    .hljs-name,
-    .hljs-selector-id,
-    .hljs-selector-class,
-    .hljs-regexp,
-    .hljs-deletion {
+    & .hljs-variable,
+    & .hljs-template-variable,
+    & .hljs-tag,
+    & .hljs-name,
+    & .hljs-selector-id,
+    & .hljs-selector-class,
+    & .hljs-regexp,
+    & .hljs-deletion {
         color: #ffa07a;
     }
 
     /* Orange */
-    .hljs-number,
-    .hljs-built_in,
-    .hljs-literal,
-    .hljs-type,
-    .hljs-params,
-    .hljs-meta,
-    .hljs-link {
+    & .hljs-number,
+    & .hljs-built_in,
+    & .hljs-literal,
+    & .hljs-type,
+    & .hljs-params,
+    & .hljs-meta,
+    & .hljs-link {
         color: #f5ab35;
     }
 
     /* Yellow */
-    .hljs-attribute {
+    & .hljs-attribute {
         color: #ffd700;
     }
 
     /* Green */
-    .hljs-string,
-    .hljs-symbol,
-    .hljs-bullet,
-    .hljs-addition {
+    & .hljs-string,
+    & .hljs-symbol,
+    & .hljs-bullet,
+    & .hljs-addition {
         color: #abe338;
     }
 
     /* Blue */
-    .hljs-title,
-    .hljs-section {
+    & .hljs-title,
+    & .hljs-section {
         color: #00e0e0;
     }
 
     /* Purple */
-    .hljs-keyword,
-    .hljs-selector-tag {
+    & .hljs-keyword,
+    & .hljs-selector-tag {
         color: #dcc6e0;
     }
 
-    .hljs-emphasis {
+    & .hljs-emphasis {
         font-style: italic;
     }
 
-    .hljs-strong {
+    & .hljs-strong {
         font-weight: bold;
     }
 
     @media screen and (-ms-high-contrast: active) {
-    .hljs-addition,
-    .hljs-attribute,
-    .hljs-built_in,
-    .hljs-bullet,
-    .hljs-comment,
-    .hljs-link,
-    .hljs-literal,
-    .hljs-meta,
-    .hljs-number,
-    .hljs-params,
-    .hljs-string,
-    .hljs-symbol,
-    .hljs-type,
-    .hljs-quote {
-        color: highlight;
-    }
+        & .hljs-addition,
+        & .hljs-attribute,
+        & .hljs-built_in,
+        & .hljs-bullet,
+        & .hljs-comment,
+        & .hljs-link,
+        & .hljs-literal,
+        & .hljs-meta,
+        & .hljs-number,
+        & .hljs-params,
+        & .hljs-string,
+        & .hljs-symbol,
+        & .hljs-type,
+        & .hljs-quote {
+            color: highlight;
+        }
 
-    .hljs-keyword,
-    .hljs-selector-tag {
-        font-weight: bold;
+        & .hljs-keyword,
+        & .hljs-selector-tag {
+            font-weight: bold;
+        }
     }
-}
+}
\ No newline at end of file
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index 5636983..cc594fd 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -23,34 +23,34 @@ module.exports = {
         background: 'rgb(var(--color-background) / <alpha-value>)'
       },
       typography: ({ theme }) => ({
-        colorful: {
+        inhji: {
           css: {
-            '--tw-prose-lead': theme('colors.rose[700]'),
-            '--tw-prose-links': theme('colors.rose[900]'),
-            '--tw-prose-counters': theme('colors.rose[600]'),
-            '--tw-prose-bullets': theme('colors.rose[400]'),
-            '--tw-prose-hr': theme('colors.rose[300]'),
-            '--tw-prose-quotes': theme('colors.rose[900]'),
-            '--tw-prose-quote-borders': theme('colors.rose[300]'),
-            '--tw-prose-captions': theme('colors.rose[700]'),
-            '--tw-prose-code': theme('colors.rose[900]'),
-            '--tw-prose-pre-code': theme('colors.rose[100]'),
-            '--tw-prose-pre-bg': theme('colors.rose[900]'),
-            '--tw-prose-th-borders': theme('colors.rose[300]'),
-            '--tw-prose-td-borders': theme('colors.rose[200]'),
-            '--tw-prose-invert-lead': theme('colors.rose[300]'),
+            '--tw-prose-lead': theme('colors.neutral[700]'),
+            '--tw-prose-links': theme('colors.neutral[900]'),
+            '--tw-prose-counters': theme('colors.neutral[600]'),
+            '--tw-prose-bullets': theme('colors.neutral[400]'),
+            '--tw-prose-hr': theme('colors.neutral[300]'),
+            '--tw-prose-quotes': theme('colors.neutral[900]'),
+            '--tw-prose-quote-borders': theme('colors.neutral[300]'),
+            '--tw-prose-captions': theme('colors.neutral[700]'),
+            '--tw-prose-code': theme('colors.neutral[900]'),
+            '--tw-prose-pre-code': theme('colors.neutral[100]'),
+            '--tw-prose-pre-bg': theme('colors.neutral[200]'),
+            '--tw-prose-th-borders': theme('colors.neutral[300]'),
+            '--tw-prose-td-borders': theme('colors.neutral[200]'),
+            '--tw-prose-invert-lead': theme('colors.neutral[300]'),
             '--tw-prose-invert-links': theme('colors.white'),
-            '--tw-prose-invert-counters': theme('colors.rose[400]'),
-            '--tw-prose-invert-bullets': theme('colors.rose[600]'),
-            '--tw-prose-invert-hr': theme('colors.rose[700]'),
-            '--tw-prose-invert-quotes': theme('colors.rose[100]'),
-            '--tw-prose-invert-quote-borders': theme('colors.rose[700]'),
-            '--tw-prose-invert-captions': theme('colors.rose[400]'),
+            '--tw-prose-invert-counters': theme('colors.neutral[400]'),
+            '--tw-prose-invert-bullets': theme('colors.neutral[600]'),
+            '--tw-prose-invert-hr': theme('colors.neutral[700]'),
+            '--tw-prose-invert-quotes': theme('colors.neutral[100]'),
+            '--tw-prose-invert-quote-borders': theme('colors.neutral[700]'),
+            '--tw-prose-invert-captions': theme('colors.neutral[400]'),
             '--tw-prose-invert-code': theme('colors.white'),
-            '--tw-prose-invert-pre-code': theme('colors.rose[300]'),
+            '--tw-prose-invert-pre-code': theme('colors.neutral[300]'),
             '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
-            '--tw-prose-invert-th-borders': theme('colors.rose[600]'),
-            '--tw-prose-invert-td-borders': theme('colors.rose[700]'),
+            '--tw-prose-invert-th-borders': theme('colors.neutral[600]'),
+            '--tw-prose-invert-td-borders': theme('colors.neutral[700]'),
           },
         },
       }),