made expanded view scroll like mobile with sticky less button reset scroll on collapse

assets/css/style.css

@@ -200,9 +200,7 @@ body {
 }
 
 .card .details {
-    flex: 1;
+    padding: 0 50px 10px 50px;
-    overflow-y: auto;
-    padding: 0 50px 50px 50px;
 
     opacity: 0;
     visibility: hidden;
@@ -213,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;
@@ -268,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;
 }
@@ -406,6 +420,13 @@ html:not(.js) .requires-js {
     display: none;
 }
 
+@media only screen and (max-width: 760px) {
+    #details:target + .card-container .back-main > ul,
+    #details:target + .card-container .back-main > hr {
+        display: none;
+    }
+}
+
 @media only screen and (max-width: 600px) {
     :root {
         --max-height: calc(100dvh - 110px);
@@ -447,12 +468,7 @@ 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;
     }
     #details:target + .card-container .back-main {
@@ -462,10 +478,6 @@ html:not(.js) .requires-js {
         justify-content: flex-start;
         padding: 15px 25px 0 25px;
     }
-    #details:target + .card-container .back-main > ul,
-    #details:target + .card-container .back-main > hr {
-        display: none;
-    }
     #details:target + .card-container .interests {
         grid-template-columns: 1fr;
         row-gap: 4px;
@@ -489,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) {

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")));