spc-site/data/magprog/assets/sass/layout/_header.scss

92 lines
1.5 KiB
SCSS
Raw Permalink Normal View History

2022-04-23 10:48:53 +03:00
///
/// Hyperspace by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Header */
#header {
@include vendor('display', 'flex');
background-color: _palette(accent1);
cursor: default;
padding: 1.75em 2em;
> .title {
border: 0;
color: _palette(fg-bold);
display: block;
font-size: 1.25em;
font-weight: _font(weight-bold);
}
> nav {
@include vendor('flex', '1');
text-align: right;
> ul {
margin: 0;
padding: 0;
> li {
display: inline-block;
margin-left: 1.75em;
padding: 0;
vertical-align: middle;
&:first-child {
margin-left: 0;
}
a {
border: 0;
color: _palette(fg-light);
display: inline-block;
font-size: 0.6em;
font-weight: _font(weight-bold);
letter-spacing: _font(kerning-alt);
text-transform: uppercase;
&:hover {
color: _palette(fg);
}
&.active {
color: _palette(fg-bold);
}
}
}
}
}
@include breakpoint('<=small') {
padding: 1em 2em;
}
@include breakpoint('<=xsmall') {
display: block;
padding: 0 2em;
text-align: left;
.title {
font-size: 1.25em;
padding: 1em 0;
}
> nav {
border-top: solid 1px _palette(border);
text-align: inherit;
> ul {
> li {
margin-left: 1.5em;
a {
height: 6em;
line-height: 6em;
}
}
}
}
}
}