Michael Fabian 'Xaymar' Dirks
148 lines
3.0 KiB
SCSS
148 lines
3.0 KiB
SCSS
@keyframes menu_show {
|
|
from {
|
|
display: none;
|
|
opacity: 0.0;
|
|
}
|
|
0% {
|
|
display: block;
|
|
}
|
|
to {
|
|
display: block;
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
@keyframes menu_hide {
|
|
from {
|
|
display: none;
|
|
opacity: 0.0;
|
|
}
|
|
0% {
|
|
display: block;
|
|
}
|
|
to {
|
|
display: block;
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
body > .header {
|
|
padding: 5px;
|
|
background: $theme-header-background;
|
|
color: $theme-header-color;
|
|
}
|
|
|
|
body > .header > .content {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
max-width: $theme-width;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
body > .header > .content .logo {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
margin: 0 2em 0 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body > .header > .content .logo > .icon {
|
|
justify-self: stretch;
|
|
align-self: stretch;
|
|
height: 90px;
|
|
margin: 0 10px 0 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body > .header > .content .logo > figcaption {
|
|
justify-self: left;
|
|
align-self: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: "Oswald";
|
|
font-size: 1.75rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: .25ch;
|
|
}
|
|
|
|
body > .header > .content .navigation {
|
|
justify-self: left;
|
|
align-self: center;
|
|
font-size: 0.9rem;
|
|
color: $theme-menu-color;
|
|
}
|
|
|
|
body > .header > .content .navigation > .menu {
|
|
list-style: none inside;
|
|
text-transform: uppercase;
|
|
padding: 0px;
|
|
margin: 0;
|
|
}
|
|
|
|
body > .header > .content .navigation > .menu > li {
|
|
display: inline-block;
|
|
padding: 0px .5em 0px 0px;
|
|
margin: 0;
|
|
}
|
|
|
|
body > .header > .content .navigation > .menu > li > .menu {
|
|
display: block;
|
|
position: absolute;
|
|
padding: 0px .5em;
|
|
margin: 0;
|
|
cursor: auto;
|
|
list-style: none inside;
|
|
background: $theme-menu-background;
|
|
box-shadow: 2px 2px 5px 0px black;
|
|
}
|
|
|
|
body > .header > .content .navigation > .menu > li > .menu > li {
|
|
display: block;
|
|
padding: 0 .5em;
|
|
margin: 0;
|
|
}
|
|
|
|
body > .header > .content .navigation .menu > li > a {
|
|
display: block;
|
|
padding: .5em 0;
|
|
}
|
|
|
|
body > .header > .content .navigation .menu li {
|
|
color: hsl(0, 0%, 75%);
|
|
}
|
|
|
|
body > .header > .content .navigation .menu li.has-menu {
|
|
cursor: pointer;
|
|
}
|
|
|
|
body > .header > .content .navigation .menu li.has-menu > .menu {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
display: block;
|
|
animation-name: menu_hide;
|
|
animation-duration: 100ms;
|
|
animation-fill-mode: both;
|
|
animation-direction: reverse;
|
|
}
|
|
|
|
body > .header > .content .navigation .menu li.has-menu:hover > .menu,
|
|
body > .header > .content .navigation .menu li.has-menu > .menu:hover,
|
|
body > .header > .content .navigation .menu li.has-menu:focus > .menu,
|
|
body > .header > .content .navigation .menu li.has-menu > .menu:focus,
|
|
body > .header > .content .navigation .menu li.has-menu:active > .menu,
|
|
body > .header > .content .navigation .menu li.has-menu > .menu:active {
|
|
display: block;
|
|
pointer-events: auto;
|
|
animation-name: menu_show;
|
|
animation-duration: 100ms;
|
|
animation-fill-mode: both;
|
|
animation-direction: normal;
|
|
}
|
|
|
|
body > .header > .content .navigation .menu li:hover,
|
|
body > .header > .content .navigation .menu li:active,
|
|
body > .header > .content .navigation .menu li:focus {
|
|
color: $theme-menu-color-active;
|
|
}
|