From 2d2576679b3c09edf37a98cfef2bf26c6987ca69 Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Wed, 28 Apr 2021 12:16:54 +0000
Subject: [PATCH] Initial Tweak for Adjustable Sidebars

---
 assets/css/style.rtl.css   |   34 +++++++++++++---
 assets/css/style.css       |   32 +++++++++++++---
 layouts/partials/head.html |    3 +
 3 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 08a33a3..435773f 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -17,6 +17,13 @@
     --link-color: #0366d7;
     --thumbnail-height: 15em;
     scroll-padding-top: 100px;
+    --body-max-width: 1920px;
+    --content-ratio: {{ .Site.Params.contentratio | default 0.6 }};
+    --sidebar-ratio: calc(1 - var(--content-ratio));
+    --content-max-width: calc(var(--body-max-width) * var(--content-ratio));
+    --sidebar-max-width: calc(var(--body-max-width) - var(--content-max-width));
+    --content-width: calc(var(--content-ratio) * 100%);
+    --sidebar-width: calc(var(--sidebar-ratio) * 100%);
 }
 
 html[data-theme='dark'] {
@@ -181,12 +188,12 @@
 .content {
     height: auto;
     float: right;
-    width: 60%;
+    width: var(--content-width);
     margin-top: 60px;
 }
 
 .page-top {
-    width: 60%;
+    width: var(--content-width);
     position: fixed;
     right: 0;
     z-index: 3;
@@ -258,7 +265,7 @@
 }
 
 .sidebar {
-    width: 40%;
+    width: var(--sidebar-width);
     -webkit-background-size: cover;
     background-size: cover;
     background-color: var(--bg-color);
@@ -271,6 +278,7 @@
     display: flex;
     flex-direction: column;
     min-height: 100%;
+    float: left;
 }
 
 .sidebar .logo-title {
@@ -1071,11 +1079,23 @@
 @media (min-width: 1921px){
     .content {
         padding-right: 25%;
-        width: 35%;
+        width: var(--content-max-width);
     }
     .sidebar {
-        padding-left: 15%;
-        width: 25%;
+        width: var(--sidebar-max-width);
+        left: 50%;
+        margin-left: calc( -1 * var(--body-max-width)/2);
+    }
+
+    .page-top {
+        width: var(--content-max-width);
+        position: fixed;
+        left: 50%;
+        margin-left: calc(-1* (var(--body-max-width)/2 - var(--sidebar-max-width) ));
+        z-index: 3;
+        background-color: var(--bg-color);
+        height: 60px;
+        border-bottom: 1px solid var(--border-color);
     }
 }
 
diff --git a/assets/css/style.rtl.css b/assets/css/style.rtl.css
index 904d9e4..64b3513 100644
--- a/assets/css/style.rtl.css
+++ b/assets/css/style.rtl.css
@@ -17,6 +17,13 @@
     --link-color: #0366d7;
     --thumbnail-height: 15em;
     scroll-padding-top: 100px;
+    --body-max-width: 1920px;
+    --content-ratio: {{ .Site.Params.contentratio | default 0.6 }};
+    --sidebar-ratio: calc(1 - var(--content-ratio));
+    --content-max-width: calc(var(--body-max-width) * var(--content-ratio));
+    --sidebar-max-width: calc(var(--body-max-width) - var(--content-max-width));
+    --content-width: calc(var(--content-ratio) * 100%);
+    --sidebar-width: calc(var(--sidebar-ratio) * 100%);
 }
 
 html[data-theme='dark'] {
@@ -181,12 +188,12 @@
 .content {
     height: auto;
     float: left;
-    width: 60%;
+    width: var(--content-width);
     margin-top: 60px;
 }
 
 .page-top {
-    width: 60%;
+    width: var(--content-width);
     position: fixed;
     left: 0;
     z-index: 3;
@@ -258,13 +265,14 @@
 }
 
 .sidebar {
-    width: 40%;
+    width: var(--sidebar-width);
     -webkit-background-size: cover;
     background-size: cover;
     background-color: var(--bg-color);
     height: 100%;
     top: 0;
     right: 0;
+    float: left;
     position: fixed;
     z-index: 4;
     border-left: 1px solid var(--border-color);
@@ -1070,12 +1078,24 @@
 
 @media (min-width: 1921px){
     .content {
-        padding-left: 25%;
-        width: 35%;
+        padding-right: 25%;
+        width: var(--content-max-width);
     }
     .sidebar {
-        padding-right: 15%;
-        width: 25%;
+        width: var(--sidebar-max-width);
+        left: 50%;
+        margin-left: calc( -1 * var(--body-max-width)/2);
+    }
+
+    .page-top {
+        width: var(--content-max-width);
+        position: fixed;
+        left: 50%;
+        margin-left: calc(-1* (var(--body-max-width)/2 - var(--sidebar-max-width) ));
+        z-index: 3;
+        background-color: var(--bg-color);
+        height: 60px;
+        border-bottom: 1px solid var(--border-color);
     }
 }
 
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 4e1c9e1..d19b5fc 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -20,7 +20,8 @@
           crossorigin="anonymous"
           type="text/css">
     {{else}}
-    {{ $style := resources.Get "css/style.css" | resources.Minify | resources.Fingerprint }}
+    {{ $templateStyle := resources.Get "css/style.css" }}
+    {{ $style := $templateStyle  | resources.ExecuteAsTemplate "css/main.css" . | resources.Minify | resources.Fingerprint }}
     <link rel="stylesheet"
         href="{{ $style.RelPermalink }}"
         integrity="{{ $style.Data.Integrity }}"

--
Gitblit v1.10.0