From caa12324673cf9ddbb680aaf2dcf6076534cd989 Mon Sep 17 00:00:00 2001
From: Sefa Eyeoglu <contact@scrumplex.net>
Date: Sun, 8 Mar 2026 12:00:37 +0100
Subject: [PATCH] fix: simplify fade-in

Signed-off-by: Sefa Eyeoglu <contact@scrumplex.net>
---
 scss/_animations.scss  |  4 --
 scss/_base.scss        |  7 ---
 scss/_misc.scss        | 99 ------------------------------------------
 src/App.tsx            | 27 +++++++++---
 src/ConsoleSpinner.tsx |  2 +-
 5 files changed, 21 insertions(+), 118 deletions(-)

diff --git a/scss/_animations.scss b/scss/_animations.scss
index 73f792f..399287b 100644
--- a/scss/_animations.scss
+++ b/scss/_animations.scss
@@ -3,12 +3,10 @@
 @keyframes panel-fade-in {
     from {
         opacity: 0;
-        transform: translateY(100vh);
     }
 
     to {
         opacity: 1;
-        transform: translateY(0);
     }
 }
 
@@ -28,11 +26,9 @@
     @keyframes panel-fade-in {
         from {
             opacity: 0;
-            transform: translateY(300px);
         }
         to {
             opacity: 1;
-            transform: translateY(0);
         }
     }
 
diff --git a/scss/_base.scss b/scss/_base.scss
index 278bcf9..f9d86da 100644
--- a/scss/_base.scss
+++ b/scss/_base.scss
@@ -76,10 +76,3 @@ body {
         animation: panel-after-fade-in 900ms cubic-bezier(0.23, 1, 0.32, 1);
     }
 }
-
-// Why is this you ask? Well look into application.js#applyScroll
-.scrolled .sheet[hidden] {
-    display: block;
-    opacity: 0;
-    animation: none;
-}
diff --git a/scss/_misc.scss b/scss/_misc.scss
index bae56d6..947c2c3 100644
--- a/scss/_misc.scss
+++ b/scss/_misc.scss
@@ -13,16 +13,6 @@
     cursor: default;
 }
 
-.scrolled .scroll-indicator {
-    display: none;
-}
-
-.m-center {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-}
-
 .link {
     color: $colorTextPrimary;
 
@@ -43,10 +33,6 @@
     }
 }
 
-.text-spinner {
-    font-family: monospace;
-}
-
 .scrumplex-logo {
     border-radius: 50%;
     box-shadow: 0 5px 36px transparentize($colorBrand, 0.3);
@@ -68,88 +54,3 @@
         background-image: url("./wavy-dark.svg");
     }
 }
-
-.flex {
-    display: flex;
-}
-
-.flex-column {
-    flex-direction: column;
-}
-
-.flex-justify-between {
-    justify-content: space-between;
-}
-
-.flex-align-center {
-    align-items: center;
-}
-
-.flex-grow {
-    flex-grow: 1;
-}
-
-input {
-    background-color: transparent;
-    border: none;
-    color: $colorTextPrimary;
-    border-bottom: 2px solid $colorTextPrimary;
-    outline: none;
-    font-size: 1rem;
-    padding: 4px 8px;
-    margin: 8px 4px;
-    border-top-left-radius: 8px;
-
-    transition:
-        background 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
-        border-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-
-    @media (prefers-color-scheme: dark) {
-        color: $colorTextPrimaryDark;
-        border-bottom-color: $colorTextPrimaryDark;
-    }
-}
-
-input:hover,
-input:focus {
-    background-color: transparentize($colorTextPrimary, 0.95);
-
-    @media (prefers-color-scheme: dark) {
-        background-color: transparentize($colorTextPrimaryDark, 0.95);
-    }
-}
-
-input:active {
-    background-color: transparentize($colorTextPrimary, 0.8);
-
-    @media (prefers-color-scheme: dark) {
-        background-color: transparentize($colorTextPrimaryDark, 0.8);
-    }
-}
-
-input:focus {
-    outline: none;
-    border-bottom-color: $colorBrand;
-}
-
-#ovenplayer {
-    --op-accent-color: #{$colorBrand};
-}
-
-.theater {
-    background-color: $colorBaseDark;
-
-    .sheet::after,
-    .sheet::before {
-        display: none;
-    }
-
-    .wrapper {
-        max-width: initial;
-        min-height: initial;
-    }
-
-    #ovenplayer {
-        max-height: 70vh;
-    }
-}
diff --git a/src/App.tsx b/src/App.tsx
index 019e8c3..b3baec5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,7 +25,7 @@ const Project = ({
                     alt={`${title} Logo`}
                     title={title}
                     loading="lazy"
-                    className="m-center h-20"
+                    className="mx-auto h-20"
                 />
                 <h3 className="font-display text-3xl text-center">{title}</h3>
                 {children}
@@ -137,6 +137,19 @@ export const App = () => {
 
     const [mainOffset, setMainOffset] = useState(0);
 
+    const scrollToElement = (selector: string) => {
+        const elem = document.querySelector(selector);
+        if (!elem) {
+            return;
+        }
+
+        const rect = elem.getBoundingClientRect();
+
+        const offset = window.pageYOffset + rect.top;
+
+        window.scrollTo({ top: offset, behavior: "smooth" });
+    };
+
     const expandConditionally = useCallback(
         (force?: boolean) => {
             if (mainOffset > 0) {
@@ -165,9 +178,7 @@ export const App = () => {
 
         const onHashChange = () => {
             expandConditionally(true);
-            setTimeout(() => {
-                location.href = location.hash;
-            }, 1);
+            setTimeout(() => scrollToElement(location.hash), 10);
         };
         window.addEventListener("hashchange", onHashChange);
         return () => {
@@ -425,9 +436,11 @@ export const App = () => {
                     </p>
                 </div>
             </div>
-            <div className="scroll-indicator">
-                <h1 className="text-center">▾</h1>
-            </div>
+            {!mainOffset && (
+                <div className="scroll-indicator">
+                    <h1 className="text-center">▾</h1>
+                </div>
+            )}
         </>
     );
 };
diff --git a/src/ConsoleSpinner.tsx b/src/ConsoleSpinner.tsx
index 4bbacf8..e190786 100644
--- a/src/ConsoleSpinner.tsx
+++ b/src/ConsoleSpinner.tsx
@@ -13,5 +13,5 @@ export const ConsoleSpinner = () => {
         return () => clearInterval(i);
     }, [current, setCurrent]);
 
-    return <span className="text-spinner">{chars[current]}</span>;
+    return <span className="font-mono">{chars[current]}</span>;
 };
-- 
2.51.2