/*
* Copyright (c) 2001-2022, The FreeBSD Documentation Project
* Copyright (c) 2021-2022, Sergio Carlavilla <carlavilla@FreeBSD.org>
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY THE AUTHOR AND CONTRIBUTORS ``AS IS'' AND
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
* ARE DISCLAIMED. IN NO EVENT SHALL THE AUTHOR OR CONTRIBUTORS BE LIABLE
* FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
* DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS
* OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
* HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
* LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
* OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
* SUCH DAMAGE.
*
*/
header {
position: fixed;
background-color: var(--header-background);
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
width: 100%;
z-index: 9999;
nav {
display: block;
max-width: 1440px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: var(--header-background);
li {
list-style: none;
a {
display: block;
padding: 20px 20px;
border-right: 1px solid var(--header-background);
text-decoration: none;
color: var(--header-font-color);
font-weight: bolder;
}
}
}
.logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
padding-bottom: 0px;
text-decoration: none;
}
.menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
.first-element{
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
}
.menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
margin-top: 5px;
.navicon {
background: var(--white);
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
}
}
header li a:hover,
header .menu-btn:hover {
background-color: var(--header-background);
}
header .menu-icon .navicon:before,
header .menu-icon .navicon:after {
background: var(--white);
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
header .menu-icon .navicon:before {
top: 5px;
}
header .menu-icon .navicon:after {
top: -5px;
}
header .menu-btn {
display: none;
}
header .menu-btn:checked ~ .menu {
max-height: 300px;
}
header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
@media (min-width: 55em) {
header li {
float: left;
list-style: none;
}
header li a {
padding: 20px 30px;
}
header .menu {
clear: none;
float: right;
max-height: none;
}
header .menu-icon {
display: none;
}
}
