css/_menu_page.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

.menu-wrapper {
    max-width: 35em;
    width: 90%;
    margin: auto;

    .menu {
        display: flex;
        flex-direction: column;
        gap: 1em;
        width: 100%;

        .items-wrapper {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1em;

            .menu-item {
                $menuitem-height: 5em;
                width: 100%;
                height: $menuitem-height;
                border: 1px solid var(--link-fg);
                border-radius: 0.3em;

                display: grid;
                grid-template-columns: 15fr 85fr;
                align-items: center;

                color: var(--body-fg);
                text-decoration: none;

                transition: width 150ms, margin-left 150ms;

                .logo {
                    height: $menuitem-height;
                    width: $menuitem-height;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    svg {
                        $dim: calc($menuitem-height - 2em);
                        height: $dim;
                        width: $dim;
                    }
                }

                .label {
                    font-size: 1.7em;
                    padding-bottom: 0.15em;
                    transition: margin-left 150ms;
                }
            }

            .menu-item:hover {
                $offset: 3%;
                width: calc(100% + $offset);
                margin-left: $offset;
                transition: width 200ms, margin-left 200ms;

                .label {
                    margin-left: -0.5%;
                    transition: margin-left 200ms;
                }
            }
        }
    }
}

#manage-menu-page, #home-page {
    $h: calc(var(--nav-height) + calc(var(--main-padding) * 2));
    height: calc(100vh - $h);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}