Add customize able sidebar (#196)

Closes #180
lxndrblz · May 7, 2021 · b6e1660 · b6e1660
1 parent 67a860d
commit b6e1660
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -152,6 +152,13 @@ indexDateFormat = "Mon, Jan 2, 2006"
 listDateFormat = "Jan 2"
 ```
 
+### Changing the sidebar/content ratio
+By default, the content fills up 60% of the screen width on devices with a full HD resolution. If you want to change the ratio, adjust the `contentratio` variable. Let's, for example, set the content ratio to 70%:
+```toml
+[params]
+contentratio = 0.7
+```
+
 ### Read-more Links
 You can enable read-more links for truncated posts by setting the `readMore = true`. The length of the preview is controlled by Hugo's `summarylength`. Read-more links are disabled by default.
 ```toml

diff --git 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 @@ a:active {
 .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 @@ a:active {
 }
 
 .sidebar {
-    width: 40%;
+    width: var(--sidebar-width);
     -webkit-background-size: cover;
     background-size: cover;
     background-color: var(--bg-color);
@@ -271,6 +278,7 @@ a:active {
     display: flex;
     flex-direction: column;
     min-height: 100%;
+    float: left;
 }
 
 .sidebar .logo-title {
@@ -1081,17 +1089,22 @@ print {
 }
 
 @media (min-width: 1921px){
+    .sidebar {
+        padding-left: 17%;
+        width: calc(var(--sidebar-width) - 20%);
+        padding-right: 3%;
+    }
     .content {
-        padding-right: 25%;
-        width: 35%;
+        margin-left: calc(15% + var(--sidebar-width));
+        width: calc(var(--content-width) - 20%);
+        padding-right: 20%;
     }
-    .sidebar {
-        padding-left: 15%;
-        width: 25%;
+    .page-top{
+        position: fixed;
+        width: calc(var(--content-width));
     }
 }
 
-
 /* (CONTACT) FORM */
 
 .contact-form {

diff --git 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 @@ a:active {
 .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,7 +265,7 @@ a:active {
 }
 
 .sidebar {
-    width: 40%;
+    width: var(--sidebar-width);
     -webkit-background-size: cover;
     background-size: cover;
     background-color: var(--bg-color);
@@ -1081,13 +1088,19 @@ print {
 }
 
 @media (min-width: 1921px){
+    .sidebar {
+        padding-right: 17%;
+        width: calc(var(--sidebar-width) - 20%);
+        padding-left: 3%;
+    }
     .content {
-        padding-left: 25%;
-        width: 35%;
+        margin-right: calc(15% + var(--sidebar-width));
+        width: calc(var(--content-width) - 20%);
+        padding-left: 20%;
     }
-    .sidebar {
-        padding-right: 15%;
-        width: 25%;
+    .page-top{
+        position: fixed;
+        width: calc(var(--content-width));
     }
 }
 
@@ -1160,4 +1173,4 @@ print {
     border: 1px solid var(--form-button-hover-border-color);
 }
 
-/* (CONTACT) FORM END */
+/* (CONTACT) FORM END */
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -13,14 +13,16 @@
     <!-- CSS -->
 
     {{ if eq .Site.Language.LanguageDirection "rtl"}}
-    {{ $style := resources.Get "css/style.rtl.css" | resources.Minify | resources.Fingerprint }}
+    {{ $templateStyle := resources.Get "css/style.rtl.css" }}
+    {{ $style := $templateStyle  | resources.ExecuteAsTemplate "css/main.css" . | resources.Minify | resources.Fingerprint }}
     <link rel="stylesheet"
           href="{{ $style.RelPermalink }}"
           integrity="{{ $style.Data.Integrity }}"
           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 }}"