Fix(people-buttons): Give it a flex wrap layout with responsiveness. Also formatting and the buttons are now correctly aligned. Oh I also fixed the text buttons size as it was 92px*35px instead of 88px*31px due to added size from the border (box class).
Erine Moira me@erine.dev
Tue, 11 Nov 2025 20:07:17 +0700
2 files changed,
185 insertions(+),
173 deletions(-)
M
static/index.css
→
static/index.css
@@ -31,20 +31,6 @@ border: 2px solid #3e4446;
background-color: #181a1b; } -.text-site-button { - display: inline-block; - width: 88px; - height: 31px; - line-height: 31px; - text-align: center; - border-radius: 4px; -} - -.image-site-button { - display: inline-block; - height: 31px; -} - .outer-container { display: flex; flex-direction: column;@@ -85,6 +71,26 @@ justify-content: center;
align-items: center; height: 15%; padding: 1em 0; +} + +.people-buttons { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.25em; + margin: 0 0.25em; +} + +.text-site-button { + width: 84px; + height: 27px; + border-radius: 4px; + text-align: center; +} + +.image-site-button { + width: 88px; + height: 31px; } .links {@@ -216,4 +222,3 @@ article {
font-size: 1.3em; } } -
M
templates/index.html
→
templates/index.html
@@ -1,168 +1,175 @@
<!doctype html> <html lang="en"> - <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> + <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> - <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 class="image-site-button" - href="https://erine.dev/" - target="_blank" - rel="noopener noreferrer" - > - <img - src="https://chibisafe.crispy-caesus.eu/MEkVLB08qVlq.png" - alt="erine-button" - /> - </a> - <a class="box text-site-button" - href="https://notashelf.dev/" - target="_blank" - rel="noopener noreferrer" - > - raf - </a> - <a class="box text-site-button" - href="https://tim-niess.com" - target="_blank" - rel="noopener noreferrer" - > - Tim - </a> + <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> + <div class="people-buttons"> + <a href="https://crispy-caesus.eu" class="image-site-button" + ><img src="https://crispy-caesus.eu/static/crispybutton.png" + /></a> - </span> - </div> - </div> - <div class="box links"> - <h2>some links</h2> - <ul> - <li> - <a - title="Codeberg" - href="https://codeberg.org/crispy-caesus" - target="_blank" - rel="noopener nofererrer" - >Codeberg</a - > - - crispy-caesus - <p> - Git server where I have most of my little projects, as well as my dotfiles for - my Linux configuration - </p> - </li> + <a + class="image-site-button" + href="https://erine.dev/" + target="_blank" + rel="noopener noreferrer" + > + <img + src="https://chibisafe.crispy-caesus.eu/MEkVLB08qVlq.png" + alt="erine-button" + /> + </a> + <a + class="box text-site-button" + href="https://notashelf.dev/" + target="_blank" + rel="noopener noreferrer" + > + raf + </a> + <a + class="box text-site-button" + href="https://tim-niess.com" + target="_blank" + rel="noopener noreferrer" + > + Tim + </a> + </div> + </div> + </div> + <div class="box links"> + <h2>some links</h2> + <ul> + <li> + <a + title="Codeberg" + href="https://codeberg.org/crispy-caesus" + target="_blank" + rel="noopener nofererrer" + >Codeberg</a + > + - crispy-caesus + <p> + Git server where I have 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="E-Mail" - href="mailto:crispy@crispy-caesus.eu" - target="_blank" - rel="noopener nofererrer" - > - E-Mail - </a> - - crispy@crispy-caesus.eu - <p> - Probably my preferred communication medium. At least with PGP. - I really like its decentralized and independent nature. - Besides the technical stuff, I just enjoy it more than instant messaging. I prefer writing longer more thought out messages, instead of a bunch of random talk with no purpose (not that I don't do that, but in hindsight it always seems wasteful). - </p> - </li> + <li> + <a + title="E-Mail" + href="mailto:crispy@crispy-caesus.eu" + target="_blank" + rel="noopener nofererrer" + > + E-Mail + </a> + - crispy@crispy-caesus.eu + <p> + Probably my preferred communication medium. At least with PGP. I + really like its decentralized and independent nature. Besides + the technical stuff, I just enjoy it more than instant + messaging. I prefer writing longer more thought out messages, + instead of a bunch of random talk with no purpose (not that I + don't do that, but in hindsight it always seems wasteful). + </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> - Decentralized instant messaging network/protocol which I like for well... instant messaging. - While it has spaces it's not really great for managing them, so I can't recommend it for large communities. - Thus I mainly use it for DMs and group chats. - </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> + Decentralized instant messaging network/protocol which I like + for well... instant messaging. While it has spaces it's not + really great for managing them, so I can't recommend it for + large communities. Thus I mainly use it for DMs and group chats. + </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> - </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> + <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> - </body> + </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> + </body> </html>