added alternative sidebar layout

README.md

@@ -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

assets/scss/style.scss

@@ -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 {
+    .rightOfLogo {
-        display: flex;
+        width: 100%;
-        flex-direction: row;
+        .titleAndHamburger {
-        flex-wrap: nowrap;
+            display: flex;
-        align-items: flex-start;
+            flex-direction: row;
-        justify-content: space-between;
+            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;
+}

layouts/_default/baseof.html

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

layouts/partials/header.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">
                             &#xf85b;
                         </label>
                     {{ end }}
                 </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>
         {{ 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>

layouts/partials/header_navigation.html

@@ -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>