Make sidebar sticky

Author: Pioooooo

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>

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>

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,13 @@ 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: sticky;
+    top: 1em;
+    max-height: calc(100vh - 2em);
+    overflow-y: auto;
   }
 
   .contentleft ul {
@@ -830,20 +840,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,15 +867,20 @@ body:not(#phpbb) .time {
 
 @media (max-width: 1099px) {
   header {
-    position: relative;
-    z-index: 0;
+    position: sticky;
+    z-index: 10;
+    top: 0;
+    background: var(--bg);
+    border-bottom: 1px solid var(--border);
+    margin-bottom: -1px;
   }
 
   .fade {
     position: relative;
     background: linear-gradient(to left, #d8efff, rgba(216, 239, 255, 0) 5em);
     z-index: initial;
     pointer-events: none;
+    display: flex;
   }
 
   .logobig {