-
Notifications
You must be signed in to change notification settings - Fork 5
/
styles.css
123 lines (112 loc) · 2.53 KB
/
styles.css
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/* Lume's design system */
@import "https://unpkg.com/@lumeland/[email protected]/ds.css";
/* Custom components */
@import "css/menu.css";
@import "css/updates.css";
.container {
min-height: 100vh;
display: grid;
justify-content: center;
align-content: start;
row-gap: 2em;
column-gap: 4em;
grid-template-columns: minmax(0, 800px);
grid-template-areas: "toolbar"
"main"
"menu"
"footer";
@media (max-width: 949px) {
padding: 5vw;
}
@media (min-width: 950px) {
grid-template-columns: clamp(250px, 25vw, 300px) minmax(0, 800px) 1fr;
grid-template-rows: auto auto 1fr;
grid-template-areas: "menu toolbar"
"menu main"
"menu footer";
}
@media (min-width: 1200px) {
grid-template-columns: 1fr minmax(10vw, 250px) minmax(0, 800px) 200px 1fr;
grid-template-rows: auto auto 1fr;
grid-template-areas: "menu menu toolbar ."
"menu menu main toc"
"menu menu footer toc";
}
}
.container > .toc {
display: none;
grid-area: toc;
@media (min-width: 1200px) {
display: block;
position: sticky;
align-self: start;
top: 2rem;
}
}
.container > nav.menu-container {
grid-area: menu;
background-color: var(--color-highlight);
padding: 1rem;
@media (max-width: 949px) {
border-radius: var(--border-radius);
}
@media (min-width: 950px) {
display: grid;
align-content: start;
grid-template-columns: 1fr minmax(10vw, 250px);
grid-template-rows: auto minmax(0, 1fr);
padding-top: 2rem;
padding-bottom: 0;
border-right: solid 1px var(--color-line);
align-self: start;
height: 100vh;
position: sticky;
top: 0;
> * {
grid-column: 2;
}
&:has(.menu-languages) {
grid-template-rows: auto auto minmax(0, 1fr);
}
}
}
.container > .toolbar {
grid-area: toolbar;
display: flex;
align-items: center;
column-gap: .5rem;
.search {
flex: 1 1 auto;
}
@media (min-width: 950px) {
padding-top: 2rem;
}
@media (min-width: 1200px) {
.theme {
position: fixed;
top: 1rem;
right: 1.2rem;
}
}
}
main {
grid-area: main;
}
.body {
margin-top: var(--row-gap-xsmall);
}
.body-footer {
grid-area: footer;
font: var(--font-small);
color: var(--color-dim);
border-top: solid 1px var(--color-line);
padding: 1em 0;
margin-top: 1em;
}
/* Alignment fix */
.icon:not(:has(svg)) {
padding-bottom: .25em;
}
.icon {
vertical-align: middle;
}