Feat(css:index): Make index page responsive. Pardon my formatting.
Erine Moira me@erine.dev
Wed, 05 Nov 2025 15:16:16 +0700
2 files changed,
236 insertions(+),
117 deletions(-)
M
static/index.css
→
static/index.css
@@ -2,7 +2,6 @@ /* Basic reset */
* { margin: 0; padding: 0; - box-sizing: border-box; } /* Body styling */@@ -11,57 +10,84 @@ background-color: #1e2021;
font-family: Arial, sans-serif; color: #c8c3bc; line-height: 1.6; - justify-content: center; - align-items: flex-start; min-height: 100vh; - padding: 15em; - padding-top: 2em; - padding-bottom: 2em; + width: 100%; font-size: 1em; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } /* Center the main container */ .box { - padding: 1em; border: 2px solid #3e4446; background-color: #181a1b; } .small-box { - padding: 0.3em; border: 2px solid #3e4446; background-color: #181a1b; } +.outer-container { + display: flex; + flex-direction: column; + width: fit-content; + height: fit-content; + padding: 0.5em; +} + .container { - width: 100%; text-align: center; } -.footer { - margin-top: 1em; - text-align: center; - min-height: fit-content; +.hi { + display: flex; + flex-direction: column; } .top { display: flex; - flex-direction: row; + flex-direction: column; gap: 1em; } +.top-left { + display: flex; + flex-direction: column; + gap: 1em; +} + +.intro { + height: 85%; +} + +.cool-people { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 15%; + padding: 1em 0; +} + .links { - width: 32em; + padding: 1em; text-align: justify; } -/* Article styling */ article { padding: 1em; - font-size: 1.3em; + font-size: 1em; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } +/* Article styling */ h1 { font-size: 2em; margin-bottom: 0.5em;@@ -75,6 +101,10 @@
ul { list-style-type: none; padding: 0; + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-auto-flow: row; + column-gap: 0; } li {@@ -93,14 +123,21 @@ }
/* Footer styling */ footer { - background-color: #1f2123; font-size: 1em; + margin-top: 1em; + text-align: center; + min-height: fit-content; + display: flex; + min-width: 100%; + width: fit-content; } .credits { display: flex; justify-content: center; - gap: 15px; + width: 100%; + gap: 0.5em; + padding: 1em 0; } .credits span {@@ -108,7 +145,8 @@ font-weight: bold;
} .banana-img { - height: 20em; + width: 16em; + aspect-ratio: 820/1180; } .toothbrush-img {@@ -122,5 +160,45 @@ image-rendering: crisp-edges;
} .non-pixelated { - image-rendering: optimizeQuality; + image-rendering: optimizeQuality; +} + +@media (width >= 40rem) { + .outer-container { + padding: 2em; + } + + ul { + grid-template-columns: repeat(2, minmax(0, 1fr)); + column-gap: 1em; + } +} + +@media (width >= 64rem) { + .top { + flex-direction: row; + } + + .links { + width: 32em; + } + + ul { + grid-template-columns: repeat(1, minmax(0, 1fr)); + column-gap: 0; + } + + .cool-people { + padding: 0; + } +} + +@media (width >= 80rem) { + .outer-container { + padding: 2em 8em; + } + + article { + font-size: 1.3em; + } }
M
templates/index.html
→
templates/index.html
@@ -1,111 +1,152 @@
<!doctype html> <html lang="en"> - -<head> + <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>banana square</title> - <link rel="stylesheet" href="static/index.css" /> - <link rel="icon" type="image/png" href="static/banan_icon.png" /> -</head> + <link rel="stylesheet" href="../static/index.css" /> + <link rel="icon" type="image/png" href="../static/banan_icon.png" /> + </head> -<body> - <div class="top"> - <div style="background-color: #9fa127; display: flex; flex-direction: column"> - <div class="box container" style="min-height: 85%"> - <article> - <h1>hi</h1> - <img src="static/banan.png" alt="my profile picture" class="banana-img non-pixelated" /> - <p> - I'm an 18-year-old student from Germany, aspiring to become a - system administrator. I like tinkering around with my Linux systems - and write a little program here and there. - </p> - <p> - Currently I am graduating, about to have a lot of free time on my hands to tackle the dozens of - projects I've wanted to try out for years. - </p> - </article> - </div> - <div class="small-box container" style="min-height: 15%"> - cool people - <br /> - <a href="https://crispy-caesus.eu"><img src="https://crispy-caesus.eu/static/crispybutton.png" /></a> - <a href="https://erine.dev/" target="_blank" rel="noopener noreferrer"> - <img src="https://chibisafe.crispy-caesus.eu/MEkVLB08qVlq.png" alt="erine-button" /> - </a> - </div> + <body> + <div class="outer-container"> + <main class="top"> + <div class="top-left"> + <article class="box container intro"> + <h1>hi</h1> + <img + src="../static/banan.png" + alt="my profile picture" + class="banana-img non-pixelated" + /> + <p> + I'm an 18-year-old student from Germany, aspiring to become a + system administrator. I like tinkering around with my Linux + systems and write a little program here and there. + </p> + <p> + Currently I am graduating, about to have a lot of free time on my + hands to tackle the dozens of projects I've wanted to try out for + years. + </p> + </article> + <div class="small-box container cool-people"> + <b>cool people</b> + <span class="people-buttons"> + <a href="https://crispy-caesus.eu" + ><img src="https://crispy-caesus.eu/static/crispybutton.png" + /></a> + <a + href="https://erine.dev/" + target="_blank" + rel="noopener noreferrer" + > + <img + src="https://chibisafe.crispy-caesus.eu/MEkVLB08qVlq.png" + alt="erine-button" + /> + </a> + </span> + </div> </div> <div class="box links"> - <h2>some links</h2> - <ul> - <li> - <a title="Github" href="https://github.com/crispy-caesus" target="_blank" - rel="noopener nofererrer">Github</a> - crispy-caesus - <p> - Contains most of my little projects, as well as my dotfiles for my - Linux configuration - </p> - </li> + <h2>some links</h2> + <ul> + <li> + <a + title="Github" + href="https://github.com/crispy-caesus" + target="_blank" + rel="noopener nofererrer" + >Github</a + > + - crispy-caesus + <p> + Contains most of my little projects, as well as my dotfiles for + my Linux configuration + </p> + </li> - <li> - <a title="Anilist" href="https://anilist.co/user/crispycaesus/" target="_blank" - rel="noopener nofererrer">Anilist</a> - crispycaesus - <p> - A list of the anime I have watched, plan to watch and some - ratings and thoughts on them - </p> - </li> + <li> + <a + title="Anilist" + href="https://anilist.co/user/crispycaesus/" + target="_blank" + rel="noopener nofererrer" + >Anilist</a + > + - crispycaesus + <p> + A list of the anime I have watched, plan to watch and some + ratings and thoughts on them + </p> + </li> - <li> - <a title="Discord" href="https://discord.com/users/621759962280099840" target="_blank" - rel="noopener nofererrer"> - Discord - </a> - crispy.caesus - <p> - I don't love the platform but it's probably one of the best developed and has the largest - communities. I've also learned a bunch, setting up servers with their permissions and what not - </p> - </li> + <li> + <a + title="Discord" + href="https://discord.com/users/621759962280099840" + target="_blank" + rel="noopener nofererrer" + > + Discord + </a> + - crispy.caesus + <p> + I don't love the platform but it's probably one of the best + developed and has the largest communities. I've also learned a + bunch, setting up servers with their permissions and what not + </p> + </li> - <li> - <a title="Matrix" href="https://matrix.to/#/@crispy:crispy-caesus.eu" target="_blank" - rel="noopener nofererrer"> - Matrix - </a> - @crispy:crispy-caesus.eu - <p> - Amazing decentralized platform with a lot of epic clients. It's what I prefer for my personal - communication - </p> - </li> + <li> + <a + title="Matrix" + href="https://matrix.to/#/@crispy:crispy-caesus.eu" + target="_blank" + rel="noopener nofererrer" + > + Matrix + </a> + - @crispy:crispy-caesus.eu + <p> + Amazing decentralized platform with a lot of epic clients. It's + what I prefer for my personal communication + </p> + </li> - <li> - <a title="toothbrushing music" href="music"> - toothbrushing music - </a> - <br /> - <img src="static/toothrush.png" alt="toothbrush vibing" class="toothbrush-img non-pixelated" /> - <p> - Over the past months I've created my little legally aquired library of DRM-free music. There are - a bunch of reasons why I prefer this way of aquiring music in this way, most of which boils down - to independence and artist support. - </p> - </li> - </ul> + <li> + <a title="toothbrushing music" href="music"> + toothbrushing music + </a> + <br /> + <img + src="static/toothrush.png" + alt="toothbrush vibing" + class="toothbrush-img non-pixelated" + /> + <p> + Over the past months I've created my little legally aquired + library of DRM-free music. There are a bunch of reasons why I + prefer this way of aquiring music in this way, most of which + boils down to independence and artist support. + </p> + </li> + </ul> </div> + </main> + <footer> + <div class="credits box"> + <p>art drawn by the amazing</p> + <a + title="VanillaPunkk Instagram" + href="https://www.instagram.com/vannillapunkk/" + target="_blank" + rel="noopener nofererrer" + >VanillaPunkk</a + > + </div> + </footer> </div> - <div> - <footer> - <div class="box footer"> - <div class="credits"> - <br> - <p>art drawn by the amazing</p> - <a title="VanillaPunkk Instagram" href="https://www.instagram.com/vannillapunkk/" target="_blank" - rel="noopener nofererrer">VanillaPunkk</a> - </div> - </div> - </footer> - </div> -</body> - + </body> </html>