diff options
| -rw-r--r-- | assets/bg.jpg | bin | 0 -> 31580 bytes | |||
| -rw-r--r-- | assets/construction.gif | bin | 0 -> 9933 bytes | |||
| -rw-r--r-- | assets/unifont.woff2 | bin | 0 -> 1605860 bytes | |||
| -rw-r--r-- | assets/unifont_upper.woff2 | bin | 0 -> 283288 bytes | |||
| -rw-r--r-- | index.css | 29 | ||||
| -rw-r--r-- | index.html | 101 | ||||
| -rw-r--r-- | style.css | 157 |
7 files changed, 249 insertions, 38 deletions
diff --git a/assets/bg.jpg b/assets/bg.jpg Binary files differnew file mode 100644 index 0000000..4e9044c --- /dev/null +++ b/assets/bg.jpg diff --git a/assets/construction.gif b/assets/construction.gif Binary files differnew file mode 100644 index 0000000..b9c4eeb --- /dev/null +++ b/assets/construction.gif diff --git a/assets/unifont.woff2 b/assets/unifont.woff2 Binary files differnew file mode 100644 index 0000000..d6e201a --- /dev/null +++ b/assets/unifont.woff2 diff --git a/assets/unifont_upper.woff2 b/assets/unifont_upper.woff2 Binary files differnew file mode 100644 index 0000000..47be929 --- /dev/null +++ b/assets/unifont_upper.woff2 diff --git a/index.css b/index.css new file mode 100644 index 0000000..712f8a1 --- /dev/null +++ b/index.css @@ -0,0 +1,29 @@ +.section { + background-color: var(--bg1); +} + +html { + background: url("/assets/bg.jpg"); + background-attachment: fixed; + background-size: cover; + image-rendering: pixelated; +} + +/* Links */ +a { + color: var(--blue); +} + +a:visited { + color: var(--purple); +} + +#weird-fucking-header-container { + display: inline-grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; +} + +.whatever { + grid-area: 1 / 1 / 2 / 2; +}
\ No newline at end of file @@ -5,49 +5,74 @@ <head> <title>soaos</title> + <link rel="preload" href="/assets/unifont.woff2" as="font" type="font/woff2"> + <link rel="preload" href="/assets/unifont_upper.woff2" as="font" type="font/woff2"> + <link rel="stylesheet" href="/style.css" /> + <link rel="stylesheet" href="/index.css" /> + <meta charset="UTF-8" /> </head> <body> - <h1>soaos</h1> + <div class="section"> + <div class="center-content"> + <div id="weird-fucking-header-container" title="π¦ -wuh"> + <h1 class="half whatever">ππ²π²π² soaos π²π²π²π</h1> + <h1 class="flip-x half whatever">ππ²π²π² soaos π²π²π²π</h1> + </div> + </div> + <p class="centered"> + I'm an "artist" and professional software developer. + In my free time I mostly work on eccentric software projects which you can + read about here. + </p> + </div> - <p> - I'm an "artist" and professional software developer. - I do full stack for my work and in my free time I mostly work on eccentric software projects which you can read - about here (soon). - </p> + <div class="section"> + <div class="horizontal-container"> + <div class="centered"> + <h2>Stuff on this Site</h2> + <ul class="no-bullets inline-block"> + <li> + <a href="/projects">βΏ Projects</a><span class="under-construction unselectable" + title="π¦ -this shit is under construction, pal!"> β </span> + </li> + <li> + <a href="/blog">π Blog</a><span class="under-construction unselectable" + title="π¦ -this shit is also under construction!"> β </span> + </li> + <li> + <a href="/things_i_like">π Things I Like</a><span class="under-construction unselectable" + title="π¦ -honestly these things are redundant, everything is under construction"> β </span> + </li> + </ul> + </div> + <div class="centered"> + <h2>Stuff on this Server</h2> + <ul class="no-bullets inline-block"> + <li><a href="https://app.radicle.xyz/nodes/seed.soaos.dev" target="_blank">π± Radicle Seed</a></li> + <li><a href="gemini://soaos.dev">β Gemini Site</a></li> + <li><a href="http://3uqdpspct5xocufs6d4wbdelxlqp4bmciwcgwmqv6c5f2gdsqvawgaad.onion">π§
Tor Site</a> + </li> + </ul> + </div> + <div class="centered"> + <h2>Find Me Elsewhere</h2> + <ul class="no-bullets inline-block"> + <li><a href="mailto:soaos@soaos.dev" rel="me">π§ soaos@soaos.dev</a></li> + <li><a href="https://youtube.com/@soaosdev" rel="me" target="_blank">βΆβ @soaosdev</a></li> + <li><a href="http://soaos.dog" rel="me" target="_blank">π soaos@furry.engineer</a></li> + </ul> + </div> + </div> + </div> - <h2>Stuff on this Site</h2> - <ul> - <li> - <a href="/projects">Projects</a> - </li> - <li> - <a href="/blog">Blog</a> - </li> - <li> - <a href="/things_i_like">Things I Like</a> - </li> - </ul> - - <h2>Stuff on this Server</h2> - <ul> - <li><a href="https://app.radicle.xyz/nodes/seed.soaos.dev" target="_blank">Radicle Seed</a></li> - <li><a href="gemini://soaos.dev">Gemini Site</a></li> - <li><a href="http://3uqdpspct5xocufs6d4wbdelxlqp4bmciwcgwmqv6c5f2gdsqvawgaad.onion">Tor Site</a></li> - </ul> - - <h2>See me</h2> - <ul> - <li>E-Mail: <a href="mailto:soaos@soaos.dev" rel="me">soaos@soaos.dev</a></li> - <li>YouTube: <a href="https://youtube.com/@soaosdev" rel="me" target="_blank">@soaosdev</a></li> - <li>Mastodon: <a href="http://soaos.dog" rel="me" target="_blank">soaos@furry.engineer</a></li> - </ul> - - <h2>Webrings</h2> - <a href="https://evilr.ing/soaos/previous">←</a> - <a href="https://evilr.ing">EVILRING</a> - <a href="https://evilr.ing/soaos/next">→</a> + <div class="section centered"> + <h2>Webrings</h2> + <a class="evil" href="https://evilr.ing/soaos/previous">β§</a> + <a class="evil" href="https://evilr.ing">EVILRING</a> + <a class="evil" href="https://evilr.ing/soaos/next">β€</a> + </div> </body> -</html> +</html>
\ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..0d2384e --- /dev/null +++ b/style.css @@ -0,0 +1,157 @@ +@font-face { + font-family: unifont; + src: url("/assets/unifont.woff2"); +} +@font-face { + font-family: unifont; + src: url("/assets/unifont_upper.woff2"); +} + +html { + --red: #e67e80; + --orange: #e69875; + --yellow: #dbbc7f; + --green: #a7c080; + --blue: #7fbbb3; + --aqua: #83c092; + --purple: #d699b6; + --fg: #d3c6aa; + --statusline1: #a7c080; + --statusline2: #d3c6aa; + --statusline3: #e67e80; + --gray0: #7a8478; + --gray1: #859289; + --gray2: #9da9a0; + + --bg-dim: #232a2e; + --bg0: #2d353b; + --bg1: #343f44; + --bg2: #3d484d; + --bg3: #475258; + --bg4: #4f585e; + --bg5: #56635f; + --bg-red: #4c3743; + --bg-visual: #493b40; + --bg-yellow: #45443c; + --bg-green: #3c4841; + --bg-blue: #384b55; +} + +body { + font-family: unifont; + font-size: 16px; + color: var(--fg); +} + +.section { + margin: 1rem; + padding: 1rem; +} + +.horizontal-container { + display: flex; + justify-content: space-between; +} + +a { + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: normal; + text-decoration: underline; +} + +h1 { + font-size: 48px; +} + +h2 { + font-size: 32px; +} + +h3 { + font-size: 16px; +} + +.centered { + text-align: center; +} + +.center-content { + display: flex; + justify-content: center; +} + +.half { + clip-path: polygon(0 0, 50.1% 0, 50.1% 100%, 0 100%); +} + +.flip-x { + transform: scaleX(-1); +} + +.unselectable { + user-select: none; +} + +@keyframes blinker { + 50% { + opacity: 0; + } +} + +.under-construction { + color: var(--yellow); + animation: blinker 1s linear infinite; +} + +@keyframes evilGlow { + 0% { + text-shadow: 0 0 5px #f00, /* Red glow */ + 0 0 10px #f00, + 0 0 20px #f00, + 0 0 40px #8b0000, /* Darker red for depth */ + 0 0 80px #8b0000; + } + 50% { + text-shadow: 0 0 10px #f00, + 0 0 20px #f00, + 0 0 40px #f00, + 0 0 80px #8b0000, + 0 0 120px #8b0000; + } + 100% { + text-shadow: 0 0 5px #f00, + 0 0 10px #f00, + 0 0 20px #f00, + 0 0 40px #8b0000, + 0 0 80px #8b0000; + } +} + +.evil { + color: var(--red); + animation: evilGlow 2s infinite alternate; +} + +a.evil:visited { + color: var(--red); +} + +a.evil:hover { + color: red; +} + +.inline-block { + display: inline-block; +} + +.no-bullets { + list-style-type: none; + padding-left: 0; +}
\ No newline at end of file |
