omegamma/assets/scss/header.scss

180 lines
4.1 KiB
SCSS

/**
* Omegamma - Hugo theme for ad5001.eu and related websites.
* Copyright (C) 2021 Ad5001
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
nav {
font-size: 1.3em;
height: 3em;
position: absolute;
width: 100vw;
font-family: var(--light-font);
.nav-flex {
display: flex;
max-width: 99%;
}
.navbar-brand {
padding-top: 1em;
padding-left: 0.5em;
display: flex;
.icon-brand {
width: 2.5em;
height: 2.5em;
margin-top: -0.7em;
margin-right: 5px;
}
}
.navbar-menu {
flex: auto;
display: block;
width: 2em;
}
// Links list
.navbar-list {
float: right;
flex: auto;
display: flex;
margin-top: 0px;
list-style-type: none;
text-transform: uppercase;
li {
list-style: none;
&.active {
background-color: var(--primary-color);
}
&.background a[role=button] {
background-color: var(--nav-background);
color: black;
display: inline;
}
a {
padding: 1em;
margin-left: 0;
display: flex;
}
}
}
}
.menu-with-sub {
display: block;
.sub-menu {
display: none;
position: absolute;
padding: 0;
margin-top: -2px;
}
&.toggled .sub-menu, &:hover .sub-menu, & .sub-menu:hover {
display: block;
}
}
#navbar-toggler {
border: 0;
background: none;
box-shadow: none;
border-radius: 0px;
display: none;
cursor: pointer;
padding-right: 1em;
img {
width: 1.9em;
height: 1.9em;
}
}
@media screen and (max-width: 700px) {
#navbar-toggler {
display: block;
}
nav.menu-shown {
position: fixed;
z-index: 1;
background: var(--nav-background);
}
/* positioning for mobile */
nav .nav-flex {
display: block;
max-width: 100%;
.nav-mobile {
display: flex;
width: 100%;
.navbar-brand {
flex: auto;
}
}
.navbar-menu {
height: 100vh;
width: 100% !important;
display: none !important;
background: var(--nav-background);
&.shown {
display: block !important;
}
.navbar-list {
display: block !important;
width: 100%;
height: 100%;
padding-left: 0;
li {
width: 100% !important;
display: flex;
a[role=button] {
width: 100%;
}
}
.menu-with-sub {
display: block;
.sub-menu {
margin-left: 1em;
}
}
}
}
}
/* removing white text from menu with light background */
nav.menu-shown.text-white [role=button], nav.menu-shown.text-white button {
color: black;
}
nav.menu-shown.text-white .navbar-list li.background {
background-color: var(--nav-background);
}
}