From 2588c08d0eb555fbff8900bc2d9390fb1f661204 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Sun, 28 Jan 2024 21:37:45 +0300
Subject: [PATCH] feat: Add moving scanline, remove emoji font stuff

---
 sass/_crt.scss  | 84 ++++++++++++++++++++++++++++++++++---------------
 sass/_main.scss |  4 +--
 2 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/sass/_crt.scss b/sass/_crt.scss
index 4d8c01d..ea16240 100644
--- a/sass/_crt.scss
+++ b/sass/_crt.scss
@@ -22,37 +22,71 @@
 .scanlines {
   position: relative;
   overflow: hidden;
-}
 
-.scanlines::after {
-  animation: scanlines 250ms linear infinite;
-  background: repeating-linear-gradient(
-    0deg,
-    rgba(0, 0, 0, 0.25),
-    rgba(0, 0, 0, 0.25) 1px,
-    transparent 3px,
-    transparent 4px
-  );
-  content: "";
-  display: block;
-  height: calc(100% + 8px);
-  left: 0;
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  width: 100%;
+  &::before {
+    animation: scanlines 250ms linear infinite;
+    background: repeating-linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.25),
+      rgba(0, 0, 0, 0.25) 1px,
+      transparent 3px,
+      transparent 4px
+    );
+    content: "";
+    display: block;
+    height: calc(100% + 0.5rem);
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 100%;
 
-  @keyframes scanlines {
-    from {
-      transform: translateY(-8px);
+    @keyframes scanlines {
+      from {
+        transform: translateY(-0.5rem);
+      }
+      to {
+        transform: translateY(0);
+      }
     }
-    to {
-      transform: translateY(0px);
+
+    @media (prefers-reduced-motion) {
+      animation: none;
     }
   }
 
-  @media (prefers-reduced-motion) {
-    animation: none;
+  &::after {
+    animation: scanline 5s linear infinite;
+    background: linear-gradient(
+      to top,
+      transparent 0%,
+      var(--primary-color-alpha) 10%,
+      transparent 100%
+    );
+    bottom: 100%;
+    content: "";
+    display: block;
+    height: 8rem;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    width: 100%;
+
+    @keyframes scanline {
+      from {
+        bottom: 100%;
+      }
+      50% {
+        bottom: 100%;
+      }
+      to {
+        bottom: -8rem;
+      }
+    }
+
+    @media (prefers-reduced-motion) {
+      animation: none;
+    }
   }
 }
 
diff --git a/sass/_main.scss b/sass/_main.scss
index 4789841..c956a00 100644
--- a/sass/_main.scss
+++ b/sass/_main.scss
@@ -26,7 +26,7 @@ body {
 }
 
 body {
-  font-family: system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family: system-ui, sans-serif;
   line-height: 1.6;
   color: var(--fg-color);
   background: var(--bg-color);
@@ -70,7 +70,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
   font-weight: 200;
   line-height: 1.25;
   margin: 3rem 0 1rem;