Update for content

This commit is contained in:
Henk Verlinde
2020-04-16 14:42:09 +02:00
parent 7aae856bc7
commit 72c315a0bd
28 changed files with 57 additions and 58 deletions

View File

@ -88,6 +88,14 @@ body.dark .navbar .btn-link {
color: $navbar-dark-color;
}
body.dark .content .btn-link {
color: $link-color-dark;
}
body.dark .content .btn-link:hover {
color: $link-color-dark;
}
body.dark .navbar .btn-link:hover {
color: $navbar-dark-hover-color;
}
@ -199,7 +207,7 @@ body.dark .navbar .menu-icon .navicon {
background: $navbar-dark-color;
}
body.dark .navbar .menu-icon .navicon:before,
body.dark .navbar .menu-icon .navicon:after {
body.dark .navbar .menu-icon .navicon::before,
body.dark .navbar .menu-icon .navicon::after {
background: $navbar-dark-color;
}

View File

@ -109,19 +109,21 @@
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
/*
/*
* Source: https://medium.com/creative-technology-concepts-code/responsive-mobile-dropdown-navigation-using-css-only-7218e4498a99
*/
/* Style the menu icon for the dropdown */
.navbar .menu-icon {
cursor: pointer;
/* display: inline-block; */
/* float: right; */
padding: 1.125rem 0.625rem;
margin: 0 0 0 -0.625rem;
/* position: relative; */
user-select: none;
}
@ -131,26 +133,26 @@
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
transition: background 0.2s ease-out;
width: 18px;
}
.navbar .menu-icon .navicon:before,
.navbar .menu-icon .navicon:after {
.navbar .menu-icon .navicon::before,
.navbar .menu-icon .navicon::after {
background: $navbar-light-color;
content: '';
content: "";
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
transition: all 0.2s ease-out;
width: 100%;
}
.navbar .menu-icon .navicon:before {
.navbar .menu-icon .navicon::before {
top: 5px;
}
.navbar .menu-icon .navicon:after {
.navbar .menu-icon .navicon::after {
top: -5px;
}
@ -169,15 +171,15 @@
background: transparent;
}
.navbar .menu-btn:checked ~ .menu-icon .navicon:before {
.navbar .menu-btn:checked ~ .menu-icon .navicon::before {
transform: rotate(-45deg);
}
.navbar .menu-btn:checked ~ .menu-icon .navicon:after {
.navbar .menu-btn:checked ~ .menu-icon .navicon::after {
transform: rotate(45deg);
}
.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::before,
.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::after {
top: 0;
}