pages/assets/_new.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

// Variables

$main-v-spacing: 1rem;

// Header variables

// Free one line at the top of the page
$header-padding: $main-v-spacing 0 0 0;
$header-bg-color: #555;
$header-color: #fff;
$header-title-margin: 1rem 0;
$header-title-size: inherit;

// Navigation menu variables

$nav-color: $header-color;
$nav-bg-color: $header-bg-color;
$nav-item-size: 1.5rem;
$nav-item-padding: 0.6rem 1.2rem;
// On smaller screen, choose between horizontal (row) and vertical (column) menu
$nav-small-direction: column;

// Nav menu

header {
    grid-area: header;
    padding: $header-padding;
    background-color: $header-bg-color;
    text-align: center;

    @include gradient-vertical(lighten($header-bg-color,8%),$header-bg-color);
    box-shadow: inset 0 0 8px 1px darken($header-bg-color, 8%);
    box-shadow-top: 0;
    
    > h1 {
        color: $header-color;
        font-weight: bold;
        margin: $header-title-margin;
    }
}

.nav-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    @media (max-width: $small-screen) {
        flex-direction: $nav-small-direction;
    }
}

// If we don't add the "a" here, on hover styles won't be affected
a.nav-item {
    font-size: $nav-item-size;
    padding: $nav-item-padding;
    color: $nav-color;
    background-color: $nav-bg-color;
    font-weight: bold;
    &:first-child {
        background-color: $nav-color;
        color: $nav-bg-color;
    }
}