From 6fee697fd18c4476417a79d3b832ddfa9acb6c45 Mon Sep 17 00:00:00 2001
From: Pioooooo <pioooooo.sun@gmail.com>
Date: Wed, 10 Dec 2025 11:21:39 +0800
Subject: [PATCH] Make sidebar sticky

---
 www/_layouts/default.html |  2 +-
 www/_layouts/post.html    |  2 +-
 www/css.css               | 49 +++++++++++++++++++++------------------
 3 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/www/_layouts/default.html b/www/_layouts/default.html
index 2a5b33f8b..02534dad8 100644
--- a/www/_layouts/default.html
+++ b/www/_layouts/default.html
@@ -36,8 +36,8 @@
     <article>
     <header>
       <div class="fade">
-        <menu class="contentleft">
         <div class="title"><h1><a href="/"><img class="logobig" alt="DDraceNetwork" src="/ddnet2.svg"/><img class="logosmall" alt="DDraceNetwork" src="/ddnet.svg"/></a></h1></div>
+        <menu class="contentleft">
           <ul class="big">
             <li><a href="/status/">Status</a></li>
             <li><a href="/ranks/">Ranks</a></li>
diff --git a/www/_layouts/post.html b/www/_layouts/post.html
index 213955333..a6daa9f01 100644
--- a/www/_layouts/post.html
+++ b/www/_layouts/post.html
@@ -38,8 +38,8 @@
     <article>
     <header>
       <div class="fade">
-        <menu class="contentleft">
         <div class="title"><h1><a href="/"><img class="logobig" alt="DDraceNetwork" src="/ddnet2.svg"/><img class="logosmall" alt="DDraceNetwork" src="/ddnet.svg"/></a><div class="fade"></div></h1></div>
+        <menu class="contentleft">
           <ul class="big">
             <li><a href="/status/">Status</a></li>
             <li><a href="/ranks/">Ranks</a></li>
diff --git a/www/css.css b/www/css.css
index 04067b2ac..84c0cd398 100644
--- a/www/css.css
+++ b/www/css.css
@@ -72,9 +72,6 @@ body:not(#phpbb) .block {
 
 .logobig {
   max-width: 16.8em;
-  position: absolute;
-  top: -15.2em;
-  left: -0.5em;
 }
 
 .logosmall {
@@ -740,13 +737,25 @@ body:not(#phpbb) .time {
 
 @media (min-width: 1100px) {
   article {
+    display: flex;
     margin: 0 auto;
     max-width: 99em;
     padding-top: 1em;
+    min-height: 100vh;
+    width: 100%;
+  }
+
+  header {
+    max-width: 20em;
+    flex-shrink: 0;
+    height: auto;
+  }
+
+  .fade {
+    height: 100%;
   }
 
   section {
-    margin: 0 0 0 20em;
     max-width: 80em;
   }
 
@@ -766,8 +775,6 @@ body:not(#phpbb) .time {
 
   menu {
     max-width: 20em;
-    display: inline;
-    float: left;
   }
 
   .contentleft {
@@ -810,10 +817,14 @@ body:not(#phpbb) .time {
     padding: 2px 10px;
     text-align: right;
     width: 18.6em;
-    top: 18em;
     margin-left: 0em;
     border-right: 3px solid #ffd246;
     transition-property: border-right-color;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 1em;
+    max-height: calc(100vh - 2em);
+    overflow-y: auto;
   }
 
   .contentleft ul {
@@ -830,20 +841,6 @@ body:not(#phpbb) .time {
     display: none;
   }
 
-  .title {
-    position: absolute;
-  }
-
-  .contentleft {
-    position: absolute;
-  }
-
-  .contentright {
-    position: absolute;
-    left: 39em;
-    margin-top: -7em;
-  }
-
   .startvideo {
     float: left;
     width: 70%;
@@ -871,8 +868,13 @@ body:not(#phpbb) .time {
 
 @media (max-width: 1099px) {
   header {
-    position: relative;
-    z-index: 0;
+    position: -webkit-sticky;
+    position: sticky;
+    z-index: 10;
+    top: 0;
+    background: var(--bg);
+    border-bottom: 1px solid var(--border);
+    margin-bottom: -1px;
   }
 
   .fade {
@@ -880,6 +882,7 @@ body:not(#phpbb) .time {
     background: linear-gradient(to left, #d8efff, rgba(216, 239, 255, 0) 5em);
     z-index: initial;
     pointer-events: none;
+    display: flex;
   }
 
   .logobig {