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: $tablet-max-width) {
51 margin-bottom: 0;
52 }
53
54 &__inner {
55 display: flex;
56 flex-wrap: wrap;
57 list-style: none;
58 margin: 0;
59 padding: 0;
60
61 li:not(:last-of-type) {
62 margin-right: 20px;
63 margin-bottom: 10px;
64 flex: 0 0 auto;
65 }
66
67 @media (max-width: $phone-max-width) {
68 align-items: flex-start;
69 padding: 0;
70
71 li {
72 margin: 0;
73 padding: 5px;
74 }
75 }
76 }
77 }
78}