assets/css/components/_nav.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

.c-nav {
    position: sticky;
    z-index: 1000;
    top: 0;
    background-color: var(--nav--bg);
    font-size: $nav--font-size;

    &__items {
        display: flex;
        align-items: baseline;
    }

    &__logo {
        display: inline-block;
        margin: 0;
        padding: $nav--item--pad-v 0;
        color: var(--nav--logo--fg);
        text-decoration: none;

        &:link,
        &:visited {
            &:hover {
                background-color: transparent;
                color: var(--nav--item--hover--fg);
                font-weight: bold;
            }
        }
    }

    &__item {
        display: inline-block;
        margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h);
        padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px);
        border-bottom: 2px solid transparent;
        color: var(--nav--item--idle--fg);
        text-decoration: none;

        &:hover {
            background-color: transparent;
            color: var(--nav--item--hover--fg);
            font-weight: bold;
        }

        &--active {
            border-color: var(--nav--item--active--fg);
            color: var(--nav--item--active--fg);
            font-weight: bold;
        }
    }

    @media (max-width: map-get($breakpoints, 'sm')) {
        &__item {
            margin-left: $nav--item--spacing--sm - $nav--item--pad-h;
        }
    }

    /*
    @media (max-width: map-get($breakpoints, "xs")) {
        &__logo {
            display: none;
        }

        &__logo + &__item {
            margin-left: -1ch;
        }
    }
    */
}