Workaround for top main layout. Edit 'hi' box to minimum heigh of 90% of the container <div> Edit 'cool people' box to miminum height of 10% of the container <div>
Erine Moira me@erine.dev
Sun, 23 Feb 2025 01:28:48 +0700
2 files changed,
174 insertions(+),
134 deletions(-)
M
static/index.css
→
static/index.css
@@ -1,116 +1,116 @@
/* Basic reset */ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } /* Body styling */ body { - 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: 5em; - font-size: 1.3em; - overflow: hidden; + 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: 5em; + font-size: 1.3em; + overflow: hidden; } /* Center the main container */ .box { - padding: 1em; - border: 2px solid #3e4446; - background-color: #181a1b; + padding: 1em; + border: 2px solid #3e4446; + background-color: #181a1b; } .small-box { - padding: 0.3em; - border: 2px solid #3e4446; - background-color: #181a1b; + padding: 0.3em; + border: 2px solid #3e4446; + background-color: #181a1b; } .container { - width: 90%; - text-align: center; + width: 100%; + text-align: center; } .footer { - margin-top: 1em; - text-align: center; + margin-top: 1em; + text-align: center; + min-height: fit-content; } .top { - display: flex; - flex-direction: row; - gap: 0em; + display: flex; + flex-direction: row; + gap: 1em; } .links { - width: 22em; - text-align: justify; + width: 22em; + text-align: justify; } /* Article styling */ article { - padding: 1em; + padding: 1em; } h1 { - font-size: 2em; - margin-bottom: 0.5em; + font-size: 2em; + margin-bottom: 0.5em; } h2 { - font-size: 1.5em; - margin-top: 1em; - margin-bottom: 0.5em; + font-size: 1.5em; + margin-top: 1em; + margin-bottom: 0.5em; } - ul { - list-style-type: none; - padding: 0; + list-style-type: none; + padding: 0; } li { - margin: 1em 0; + margin: 1em 0; } a { - color: #52b7ff; - text-decoration: none; - font-weight: bold; + color: #52b7ff; + text-decoration: none; + font-weight: bold; } a:hover { - text-decoration: underline; + text-decoration: underline; } /* Footer styling */ footer { - background-color: #1f2123; - font-size: 1em; + background-color: #1f2123; + font-size: 1em; } .credits { - display: flex; - justify-content: center; - gap: 15px; + display: flex; + justify-content: center; + gap: 15px; } .credits span { - font-weight: bold; + font-weight: bold; } .banana-img { - height: 20em; + height: 20em; } .toothbrush-img { - height: 3em; + height: 3em; }
M
templates/index.html
→
templates/index.html
@@ -1,95 +1,135 @@
-<!DOCTYPE html> +<!doctype html> <html lang="en"> - -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <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> + <body> <div class="top"> - <div> - <div class="box container"> - <article> - <h1>hi</h1> - <img src="static/banan.png" alt="my profile picture" class="banana-img"> - <p>I'm an 18-year-old student from Germany, aspiring to become a system administrator. I like - tinkering - around - with my Linux system and write a little program here and there.</p> - <p>Currently I'm learning a bunch about server monitoring, as part of a school project</p> + <div + style="background-color: #9fa127; display: flex; flex-direction: column" + > + <div class="box container" style="min-height: 90%"> + <article> + <h1>hi</h1> + <img + src="static/banan.png" + alt="my profile picture" + class="banana-img" + /> + <p> + I'm an 18-year-old student from Germany, aspiring to become a + system administrator. I like tinkering around with my Linux system + and write a little program here and there. + </p> + <p> + Currently I'm learning a bunch about server monitoring, as part of + a school project + </p> + </article> + </div> + <div class="small-box container" style="min-height: 10%"> + cool people + <br /> + <a href="https://crispy-caesus.eu" + ><img src="static/crispybutton.png" + /></a> + <a href="https://erine.dev"><img src="static/crispybutton.png" /></a> + </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 + > + <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 + > + <p> + a list of the anime I have watched and 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> + <p>crispy.caesus</p> + </li> - </article> - </div> - <div class="small-box container"> - cool people - <br> - <a href="https://crispy-caesus.eu"><img src="static/crispybutton.png"></a> - <a href="https://erine.dev"><img src="static/crispybutton.png"></a> - </div> - </div> - <div class="box links"> + <li> + <a + title="Matrix" + href="https://matrix.to/#/@crispy-caesus:matrix.org" + target="_blank" + rel="noopener nofererrer" + > + Matrix + </a> + <p>@crispy-caesus:matrix.org</p> + </li> - <h2>some links</h2> - <ul> - <li> - <a title="Github" href="https://github.com/crispy-caesus" target="_blank" - rel="noopener nofererrer">github</a> - <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> - <p>a list of the anime I have watched and plan to watch and some ratings and - thoughts on - them</p> - <li> - <a title="Discord" href="https://discord.com/users/621759962280099840" target="_blank" - rel="noopener nofererrer"> - Discord - </a> - <p> - crispy.caesus - </p> - </li> - <li> - <a title="Matrix" href="https://matrix.to/#/@crispy-caesus:matrix.org" target="_blank" - rel="noopener nofererrer"> - Matrix - </a> - <p> - @crispy-caesus:matrix.org - </p> - </li> - <li> - <a title="toothbrushing music" - href="https://listen.tidal.com/playlist/2216bae3-7d2c-415f-9583-903ecda9d202" target="_blank" - rel="noopener nofererrer"> - toothbrushing music - </a> - <br> - <img src="static/toothrush.png" alt="toothbrush vibing" class="toothbrush-img"> - </li> - </ul> - </div> + <li> + <a + title="toothbrushing music" + href="https://listen.tidal.com/playlist/2216bae3-7d2c-415f-9583-903ecda9d202" + target="_blank" + rel="noopener nofererrer" + > + toothbrushing music + </a> + <br /> + <img + src="static/toothrush.png" + alt="toothbrush vibing" + class="toothbrush-img" + /> + </li> + </ul> + </div> </div> <div> - <footer> - <div class="box footer"> - <div class="credits"> - <br>art drawn by the amazing <a title="VanillaPunkk Instagram" - href="https://www.instagram.com/vannillapunkk/" target="_blank" - rel="noopener nofererrer">VanillaPunkk</a> - </div> - </div> - </footer> + <footer> + <div class="box footer"> + <div class="credits"> + <br />art drawn by the amazing + <a + title="VanillaPunkk Instagram" + href="https://www.instagram.com/vannillapunkk/" + target="_blank" + rel="noopener nofererrer" + >VanillaPunkk</a + > + </div> + </div> + </footer> </div> -</body> - + </body> </html>