WIP: not vertically centered text site buttons
crispy-caesus crispy@crispy-caesus.eu
Tue, 11 Nov 2025 00:51:33 +0100
2 files changed,
174 insertions(+),
143 deletions(-)
M
static/index.css
→
static/index.css
@@ -31,6 +31,20 @@ 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;@@ -202,3 +216,4 @@ article {
font-size: 1.3em; } } +
M
templates/index.html
→
templates/index.html
@@ -1,152 +1,168 @@
<!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 - 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> + <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> - <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> + </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> - <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="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="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="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="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> - </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> + </body> </html>