feat: ✨ use FlexBox to properly arrange the sidebar layouts

www/static/banner.js

@@ -1,7 +1,7 @@
 
 const BANNER_TIME = 600 * 1000.0
-// const BANNER_ANIMATION = "opacity 0.8s linear, transform 0.1s linear"
-const BANNER_ANIMATION = "opacity 0.8s linear"
+const BANNER_ANIMATION = "opacity 0.8s linear, transform 1s linear"
+// const BANNER_ANIMATION = "opacity 0.8s linear"
 
 
 class BannerHandler {
@@ -73,7 +73,7 @@ class BannerHandler {
         const bannerPercentage = (bannerPercentageFrom + (bannerPercentageTo - bannerPercentageFrom) * this.currentPhase)
 
         const banner_top = (1-bannerPercentage) * bannerTranslateMax
-        this.bannerDOM.style.transform = "translateY(" + banner_top + 'px' + ")"
+        this.bannerDOM.style.transform = "translateZ(0.1px) translateY(" + banner_top + 'px)'
     }
 
     fadeOut() {

www/static/dergstyle.css

@@ -34,6 +34,12 @@ body {
 	--text_1: #FFFFFF;
 	--text_border: #A0A0A080;
 
+		--content-width: 	min(100vw, calc(20rem + 40vw));
+	  --content-total-margin: calc(calc(100vw - var(--content-width)) / 2);
+
+	  --content-padding: 	max(0.5rem, min(1rem, var(--content-total-margin)));
+	  --content-margin:   max(0px, calc(var(--content-total-margin) - 1rem));
+	
     color: var(--text_1);
     background: var(--bg_1);
     margin: 0px;
@@ -51,6 +57,17 @@ body {
 	}
 }
 
+@media only screen and (max-width: 1000px) {
+	#toc_container {
+		display: none !important;
+		visibility: hidden !important;
+	}
+	
+	#main_content_flexbox:before {
+		flex: 0.5 0 0 !important;
+	}
+}
+
 :link {
 	color: var(--highlight_1);
 	font-style: italic;
@@ -127,19 +144,31 @@ a:hover {
 	scroll-margin-top: 6rem;
 }
 
+#main_content_flexbox {
+  width: 100vw;
+	
+	display: flex;
+	justify-content: left;
+	align-items: flex-start;
+
+	padding-left: 1em;
+	padding-right: 1em;
+	
+	&:before {
+		content: '';
+		flex: 0.2 0 0;
+	}
+}
+
 #main_content_wrapper {
-	--content-width: 	min(100vw, calc(20rem + 40vw));
-	--content-total-margin: calc(calc(100vw - var(--content-width)) / 2);
+	/*padding: 0rem var(--content-padding) 1rem var(--content-padding);*/
+	
+	/*width: var(--content-width);*/
+  flex: 0 1 var(--content-width);
 
-	--content-padding: 	max(0.5rem, min(1rem, var(--content-total-margin)));
-	--content-margin:   max(0px, calc(var(--content-total-margin) - 1rem));
-
-	padding: 0rem var(--content-padding) 1rem var(--content-padding);
-	width: auto;
-
-
-	margin-left:  var(--content-margin);
-	margin-right: var(--content-margin);
+	/*margin-left:  calc(var(--content-margin));
+	//margin-right: var(--content-margin);*/
+	
 	margin-top: 0px;
 
 	min-height: 100%;

www/static/styles/post_navbar.css

@@ -15,6 +15,8 @@
         flex-direction: row;
         justify-content: left;
     
+        height: 2.3rem; 
+        
         list-style-type: none;
         padding: 0px;
 
@@ -30,6 +32,8 @@
 
     & > ._path {
         width: 100%;
+        height: 1.5rem;
+        
         font-style: italic;
         padding-left: 0.5rem;
     

www/static/styles/toc.css

@@ -5,11 +5,9 @@
   
   top: 0px;
   
-  width: calc(var(--content-margin) - 2em);
-  margin-left: 2em;
+  flex: 0.1 0 15em;
   
-  padding-top: 0.8em;
-  padding-right: 0.5em;
+  padding-right: 0.3em;
   
   padding-bottom: 0.5em;
   border-radius: 0 0em 0em 0.5em;
@@ -52,7 +50,7 @@
     list-style: none;
   }
   
-  & li {
+  & > li {
     border-radius: 0.2em;
     border-bottom: 1px solid transparent;
     

www/static/toc.js

@@ -182,7 +182,7 @@ class TocNavBarUpdater {
   trackingRebuildCallback() {
     this._removeNavbarElements();
 
-    this.navbar_dom = document.querySelector('.navbar ._path');
+    this.navbar_dom = document.querySelector('#main_navbar_path');
   }
 
   trackingUpdateCallback(element) {