public/website
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix voor menu en eerste versie Schema.org

Browse source
This commit is contained in:
Michael Boelen 2023-05-17 09:30:00 +02:00
parent 61b8a510b7
commit 75e0ce9ddf
9 changed files with 444 additions and 267 deletions
Download patch file Download diff file Expand all files Collapse all files

175
themes/nluug/assets/scss/styles.scss
View file

@ -71,151 +71,6 @@ h1, h2, h3, h4, h5, strong, b {
//text-transform: uppercase;
}
.header{
background-color: $color-header;
box-shadow: 1px 1px 5px 0px grey;
position: sticky;
//top: 100px;
width: 100%;
line-height: 2;
}
/* Nav menu */
.nav{
width: 100%;
height: 100%;
position: fixed;
background-color: $color-header;
overflow: hidden;
max-height: 0;
transition: max-height .5s ease-out;
}
.menu a {
display: block;
padding: 10px;
color: $color-text-inverse;
}
.menu a:visited {
color: $color-text-inverse;
}
.menu a:hover{
background-color: $color-header;
color: gray;
text-decoration: none;
}
/* Menu Icon */
.hamb{
cursor: pointer;
float: right;
padding: 40px 20px;
}
.hamb-line {
background: white;
display: block;
height: 2px;
position: relative;
width: 24px;
}
.hamb-line::before,
.hamb-line::after{
background: white;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.hamb-line::before{
top: 5px;
}
.hamb-line::after{
top: -5px;
}
.side-menu {
display: none;
} /* Hide checkbox */
/* Toggle menu icon */
.side-menu:checked ~ nav{
max-height: 100%;
}
.side-menu:checked ~ .hamb .hamb-line {
background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
transform: rotate(-45deg);
top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
transform: rotate(45deg);
top:0;
}
/* Sub nav */
.subnav-content {
background-color: $color-header;
color: black;
width: 100%;
z-index: 1;
padding: 10px 0 ;
//display: none;
}
.subnav-content a {
color: $color-text-inverse;
text-decoration: none;
padding: 0;
margin: 10px 0;
text-align: center;
}
.subnav-content a:visited {
color: $color-text-inverse;
}
.subnav:hover .subnav-content {
display: block;
}
/* Responsiveness */
@media (min-width: 768px) {
/* Sub nav */
.subnav-content {
padding: 8px 0;
display: none;
background-color: $color-header;
color: $color-text-inverse;
}
.header ul {
float: right;
}
.nav{
max-height: none;
top: 0;
position: relative;
float: right;
//width: fit-content;
background-color: transparent;
}
.menu li{
float: left;
}
.menu a {
color: $color-text-inverse;
}
.menu a:hover {
background-color: transparent;
color: gray;
}
.hamb{
display: none;
}
}
// Highlight-box om bijvoorbeeld onze evenementen opvallend op homepage te laten zien
.highlight-box {
background-color: $color-highlight-box-background;
@ -334,40 +189,10 @@ ul, ol {
// text-align: justify;
}
header {
line-height: 2;
//flex-basis: 10rem;
//flex-grow: 1;
//position: relative;
display: flex;
justify-content: space-between;
padding-bottom: 1rem;
}
header a {
text-decoration: none;
}
header ul {
list-style-type: none;
padding: 0;
}
header li, header a {
//margin-bottom: .2rem;
//text-align: right;
//margin-right: 2rem;
display: inline;
}
h2.post {
padding-top: .5rem;
}
header ul a:first-child {
padding-left: 1rem;
}
.list li {
display: flex;
align-items: baseline;