added alternative sidebar layout

This commit is contained in:
Gabriele Musco 2021-12-16 12:37:20 +01:00
parent d817042213
commit b0d60e3bf5
No known key found for this signature in database
GPG Key ID: 0587A5D65B5DC99E
5 changed files with 181 additions and 58 deletions

View File

@ -113,6 +113,11 @@ summaryLength = 70 # number of words for article summaries
strokeColor = "#4f4f4f" strokeColor = "#4f4f4f"
accentColor = "#db5793" accentColor = "#db5793"
# alternative sidebar layout
enableSidebarLayout = false
sidebarBackgroundColor = "#34363b"
sidebarForegroundColor = "white"
# redirect to baseURL if current URL host doesn't match # redirect to baseURL if current URL host doesn't match
# useful if deploying in gitlab pages with custom domain and don't want # useful if deploying in gitlab pages with custom domain and don't want
# the username.gitlab.io/website url to persist # the username.gitlab.io/website url to persist

View File

@ -21,12 +21,6 @@ $mono_font_mult: {{ .Site.Params.monoFontSizeMultiplier | default 1.0 }};
color: $fg_color; color: $fg_color;
} }
a {
transition-property: color, border-color;
transition-duration: .15s;
transition-timing-function: ease-in-out;
}
body, html { body, html {
font-family: "Symbols Nerd Font", $main_font, monospace; font-family: "Symbols Nerd Font", $main_font, monospace;
font-size: $base_font_size * $main_font_mult; font-size: $base_font_size * $main_font_mult;
@ -209,7 +203,6 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;}
} }
.nerdlink { .nerdlink {
transition: all .15s ease-in-out;
@extend .nerd; @extend .nerd;
color: $fg_color; color: $fg_color;
border-bottom: none; border-bottom: none;
@ -220,7 +213,6 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;}
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.pseudofont { .pseudofont {
transition: all .15s ease-in-out;
fill: $fg_color; fill: $fg_color;
display: inline; display: inline;
position: relative; position: relative;
@ -380,6 +372,7 @@ ul.list {
#searchbar { #searchbar {
@extend a; @extend a;
width: 100%; width: 100%;
min-width: 150px;
display: inline-block; display: inline-block;
background-color: transparent; background-color: transparent;
border-top: none; border-top: none;
@ -504,6 +497,8 @@ header {
@include limitWidth; @include limitWidth;
padding: 15px; padding: 15px;
margin-bottom: $content_spacing; margin-bottom: $content_spacing;
.rightOfLogo {
width: 100%;
.titleAndHamburger { .titleAndHamburger {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -511,6 +506,7 @@ header {
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
} }
}
nav { nav {
font-size: .9em; font-size: .9em;
ul { ul {
@ -548,7 +544,10 @@ a.discreteTag {
} }
input { input {
{{ if or (site.Params.discreteCards | default false) (eq (site.Params.navtype | default "standard") "circles") }} {{ if or
(site.Params.discreteCards | default false)
(eq (site.Params.navtype | default "standard") "circles")
}}
@include buttonLikeLink; @include buttonLikeLink;
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
background-color: $highlight_bg_color; background-color: $highlight_bg_color;
@ -559,7 +558,6 @@ input {
padding: 12px; padding: 12px;
color: $fg_color; color: $fg_color;
border: 2px solid transparent; border: 2px solid transparent;
transition: .15s border ease-in-out;
&:focus, &:active { &:focus, &:active {
border: 2px solid $accent_color; border: 2px solid $accent_color;
outline: none; outline: none;
@ -674,7 +672,10 @@ header {
} }
{{ end }} {{ end }}
{{ if (and (.Site.Params.enableJumbotron | default false) .Site.Data.jumbotron) }} {{ if and
(.Site.Params.enableJumbotron | default false)
.Site.Data.jumbotron
}}
{{ {{
$jumbo_fullscreen := (or $jumbo_fullscreen := (or
(.Site.Data.jumbotron.fullscreen | default false) (.Site.Data.jumbotron.fullscreen | default false)
@ -727,7 +728,10 @@ header.jumbotronContainer {
padding-bottom: 0; padding-bottom: 0;
padding-top: 0; padding-top: 0;
.jumbotron { display: flex; } .jumbotron { display: flex; }
{{ if and .Site.Data.jumbotron.background (not .Site.Data.jumbotron.backgroundVideo) }} {{ if and
.Site.Data.jumbotron.background
(not .Site.Data.jumbotron.backgroundVideo)
}}
background: background:
linear-gradient( linear-gradient(
transparentize($bg_color, 0.2), transparentize($bg_color, 0.2),
@ -827,7 +831,9 @@ header.jumbotronContainer {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
align-content: center; align-content: center;
{{ $jumbotronImagePosition := (.Site.Data.jumbotron.imagePosition | default "left") }} {{ $jumbotronImagePosition := (
.Site.Data.jumbotron.imagePosition | default "left"
) }}
{{ if (eq $jumbotronImagePosition "left") }} {{ if (eq $jumbotronImagePosition "left") }}
flex-direction: row; flex-direction: row;
{{ else if (eq $jumbotronImagePosition "right") }} {{ else if (eq $jumbotronImagePosition "right") }}
@ -903,3 +909,97 @@ header.jumbotronContainer {
} }
} }
{{ end }} {{ end }}
{{ if .Site.Params.enableSidebarLayout | default false }}
$sidebar_width: 350px;
$sidebar_bg_color: {{
.Site.Params.sidebarBackgroundColor | default "$highlight_bg_color"
}};
$sidebar_fg_color: {{
.Site.Params.sidebarForegroundColor | default "$fg_color"
}};
header {
#sidebar_nav {
display: none;
}
#wide_nav {
display: block;
}
}
@media only screen and (min-width: 950px) {
html{{if .Site.Params.enableJumbotron}}:not(.home){{end}} {
overflow-y: hidden;
#baseContainer {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
max-height: 100vh;
header {
margin-left: unset; margin-right: unset;
background-color: $sidebar_bg_color;
max-width: $sidebar_width;
min-width: $sidebar_width;
height: 100vh;
display: block;
overflow: auto;
margin-bottom: 0;
padding: 0 15px;
> *:last-child, > *:first-child {
padding-bottom: 15px;
padding-top: 15px;
}
.rightOfLogo {
align-self: center;
}
#sidebar_nav {
display: block;
margin: 12px 0;
width: 100%;
nav {
font-size: 1.1em;
ul#main-nav {
flex-direction: column;
li {
border-right: none;
a {
padding: 6px;
display: block;
}
}
}
}
}
#wide_nav {
display: none;
}
}
#contentContainer {
flex-grow: 1;
overflow-y: auto;
}
}
}
}
{{ end }}
// transitions at the end so that loading css doens't cause animations
a {
transition-property: color, border-color;
transition-duration: .15s;
transition-timing-function: ease-in-out;
}
.nerdlink {
&, .pseudofond {
transition: all .15s ease-in-out;
}
}
input {
transition: .15s border ease-in-out;
}

View File

@ -1,14 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html class="{{ if .IsHome }}home{{ end }}">
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
<body> <body>
<div id="baseContainer">
{{- partial "header.html" . -}} {{- partial "header.html" . -}}
<div id="contentContainer">
<div id="content"> <div id="content">
<main> <main>
{{- block "main" . }}{{- end }} {{- block "main" . }}{{- end }}
</main> </main>
{{- partial "footer.html" . -}} {{- partial "footer.html" . -}}
</div> </div>
</div>
</div>
{{- partial "plausible.html" . -}} {{- partial "plausible.html" . -}}
{{- partial "inject/body.html" . -}} {{- partial "inject/body.html" . -}}
</body> </body>

View File

@ -3,45 +3,18 @@
<div class="titleAndSearchContainer"> <div class="titleAndSearchContainer">
<div id="titleContainer"> <div id="titleContainer">
<img src='{{ .Site.Params.Logo | default "/logo.svg" }}' /> <img src='{{ .Site.Params.Logo | default "/logo.svg" }}' />
<div style="width: 100%"> <div class="rightOfLogo">
<div class="titleAndHamburger"> <div class="titleAndHamburger">
<h1>{{ .Site.Title | default "Ficurinia" }}</h1> <h1>{{ .Site.Title | default "Ficurinia" }}</h1>
{{ if .Site.Params.mobileHamburgerNav | default false }} {{ if (.Site.Params.mobileHamburgerNav | default false) }}
<label id="hamburger-menu" for="main-nav-toggler"> <label id="hamburger-menu" for="main-nav-toggler">
&#xf85b; &#xf85b;
</label> </label>
{{ end }} {{ end }}
</div> </div>
<nav> <div id="wide_nav">
{{ if .Site.Params.mobileHamburgerNav | default false }} {{- partial "header_navigation.html" . -}}
<input type="checkbox" id="main-nav-toggler" /> </div>
{{ end }}
<ul id="main-nav">
<li><a href="/">{{ i18n "home" }}</a></li>
{{ if (.Site.Params.showPostsLink | default true) }}
<li><a href="/posts">{{ i18n "posts" }}</a></li>
{{ end }}
{{ range site.Params.extraContentDirs }}
<li><a href="/{{ . }}">{{ . | humanize }}</a></li>
{{ end }}
{{ $pagesDir := .Site.Params.Pages | default (slice "pages") }}
{{ $pagesList := where .Site.RegularPages "Section" "in" $pagesDir }}
{{ range $pagesList }}
<li><a href="{{ .Permalink }}">
{{ or .Params.Button .Title }}
</a></li>
{{ end }}
{{ range .Site.Menus.main }}
<li><a href="{{ .URL | safeURL }}">{{ .Name }}</a></li>
{{ end }}
{{ if (.Site.Params.showTags | default true) }}
<li><a href="/tags">{{ i18n "tags" }}</a></li>
{{ end }}
{{ if and (.Site.Params.searchMenuLink | default false) (.Site.Params.enableSearch | default true) }}
<li><a href="/search">{{ i18n "search" }}</a></li>
{{ end }}
</ul>
</nav>
</div> </div>
</div> </div>
{{ if and (.Site.Params.searchbarEverywhere | default true) (and (.Site.Params.enableSearch | default true) (not (eq .Title "Search"))) }} {{ if and (.Site.Params.searchbarEverywhere | default true) (and (.Site.Params.enableSearch | default true) (not (eq .Title "Search"))) }}
@ -59,6 +32,17 @@
{{- partial "iconlink" . -}} {{- partial "iconlink" . -}}
{{ end }} {{ end }}
</div> </div>
{{ if and
(.Site.Params.enableSidebarLayout | default false)
(or
(not (.Site.Params.enableJumbotron | default false))
(not .IsHome)
)
}}
<div id="sidebar_nav">
{{- partial "header_navigation.html" . -}}
</div>
{{ end }}
{{- partial "inject/header-after.html" . -}} {{- partial "inject/header-after.html" . -}}
{{- partial "jumbotron.html" . -}} {{- partial "jumbotron.html" . -}}
</header> </header>

View File

@ -0,0 +1,30 @@
<nav>
{{ if (.Site.Params.mobileHamburgerNav | default false) }}
<input type="checkbox" id="main-nav-toggler" />
{{ end }}
<ul id="main-nav">
<li><a href="/">{{ i18n "home" }}</a></li>
{{ if (.Site.Params.showPostsLink | default true) }}
<li><a href="/posts">{{ i18n "posts" }}</a></li>
{{ end }}
{{ range site.Params.extraContentDirs }}
<li><a href="/{{ . }}">{{ . | humanize }}</a></li>
{{ end }}
{{ $pagesDir := .Site.Params.Pages | default (slice "pages") }}
{{ $pagesList := where .Site.RegularPages "Section" "in" $pagesDir }}
{{ range $pagesList }}
<li><a href="{{ .Permalink }}">
{{ or .Params.Button .Title }}
</a></li>
{{ end }}
{{ range .Site.Menus.main }}
<li><a href="{{ .URL | safeURL }}">{{ .Name }}</a></li>
{{ end }}
{{ if (.Site.Params.showTags | default true) }}
<li><a href="/tags">{{ i18n "tags" }}</a></li>
{{ end }}
{{ if and (.Site.Params.searchMenuLink | default false) (.Site.Params.enableSearch | default true) }}
<li><a href="/search">{{ i18n "search" }}</a></li>
{{ end }}
</ul>
</nav>