feat: Simplify tag style

It was indeed pretty, but was too out of style and didn't respect primary color

content/_index.md

@@ -113,7 +113,12 @@ $crt-bg: radial-gradient(
 );
 
 $nav-bg-l: color.scale($bg-color-l, $alpha: -20%, $lightness: 50%);
-$nav-bg-d: color.scale($bg-color-d, $alpha: -20%, $lightness: 5%, $saturation: -50%);
+$nav-bg-d: color.scale(
+  $bg-color-d,
+  $alpha: -20%,
+  $lightness: 5%,
+  $saturation: -50%
+);
 
 $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
   0 2px 6px 2px color.scale($primary-color, $alpha: -95%),
@@ -122,10 +127,10 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
 :root {
   --bg-color: #{$bg-color-l};
   --crt-bg: #{$crt-bg};
+  --glow: #{$glow};
   --nav-bg: #{$nav-bg-l};
   --primary-color-alpha: #{$primary-color-alpha};
   --primary-color: #{$primary-color};
-  --glow: #{$glow};
 }
 
 @media (prefers-color-scheme: dark) {

sass/_comments.scss

@@ -160,7 +160,7 @@ section#comments {
       }
     }
 
-    // hide the card from the shared post
+    // Hide the card from the shared post
     &:first-of-type .card {
       display: none;
     }

sass/_main.scss

@@ -12,7 +12,7 @@ html {
   overflow-wrap: break-word;
 }
 
-// smaller font size on mobile
+// Smaller font size on mobile
 // @media only screen and (max-device-width: 480px) {
 //   html {
 //     font-size: 14px;
@@ -30,19 +30,19 @@ body {
   line-height: 1.6;
   color: var(--fg-color);
   background-color: var(--bg-color);
-  // put footer at the bottom for short pages, such as the 404
+  // Put footer at the bottom for short pages, such as the 404
   display: grid;
   min-height: 100vh;
-  grid-template-rows: auto minmax(auto, 1fr) auto; // header, stuff, footer
+  grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer
 }
 
-// style text selection to use primary color
+// Style text selection to use primary color
 ::selection {
   color: var(--bg-color);
   background-color: var(--primary-color);
 }
 
-// make focused anchor not get covered by nav,
+// Make focused anchor not get covered by nav,
 // and flash it with primary color when jumping to it
 :target {
   scroll-margin-top: 15vh;
@@ -189,7 +189,7 @@ code:not(pre code) {
 }
 
 pre {
-  line-height: normal; // unset line height
+  line-height: normal; // Unset line height
   padding: 1rem;
   margin: 1rem 0 1rem;
   border-radius: var(--rounded-corner);
@@ -202,7 +202,7 @@ pre {
     border: none;
   }
 
-  // the line number cells
+  // The line number cells
   table td:nth-of-type(1) {
     text-align: center;
     user-select: none;
@@ -211,9 +211,9 @@ pre {
   mark {
     display: block;
     background-color: var(--fg-muted-1);
-    color: var(--fg-color); // unset mark color from primary color to text color
+    color: var(--fg-color); // Unset mark color from primary color to text color
-    border-radius: 0; // unset code block border radius
+    border-radius: 0; // Unset code block border radius
-    padding: 0; // unset mark padding
+    padding: 0; // Unset mark padding
   }
 
   table {
@@ -221,7 +221,7 @@ pre {
     border-collapse: collapse;
   }
 
-  // the line numbers already provide some kind of left/right padding
+  // The line numbers already provide some kind of left/right padding
   &[data-linenos] {
     padding: 1rem 0;
   }
@@ -237,7 +237,7 @@ kbd {
   line-height: normal;
   padding: 2px 6px;
 
-  // small nice thingy, keys can be pressed!
+  // Small nice thingy, keys can be pressed!
   &:active {
     background-color: var(--fg-muted-2);
     box-shadow: inset 0 1px 0 var(--fg-muted-2);
@@ -336,7 +336,6 @@ img {
 }
 
 .pixels {
-  image-rendering: crisp-edges; // older firefox browsers
   image-rendering: pixelated;
 }
 
@@ -486,8 +485,9 @@ img {
   pre {
     color: var(--primary-color);
     padding: 1rem 1rem;
-    text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px;
+    text-shadow: var(--primary-color-alpha) 0 0 4px,
-    // unset some <pre> stuff
+      var(--primary-color) 0 0 12px;
+    // Unset some <pre> stuff
     background-color: unset;
     box-shadow: unset;
     margin: unset;
@@ -507,7 +507,7 @@ img {
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%;
+  height: calc(100% + 8px);
   pointer-events: none;
   background: repeating-linear-gradient(
     0deg,
@@ -516,6 +516,16 @@ img {
     transparent 3px,
     transparent 4px
   );
+  animation: scanlines 250ms linear infinite;
+
+  @keyframes scanlines {
+    0% {
+      transform: translateY(0px);
+    }
+    100% {
+      transform: translateY(-8px);
+    }
+  }
 }
 
 .cursor {
@@ -598,26 +608,14 @@ img {
   background-color: var(--fg-muted-1);
 
   &:hover {
-    color: rgb(255, 255, 255);
+    color: var(--primary-color);
-    background-color: var(--purple3);
+    background-color: var(--primary-color-alpha);
-    background-image: radial-gradient(at 0 0, var(--blue3) 0, transparent 50%),
-      radial-gradient(at 100% 100%, var(--red2) 0, transparent 50%);
     text-decoration: none;
   }
 
   &::before {
     content: "#";
   }
-
-  @media (prefers-color-scheme: dark) {
-    &:hover {
-      color: rgba(0, 0, 0, 0.8);
-      background-color: var(--purple2);
-      background-image: radial-gradient(at 0 0, var(--blue2) 0, transparent 50%),
-        radial-gradient(at 100% 100%, var(--red1) 0, transparent 50%);
-      text-decoration: none;
-    }
-  }
 }
 
 .post-nav {
@@ -626,19 +624,16 @@ img {
   border-top: 1px solid var(--fg-muted-2);
 
   .post-nav-item {
-    border-bottom: 0;
     font-weight: 600;
-    padding-bottom: 0.5rem;
     width: 50%;
     padding-top: 1rem;
     text-decoration: none;
-    box-sizing: border-box;
 
     &:hover .post-title {
       color: var(--primary-color);
     }
 
-    &:nth-child(2n+1) {
+    &:nth-child(2n + 1) {
       padding-left: 0;
       padding-right: 1rem;
     }

sass/_variables.scss

@@ -12,7 +12,12 @@ $crt-bg: radial-gradient(
 );
 
 $nav-bg-l: color.scale($bg-color-l, $alpha: -20%, $lightness: 50%);
-$nav-bg-d: color.scale($bg-color-d, $alpha: -20%, $lightness: 5%, $saturation: -50%);
+$nav-bg-d: color.scale(
+  $bg-color-d,
+  $alpha: -20%,
+  $lightness: 5%,
+  $saturation: -50%
+);
 
 $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
   0 2px 6px 2px color.scale($primary-color, $alpha: -95%),
@@ -42,13 +47,16 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
 
   // VARIABLES
   --content-width: 720px;
-  --drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px 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};
   --rounded-corner-big: 18px;
   --rounded-corner-small: 8px;
   --rounded-corner: 12px;
-  --shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06);
+  --shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06),
-  --shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03);
+    0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06);
+  --shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07),
+    0 2px 6px 2px rgba(0, 0, 0, 0.03);
   --transition-bezier: 350ms cubic-bezier(0.17, 0.89, 0.32, 1.28);
   --transition-long: 800ms;
   --transition-longer: 400ms;