feat: Wait this may work

sass/_comments.scss

@@ -22,7 +22,7 @@ section#comments {
       .avatar {
         all: unset;
         display: block;
-        background-color: var(--bg2);
+        background-color: var(--fg-05);
         border-radius: var(--border-radius);
         box-shadow: var(--shadow);
         height: 100%;
@@ -56,7 +56,7 @@ section#comments {
       grid-area: name;
 
       .instance {
-        background-color: var(--fg05);
+        background-color: var(--fg-05);
         border-radius: 9999px;
         color: var(--text);
         font-size: smaller;
@@ -117,7 +117,7 @@ section#comments {
 
       figure {
         border-radius: var(--border-radius);
-        background-color: var(--bg2);
+        background-color: var(--fg-05);
         box-shadow: var(--shadow);
         margin-left: 0;
         margin-right: 0;
@@ -224,15 +224,15 @@ section#comments {
             to right,
             transparent,
             transparent 0.4rem,
-            var(--bg2) 0.4rem,
-            var(--bg2) calc(100% - 0.4rem),
+            var(--fg-05) 0.4rem,
+            var(--fg-05) calc(100% - 0.4rem),
             transparent calc(100% - 0.4rem),
             transparent
           ),
           repeating-linear-gradient(
             45deg,
-            var(--bg1),
-            var(--bg1) 0.3rem,
+            var(--fg-50),
+            var(--fg-50) 0.3rem,
             var(--accent-color) 0.3rem,
             var(--accent-color) 0.6rem
           );

sass/_main.scss

@@ -112,7 +112,7 @@ b {
 }
 
 small {
-  color: var(--fg50);
+  color: var(--fg-50);
 }
 
 dl {
@@ -140,8 +140,8 @@ hr {
 blockquote {
   padding: 0 1rem;
   margin-left: 0;
-  color: var(--fg40);
-  border-left: 0.3rem solid var(--fg07);
+  color: var(--fg-50);
+  border-left: 0.3rem solid var(--accent-color);
 }
 
 blockquote > :first-child {
@@ -157,32 +157,27 @@ abbr {
 }
 
 kbd {
-  background-color: var(--fg05);
-  border: 1px solid var(--fg07);
-  border-radius: 4px;
-  box-shadow: inset 0 -1px 0 var(--fg09);
-  color: var(--text);
   display: inline-block;
-  font-size: 11px;
-  line-height: 10px;
-  padding: 3px 5px;
-  vertical-align: middle;
+  padding: 2px 6px;
+  border-radius: var(--border-radius-small);
+  background-color: var(--fg-07);
+  box-shadow: inset 0 -2px 0 var(--fg-09);
+  font-size: medium;
   cursor: pointer;
   user-select: none;
   -webkit-user-select: none;
 }
 
 kbd:active {
-  background-color: var(--fg07);
-  border: 1px solid var(--fg09);
-  box-shadow: inset 0 0px 0 var(--fg09);
-  vertical-align: bottom;
+  background-color: var(--fg-09);
+  box-shadow: inset 0 1px 0 var(--fg-09);
+  transform: translate(0, 2px);
 }
 
 mark {
   padding: 2px 6px;
   border-radius: var(--border-radius-small);
-  background-color: var(--marked);
+  background-color: var(--accent-color-20);
   color: var(--accent-color);
 }
 
@@ -191,12 +186,12 @@ figcaption {
   margin-bottom: 2rem;
   display: block;
   text-align: center;
-  color: var(--fg50);
+  color: var(--fg-50);
   font-size: smaller;
 }
 
 details {
-  background-color: var(--bg2);
+  background-color: var(--fg-05);
   border-radius: var(--border-radius);
   box-shadow: var(--shadow);
   padding: 1rem;
@@ -227,7 +222,7 @@ table th {
 table th,
 table td {
   padding: 0.5rem 1rem;
-  border: 1px solid var(--fg05);
+  border: 1px solid var(--fg-05);
 }
 
 td,
@@ -290,7 +285,7 @@ img:not(.no-hover):hover {
   max-width: var(--content-width);
   margin: 1rem auto;
   border-radius: var(--border-radius-big);
-  background-color: var(--fg05);
+  background-color: var(--fg-05);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   box-shadow: var(--shadow);
@@ -304,7 +299,7 @@ img:not(.no-hover):hover {
   }
 
   li {
-    color: var(--fg50);
+    color: var(--fg-50);
     display: inline-block;
   }
 
@@ -314,13 +309,13 @@ img:not(.no-hover):hover {
     padding: 0.4rem 1rem;
     border-radius: var(--border-radius);
     background-color: transparent;
-    color: var(--fg50);
+    color: var(--fg-50);
     transition: var(--transition);
     text-decoration: none;
   }
 
   a:hover {
-    background-color: var(--fg05);
+    background-color: var(--fg-05);
     color: var(--accent-color);
   }
 
@@ -404,7 +399,7 @@ img:not(.no-hover):hover {
   font-size: 0.9rem;
   padding: 0.4rem 1rem;
   border-radius: var(--border-radius);
-  background-color: var(--fg05);
+  background-color: var(--fg-05);
   color: var(--text);
 }
 
@@ -412,7 +407,7 @@ img:not(.no-hover):hover {
 .crt {
   margin: 1rem 0 1rem;
   border-radius: var(--border-radius);
-  box-shadow: var(--shadow);
+  box-shadow: var(--glow);
   background: var(--crt-bg);
 
   pre {
@@ -463,8 +458,8 @@ pre {
   max-width: 100vw;
   overflow-x: auto;
   box-shadow: var(--shadow);
-  background-image: linear-gradient(var(--fg03) 1px, transparent 1px),
-    linear-gradient(90deg, var(--fg03) 1px, transparent 1px);
+  background-image: linear-gradient(var(--fg-03) 1px, transparent 1px),
+    linear-gradient(90deg, var(--fg-03) 1px, transparent 1px);
   background-size: 10px 10px, 10px 10px;
   background-position: -1px -1px, -1px -1px;
 }
@@ -479,7 +474,7 @@ pre code {
 code {
   padding: 2px 6px;
   border-radius: var(--border-radius-small);
-  background-color: var(--fg07);
+  background-color: var(--fg-05);
   color: var(--red-fg);
   box-shadow: none;
 }

sass/_variables.scss

@@ -1,32 +1,26 @@
 @use "sass:color";
 
-$accent-color: #ff7800;
+$accent-color: #ffa348;
+$accent-color-20: color.scale($accent-color, $alpha: -80%);
 
-$crt-bg-l: radial-gradient(
-  color.mix($accent-color, black, 30%),
-  color.mix($accent-color, black, 20%)
+$crt-bg: radial-gradient(
+  color.scale($accent-color, $lightness: -80%),
+  color.scale($accent-color, $lightness: -90%)
 );
 
-$crt-bg-d: radial-gradient(
-  color.mix($accent-color, black, 20%),
-  color.mix($accent-color, black, 10%)
-);
-
-$bg1-l: color.mix($accent-color, rgb(250, 250, 250), 10%);
-$bg2-l: color.mix($accent-color, rgb(255, 255, 255), 20%);
-$bg3-l: color.mix($accent-color, rgb(75, 75, 75), 30%);
-
-$bg1-d: color.mix($accent-color, rgb(36, 36, 36), 15%);
-$bg2-d: color.mix($accent-color, rgb(30, 30, 30), 10%);
-$bg3-d: color.mix($accent-color, rgb(11, 11, 11), 5%);
-
-$marked: color.scale($accent-color, $alpha: -80%);
+$bg-l: color.mix($accent-color, rgb(250, 250, 250), 10%);
+$bg-d: color.mix($accent-color, rgb(11, 11, 11), 5%);
 
+$glow:
+  0 0 0 1px color.scale($accent-color, $alpha: -95%),
+  0 2px 6px 2px color.scale($accent-color, $alpha: -95%),
+  0 4px 24px 4px color.scale($accent-color, $alpha: -90%);
+  
 :root {
   // GENERAL SETUP
   --accent-color: #{$accent-color};
   --text: var(--dark4);
-  --background: var(--bg1);
+  --background: var(--bg);
   --border: rgba(120, 120, 120, 0.4);
   --border-radius: 0.75rem;
   --border-radius-big: 1.2rem;
@@ -34,17 +28,13 @@ $marked: color.scale($accent-color, $alpha: -80%);
   --content-width: 720px;
 
   // CUSTOM COLOR PALETTE
-  --bg1: #{$bg1-l};
-  --bg2: #{$bg2-l};
-  --bg3: #{$bg3-l};
+  --bg: #{$bg-l};
 
-  --fg01: rgba(0, 0, 0, 0.01);
-  --fg03: rgba(0, 0, 0, 0.03);
-  --fg05: rgba(0, 0, 0, 0.05);
-  --fg07: rgba(0, 0, 0, 0.07);
-  --fg09: rgba(0, 0, 0, 0.09);
-  --fg40: rgba(0, 0, 0, 0.4);
-  --fg50: rgba(0, 0, 0, 0.5);
+  --fg-03: rgba(0, 0, 0, 0.03);
+  --fg-05: rgba(0, 0, 0, 0.05);
+  --fg-07: rgba(0, 0, 0, 0.07);
+  --fg-09: rgba(0, 0, 0, 0.09);
+  --fg-50: rgba(0, 0, 0, 0.5);
 
   --purple-bg: rgba(145, 65, 172, 0.1);
   --purple-fg: rgb(145, 65, 172);
@@ -55,9 +45,9 @@ $marked: color.scale($accent-color, $alpha: -80%);
   --orange-bg: rgba(255, 120, 0, 0.1);
   --orange-fg: rgb(255, 120, 0);
 
-  --crt-bg: #{$crt-bg-l};
+  --crt-bg: #{$crt-bg};
 
-  --marked: #{$marked};
+  --accent-color-20: #{$accent-color-20};
 
   // CUSTOM VARIABLES
   --shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07),
@@ -66,6 +56,7 @@ $marked: color.scale($accent-color, $alpha: -80%);
     0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06);
   --drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
     drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  --glow: #{$glow};
 
   --transition: 200ms;
   --transition-longer: 400ms;
@@ -76,20 +67,18 @@ $marked: color.scale($accent-color, $alpha: -80%);
   :root {
     color-scheme: dark;
 
+    // GENERAL SETUP
     --text: var(--light2);
-    --background: var(--bg3);
+    --background: var(--bg);
 
-    --fg01: rgba(255, 255, 255, 0.01);
-    --fg03: rgba(255, 255, 255, 0.03);
-    --fg05: rgba(255, 255, 255, 0.05);
-    --fg07: rgba(255, 255, 255, 0.07);
-    --fg09: rgba(255, 255, 255, 0.09);
-    --fg40: rgba(255, 255, 255, 0.4);
-    --fg50: rgba(255, 255, 255, 0.5);
+    // CUSTOM COLOR PALETTE
+    --bg: #{$bg-d};
 
-    --bg1: #{$bg1-d};
-    --bg2: #{$bg2-d};
-    --bg3: #{$bg3-d};
+    --fg-03: rgba(255, 255, 255, 0.03);
+    --fg-05: rgba(255, 255, 255, 0.05);
+    --fg-07: rgba(255, 255, 255, 0.07);
+    --fg-09: rgba(255, 255, 255, 0.09);
+    --fg-50: rgba(255, 255, 255, 0.5);
 
     --purple-bg: rgba(220, 138, 221, 0.1);
     --purple-fg: rgb(220, 138, 221);
@@ -99,7 +88,5 @@ $marked: color.scale($accent-color, $alpha: -80%);
     --yellow-fg: rgb(248, 228, 92);
     --orange-bg: rgba(255, 190, 111, 0.1);
     --orange-fg: rgb(255, 190, 111);
-
-    --crt-bg: #{$crt-bg-d};
   }
 }

sass/style.scss

@@ -16,6 +16,5 @@
 @use "main";
 @use "comments";
 @use "scanlines";
-@use "custom";
 @import "syntax-theme-dark.css" (prefers-color-scheme: dark);
 @import "syntax-theme-light.css" (prefers-color-scheme: light);

templates/includes/head.html

@@ -7,6 +7,7 @@
   <title>{% block title %}{{ config.title }}{% endblock title %}</title>
 
   <link href="{{ get_url(path='style.css') }}" rel="stylesheet" />
+  <link href="{{ get_url(path='custom.css') }}" rel="stylesheet" />
 
   <link rel="icon" type="image/gif" href="{{ config.base_url }}/favicon.gif" />
   <link rel="icon" type="image/png" href="{{ config.base_url }}/favicon.png" />