From 724b8e2fe299a043e311d3b08063860d784ce8d0 Mon Sep 17 00:00:00 2001 From: Gabriele Musco Date: Sun, 18 Apr 2021 13:04:19 +0200 Subject: [PATCH] added option for mobile hamburger menu for main nav; searchbar on mobile stretches to full width; tweaked header items alignment --- README.md | 1 + assets/scss/style.scss | 161 ++++++++++++++++++++++++----------- layouts/partials/header.html | 14 ++- 3 files changed, 124 insertions(+), 52 deletions(-) diff --git a/README.md b/README.md index 429fc89..f53f412 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,7 @@ summaryLength = 70 # number of words for article summaries enableSearch = true # enable search page searchbarEverywhere = true # if the searchbar should be shown in every page; requires enableSearch searchMenuLink = false # add a search link to the navigation menu; requires enableSearch + mobileHamburgerNav = false # alternative hamburger menu layout for the main nav menu when screen is small enableFeatured = false # enable a particular view for articles marked as featured (featured: true in the article frontmatter) diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 58dc919..07b572c 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -69,56 +69,6 @@ footer { } } -#titleContainer { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: center; - - h1 { - font-weight: normal; - font-size: 1.6em; - margin: 0; - } - - img { - margin-right: 10px; - width: 50px; - max-height: 50px; - border-radius: 5px; - } -} - -nav, #links { - ul { - list-style-type: none; - display: flex; - flex-direction: row; - flex-wrap: wrap; - padding: 0; - margin: 0; - } -} - -nav { - font-size: .9em; - ul { - li { - border-right: 1px solid $accent_color; - &:last-child { - border-right: none; - } - a { - padding: 2px 20px; - color: $accent_color; - &:hover { - text-decoration: underline; - } - } - } - } -} - #links { padding: 5px 0 40px 0; } @@ -216,6 +166,7 @@ h1, h2, h3, h4, h5, h6 { } .nerdlink { + transition: all .15s ease-in-out; @extend .nerd; color: $fg_color; border-bottom: none; @@ -226,6 +177,7 @@ h1, h2, h3, h4, h5, h6 { align-items: center; justify-content: center; .pseudofont { + transition: all .15s ease-in-out; fill: $fg_color; display: inline; position: relative; @@ -384,7 +336,11 @@ ul.list { flex-direction: row; flex-wrap: wrap; justify-content: space-between; + #titleContainer { + flex-grow: 99; + } .search { + flex-grow: 1; &, #searchbar {font-size: 1em;} } } @@ -440,3 +396,108 @@ ul.list { @extend .featuredCard; } } + +#titleContainer { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: flex-start; + align-self: flex-start; + + h1 { + font-weight: normal; + font-size: 1.6em; + margin: 0; + } + + img { + margin-right: 10px; + margin-top: 7px; + align-self: flex-start; + width: 50px; + max-height: 50px; + border-radius: 5px; + } +} + +nav, #links { + ul { + list-style-type: none; + display: flex; + flex-direction: row; + flex-wrap: wrap; + padding: 0; + margin: 0; + } +} + +header { + .titleAndHamburger { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: flex-start; + align-self: flex-start + } + nav { + font-size: .9em; + ul { + li { + border-right: 1px solid $accent_color; + &:last-child { + border-right: none; + } + a { + padding: 2px 20px; + color: $accent_color; + &:hover { + text-decoration: underline; + } + } + } + } + } +} + +{{ if .Site.Params.mobileHamburgerNav | default false }} +header { + #hamburger-menu { + @extend .nerdlink; + display: none !important; + } + #main-nav-toggler { + display: none; + } +} + +@media only screen and (max-width: 520px) { + header { + #hamburger-menu { + display: block !important; + font-size: 1.2rem; + cursor: pointer; + text-align: center; + margin: 0; + padding: 12px; + width: 35px; + } + nav { + ul#main-nav { + display: none; + flex-direction: column; + li { + border-right: none !important; + display: block; + text-align: right; + a { + padding-left: 0; + } + } + } + #main-nav-toggler:checked ~ #main-nav { + display: flex; + } + } + } +} +{{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index bf46a4d..d30c2eb 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -4,9 +4,19 @@
-

{{ .Site.Title | default "Ficurinia" }}

+
+

{{ .Site.Title | default "Ficurinia" }}

+ {{ if .Site.Params.mobileHamburgerNav | default false }} + + {{ end }} +