From 23e51e8093e3ab72959edaede94278a883a4a4ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20M=C3=BCller?= <elias@elias-mueller.com>
Date: Sun, 18 Oct 2026 14:02:22 +0200
Subject: [PATCH] made expanded view scroll like mobile with sticky less button
 reset scroll on collapse

---
 assets/css/style.css | 36 ++++++++++++++++--------------------
 assets/js/script.js  |  4 ++++
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 1b4dda3..708ca31 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -200,10 +200,7 @@ body {
 }
 
 .card .details {
-    flex: 1;
-    overflow-y: auto;
     padding: 0 50px 10px 50px;
-    margin-bottom: 40px;
 
     opacity: 0;
     visibility: hidden;
@@ -214,6 +211,10 @@ body {
     height: var(--height-main-expanded);
 }
 
+#details:target + .card-container .back {
+    overflow-y: auto;
+}
+
 #details:target + .card-container .details {
     opacity: 1;
     visibility: visible;
@@ -269,6 +270,18 @@ body {
     visibility: visible;
 }
 
+#details:target + .card-container .details-close {
+    position: sticky;
+    order: 1;
+    left: auto;
+    transform: none;
+    flex: none;
+    justify-content: center;
+    margin-top: auto;
+    padding: 18px 0 15px 0;
+    background: linear-gradient(to bottom, rgba(248, 248, 248, 0), rgb(248, 248, 248) 45%);
+}
+
 .card .back hr {
     margin: 0 20px;
 }
@@ -455,14 +468,8 @@ html:not(.js) .requires-js {
         padding-bottom: 30px;
         box-sizing: border-box;
     }
-    #details:target + .card-container .back {
-        overflow-y: auto;
-    }
     #details:target + .card-container .details {
-        flex: none;
-        overflow: visible;
         padding: 20px 25px 5px 25px;
-        margin-bottom: 0;
     }
     #details:target + .card-container .back-main {
         flex: none;
@@ -494,17 +501,6 @@ html:not(.js) .requires-js {
         overflow-wrap: break-word;
         max-width: 100%;
     }
-    #details:target + .card-container .details-close {
-        position: sticky;
-        order: 1;
-        left: auto;
-        transform: none;
-        flex: none;
-        justify-content: center;
-        margin-top: auto;
-        padding: 18px 0 15px 0;
-        background: linear-gradient(to bottom, rgba(248, 248, 248, 0), rgb(248, 248, 248) 45%);
-    }
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/assets/js/script.js b/assets/js/script.js
index d9e43f6..96d2686 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -22,4 +22,8 @@ var now = new Date();
 document.getElementById("age").textContent = now.getFullYear() - 2003 - (now.getMonth() < 8 ? 1 : 0);
 document.getElementById("linux-years").textContent = now.getFullYear() - 2017;
 
+window.addEventListener("hashchange", () => {
+    if(location.hash !== "#details") document.querySelector(".card .back").scrollTop = 0;
+});
+
 requestAnimationFrame(() => requestAnimationFrame(() => document.documentElement.classList.remove("preload")));