vielle.dev
Personal Site
Add mobile layout
- Entries go vertical
- Blog is removed (still accessible in nav, but simply filler space in desktop; not needed)
- body cannot be smaller than 30ch, so smaller devices will scroll. this ensures each part is legible without breaking things on tiny/over zoomed devices
+1
src/components/Base.astro
+1
src/components/Base.astro
+12
src/pages/index.astro
+12
src/pages/index.astro
···
31
31
max-width: 100%;
32
32
flex: 2;
33
33
34
+
@media (max-width: 90ch) {
35
+
grid-template:
36
+
". landing ." min-content
37
+
". playing ." min-content
38
+
". feeds ." 1fr
39
+
/ auto minmax(30ch, 50ch) auto;
40
+
41
+
& :global(.blog) {
42
+
display: none;
43
+
}
44
+
}
45
+
34
46
& :global(section) {
35
47
border: 1px solid red;
36
48
}