Personal Site
Make sure header and main is properly positioned
+12
-3
+12
-3
src/pages/index.astro
+12
-3
src/pages/index.astro
···
19
19
20
20
<style>
21
21
:global(body) {
22
-
display: flex;
23
-
flex-direction: column;
22
+
display: grid;
23
+
grid-template: "header" auto "main" 1fr / 1fr;
24
24
width: 100%;
25
+
26
+
> :global(header) {
27
+
grid-area: header;
28
+
margin: 0 !important;
29
+
}
30
+
31
+
> main {
32
+
grid-area: main;
33
+
}
25
34
}
26
35
27
36
main {
···
29
38
grid-template:
30
39
". landing feeds blog ." min-content
31
40
". playing feeds blog ." 1fr
32
-
/ auto minmax(30ch, 50ch) minmax(30ch, 50ch) minmax(30ch, 50ch) auto;
41
+
/ auto minmax(25ch, 50ch) minmax(25ch, 50ch) minmax(25ch, 50ch) auto;
33
42
max-width: 100%;
34
43
flex: 2;
35
44