assets/scss/layout/_header.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

.header {
    z-index: 3;
}

@if ($headerLayoutFlex) {
    .header {
        position: fixed;
        width: 100%;
    }
    .header-wrapper {
        padding: 1em 0;
        @include blur;
        background: $headerBackground;
    }
    .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);
        }
    }
}