My personal blog
hauleth.dev
blog
1@import "variables";
2
3.header {
4 @media print { display: none; }
5
6 display: flex;
7 flex-direction: column;
8 position: relative;
9
10 &__inner {
11 display: flex;
12 align-items: center;
13 justify-content: space-between;
14 }
15
16 &__logo {
17 display: flex;
18 flex: 1;
19
20 &:after {
21 content: '';
22 background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
23 display: block;
24 width: 100%;
25 right: 10px;
26 }
27
28 a {
29 flex: 0 0 auto;
30 max-width: 100%;
31 text-decoration: none;
32 }
33 }
34
35 .menu {
36 margin: 20px 0;
37 --shadow-color: var(--accent-alpha-70);
38 --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
39
40 @media (max-width: $tablet-max-width) {
41 margin-bottom: 0;
42 }
43
44 &__inner {
45 display: flex;
46 flex-wrap: wrap;
47 list-style: none;
48 margin: 0;
49 padding: 0;
50
51 li:not(:last-of-type) {
52 margin-right: 20px;
53 margin-bottom: 10px;
54 flex: 0 0 auto;
55 }
56
57 @media (max-width: $phone-max-width) {
58 align-items: flex-start;
59 padding: 0;
60
61 li {
62 margin: 0;
63 padding: 5px;
64 }
65 }
66 }
67 }
68}