diff --git a/content/_index.md b/content/_index.md index 7f891e9..6f5b7ad 100644 --- a/content/_index.md +++ b/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) { diff --git a/sass/_comments.scss b/sass/_comments.scss index 6472a2f..b7b1d71 100644 --- a/sass/_comments.scss +++ b/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; } diff --git a/sass/_main.scss b/sass/_main.scss index 0775f50..4ba7c7a 100644 --- a/sass/_main.scss +++ b/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 - border-radius: 0; // unset code block border radius - padding: 0; // unset mark padding + color: var(--fg-color); // Unset mark color from primary color to text color + border-radius: 0; // Unset code block border radius + 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; - // unset some
 stuff
+    text-shadow: var(--primary-color-alpha) 0 0 4px,
+      var(--primary-color) 0 0 12px;
+    // Unset some 
 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);
-    background-color: var(--purple3);
-    background-image: radial-gradient(at 0 0, var(--blue3) 0, transparent 50%),
-      radial-gradient(at 100% 100%, var(--red2) 0, transparent 50%);
+    color: var(--primary-color);
+    background-color: var(--primary-color-alpha);
     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;
     }
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 019db04..be23cac 100644
--- a/sass/_variables.scss
+++ b/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: 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);
+  --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: 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;