From b6e1660d84612054d7141c588818319c404912c2 Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Fri, 07 May 2021 20:40:32 +0000
Subject: [PATCH] Add customize able sidebar (#196)
---
assets/css/style.rtl.css | 33 +++++++++++++++++++++++----------
1 files changed, 23 insertions(+), 10 deletions(-)
diff --git a/assets/css/style.rtl.css b/assets/css/style.rtl.css
index 4283169..5e0bfab 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,7 +265,7 @@
}
.sidebar {
- width: 40%;
+ width: var(--sidebar-width);
-webkit-background-size: cover;
background-size: cover;
background-color: var(--bg-color);
@@ -1081,13 +1088,19 @@
}
@media (min-width: 1921px){
- .content {
- padding-left: 25%;
- width: 35%;
- }
.sidebar {
- padding-right: 15%;
- width: 25%;
+ padding-right: 17%;
+ width: calc(var(--sidebar-width) - 20%);
+ padding-left: 3%;
+ }
+ .content {
+ margin-right: calc(15% + var(--sidebar-width));
+ width: calc(var(--content-width) - 20%);
+ padding-left: 20%;
+ }
+ .page-top{
+ position: fixed;
+ width: calc(var(--content-width));
}
}
@@ -1160,4 +1173,4 @@
border: 1px solid var(--form-button-hover-border-color);
}
-/* (CONTACT) FORM END */
+/* (CONTACT) FORM END */
\ No newline at end of file
--
Gitblit v1.10.0