redesign with erine
crispy-caesus 114518720+crispy-caesus@users.noreply.github.com
Sat, 22 Feb 2025 17:29:02 +0100
4 files changed,
142 insertions(+),
84 deletions(-)
M
static/index.css
→
static/index.css
@@ -1,90 +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; - display: flex; - justify-content: center; - align-items: flex-start; - min-height: 100vh; + 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; +} + +.small-box { + padding: 0.3em; + border: 2px solid #3e4446; + background-color: #181a1b; +} + .container { - max-width: 35em; - width: 90%; - padding: 1em; - border: 2px solid #3e4446; - background-color: #181a1b; - margin-top: 1em; - text-align: center; + width: 90%; + text-align: center; +} + +.footer { + margin-top: 1em; + text-align: center; +} + +.top { + display: flex; + flex-direction: row; + gap: 1em; +} + +.links { + 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; } -p { - margin-bottom: 1em; -} 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 { - margin-top: 20px; - padding: 10px; - background-color: #1f2123; - font-size: 1em; + background-color: #1f2123; + font-size: 1em; +} + +.credits { + display: flex; + justify-content: center; + gap: 15px; } -.contact-info { - display: flex; - justify-content: center; - gap: 15px; +.credits span { + font-weight: bold; } -.contact-info span { - font-weight: bold; +.banana-img { + height: 20em; } -hr { - border: 1px solid #3e4446; +.toothbrush-img { + height: 3em; }
M
templates/index.html
→
templates/index.html
@@ -2,54 +2,86 @@ <!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"> + <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="container"> - <article> - <h1>hi</h1> - <img src="static/banan.png" alt="my profile picture"> - <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 class="top"> + <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> - <h2>some links</h2> - <ul> - <li> - <a title="github" href="https://github.com/crispy-caesus">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/">anilist</a> - <p>a list of the anime I have watched and plan to watch and some ratings and - thoughts on - them</p> - </li> - </ul> - <!-- Footer section --> - <hr> + </article> + </div> + <div class="box links"> - <footer> - <div class="contact-info"> - <b>Discord: crispy.caesus</b> - <b>Matrix: @crispy-caesus:matrix.org</b> - </div> - </footer> + <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> + </div> + <div> + <footer> + <div class="box footer"> <div class="credits"> - <br>banana drawn by the amazing <a title="VanillaPunkk Instagram" href="https://www.instagram.com/vannillapunkk/">VanillaPunkk</a> + <br>art drawn by the amazing <a title="VanillaPunkk Instagram" + href="https://www.instagram.com/vannillapunkk/" target="_blank" + rel="noopener nofererrer">VanillaPunkk</a> </div> - </article> - </div> + </div> + </footer> + </div> </body> </html>