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.css | 33 +++++++++++++++++++++++----------
1 files changed, 23 insertions(+), 10 deletions(-)
diff --git a/assets/css/style.css b/assets/css/style.css
index c013704..8b4c215 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 {
@@ -1081,17 +1089,22 @@
}
@media (min-width: 1921px){
- .content {
- padding-right: 25%;
- width: 35%;
- }
.sidebar {
- padding-left: 15%;
- width: 25%;
+ padding-left: 17%;
+ width: calc(var(--sidebar-width) - 20%);
+ padding-right: 3%;
+ }
+ .content {
+ margin-left: calc(15% + var(--sidebar-width));
+ width: calc(var(--content-width) - 20%);
+ padding-right: 20%;
+ }
+ .page-top{
+ position: fixed;
+ width: calc(var(--content-width));
}
}
-
/* (CONTACT) FORM */
.contact-form {
--
Gitblit v1.10.0