diff options
| -rwxr-xr-x | .zs/buttons | 2 | ||||
| -rw-r--r-- | .zs/buttons.jq | 1 | ||||
| -rw-r--r-- | .zs/config.yml | 4 | ||||
| -rw-r--r-- | .zs/layout.html | 9 | ||||
| -rwxr-xr-x | .zs/scripts | 6 | ||||
| -rw-r--r-- | assets/button.png | bin | 0 -> 646 bytes | |||
| -rw-r--r-- | assets/css/main.css | 174 | ||||
| -rw-r--r-- | assets/js/main.js | 41 | ||||
| -rw-r--r-- | blog/a_cautionary_tale.md | 3 | ||||
| -rw-r--r-- | buttons.json | 24 | ||||
| -rw-r--r-- | index.md | 13 | ||||
| -rw-r--r-- | prismite.html | 9 | ||||
| -rw-r--r-- | projects.md | 8 |
13 files changed, 220 insertions, 74 deletions
diff --git a/.zs/buttons b/.zs/buttons new file mode 100755 index 0000000..9ea9460 --- /dev/null +++ b/.zs/buttons @@ -0,0 +1,2 @@ +#!/bin/sh +cat buttons.json | jq -r -f .zs/buttons.jq diff --git a/.zs/buttons.jq b/.zs/buttons.jq new file mode 100644 index 0000000..833971a --- /dev/null +++ b/.zs/buttons.jq @@ -0,0 +1 @@ +map("<a href=\"\(.link)\"><img src=\"\(.image)\" alt=\"An 88x31 button. \(.alt)\" title=\"\(.title)\"></a>") | join("\n") diff --git a/.zs/config.yml b/.zs/config.yml index d421309..6c9dce8 100644 --- a/.zs/config.yml +++ b/.zs/config.yml @@ -1,6 +1,6 @@ --- -title: delta.twoexem.com -description: ma olin mi lon kulupu nanpa +title: darkuss.twoexem.com +description: a silly place for a silly person extensions: - anchor diff --git a/.zs/layout.html b/.zs/layout.html index 5c0671b..fe8910e 100644 --- a/.zs/layout.html +++ b/.zs/layout.html @@ -37,8 +37,13 @@ <div> <main><div>{{ content }}</div></main> <footer class="subtle"> - <span>made with <span style="color: var(--red)"><3</span> by darkuss</span><span><a href="/credits.html">credits</a></span - ><span>last modified: <time datetime="{{ current_date }}">{{ current_date }}</time></span> + <div> + <span><a class="volatile" href="https://ring.acab.dev/prev/C1NMCp8IXr">[<<]</a></span><span><a class="volatile" href="https://ring.acab.dev/rand/C1NMCp8IXr">[random]</a></span><span><a href="https://ring.acab.dev">[⠠⠵ ]</a></span><span><a class="volatile" href="https://ring.acab.dev/next/C1NMCp8IXr">[>>]</a></span> + </div> + <div> + <span>made with <span style="color: var(--red)"><3</span> by darkuss</span><span><a href="/credits.html">credits</a></span + ><span>last modified: <time datetime="{{ current_date }}">{{ current_date }}</time></span> + </div> </footer> </div> </div> diff --git a/.zs/scripts b/.zs/scripts index 7e1f2ad..f40dd48 100755 --- a/.zs/scripts +++ b/.zs/scripts @@ -5,9 +5,9 @@ set -e JS="" # Load live.js for non-production builds for faster development -if [ -z "$ZS_PRODUCTION" ]; then - JS="$JS live" -fi +# if [ -z "$ZS_PRODUCTION" ]; then +# JS="$JS live" +# fi for js in $JS; do printf "<script type=\"application/javascript\" src=\"/assets/js/%s.js\"></script>\n" "$js" diff --git a/assets/button.png b/assets/button.png Binary files differnew file mode 100644 index 0000000..dacd53a --- /dev/null +++ b/assets/button.png diff --git a/assets/css/main.css b/assets/css/main.css index 835b6f9..c2b56c0 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -32,10 +32,11 @@ --pink-bright: oklch(90% 0.06662 9.2146); --border-radius: 5px; - --border-width: 2px; + --border-width: 1px; --padding: 5px; --padding-big: 10px; --easing: cubic-bezier(0.2, 0.0, 0, 1.0); + --arrow-size: 1em; } body { @@ -71,7 +72,7 @@ body { left: 50%; top: 50%; z-index: -2; - animation: scroll 12s linear infinite; + animation: scroll 16s linear infinite; } @keyframes scroll { @@ -146,30 +147,42 @@ nav > ul { main { flex-grow: 1; width: 80vw; - line-height: 1.6; + line-height: 1.4; + box-sizing: border-box; } nav > ul { display: flex; } +nav { + z-index: 999; +} + main, nav { padding: var(--padding-big); } nav li:not(:last-of-type)::after, -footer > span:not(:last-of-type)::after { +footer > div > span:not(:last-of-type)::after { content: "|"; margin-left: var(--padding); margin-right: var(--padding); color: var(--border); } +footer > div { + line-height: 1.5; +} + footer { text-align: center; padding: var(--padding); font-size: 0.8em; + display: flex; + flex-direction: column; + gap: var(--padding); } a, @@ -177,7 +190,7 @@ a:link { color: var(--yellow); } -a:visited { +a:not(.volatile):visited { color: var(--pink); } @@ -190,18 +203,35 @@ a:active { color: var(--yellow); } +.anchor { + order: -1; + text-decoration: none; +} + +.anchor::after { + content: "#"; +} + +h1, h2 { + line-height: 1; + display: flex; + align-items: center; + gap: var(--padding-big); +} + +h1::after, h2::after { + content: ""; + height: var(--border-width); + background-color: var(--border); + flex-grow: 1; +} + h1 { font-size: 1.5em; - margin-bottom: calc(var(--padding-big) * 2); } h2 { font-size: 1.25em; - margin-bottom: calc(var(--padding-big) * 1.5); -} - -p:not(:last-of-type) { - margin-bottom: var(--padding-big); } main li { @@ -222,19 +252,131 @@ main ul { flex-direction: column; } -main ol:not(:last-child), -main ul:not(:last-child) { +main ol, +main ul, +p, +pre, +h1, h2 +{ margin-bottom: var(--padding-big); } +main > :last-child { + margin-bottom: 0; +} + strong { font-weight: bold; } code { - background-color: var(--bg-low); - padding: var(--padding); border-radius: var(--border-radius); + padding-inline: calc(var(--padding) / 2); font-family: "Aporetic Mono", monospace; - text-wrap: nowrap; + border: var(--border-width) solid var(--border); + overflow-wrap: anywhere; +} + +pre { + overflow: hidden; +} + +pre > code { + display: block; + padding: calc(var(--padding) * 2); + position: relative; + line-height: 1.3; + overflow-wrap: break-word; + background: transparent; + overflow-x: scroll; +} + +pre > code[data-lang]::after { + content: attr(data-lang); + position: absolute; + top: 0; + right: 0; + padding: var(--padding); + border-radius: 0 var(--border-radius); + border-bottom: var(--border-width) solid var(--border); + border-left: var(--border-width) solid var(--border); + background-color: var(--bg-high); + transition: transform 0.2s var(--easing); +} + +pre > code[data-lang]:hover::after { + transform: translateX(100%); +} + +@media (max-width: 130ch) { + aside { + padding: var(--padding-big); + font-size: 0.9em; + box-sizing: border-box; + border: var(--border-width) solid var(--border); + border-radius: var(--border-radius); + background-color: var(--bg-high); + position: relative; + margin-bottom: var(--padding-big); + margin-top: calc(var(--padding-big) + var(--arrow-size) / 2); + } + + aside::after, + aside::before { + content: ""; + border-right: var(--arrow-size) solid transparent; + border-left: var(--arrow-size) solid transparent; + position: absolute; + width: 0; + height: 0; + left: 50%; + transform: translateX(-50%); + } + + aside::before { + border-bottom: var(--arrow-size) solid var(--border); + top: calc(var(--arrow-size) * -1); + } + + aside::after { + border-bottom: var(--arrow-size) solid var(--bg-high); + top: calc(var(--arrow-size) * -1 + var(--border-width)); + } +} + +@media (min-width: 130ch) { + aside { + position: absolute; + right: var(--padding-big); + max-width: calc(10vw - var(--padding-big)); + padding: var(--padding-big); + font-size: 0.9em; + box-sizing: border-box; + border: var(--border-width) solid var(--border); + border-radius: var(--border-radius); + background-color: var(--bg-high); + transform: translateY(calc(-50% - 1lh)); + } + + aside::after, + aside::before { + content: ""; + border-top: var(--arrow-size) solid transparent; + border-bottom: var(--arrow-size) solid transparent; + position: absolute; + width: 0; + height: 0; + top: 50%; + transform: translateY(-50%); + } + + aside::before { + border-right: var(--arrow-size) solid var(--border); + left: calc(var(--arrow-size) * -1); + } + + aside::after { + border-right: var(--arrow-size) solid var(--bg-high); + left: calc(var(--arrow-size) * -1 + var(--border-width)); + } } diff --git a/assets/js/main.js b/assets/js/main.js deleted file mode 100644 index 5bc2d41..0000000 --- a/assets/js/main.js +++ /dev/null @@ -1,41 +0,0 @@ -// Toggle the navigation menu and theme -document.addEventListener("DOMContentLoaded", function () { - var menuToggle = document.getElementById("menu-toggle"); - var mainNav = document.getElementById("main-nav"); - var themeToggle = document.getElementById("theme-toggle"); - var body = document.body; - - // Menu toggle functionality - menuToggle.addEventListener("click", function () { - mainNav.classList.toggle("open"); - }); - - // Theme toggle functionality - themeToggle.addEventListener("click", function () { - // Toggle between 'light' and 'dark' themes - var currentTheme = body.getAttribute("data-theme") || "light"; - var newTheme = currentTheme === "dark" ? "light" : "dark"; - body.setAttribute("data-theme", newTheme); - localStorage.setItem("theme", newTheme); - }); - - // On page load, set the theme from localStorage or system preference - var storedTheme = localStorage.getItem("theme"); - if (storedTheme) { - body.setAttribute("data-theme", storedTheme); - } else { - // Detect system preference - var prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches; - var defaultTheme = prefersDarkScheme ? "dark" : "light"; - body.setAttribute("data-theme", defaultTheme); - } - - // Listen for changes in the system color scheme - window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function (e) { - var storedTheme = localStorage.getItem("theme"); - if (!storedTheme) { - var newColorScheme = e.matches ? "dark" : "light"; - body.setAttribute("data-theme", newColorScheme); - } - }); -}); diff --git a/blog/a_cautionary_tale.md b/blog/a_cautionary_tale.md index 8a74c00..b9797bf 100644 --- a/blog/a_cautionary_tale.md +++ b/blog/a_cautionary_tale.md @@ -10,3 +10,6 @@ Thus, with my cat ears and thigh highs on, off I went in search of resources on We spent about an hour discussing a solution to my predicament, and in the end we came to the conclusion that while a cubic easing function could be approximated by tweaking the intro and outro durations and altering the easing function, I should simply use another library that doesn't use derivatives for specifying the easing function. This stemmed from the fact that for every well-defined cubic Bézier curve (i.e., `A = (0,0)`, `D = (1,1)`, and `B` and `C` are both in the range `[0–1]`), both the start and the end of the function would be at `y = 0`, making it incompatible with rubato's model (except when intro = 1, which would defeat the purpose of using rubato as an interrupt-friendly interpolator in the first place). The moral of the story? Don’t rice, kids. +<aside> +17/09/25: Goodness gracious, my writing was (and still, probably, is) *horrible*. I'd rather delete this, but alas, my principles don't allow me to. The real moral of the story is that you will always sound cringe when you start writing +</aside> diff --git a/buttons.json b/buttons.json new file mode 100644 index 0000000..6155a0e --- /dev/null +++ b/buttons.json @@ -0,0 +1,24 @@ +[ + { + "link": "https://sdomi.pl", + "image": "https://sdomi.pl/img/button.bmp", + "alt": "Witch hat on the left, text 'sdomi' on the right. The background is procedurally generated every 30 or so seconds.", + "title": "sdomi's webpage" + }, + { + "link": "https://milobit.net", + "image": "https://milobit.net/badge.gif", + "alt": "Large text 'milobit' and small text '.net' undearneath it.", + "title": "milobit's webpage" + }, + { + "link": "https://famfo.xyz", + "image": "https://famfo.xyz/banner/famfo_anim.gif", + "alt": "Text saying 'famfo' on the left. Underneath it is a commandline prompt. To the right are lines scrolling downwards and a symbol representing mesh networks" + }, + { + "link": "https://twoexem.com", + "image": "https://twoexem.com/resources/88x31/twoexem.gif", + "alt": "A landscape with windmills is visible on the button. The sky is cloudy, with one cloud spelling out '2xm'" + } +] @@ -2,14 +2,21 @@ title: Homepage --- -# hello! cześć! привіт! привет! toki! +# hello! cześć! привіт! привет! ## I, darkuss <span class="subtle">/'daɹ̠kʏs:/</span>, welcome you to this little corner of the internet -I primarily use lua and rust, although I also know html, css/scss and js/ts. I'm currently studying networking/hosting. +my primary hobby is [hacking](https://www.catb.org/jargon/html/H/hack.html), most often with the goal of [ricing](https://www.reddit.com/r/unixporn/wiki/themeing/dictionary/#wiki_rice), with the main instruments of chaos being lua, rust, html, css/scss and js/ts. additionally, I dabble in networking/hosting. I listen to plethora of different genres and artists, from [ShibayanRecords](https://shibayan.info/) to [ワビサビータ！ (WABISAVITA!)](https://wbsv.bandcamp.com/) if you feel like getting to know me, or simply want to talk to me, you can find me here: - matrix - [@deltaaaa:matrix.org](matrix:u/deltaaaa:matrix.org?action=chat) - discord - [darkuss_](https://discord.id/?prefill=770804101332074547) - soulseek - delta -- email (__heavily__ discouraged, i check it __once in a blue moon__) - darkusss at proton dot me +- fedi - [@darkuss](https://donotsta.re/darkuss) +- email (__heavily__ discouraged, I check it __once in a blue moon__) - darkusss at proton dot me + +## friends/people I find cool: +{{ buttons }} + +## if you feel like linking to me, here's my button +[](/assets/button.png) diff --git a/prismite.html b/prismite.html index cd212d7..c418077 100644 --- a/prismite.html +++ b/prismite.html @@ -53,8 +53,13 @@ </div> </main> <footer class="subtle"> - <span>made with <span style="color: var(--red)"><3</span> by darkuss</span><span><a href="/credits.html">credits</a></span - ><span>last modified: <time datetime="{{ current_date }}">{{ current_date }}</time></span> + <div> + <span><a class="volatile" href="https://ring.acab.dev/prev/C1NMCp8IXr">[<<]</a></span><span><a class="volatile" href="https://ring.acab.dev/rand/C1NMCp8IXr">[random]</a></span><span><a href="https://ring.acab.dev">[⠠⠵ ]</a></span><span><a class="volatile" href="https://ring.acab.dev/next/C1NMCp8IXr">[>>]</a></span> + </div> + <div> + <span>made with <span style="color: var(--red)"><3</span> by darkuss</span><span><a href="/credits.html">credits</a></span + ><span>last modified: <time datetime="{{ current_date }}">{{ current_date }}</time></span> + </div> </footer> </div> </div> diff --git a/projects.md b/projects.md index 11cbf40..4d20881 100644 --- a/projects.md +++ b/projects.md @@ -2,8 +2,6 @@ title: Projects --- -- [dots](https://git.twoexem.com/delta/dots.git) - my awesomewm config -- [prismite](https://delta.twoexem.com/prismite.html) - my very own colourscheme -- [libmusi](https://git.twoexem.com/delta/libmusi.git) - a library for exposing apis of different music services under a single, unified interface -- [tufumo](https://git.twoexem.com/delta/tufumo.git) - a music player oriented at power users, powered by [libmusa](https://git.twoexem.com/libmusa.git) and inspired by [symfonium](https://www.symfonium.app/) -- [website](https://git.twoexem.com/delta/website.git) - the very website that you're reading right now +- [dots](https://git.twoexem.com/dots) - my awesomewm config +- [prismite](/prismite.html) ([git](https://git.twoexem.com/prismite.nvim)) - my very own colourscheme +- [website](https://git.twoexem.com/website) - the very website that you're reading right now |
