Personal Site

Improve layout sizing.

- <main> now takes up remaining height in body, overflowing when at capacity
- <Landing> is now properly sized

vielle.dev fbd3bd4e ba155992

verified
+14 -3
+4
src/components/Base.astro
··· 28 28 padding: 0; 29 29 } 30 30 31 + html, body { 32 + min-height: 100svh; 33 + } 34 + 31 35 img, svg, iframe, audio, video { 32 36 max-width: 100%; 33 37 }
+1
src/components/home/Landing.astro
··· 54 54 <style> 55 55 section { 56 56 padding: 10px; 57 + height: fit-content; 57 58 } 58 59 59 60 figure {
+9 -3
src/pages/index.astro
··· 16 16 </main> 17 17 18 18 <style> 19 + :global(body) { 20 + display: flex; 21 + flex-direction: column; 22 + width: 100%; 23 + } 24 + 19 25 main { 20 26 display: grid; 21 27 grid-template: 22 - ". landing feeds blog ." 1fr 28 + ". landing feeds blog ." min-content 23 29 ". playing feeds blog ." 1fr 24 - / auto 30ch 30ch 30ch auto; 25 - min-height: 50vh; 30 + / auto minmax(30ch, 50ch) minmax(30ch, 50ch) minmax(30ch, 50ch) auto; 26 31 max-width: 100%; 32 + flex: 2; 27 33 28 34 & :global(section) { 29 35 border: 1px solid red;