added alternative sidebar layout
This commit is contained in:
Gabriele Musco
parent
d817042213
commit
b0d60e3bf5
|
|
@ -113,6 +113,11 @@ summaryLength = 70 # number of words for article summaries
|
|||
strokeColor = "#4f4f4f"
|
||||
accentColor = "#db5793"
|
||||
|
||||
# alternative sidebar layout
|
||||
enableSidebarLayout = false
|
||||
sidebarBackgroundColor = "#34363b"
|
||||
sidebarForegroundColor = "white"
|
||||
|
||||
# redirect to baseURL if current URL host doesn't match
|
||||
# useful if deploying in gitlab pages with custom domain and don't want
|
||||
# the username.gitlab.io/website url to persist
|
||||
|
|
|
|||
|
|
@ -21,12 +21,6 @@ $mono_font_mult: {{ .Site.Params.monoFontSizeMultiplier | default 1.0 }};
|
|||
color: $fg_color;
|
||||
}
|
||||
|
||||
a {
|
||||
transition-property: color, border-color;
|
||||
transition-duration: .15s;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
body, html {
|
||||
font-family: "Symbols Nerd Font", $main_font, monospace;
|
||||
font-size: $base_font_size * $main_font_mult;
|
||||
|
|
@ -209,7 +203,6 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;}
|
|||
}
|
||||
|
||||
.nerdlink {
|
||||
transition: all .15s ease-in-out;
|
||||
@extend .nerd;
|
||||
color: $fg_color;
|
||||
border-bottom: none;
|
||||
|
|
@ -220,7 +213,6 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;}
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
.pseudofont {
|
||||
transition: all .15s ease-in-out;
|
||||
fill: $fg_color;
|
||||
display: inline;
|
||||
position: relative;
|
||||
|
|
@ -380,6 +372,7 @@ ul.list {
|
|||
#searchbar {
|
||||
@extend a;
|
||||
width: 100%;
|
||||
min-width: 150px;
|
||||
display: inline-block;
|
||||
background-color: transparent;
|
||||
border-top: none;
|
||||
|
|
@ -504,12 +497,15 @@ header {
|
|||
@include limitWidth;
|
||||
padding: 15px;
|
||||
margin-bottom: $content_spacing;
|
||||
.titleAndHamburger {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
.rightOfLogo {
|
||||
width: 100%;
|
||||
.titleAndHamburger {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
nav {
|
||||
font-size: .9em;
|
||||
|
|
@ -548,7 +544,10 @@ a.discreteTag {
|
|||
}
|
||||
|
||||
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;
|
||||
&:hover, &:focus, &:active {
|
||||
background-color: $highlight_bg_color;
|
||||
|
|
@ -559,7 +558,6 @@ input {
|
|||
padding: 12px;
|
||||
color: $fg_color;
|
||||
border: 2px solid transparent;
|
||||
transition: .15s border ease-in-out;
|
||||
&:focus, &:active {
|
||||
border: 2px solid $accent_color;
|
||||
outline: none;
|
||||
|
|
@ -674,7 +672,10 @@ header {
|
|||
}
|
||||
{{ end }}
|
||||
|
||||
{{ if (and (.Site.Params.enableJumbotron | default false) .Site.Data.jumbotron) }}
|
||||
{{ if and
|
||||
(.Site.Params.enableJumbotron | default false)
|
||||
.Site.Data.jumbotron
|
||||
}}
|
||||
{{
|
||||
$jumbo_fullscreen := (or
|
||||
(.Site.Data.jumbotron.fullscreen | default false)
|
||||
|
|
@ -727,7 +728,10 @@ header.jumbotronContainer {
|
|||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
.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:
|
||||
linear-gradient(
|
||||
transparentize($bg_color, 0.2),
|
||||
|
|
@ -827,7 +831,9 @@ header.jumbotronContainer {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
{{ $jumbotronImagePosition := (.Site.Data.jumbotron.imagePosition | default "left") }}
|
||||
{{ $jumbotronImagePosition := (
|
||||
.Site.Data.jumbotron.imagePosition | default "left"
|
||||
) }}
|
||||
{{ if (eq $jumbotronImagePosition "left") }}
|
||||
flex-direction: row;
|
||||
{{ else if (eq $jumbotronImagePosition "right") }}
|
||||
|
|
@ -903,3 +909,97 @@ header.jumbotronContainer {
|
|||
}
|
||||
}
|
||||
{{ 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html class="{{ if .IsHome }}home{{ end }}">
|
||||
{{- partial "head.html" . -}}
|
||||
<body>
|
||||
{{- partial "header.html" . -}}
|
||||
<div id="content">
|
||||
<main>
|
||||
{{- block "main" . }}{{- end }}
|
||||
</main>
|
||||
{{- partial "footer.html" . -}}
|
||||
<div id="baseContainer">
|
||||
{{- partial "header.html" . -}}
|
||||
<div id="contentContainer">
|
||||
<div id="content">
|
||||
<main>
|
||||
{{- block "main" . }}{{- end }}
|
||||
</main>
|
||||
{{- partial "footer.html" . -}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{- partial "plausible.html" . -}}
|
||||
{{- partial "inject/body.html" . -}}
|
||||
|
|
|
|||
|
|
@ -3,45 +3,18 @@
|
|||
<div class="titleAndSearchContainer">
|
||||
<div id="titleContainer">
|
||||
<img src='{{ .Site.Params.Logo | default "/logo.svg" }}' />
|
||||
<div style="width: 100%">
|
||||
<div class="rightOfLogo">
|
||||
<div class="titleAndHamburger">
|
||||
<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>
|
||||
{{ end }}
|
||||
</div>
|
||||
<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>
|
||||
<div id="wide_nav">
|
||||
{{- partial "header_navigation.html" . -}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ if and (.Site.Params.searchbarEverywhere | default true) (and (.Site.Params.enableSearch | default true) (not (eq .Title "Search"))) }}
|
||||
|
|
@ -59,6 +32,17 @@
|
|||
{{- partial "iconlink" . -}}
|
||||
{{ end }}
|
||||
</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 "jumbotron.html" . -}}
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue