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 @media print {
17 display: none;
18 }
19
20 display: flex;
21 flex-direction: column;
22 position: relative;
23
24 &__inner {
25 display: flex;
26 align-items: center;
27 justify-content: space-between;
28 }
29
30 &__logo {
31 display: flex;
32 flex: 1;
33
34 &:after {
35 content: '';
36 background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
37 display: block;
38 width: 100%;
39 right: 10px;
40 }
41
42 a {
43 flex: 0 0 auto;
44 max-width: 100%;
45 text-decoration: none;
46 }
47 }
48
49 .menu {
50 margin: 20px 0;
51 --shadow-color: var(--accent-alpha-70);
52 --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
53
54 @media (max-width: $tablet-max-width) {
55 margin-bottom: 0;
56 }
57
58 &__inner {
59 display: flex;
60 flex-wrap: wrap;
61 list-style: none;
62 margin: 0;
63 padding: 0;
64
65 li:not(:last-of-type) {
66 margin-right: 20px;
67 margin-bottom: 10px;
68 flex: 0 0 auto;
69 }
70
71 @media (max-width: $phone-max-width) {
72 align-items: flex-start;
73 padding: 0;
74
75 li {
76 margin: 0;
77 padding: 5px;
78 }
79 }
80 }
81 }
82}