From 743d26966bac06a114c46fb85e2ccf4c264e74ee Mon Sep 17 00:00:00 2001
From: alexanderdavide <alexeble1998@gmail.com>
Date: Sun, 13 Feb 2022 16:51:04 +0000
Subject: [PATCH] refactor: make header sticky
---
assets/scss/partials/components/_sidebar.scss | 14 ++++++++------
layouts/_default/baseof.html | 2 +-
assets/scss/partials/components/_portfolio.scss | 5 -----
layouts/partials/navbar.html | 2 +-
assets/scss/partials/layout/_header.scss | 7 ++++---
5 files changed, 14 insertions(+), 16 deletions(-)
diff --git a/assets/scss/partials/components/_portfolio.scss b/assets/scss/partials/components/_portfolio.scss
index ab87c02..a5cd95d 100644
--- a/assets/scss/partials/components/_portfolio.scss
+++ b/assets/scss/partials/components/_portfolio.scss
@@ -1,6 +1,5 @@
.portfolio {
position: relative;
- z-index: 0;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
@@ -15,7 +14,6 @@
border: t('border');
}
content: '';
- z-index: -1;
position: absolute;
top: 10%;
left: 10%;
@@ -47,7 +45,6 @@
display: block;
background-color: #fff;
position: relative;
- z-index: 1;
overflow: hidden;
&--right,
@@ -58,7 +55,6 @@
margin-right: auto;
margin-left: auto;
width: calc(100% - 64px);
- z-index: -1;
padding: 32px 32px 0px 32px;
max-width: inherit;
@@ -117,7 +113,6 @@
border-bottom: 0px;
width: 60%;
margin-top: -48px;
- z-index: 3;
}
}
diff --git a/assets/scss/partials/components/_sidebar.scss b/assets/scss/partials/components/_sidebar.scss
index 6a017c2..a17aeec 100644
--- a/assets/scss/partials/components/_sidebar.scss
+++ b/assets/scss/partials/components/_sidebar.scss
@@ -2,18 +2,20 @@
-webkit-background-size: cover;
background-size: cover;
background-color: var(--bg-color);
+ margin-top: 40px;
@include desktop_and_print {
- @include themed() {
- border-right: 1px solid t('primary-lighter');
- }
-
- z-index: 3;
- height: 100vh;
+ z-index: 2;
position: fixed;
+ height: 100%;
+ margin-top: 0;
width: $sidebar-width;
display: flex;
flex-direction: column;
+
+ @include themed() {
+ border-right: t('border');
+ }
}
@include widescreen {
diff --git a/assets/scss/partials/layout/_header.scss b/assets/scss/partials/layout/_header.scss
index 51d28dc..3a6520e 100644
--- a/assets/scss/partials/layout/_header.scss
+++ b/assets/scss/partials/layout/_header.scss
@@ -4,14 +4,15 @@
}
width: 100%;
position: fixed;
- right: 0;
- z-index: 3;
+ z-index: 1;
+ top: 0;
@include desktop {
+ position: sticky;
+
@include themed() {
border-bottom: t('border');
}
- width: $content-width;
}
@include print {
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index a6d7f98..4ae58fa 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -7,12 +7,12 @@
>
{{- partial "head.html" . -}}
<body class="body theme--light">
- <header class="header">{{ partial "navbar.html" . }}</header>
<div class="wrapper">
<aside class="wrapper__sidebar">
{{- partial "sidebar.html" . -}}
</aside>
<main class="wrapper__main">
+ <header class="header">{{ partial "navbar.html" . }}</header>
{{- block "main" . }}{{- end }}
</main>
</div>
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 1ae1dca..7734624 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -1,5 +1,5 @@
<div
- class="page-top {{ with .Site.Params.doNotLoadAnimations }}
+ class="{{ with .Site.Params.doNotLoadAnimations }}
.
{{ else }}
--
Gitblit v1.10.0