91 lines
2.0 KiB
SCSS
91 lines
2.0 KiB
SCSS
|
.header {
|
||
|
|
z-index: 3;
|
||
|
|
}
|
||
|
|
|
||
|
|
@if ($headerLayoutFlex) {
|
||
|
|
.header {
|
||
|
|
position: fixed;
|
||
|
|
width: 100vw;
|
||
|
|
}
|
||
|
|
.header-wrapper {
|
||
|
|
padding: 1em 0;
|
||
|
|
@include blur;
|
||
|
|
background: $headerBackground;
|
||
|
|
transition: background $duration;
|
||
|
|
}
|
||
|
|
.header-inner {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin: 0 auto;
|
||
|
|
max-width: $postWidth;
|
||
|
|
}
|
||
|
|
.header-inner.list {
|
||
|
|
max-width: $listWidth;
|
||
|
|
}
|
||
|
|
.site-brand {
|
||
|
|
margin-right: 1em;
|
||
|
|
}
|
||
|
|
} @else {
|
||
|
|
.header {
|
||
|
|
position: relative;
|
||
|
|
background: $headerBackground;
|
||
|
|
}
|
||
|
|
.site-brand {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$brandHeight: null;
|
||
|
|
@if ($siteBrandSVG) {
|
||
|
|
.brand {
|
||
|
|
width: $siteBrandSVGWidth;
|
||
|
|
height: $siteBrandSVGHeight;
|
||
|
|
fill: $siteBrandSVGFill;
|
||
|
|
}
|
||
|
|
$brandHeight: $siteBrandSVGHeight;
|
||
|
|
} @else {
|
||
|
|
.brand {
|
||
|
|
font-size: $siteBrandFontSize;
|
||
|
|
color: $siteBrandFontColor;
|
||
|
|
text-decoration: none;
|
||
|
|
&:hover {
|
||
|
|
color: $siteBrandFontColor;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* $siteBrandFontSize * {body line-height} */
|
||
|
|
$brandHeight: $fontSize * strip-unit($siteBrandFontSize) * 1.618;
|
||
|
|
}
|
||
|
|
|
||
|
|
@if ($headerLayoutFlex) {
|
||
|
|
:root {
|
||
|
|
/* This is an approximate calculation, it won't cover all scenarios */
|
||
|
|
--header-height: calc(
|
||
|
|
max(
|
||
|
|
/* brand */
|
||
|
|
#{$brandHeight},
|
||
|
|
/* menu */
|
||
|
|
#{$fontSize * 0.8 * 1.5} /* {.nav font-size} * {.menu line-height} */
|
||
|
|
)
|
||
|
|
/* .header-wrapper top+bottom margin */
|
||
|
|
+ #{$fontSize * 2}
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Scrolling fix for anchors being hidden below the header */
|
||
|
|
*[id] {
|
||
|
|
scroll-margin-top: var(--header-height);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@if ($enableHeaderAutoHide and $headerLayoutFlex) {
|
||
|
|
.header {
|
||
|
|
top: 0;
|
||
|
|
transition: top 0.3s ease-in-out;
|
||
|
|
|
||
|
|
&.hide {
|
||
|
|
top: calc(var(--header-height) * -1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|