Personal Site
Add rough layout for index
+42
-1
+42
-1
src/pages/index.astro
+42
-1
src/pages/index.astro
···
3
3
---
4
4
5
5
<Base>
6
-
<p>Index page</p>
6
+
<main>
7
+
<!-- landing -->
8
+
<section class="landing">landing</section>
9
+
<!-- now playing -->
10
+
<section class="playing">playing</section>
11
+
<!-- feeds -->
12
+
<section class="feeds">feeds</section>
13
+
<!-- blog -->
14
+
<section class="blog">blog</section>
15
+
</main>
16
+
17
+
<style>
18
+
main {
19
+
display: grid;
20
+
grid-template:
21
+
". landing feeds blog ." 1fr
22
+
". playing feeds blog ." 1fr
23
+
/ auto 30ch 30ch 30ch auto;
24
+
min-height: 50vh;
25
+
max-width: 100%;
26
+
27
+
& section {
28
+
border: 1px solid red;
29
+
}
30
+
31
+
& .landing {
32
+
grid-area: landing;
33
+
}
34
+
35
+
& .playing {
36
+
grid-area: playing;
37
+
}
38
+
39
+
& .feeds {
40
+
grid-area: feeds;
41
+
}
42
+
43
+
& .blog {
44
+
grid-area: blog;
45
+
}
46
+
}
47
+
</style>
7
48
</Base>