this repo has no description
hauleth.dev
1@import "variables";
2
3@mixin menu {
4 position: absolute;
5 background: var(--background);
6 box-shadow: var(--shadow);
7 color: white;
8 border: 2px solid;
9 margin: 0;
10 padding: 10px;
11 list-style: none;
12 z-index: 99;
13}
14
15.header {
16 display: flex;
17 flex-direction: column;
18 position: relative;
19
20 &__inner {
21 display: flex;
22 align-items: center;
23 justify-content: space-between;
24 }
25
26 &__logo {
27 display: flex;
28 flex: 1;
29
30 &:after {
31 content: '';
32 background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
33 display: block;
34 width: 100%;
35 right: 10px;
36 }
37
38 a {
39 flex: 0 0 auto;
40 max-width: 100%;
41 text-decoration: none;
42 }
43 }
44
45 .menu {
46 margin: 20px 0;
47 --shadow-color: var(--accent-alpha-70);
48 --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
49
50 @media (max-width: $phone-max-width) {
51 @include menu;
52 top: 50px;
53 right: 0;
54 }
55
56 &__inner {
57 display: flex;
58 flex-wrap: wrap;
59 list-style: none;
60 margin: 0;
61 padding: 0;
62
63 li:not(:last-of-type) {
64 margin-right: 20px;
65 margin-bottom: 10px;
66 flex: 0 0 auto;
67 }
68
69 @media (max-width: $phone-max-width) {
70 flex-direction: column;
71 align-items: flex-start;
72 padding: 0;
73
74 li {
75 margin: 0;
76 padding: 5px;
77 }
78 }
79 }
80
81 &-trigger {
82 color: var(--accent);
83 border: 2px solid;
84 margin-left: 10px;
85 height: 100%;
86 padding: 3px 8px;
87 position: relative;
88 }
89 }
90}