added option for mobile hamburger menu for main nav; searchbar on mobile stretches to full width; tweaked header items alignment

This commit is contained in:
Gabriele Musco 2021-04-18 13:04:19 +02:00
parent 4e6095228c
commit 724b8e2fe2
No known key found for this signature in database
GPG Key ID: 8539FD3454380B83
3 changed files with 124 additions and 52 deletions

View File

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

View File

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

View File

@ -4,9 +4,19 @@
<div id="titleContainer">
<img src='{{ .Site.Params.Logo | default "/img/icon.svg" }}' />
<div>
<div class="titleAndHamburger">
<h1>{{ .Site.Title | default "Ficurinia" }}</h1>
{{ if .Site.Params.mobileHamburgerNav | default false }}
<label id="hamburger-menu" for="main-nav-toggler">
&#xf85b;
</label>
{{ end }}
</div>
<nav>
<ul>
{{ if .Site.Params.mobileHamburgerNav | default false }}
<input type="checkbox" id="main-nav-toggler" />
{{ end }}
<ul id="main-nav">
<li><a href="/">Home</a></li>
<li><a href="/posts">Posts</a></li>
{{ $pagesDir := .Site.Params.Pages | default (slice "pages") }}