index, buttons, gensite: redesign index a bit, move buttons to separate
crispy-caesus crispy@crispy-caesus.eu
Tue, 29 Sep 2026 14:22:25 +0200
14 files changed,
620 insertions(+),
840 deletions(-)
jump to
M
cmd/server/gensite.go
→
cmd/server/gensite.go
@@ -13,6 +13,8 @@ err := copyFile("templates/index.html", "html/index.html")
check(err) err = copyFile("templates/music.html", "html/music.html") check(err) + err = copyFile("templates/buttons.html", "html/buttons.html") + check(err) err = copyFile("templates/licenses.html", "html/licenses.html") check(err) err = copyFile("templates/privacy.html", "html/privacy.html")
M
static/css/global.css
→
static/css/global.css
@@ -1,3 +1,37 @@
+.padded-box { + border: 2px solid #3e4446; + background-color: #181a1b; + padding: 2em; +} + +.box { + border: 2px solid #3e4446; + background-color: #181a1b; +} + +.eightyeight { + display: flex; + flex-wrap: wrap; + gap: 2px; + > a { + width: 86px; + height: 29px; + border: 1px solid #3e4446; + background-color: #181a1b; + text-align: center; + position: relative; + > img { + position: absolute; + top: -1px; + left: -1px; + } + } + > img { + width: 88px; + height: 31px; + } +} + body { font-family: "Liberation Sans", Helvetica, Arial, sans-serif; line-height: 1.6;
M
static/css/index.css
→
static/css/index.css
@@ -1,169 +1,3 @@
-/* Basic reset */ -* { - margin: 0; - padding: 0; -} - -/* Body styling */ -body { - line-height: 1.6; - min-height: 100vh; - width: 100%; - font-size: 1em; - display: flex; - flex-direction: column; - align-items: center; - padding: 0em; -} - -/* Center the main container */ - -.box { - border: 2px solid #3e4446; - background-color: #181a1b; -} - -.small-box { - border: 2px solid #3e4446; - background-color: #181a1b; -} - -.outer-container { - display: flex; - flex-direction: column; - width: fit-content; - height: fit-content; - padding: 0.5em; -} - -.container { - text-align: center; -} - -.hi { - display: flex; - flex-direction: column; -} - -.top { - display: flex; - flex-direction: column; - gap: 1em; -} - -.top-left { - display: flex; - flex-direction: column; - gap: 1em; -} - -.intro { - height: 80%; -} - -.cool-people { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 20%; - 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 { - padding: 1em; - text-align: start; -} - -article { - padding: 1em; - font-size: 1em; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -/* Article styling */ -h1 { - font-size: 2em; - margin-bottom: 0.5em; -} - -h2 { - font-size: 1.5em; - margin-bottom: 0.5em; -} - -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 { - margin: 1em 0; -} - -a { - font-weight: bold; -} - -a:hover { - text-decoration: underline; -} - -/* Footer styling */ -footer { - 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; - width: 100%; - gap: 0.5em; - padding: 1em 0; -} - -.credits span { - font-weight: bold; -} - -.banana-img { - width: 16em; - aspect-ratio: 820/1180; -} - .toothbrush-img { height: 3em; }@@ -174,46 +8,15 @@ image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges; } -.non-pixelated { - image-rendering: optimizeQuality; -} - -@media (width >= 40rem) { - .outer-container { - padding: 2em; - } - - ul { - grid-template-columns: repeat(2, minmax(0, 1fr)); - column-gap: 1em; - } +h1, h2, h3, h4, h5, h6 { + margin-top: 0; } -@media (width >= 64rem) { - .top { - flex-direction: row; - } - - .links { - width: 64em; - } - - ul { - grid-template-columns: repeat(1, minmax(0, 1fr)); - column-gap: 0; - } - - .cool-people { - padding: 0; - } +p { + margin-top: 0; } -@media (width >= 80rem) { - .outer-container { - padding: 2em 8em; - } - - article { - font-size: 1.3em; - } +ul { + list-style-type:none; + padding:0; }
M
templates/index.html
→
templates/index.html
@@ -9,650 +9,184 @@ <link rel="stylesheet" href="../static/css/index.css" />
<link rel="icon" type="image/png" href="../static/images/banan_icon.png" /> </head> - <body> - <div class="outer-container"> - <main class="top"> - <div class="top-left"> - <article class="box container intro"> - <h1>hi</h1> + <body style=> + <div style="display:flex;flex-wrap:wrap;gap:5px;"> + <main style="flex:1 1 60em;" class="padded-box"> + <h1>hi</h1> + <table> + <td> <img src="../static/images/banan.png" alt="my profile picture" - class="banana-img non-pixelated" + style="float:left;height:10em;" /> + </td> + <td style="width:3em;"> + </td> + <td> + <p style="margin-top:1em;"> + I'm a university student from Germany, aspiring to + become a *nix system engineer/administrator. I like tinkering around + in the Linux space and write a little program here and there. + Some of the things I enjoy are: + </p> + </td> + </table> + <b>Linux tinkering</b> + <p> + I run <a href="https://chimera-linux.org/">Chimera Linux</a> on my PCs, <a href="https://nura.eco/">Nura</a> on my <a href="https://wiki.nura.eco/wiki/PINE64_PinePhone_(pine64-pinephone)">PinePhone</a> and <a href=https://alpinelinux.org/">Alpine Linux</a> containers on my <a href="https://proxmox.com/en/products/proxmox-virtual-environment/overview">Proxmox VE</a>. On those I learn about how computers work, play around and adjust them to my wishes. I do this both by locally configuring the systems in ways I prefer and by hosting network services I want to use, without relying on a third party. + </p> + <b>Programming</b> + <p> + Mostly in <a href="https://www.c-language.org/">C</a> at the moment, as I like exploring how a computer actually works and computes things. + I've also done some <a href="https://go.dev/">Go</a> and <a href="https://www.python.org/">Python</a> projects and learned a few other languages rudimentaryily. + </p> + </main> + <div style="flex:1 1 20em;" class="padded-box links"> + <h3>some links</h3> + <ul> + <li> + <a title="Blog" href="/en/blog">Blog</a> <p> - I'm a 19-year-old university student from Germany, aspiring to - become a system engineer/administrator. I like tinkering around - with my Linux systems and write a little program here and there. + My little blog, where I'll post cool things I found, thoughts I + have and show some stuff I'm doing </p> + </li> + <li> + <a + title="Git" + href="https://git.crispy-caesus.eu" + >Git</a + > <p> - Currently I am doing my bachelor's in a Duale Hochschule. In my - free time (and potentially <i>sometimes</i> during lectures) I - work on my homelab and regret all the other projects I started and - am lagging behind in. + A git web frontend, hosting most of my programming projects, as well as + the dotfiles for my personal systems. </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="static/images/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> - <a - class="image-site-button" - href="https://orangc.net" - target="_blank" - rel="noopener noreferrer" - > - <img - src="https://orangc.net/assets/88x31/orangc.png" - alt="orangc's button" - /> - </a> - <a - class="image-site-button" - href="https://squirrel.talosvault.net" - target="_blank" - rel="noopener noreferrer" - > - <img - src="https://squirrel.talosvault.net/88x31.png" - alt="Squirrel Modeller" - /> - </a> - <a - class="box text-site-button" - href="https://jaglekon.de" - target="_blank" - rel="noopener noreferrer" - > - Jaglekon - </a> - <a - class="image-site-button" - href="https://baumsplitter41.eu" - target="_blank" - rel="noopener noreferrer" - > - <img - src="https://baumsplitter41.eu/static/assets/baumsplitter41.gif" - alt="BaumSplitter41" - /> - </a> - <a - class="box text-site-button" - href="https://damiii.dev" - target="_blank" - rel="noopener noreferrer" - > - Dami - </a> - </div> - <b>buttons</b> - <div class="people-buttons"> - <img - src="/static/buttons/i-like-computer.png" - alt="I like computer" - /> - <a - class="image-site-button" - href="https://ublockorigin.com" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/ublock-origin-now.png" - alt="uBlock Origin Now!" - /> - </a> - <img - src="/static/buttons/choose-chrome-for-built-in-malware.gif" - alt="Choose Chrome for built-in malware" - /> - <a - class="image-site-button" - href="https://developer.mozilla.org/en-US/docs/Web/CSS" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/css-is-awesome.webp" - alt="CSS is awesome" - /> - </a> - <img - src="/static/buttons/discord-no-way.gif" - alt="Discord? No way!" - /> - <a - class="image-site-button" - href="https://www.gimp.org" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/graphics-by-gimp.gif" - alt"Graphics by Gimp" - /> - </a> - <img - src="/static/buttons/zero-javascript.gif" - alt"Proudly ZERO JavaScript" - /> - <img - src="/static/buttons/this-site-is-powered-by-imagination.gif" - alt"this site is powered by imagination" - /> - <img - src="/static/buttons/stand-up-to-google.webp" - alt"Stand up to Google" - /> - <a - class="image-site-button" - href="https://mullvad.net" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/mullvad-free-the-internet.png" - alt"Mullvad - Free the internet" - /> - </a> - <a - class="image-site-button" - href="https://dl-cdn.alpinelinux.org/alpine/v3.23/releases/x86_64/alpine-standard-3.23.4-x86_64.iso -" - > - <img - src="/static/buttons/stop-microsoft.gif" - alt"Stop Microsoft!" - /> - </a> - <a - class="image-site-button" - href="https://firefox.com" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/tested-on-firefox.gif" - alt"Tested on Firefox" - /> - </a> - <a - class="image-site-button" - href="https://www.linux.org/pages/download/" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/linux-powered.gif" - alt"Linux powered" - /> - </a> - <a - class="image-site-button" - href="https://www.iso.org/iso-8601-date-and-time-format.html" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/iso-8601.webp" - alt"ISO 8601 YYYY-MM-DD" - /> - </a> - <a - class="image-site-button" - href="https://en.wikipedia.org/wiki/TikTok#Privacy_and_security_concerns" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/delete-tiktok.gif" - alt"Delete Tiktok" - /> - </a> - <img - src="/static/buttons/best-viewed-with-eyes.gif" - alt"Best viewed with eyes" - /> - <img - src="/static/buttons/clear-text.gif" - alt"Clear text" - /> - <img - src="/static/buttons/fuck-facebook.gif" - alt"fuck facebook" - /> - <a - class="image-site-button" - href="https://www.gnu.org/licenses/gpl-3.0.en.html" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/gplv3.webp" - alt"GPLv3" - /> - </a> - <a - class="image-site-button" - href="https://ffmpeg.org/" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/ffmpeg.gif" - alt"FFMPEG" - /> - </a> - <a - class="image-site-button" - href="https://developer.mozilla.org/en-US/docs/Web/HTML" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/html-learn-it-today.gif" - alt"HTML- Learn it today!" - /> - </a> - <img - src="/static/buttons/i-hate-microsoft.gif" - alt"I hate Microsoft" - /> - <a - class="image-site-button" - href="https://repair.eu" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/i-support-right-to-repair.jpg" - alt"I support right to repair" - /> - </a> - <a - class="image-site-button" - href="https://archive.org" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/internet-archive-preserve.gif" - alt"Internet Archive - Preserve" - /> - </a> - <img - src="/static/buttons/internet-privacy-now.gif" - alt"Internet Privacy Now!" - /> - <a - class="image-site-button" - href="https://damiii.dev/blog/the_world_of_ipv6" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/ipv6.gif" - alt"IPv6" - /> - </a> - <a - class="image-site-button" - href="https://fediverse.party" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/join-the-fediverse.gif" - alt"Join the Fediverse!" - /> - </a> - <a - class="image-site-button" - href="https://kernel.org" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/linux-today.webp" - alt"Linux Today!" - /> - </a> - <a - class="image-site-button" - href="https://neovim.io" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/made-with-neovim.gif" - alt"Made with neovim" - /> - </a> - <a - class="image-site-button" - href="https://www.navidrome.org" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/navidrome.gif" - alt"navidrome" - /> - </a> - <img - src="/static/buttons/big-brother-is-watching.gif" - alt"big brother is watching" - /> - <img - src="/static/buttons/professional-web-design.gif" - alt"Professional Web Design" - /> - <a - class="image-site-button" - href="https://proxmox.com" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/proxmox.gif" - alt"Proxmox" - /> - </a> - <img - src="/static/buttons/sharing-is-caring-seed-your-torrents.gif" - alt"Sharing is caring... Seed your torrents" - /> - <!-- - <img - src="/static/buttons/this-website-sucks.gif" - alt"this Website sucks" - /> - --!> - <img - src="/static/buttons/fuck-google.gif" - alt"Fuck Google" - /> - <img - src="/static/buttons/bandwidth.gif" - alt="Bandwidth conservation society" - /> - <a - class="image-site-button" - href="https://bitwarden.com" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/bitwarden.gif" - alt="Bitwarden" - /> - </a> - <img - src="/static/buttons/cookie-free.gif" - alt="Cookie free" - /> - <img - src="/static/buttons/crushcapitalism.gif" - alt="Crush capitalism" - /> - <img - src="/static/buttons/eattherich.gif" - alt="Eat the rich" - /> - <a - class="image-site-button" - href="https://www.defectivebydesign.org" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/eliminate-drm.gif" - alt="eliminate-drm" - /> - </a> - <img - src="/static/buttons/got-html.gif" - alt="Got HTML?" - /> - <img - src="/static/buttons/graphicdesignpassion.gif" - alt="Graphic design is my passion" - /> - <img - src="/static/buttons/homesite-now.gif" - alt="Homesite now!" - /> - <img - src="/static/buttons/ircworks.gif" - alt="IRC works" - /> - <img - src="/static/buttons/localnet.gif" - alt="Scre y'all I'm going back to my local network." - /> - <img - src="/static/buttons/made-with-css.gif" - alt="Made with Cascading Style Sheets" - /> - <a - class="image-site-button" - href="https://matrix.org" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/matrix.png" - alt="Matrix" - /> - </a> - <a - class="image-site-button" - href="https://minecraft.net" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/minecraft.gif" - alt="Minecraft" - /> - </a> - <img - src="/static/buttons/my-brain-hurts-now.gif" - alt="My brain hurts now!" - /> - <a - class="image-site-button" - href="about:blank" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/nothing.gif" - /> - </a> - <img - src="/static/buttons/paywalls.png" - alt="" - /> - <img - src="/static/buttons/powered-by-penguins.png" - alt="Powered by penguins" - /> - <img - src="/static/buttons/piracynow.gif" - alt="Piracy now!" - /> - <a - class="image-site-button" - href="https://seized.fyi" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/seized.gif" - alt="This 88x31 has been seized" - /> - </a> - <img - src="/static/buttons/the-game.png" - alt="You lost the game" - /> - <a - class="image-site-button" - href="https://www.torproject.org/download" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/tor.gif" - alt="Tor" - /> - </a> - <a - class="image-site-button" - href="https://eightyeightthirty.one" - target="_blank" - rel="noopener noreferrer" - > - <img - src="/static/buttons/88x31.png" - alt"eightyeightthirty.one" - /> - </a> - </div> - </div> + </li> + <li> + <a + title="crispy buttons" + href="/buttons" + >Buttons</a> + </li> + </ul> + <h3>contact</h3> + <ul> + <li> + <a + title="E-Mail" + href="mailto:crispy@crispy-caesus.eu" + target="_blank" + rel="noopener nofererrer" + > + E-Mail + </a> + - crispy@crispy-caesus.eu + <p> + Nice for long form communication, though please use + <a title="My PGP key" href="static/other/pgp">PGP</a>. + I should really selfhost it some time. + </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> + For instant messaging. + </p> + </li> + </ul> + </div> + </div> + <div style="margin-top:5px;display:flex;flex-wrap:wrap;gap:5px;"> + <div style="flex:1" class="padded-box"> + <h3>stuff</h3> + <ul> + <li> + <a href=https://keepitfree.ai/>https://keepitfree.ai/</a> + </li> + <li> + <a href=https://keepandroidopen.org/>https://keepandroidopen.org/</a> + </li> + <li> + <a href=https://fightchatcontrol.eu/>https://fightchatcontrol.eu/</a> + </li> + </ul> + </div> + <div style="flex:1" class="padded-box"> + <h3>cool people</h> + <div style="margin:1em" class="eightyeight"> + <a href="https://crispy-caesus.eu"> + <img src="static/images/crispybutton.png"/> + </a> + <a + href="https://erine.dev/" + > + <img + src="https://chibisafe.crispy-caesus.eu/MEkVLB08qVlq.png" + alt="erine-button" + /> + </a> + <a + href="https://notashelf.dev/" + > + raf + </a> + <a + href="https://tim-niess.com" + > + Tim + </a> + <a + href="https://orangc.net" + > + <img + src="https://orangc.net/assets/88x31/orangc.png" + alt="orangc's button" + /> + </a> + <a + href="https://squirrel.talosvault.net" + > + <img + src="https://squirrel.talosvault.net/88x31.png" + alt="Squirrel Modeller" + /> + </a> + <a + href="https://jaglekon.de" + > + Jaglekon + </a> + <a + href="https://baumsplitter41.eu" + > + <img + src="https://baumsplitter41.eu/static/assets/baumsplitter41.gif" + alt="BaumSplitter41" + /> + </a> + <a + href="https://damiii.dev" + > + Dami + </a> </div> - - <div class="box links"> - <h2>some links</h2> - <ul> - <li> - <a title="Blog" href="/en/blog">Blog</a> - <p> - My little blog, where I'll post cool things I found, thoughts I - have and show some stuff I'm doing - </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 - <a title="My PGP key" href="static/other/pgp">PGP</a>. 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 infrequent and thought - out messages, instead of a bunch of small 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. I mainly use it as a quick chat - with friends or for small group chats - </p> - </li> - <li> - <a - title="Git" - href="https://git.crispy-caesus.eu" - >Git</a - > - <p> - A git web frontend of the server, holding most of my little - programming projects, as well as the dotfiles for my personal - system - </p> - </li> - <li> - <a title="toothbrushing music" href="music"> - toothbrushing music - </a> - <br /> - <p> - Over the past months I've created my little legally aquired - library of DRM-free music, which I stream through my navidrome - instance. There are a bunch of reasons why I prefer this way of - aquiring/listening to music, most of which boils down to - independence and artist support - </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> - </ul> - </div> - </main> - - <footer> - <div class="credits box"> - <p> - <a title="Licenses" href="licenses">Licenses</a> - | - <a title="Privacy Policy" href="privacy">Privacy</a> - </p> - </div> - </footer> - </div> + </div> + </div + <footer> + <div style="margin-top:5px;padding:1em;display:flex;justify-content:center;" class="box"> + <a title="Licenses" href="licenses">Licenses</a> + <p style="margin-left:.5em;margin-right:.5em;margin-bottom:0;">|</p> + <a title="Privacy Policy" href="privacy">Privacy</a> + </div> + </footer> </body> </html>