diff options
27 files changed, 886 insertions, 450 deletions
diff --git a/.zs/components/buttons.jq b/.zs/components/buttons.jq index 3d52602..9a135e0 100644 --- a/.zs/components/buttons.jq +++ b/.zs/components/buttons.jq @@ -1,3 +1,3 @@ include ".zs/components/get_filename"; -map("<a href=\"\(.link)\"><img src=\"\($BUTTONS_DIR + (. | filename))\" alt=\"An 88x31 button. \(.alt)\" title=\"\(.title)\"></a>") | join("\n") +map("<a href=\"\(.link)\"><img src=\"\($BUTTONS_DIR + (. | filename))\" alt=\"An 88x31 button. \(.alt)\" title=\"\(.title)\"><div class=\"icon\"><img src=\"/assets/svg/external.svg\"></div><div class=\"link\">\(.link)</div></a>") | join("\n") diff --git a/.zs/components/footer b/.zs/components/footer index 0c0fa63..0a8b019 100755 --- a/.zs/components/footer +++ b/.zs/components/footer @@ -10,82 +10,43 @@ print(html { { tag = "div", { - tag = "span", - { - tag = "a", - class = "volatile", - href = "https://ring.acab.dev/prev/C1NMCp8IXr", - title = "go to the previous page in the webring", - "[<<]" - } - }, - { - tag = "span", - { - tag = "a", - class = "volatile", - href = "https://ring.acab.dev/rand/C1NMCp8IXr", - title = "go to a random page in the webring", - "[?]" - } - }, - { - tag = "span", - { - tag = "a", - class = "volatile", - href = "https://ring.acab.dev", - title = "hacker webring", - "[⠠⠵ ]" - } - }, - { - tag = "span", - { - tag = "a", - class = "volatile", - href = "https://ring.acab.dev/next/C1NMCp8IXr", - title = "go to the next page in the webring", - "[>>]" - } - }, - }, - { - tag = "div", - { - tag = "span", - "made with ", + tag = "div", { tag = "span", - style = "color: var(--red)", - "<3" - }, - " by darkuss" - }, - { - tag = "span", - { - tag = "a", - href = "/credits.html", - "credits" - } - }, - { - tag = "span", - { - tag = "a", - href = "/privacy.html", - "privacy" - } - }, - { - tag = "span", - "last modified: ", - { - tag = "time", - datetime = date, - date + "made with ", + { + tag = "span", + style = "color: var(--red)", + "<3" + }, + " by darkuss" + }, + { + tag = "span", + { + tag = "a", + href = "/credits.html", + "credits" + } + }, + { + tag = "span", + { + tag = "a", + href = "/privacy.html", + "privacy" + } + }, + { + tag = "span", + "built on: ", + { + tag = "time", + datetime = date, + date + } + } } } } -}) +) diff --git a/.zs/components/nav b/.zs/components/nav index 9ec3453..e2ff283 100755 --- a/.zs/components/nav +++ b/.zs/components/nav @@ -3,24 +3,49 @@ package.path = ".zs/?.lua;" .. package.path local html = require "components.html" +---@alias Set table<any, true> + +---@param t any[] +---@return Set +local function set(t) + local tmp = {} + for _, value in ipairs(t) do + tmp[value] = true + end + return tmp +end + ---@class Link ---@field url string ---@field title string ---@field index boolean? +---@field dir string? +---@field inside Set? ---@type Link[] local links = { { url = "/", title = "home", + inside = set { + "index" + } }, { url = "/projects.html", - title = "projects" + title = "projects", + inside = set { + "prismite" + } }, { url = "/posts.html", - title = "ramblings" + title = "ramblings", + dir = "blog" + }, + { + url = "/buttons.html", + title = "buttons" }, { url = "/rss.xml", @@ -28,28 +53,37 @@ local links = { } } +---@param path string +---@return string, integer local function get_file_stem(path) return path :gsub(".[^.]*$", "") -- get rid of ext :gsub(".*/", "") -- get rid of prefix end -local current_file = get_file_stem(os.getenv("ZS_FILE")) +local current_path = assert(os.getenv("ZS_FILE")) +local current_file = get_file_stem(current_path) local acc = {} for _, link in ipairs(links) do local title = link.title - if current_file == get_file_stem(link.url) or current_file == "index" and link.url == "/" then - title = "[" .. title .. "]" + local class = "tab" + if + current_file == get_file_stem(link.url) or + link.inside and link.inside[current_file] or + link.dir and current_path:match(link.dir .. "/") ~= nil + then + class = class .. " active" end table.insert(acc, { tag = "li", + class = class, { tag = "a", href = link.url, - title + title, } }) end @@ -59,5 +93,5 @@ print(html { { tag = "ul", acc - } + }, }) diff --git a/.zs/components/wavy b/.zs/components/wavy new file mode 100755 index 0000000..645442e --- /dev/null +++ b/.zs/components/wavy @@ -0,0 +1,30 @@ +#!/usr/bin/lua + +package.path = ".zs/?.lua;" .. package.path +local html = require "components.html" + +-- select what message to use +local name = arg[1] + +local TEXT = { + hey = "hey there!", + ["404"] = "alas, there is nothing to be found here" +} + +local acc = {} + +local i = 0 +for char in TEXT[name or "hey"]:gmatch(".") do + table.insert(acc, { + tag = "span", + style = "animation-delay:" .. (-800 * i) .. "ms", + char + }) + i = i + 1 +end + +print(html { + tag = "div", + class = "wavy", + acc +}) diff --git a/.zs/components/webring b/.zs/components/webring new file mode 100755 index 0000000..375b6c7 --- /dev/null +++ b/.zs/components/webring @@ -0,0 +1,49 @@ +#!/usr/bin/lua + +package.path = ".zs/?.lua;" .. package.path +local html = require "components.html" + +print(html { + tag = "div", + class = "webring", + { + tag = "span", + { + tag = "a", + class = "volatile", + href = "https://ring.acab.dev/prev/C1NMCp8IXr", + title = "go to the previous page in the webring", + "[<<]" + } + }, + { + tag = "span", + { + tag = "a", + class = "volatile", + href = "https://ring.acab.dev/rand/C1NMCp8IXr", + title = "go to a random page in the webring", + "[?]" + } + }, + { + tag = "span", + { + tag = "a", + class = "volatile", + href = "https://ring.acab.dev", + title = "hacker webring", + "[⠠⠵ ]" + } + }, + { + tag = "span", + { + tag = "a", + class = "volatile", + href = "https://ring.acab.dev/next/C1NMCp8IXr", + title = "go to the next page in the webring", + "[>>]" + } + }, +}) diff --git a/.zs/layout.html b/.zs/layout.html index 21ccc0b..4893239 100644 --- a/.zs/layout.html +++ b/.zs/layout.html @@ -24,16 +24,9 @@ </head> <body> - <div id="deco" aria-hidden=true> - <div id="rainbow"></div> - <div id="triangles"></div> - </div> - <div id="upper" role="presentation"> - {{ .zs/components/nav }} - <div> - <main><div>{{ content }}</div></main> - {{ .zs/components/footer }} - </div> - </div> + <div id="triangles"></div> + {{ .zs/components/nav }} + <main><div>{{ content }}</div></main> + {{ .zs/components/footer }} </body> </html> @@ -74,7 +74,7 @@ EOF href="/$dir/$(basename "${md_file%.md}.html")" # Append to the HTML list - html="$html<li><a href=\"$href\">$title</a><span class="subtle">(published: <time datetime=$formatted_date>$formatted_date</time>)</span></li>" + html="$html<li><a href=\"$href\">$title</a><span>(published: <time datetime=$formatted_date>$formatted_date</time>)</span></li>" done html="$html</ol>" @@ -1,14 +1,52 @@ -#!/bin/sh +#!/usr/bin/lua -set -e +---@class Stylesheet +---@field name string +---@field lazy? boolean -CSS="reset main" -CSS_ZS_FILE=$(echo $ZS_FILE | sed -e 's/.[^.]*$/.css/') +---@type Stylesheet[] +local stylesheets = { + { + name = "reset", + }, + { + name = "main", + }, + { + name = "content", + lazy = true + }, + { + name = "deco", + lazy = true + } +} -for css in $CSS; do - printf "<link rel=\"stylesheet\" href=\"/assets/css/%s.css\">\n" "$css" -done +---@param path string +---@return string, integer +local function get_file_stem(path) + return path + :gsub(".[^.]*$", "") -- get rid of ext + :gsub(".*/", "") -- get rid of prefix +end -if [ -f $(printf "assets/css/%s" "$CSS_ZS_FILE") ]; then - printf "<link rel=\"stylesheet\" href=\"/assets/css/%s\">\n" "$CSS_ZS_FILE" -fi +local current_path = assert(os.getenv("ZS_FILE")) +local current_file = get_file_stem(current_path) + +local f = io.open("assets/css/" .. current_file .. ".page.css") +if f ~= nil then + f:close() + table.insert(stylesheets, { + name = current_file .. ".page" + }) +end + +for _, stylesheet in ipairs(stylesheets) do + local content = [[link rel="stylesheet" href="/assets/css/]] .. stylesheet.name .. [[.css"]] + if stylesheet.lazy then + print("<" .. content .. [[ media="print" onload="this.media='all'; this.onload = null">]]) + print("<noscript><" .. content .. "></noscript>") + else + print("<" .. content .. ">") + end +end @@ -1,2 +1,2 @@ -# alas, there is nothing to be found here +{{ .zs/components/wavy 404 }} <div>if you got here via a link (be it external or from this site), please <a href="/">notify</a> me asap</div> diff --git a/assets/css/404.css b/assets/css/404.page.css index b75ef00..baece67 100644 --- a/assets/css/404.css +++ b/assets/css/404.page.css @@ -8,6 +8,6 @@ main > div { text-align: center; } -main > div > div { - color: var(--fg-low); +.wavy { + margin-bottom: var(--padding-big); } diff --git a/assets/css/buttons.page.css b/assets/css/buttons.page.css new file mode 100644 index 0000000..57e23dc --- /dev/null +++ b/assets/css/buttons.page.css @@ -0,0 +1,103 @@ +main > div { + max-width: 100%; + width: 100%; +} + +p { + +} + +p > img { + width: 20%; + border-radius: var(--border-radius); + display: block; +} + +#buttons { + display: grid; + margin-top: var(--padding-big); + grid-template-columns: repeat(3, 1fr); + gap: var(--padding-big); + flex-grow: 1; + height: min-content; +} + +main a { + position: relative; + display: block; + box-sizing: border-box; + text-decoration: none; + overflow: hidden; + border-radius: var(--border-radius); + color: var(--fg) !important; +} + +main a:focus, +main a:hover { + font-weight: normal; +} + +main a > .icon > img { + width: 1em; + height: 1em; + display: block; +} + +@keyframes ticker { + 0% { + transform: rotate(-90deg) translateX(-9ch); + } + + 100% { + transform: rotate(-90deg) translateX(0ch); + } +} + +main a > img, +p > img { + image-rendering: -webkit-optimize-contrast; + image-rendering: -moz-crisp-edges; + image-rendering: crisp-edges; +} + +main a > img { + width: 100%; + display: block; +} + +main a > .icon, +main a > .link { + --color: var(--bg); + background-color: var(--color); + position: absolute; + transition: transform 0.4s var(--easing); +} + +main a > .link { + bottom: 0; + left: 50%; + transform: translate(-50%, 100%); + font-size: 0.8em; + border-radius: var(--border-radius) var(--border-radius) 0 0; + border: var(--border) solid var(--border-width); + border-bottom: none; + padding: var(--padding); +} + +main a:hover > .link { + transform: translate(-50%, 0); +} + +main a > .icon { + top: 50%; + right: -0.5px; + transform: translate(100%, -50%); + padding: var(--padding-big); + border-radius: var(--border-radius) 0 0 var(--border-radius); + border: var(--border) solid var(--border-width); + border-right: none; +} + +main a:hover > .icon { + transform: translate(0, -50%); +} diff --git a/assets/css/content.css b/assets/css/content.css new file mode 100644 index 0000000..e39b29c --- /dev/null +++ b/assets/css/content.css @@ -0,0 +1,230 @@ +main a, +main a:link { + transition: color 0.1s var(--easing), background-color 0.1s var(--easing); +} + +main a:visited { + color: inherit +} + +main a.volatile:visited { + color: inherit +} + +main a:focus, +main a:hover { + background-color: var(--bg); + color: var(--yellow); +} + +main a:active { + color: inherit +} + +.anchor { + order: -1; +} + +a.anchor:link, a.anchor:visited { + color: var(--border); +} + +a.anchor:focus, +a.anchor:hover { + color: var(--yellow-bright); +} + +a.anchor:active { + color: var(--yellow); +} + +.anchor::after { + content: "#"; + font-size: 0.8em; +} + +h1, h2 { + line-height: 1; + display: flex; + align-items: center; + gap: var(--padding-big); +} + +.anchor::before { + content: ""; + height: var(--border-width); + background-color: var(--border); +} + +h1::after, h2::after { + content: ""; + height: var(--border-width); + background-color: var(--border); + flex-grow: 1; +} + +h1 { + font-size: 1.5em; +} + +h2 { + font-size: 1.25em; +} + +main li { + margin-left: var(--padding-big); + list-style-type: "- "; + list-style-position: inside; +} + +main li::marker { + color: var(--border); +} + +main ol, +main ul { + padding-top: var(--padding); + gap: var(--padding); + display: flex; + flex-direction: column; +} + +p, +pre, +h1, h2 +{ + margin-top: 0.8em; +} + +strong { + font-weight: bold; +} + +code { + border-radius: var(--border-radius); + padding-inline: calc(var(--padding) / 2); + font-family: "Aporetic Mono", monospace; + border: var(--border-width) solid var(--border); + color: var(--fg); + background: var(--bg); + overflow: auto; +} + +pre > code { + display: block; + padding: calc(var(--padding) * 2); + position: relative; + line-height: 1.3; + /* overflow-wrap: break-word; */ +} + +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%); +} + +aside { + padding: var(--padding-big); + border: var(--border-width) solid var(--border); + border-radius: var(--border-radius); + box-sizing: border-box; + font-size: 0.9em; +} + +aside::before, +aside::after { + content: ""; + position: absolute; + width: 0; + height: 0; +} + +/* @media (max-width: 130ch) { */ + aside { + position: relative; + margin-bottom: var(--padding-big); + margin-top: calc(var(--padding-big) + var(--arrow-size) / 2); + } + + aside::before, + aside::after { + border-right: var(--arrow-size) solid transparent; + border-left: var(--arrow-size) solid transparent; + 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(--yellow); + top: calc(var(--arrow-size) * -1 + var(--border-width)); + } +/* } */ + +/* @media (min-width: 130ch) { */ +/* aside { */ +/* position: absolute; */ +/* left: calc(100% + var(--padding-big)); */ +/* max-width: calc(20vw - var(--padding-big)); */ +/* transform: translateY(calc(-50% - 1lh)); */ +/* } */ +/**/ +/* aside::before, */ +/* aside::after { */ +/* 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(--yellow); */ +/* left: calc(var(--arrow-size) * -1 + var(--border-width)); */ +/* } */ +/* } */ + +.wavy > span { + display: inline-block; + transform: translateY(10%); + animation: wave 12s ease-in-out infinite; + white-space: pre; +} + +@keyframes wave { + 0% { + transform: translateY(10%); + } + + 50% { + transform: translateY(-10%); + } + + 100% { + transform: translateY(10%); + } +} diff --git a/assets/css/deco.css b/assets/css/deco.css new file mode 100644 index 0000000..91cf431 --- /dev/null +++ b/assets/css/deco.css @@ -0,0 +1,46 @@ +nav .tab::before, +nav .tab::after { + background-color: var(--color); + z-index: 1; +} + +nav .tab::before, +nav .tab::after, +nav .tab > a::before, +nav .tab > a::after { + --size: var(--border-radius); + content: ""; + width: var(--size); + height: var(--size); + position: absolute; + bottom: 0; +} + +nav .tab::before, +nav .tab > a::before { + right: 100%; +} + +nav .tab::after, +nav .tab > a::after { + left: 100%; +} + +nav .tab > a::before, +nav .tab > a::after { + background-color: var(--bg-lowest); + z-index: 2; +} + +nav .tab > a:focus-visible::before, +nav .tab > a:focus-visible::after { + background-color: transparent; +} + +nav .tab > a::after { + border-bottom-left-radius: var(--size); +} + +nav .tab > a::before { + border-bottom-right-radius: var(--size); +} diff --git a/assets/css/fonts.css b/assets/css/fonts.css index 1e1fc07..82a96e9 100644 --- a/assets/css/fonts.css +++ b/assets/css/fonts.css @@ -4,6 +4,7 @@ src: local("Aporetic"), url("/assets/fonts/aporetic-sans-normalbolditalic.woff2"); font-style: italic; font-weight: bold; + font-display: swap; } @font-face { @@ -11,6 +12,7 @@ src: local("Aporetic"), url("/assets/fonts/aporetic-sans-normalboldupright.woff2"); font-style: normal; font-weight: bold; + font-display: swap; } @font-face { @@ -18,6 +20,7 @@ src: local("Aporetic"), url("/assets/fonts/aporetic-sans-normalregularitalic.woff2"); font-style: italic; font-weight: normal; + font-display: swap; } @font-face { @@ -25,6 +28,7 @@ src: local("Aporetic"), url("/assets/fonts/aporetic-sans-normalregularupright.woff2"); font-style: normal; font-weight: normal; + font-display: swap; } /* Mono */ @@ -33,6 +37,7 @@ src: local("Aporetic Mono"), url("/assets/fonts/aporetic-sans-mono-normalbolditalic.woff2"); font-style: italic; font-weight: bold; + font-display: swap; } @font-face { @@ -40,6 +45,7 @@ src: local("Aporetic Mono"), url("/assets/fonts/aporetic-sans-mono-normalboldupright.woff2"); font-style: normal; font-weight: bold; + font-display: swap; } @font-face { @@ -47,6 +53,7 @@ src: local("Aporetitalicic Mono"), url("/assets/fonts/aporetic-sans-mono-normalregularitalic.woff2"); font-style: italic; font-weight: normal; + font-display: swap; } @font-face { @@ -54,4 +61,14 @@ src: local("Aporetic Mono"), url("/assets/fonts/aporetic-sans-mono-normalregularupright.woff2"); font-style: normal; font-weight: normal; + font-display: swap; +} + +/* Fallback */ +@font-face { + font-family: "Aporetic Fallback"; + src: local(-apple-system), local(BlinkMacSystemFont), local("Segoe UI"), local("Noto Sans"), local(Helvetica), local(Arial), local(sans-serif); + ascent-override: 96.5%; + descent-override: -21.5%; + line-gap-override: 0.07%; } diff --git a/assets/css/index.page.css b/assets/css/index.page.css new file mode 100644 index 0000000..bf7091b --- /dev/null +++ b/assets/css/index.page.css @@ -0,0 +1,15 @@ +main > div { + min-height: 100%; + display: flex; + flex-direction: column; +} + +main > div > div:first-child { + flex-grow: 1; +} + +.webring { + display: flex; + gap: var(--padding); + justify-content: center; +} diff --git a/assets/css/main.css b/assets/css/main.css index 32ea47d..504fd15 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -32,6 +32,7 @@ --pink-bright: oklch(90% 0.06662 9.2146); --border-radius: 5px; + --border-radius-big: calc(var(--border-radius) * 4); --border-width: 1px; --padding: 5px; --padding-big: 10px; @@ -40,38 +41,32 @@ } body { - font-family: "Aporetic", "Open Sans", sans-serif; - background-color: var(--bg); + font-family: "Aporetic", "Aporetic Fallback"; + background-color: var(--bg-lowest); background-repeat: repeat; - color: var(--fg); + color: var(--bg); display: flex; - gap: var(--padding-big); min-height: 100vh; - padding: var(--padding-big); + padding: calc(var(--padding-big) * 2); + padding-bottom: 0; box-sizing: border-box; position: relative; -} - -#deco { - overflow: hidden; - position: fixed; - width: 100%; - height: 100%; - left: 0; - top: 0; - z-index: -1; + scroll-behavior: smooth; + flex-direction: column; } #triangles { content: ""; - width: 200%; - height: 200%; - background-image: url("/assets/triangle.svg"); - position: absolute; - transform: translate(-50%, -50%) rotate(22.5deg); + /* cos(22.5deg) sin(22.5deg) */ + width: calc(100vw * 0.92387953 + 100vh * 0.38268343); + height: calc(100vh * 0.92387953 + 100vw * 0.38268343); + position: fixed; left: 50%; top: 50%; - z-index: -2; + z-index: 2; + background-image: url("/assets/triangle.svg"); + opacity: 0.075; + transform: translate(-50%, -50%) rotate(22.5deg); animation: scroll 16s linear infinite; } @@ -87,323 +82,121 @@ body { } } -#rainbow { - --bar-size: 0.3em; - position: absolute; - z-index: -1; - bottom: 0; - right: 0; - aspect-ratio: 1 / 1; - height: calc(var(--bar-size) * 14); /* magic number */ - background-image: linear-gradient( - -45deg, - transparent, - transparent var(--bar-size), - var(--blue) var(--bar-size), - var(--blue) calc(var(--bar-size) * 2), - transparent calc(var(--bar-size) * 2), - transparent calc(var(--bar-size) * 3), - var(--green) calc(var(--bar-size) * 3), - var(--green) calc(var(--bar-size) * 4), - transparent calc(var(--bar-size) * 4), - transparent calc(var(--bar-size) * 5), - var(--yellow) calc(var(--bar-size) * 5), - var(--yellow) calc(var(--bar-size) * 6), - transparent calc(var(--bar-size) * 6), - transparent calc(var(--bar-size) * 7), - var(--orange) calc(var(--bar-size) * 7), - var(--orange) calc(var(--bar-size) * 8), - transparent calc(var(--bar-size) * 8), - transparent calc(var(--bar-size) * 9), - var(--red) calc(var(--bar-size) * 9), - var(--red) calc(var(--bar-size) * 10), - transparent calc(var(--bar-size) * 10) - ); -} - -/* - * failsafe for when the viewport is too small and the rainbow overlaps the text - */ -main > div, -footer, -nav > ul { - background-color: var(--bg); - box-shadow: var(--bg) 0 0 32px 8px; - border-radius: var(--border-radius); -} - -#upper { - display: flex; - flex-direction: column; - flex-grow: 1; -} - -#upper > div { - flex-grow: 1; - display: flex; - flex-direction: column; - gap: var(--padding-big); - align-items: center; -} - .subtle { color: var(--fg-low); } main { flex-grow: 1; - width: 80vw; line-height: 1.4; + padding: calc(var(--padding-big) * 2); + display: flex; + justify-content: center; box-sizing: border-box; + background-color: var(--yellow); + border-radius: var(--border-radius-big); + overflow: hidden; + text-wrap: pretty; } -nav { - z-index: 999; -} - -nav > ul > li { - display: inline; +main > div { + max-width: 70%; + z-index: 3; + position: relative; } -main, nav { - padding: var(--padding-big); -} - -nav li:not(:last-of-type)::after, -footer > div > span:not(:last-of-type)::after { - content: ""; - border-left: calc(var(--border-width) * 1) solid var(--border); - margin-left: var(--padding); - margin-right: var(--padding); - display: inline-block; - vertical-align: baseline; - height: 1cap; -} - -footer > div { - line-height: 1.5; + padding-bottom: 0; + position: relative; } -footer { - text-align: center; - padding: var(--padding); - font-size: 0.8em; +nav > ul { display: flex; - flex-direction: column; - gap: var(--padding); + gap: calc(var(--padding) + var(--border-radius) * 2); + padding-left: calc(var(--border-radius-big) + var(--padding-big)); } -a, -a:link { - color: var(--yellow); +nav .tab { + --color: var(--bg); + display: block; + color: var(--fg); + border-radius: var(--border-radius) var(--border-radius) 0 0; + background-color: var(--color); + position: relative; } -a:not(.volatile):visited { - color: var(--pink); +nav .tab:not(.active) { + z-index: 3 } -a:focus, -a:hover { - color: var(--yellow-bright); +nav .tab:hover { + --color: var(--bg-high); } -a:active { - color: var(--yellow); +nav .tab.active { + --color: var(--yellow); + color: var(--bg); } -.anchor { - order: -1; +nav .tab > a { + padding: var(--padding-big); + display: block; + color: inherit; text-decoration: none; + z-index: 3; + position: relative; } -a.anchor:link, a.anchor:visited { - color: var(--fg-low); -} - -a.anchor:focus, -a.anchor:hover { - color: var(--yellow-bright); -} - -a.anchor:active { - color: var(--yellow); +nav .tab > a:focus-visible { + border-radius: var(--border-radius) var(--border-radius) 0 0; + outline: var(--blue) solid calc(var(--border-radius) + 1px); + outline-offset: 0; } -.anchor::after { - content: "#"; +footer { + text-align: center; + color: var(--fg); + border-radius: var(--border-radius-big) var(--border-radius-big) 0 0; + padding: var(--padding-big); font-size: 0.8em; + position: relative; + background-color: var(--bg-lowest); + z-index: 3; } -h1, h2 { - line-height: 1; - display: flex; - align-items: center; - gap: var(--padding-big); -} - -.anchor::before { - content: ""; - height: var(--border-width); - background-color: var(--border); -} - -h1::after, h2::after { - content: ""; - height: var(--border-width); - background-color: var(--border); - flex-grow: 1; -} - -h1 { - font-size: 1.5em; -} - -h2 { - font-size: 1.25em; -} - -main li { - margin-left: var(--padding-big); - list-style-type: "- "; - list-style-position: inside; -} - -main li::marker { - color: var(--border); -} - -main ol, -main ul { - padding-top: var(--padding); - gap: var(--padding); +footer > div { display: flex; flex-direction: column; + gap: var(--padding); } -p, -pre, -h1, h2 -{ - margin-top: 0.8em; -} - -main > :last-child { - margin-bottom: 0; -} - -strong { - font-weight: bold; -} - -code { - border-radius: var(--border-radius); - padding-inline: calc(var(--padding) / 2); - font-family: "Aporetic Mono", monospace; - border: var(--border-width) solid var(--border); - overflow-wrap: anywhere; -} - -pre { - overflow: hidden; +footer > div > div { + line-height: 1.5; } -pre > code { - display: block; - padding: calc(var(--padding) * 2); - position: relative; - line-height: 1.3; - overflow-wrap: break-word; - background: transparent; - overflow-x: scroll; +footer > div > div > span:not(:last-of-type)::after { + content: ""; + border-left: calc(var(--border-width) * 1) solid var(--border); + margin-left: var(--padding); + margin-right: var(--padding); + display: inline-block; + vertical-align: baseline; + height: 1cap; } -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); +footer a { + color: var(--fg); } -pre > code[data-lang]:hover::after { - transform: translateX(100%); +footer a:hover, +footer a:focus { + color: var(--yellow); } -@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)); - } +main a { + color: inherit; } -@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)); - } +.wavy { + font-size: 3em; } diff --git a/assets/css/posts.css b/assets/css/posts.page.css index 50ca347..50ca347 100644 --- a/assets/css/posts.css +++ b/assets/css/posts.page.css diff --git a/assets/css/prismite.css b/assets/css/prismite.page.css index 8c082c6..2eb7b9c 100644 --- a/assets/css/prismite.css +++ b/assets/css/prismite.page.css @@ -1,3 +1,21 @@ +main { + background-color: var(--bg); + color: var(--fg); +} + +nav .tab { + --color: var(--bg-low); +} + +nav .tab.active { + --color: var(--bg); + color: var(--fg); +} + +#triangles { + opacity: 0.5; +} + #logo { display: flex; justify-content: center; @@ -14,10 +32,9 @@ #color_showcase { color: var(--bg); - /* writing-mode: sideways-lr; */ + margin-top: var(--padding-big); max-width: 100%; display: flex; - /* flex-direction: column; */ flex-wrap: wrap; gap: var(--padding-big); } @@ -60,11 +77,6 @@ flex-direction: column; } -/* #color_showcase > div > div:hover { */ -/* color: transparent; */ -/* user-select: none; */ -/* } */ - .fg-light { color: var(--fg); } diff --git a/assets/svg/external.svg b/assets/svg/external.svg new file mode 100644 index 0000000..ab0224d --- /dev/null +++ b/assets/svg/external.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#c8ced7" viewBox="0 0 256 256"><path d="M192,136v72a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V80A16,16,0,0,1,48,64h72a8,8,0,0,1,0,16H48V208H176V136a8,8,0,0,1,16,0Zm32-96a8,8,0,0,0-8-8H152a8,8,0,0,0-5.66,13.66L172.69,72l-42.35,42.34a8,8,0,0,0,11.32,11.32L184,83.31l26.34,26.35A8,8,0,0,0,224,104Z"></path></svg> diff --git a/assets/svg/mask_bottom_left.svg b/assets/svg/mask_bottom_left.svg new file mode 100644 index 0000000..255090d --- /dev/null +++ b/assets/svg/mask_bottom_left.svg @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="128" + height="128" + viewBox="0 0 33.866668 33.866668" + version="1.1" + id="svg1" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <defs + id="defs1" /> + <g + id="layer1"> + <path + id="rect2" + style="fill:#ffffff;fill-opacity:1;stroke-width:6.78397;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:16" + d="M 33.866668,33.866668 A 33.866665,33.866665 0 0 1 0,0 v 33.866668 z" /> + </g> +</svg> diff --git a/assets/svg/mask_bottom_right.svg b/assets/svg/mask_bottom_right.svg new file mode 100644 index 0000000..e99bc40 --- /dev/null +++ b/assets/svg/mask_bottom_right.svg @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="128" + height="128" + viewBox="0 0 33.866668 33.866668" + version="1.1" + id="svg1" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <defs + id="defs1" /> + <g + id="layer1"> + <path + id="rect2" + style="fill:#ffffff;fill-opacity:1;stroke-width:6.78397;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:16" + d="M 33.866668,0 A 33.866665,33.866665 0 0 1 0,33.866668 h 33.866668 z" /> + </g> +</svg> diff --git a/assets/svg/mask_top_left.svg b/assets/svg/mask_top_left.svg new file mode 100644 index 0000000..41f8d41 --- /dev/null +++ b/assets/svg/mask_top_left.svg @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="128" + height="128" + viewBox="0 0 33.866668 33.866668" + version="1.1" + id="svg1" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <defs + id="defs1" /> + <g + id="layer1"> + <path + id="rect2" + style="fill:#ffffff;fill-opacity:1;stroke-width:6.78397;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:16" + d="M 0,33.866668 A 33.866665,33.866665 0 0 1 33.866668,0 H 0 Z" /> + </g> +</svg> diff --git a/assets/svg/mask_top_right.svg b/assets/svg/mask_top_right.svg new file mode 100644 index 0000000..ab0c7e7 --- /dev/null +++ b/assets/svg/mask_top_right.svg @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="128" + height="128" + viewBox="0 0 33.866668 33.866668" + version="1.1" + id="svg1" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <defs + id="defs1" /> + <g + id="layer1"> + <path + id="rect2" + style="fill:#ffffff;fill-opacity:1;stroke-width:6.78397;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:16" + d="M 0,0 A 33.866665,33.866665 0 0 1 33.866668,33.866668 V 0 Z" /> + </g> +</svg> diff --git a/assets/triangle.svg b/assets/triangle.svg index 7e960f6..3ce502b 100644 --- a/assets/triangle.svg +++ b/assets/triangle.svg @@ -14,9 +14,9 @@ <g id="layer1" transform="matrix(0.33333334,0,0,0.33333332,4.2333331,4.2333329)" - style="fill:#0c1116;fill-opacity:1"> + style="fill:#070c11;fill-opacity:1"> <path - style="fill:#0c1116;fill-opacity:1;stroke-width:0.661458;stroke-linecap:round;stroke-miterlimit:16" + style="fill:#070c11;fill-opacity:1;stroke-width:0.661458;stroke-linecap:round;stroke-miterlimit:16" id="path1" d="M 5.6178411,3.720292 H 1.7436973 L 3.6807692,0.36518502 Z" transform="matrix(1.6390718,0,0,1.8926372,0.3169551,2.4838372)" /> @@ -24,18 +24,18 @@ <g id="layer1-5" transform="matrix(0.33333334,0,0,-0.33333332,15.08125,8.9958329)" - style="fill:#171c22;fill-opacity:1"> + style="fill:#070c11;fill-opacity:1"> <path - style="fill:#171c22;fill-opacity:1;stroke-width:1.16502;stroke-linecap:round;stroke-miterlimit:16" + style="fill:#070c11;fill-opacity:1;stroke-width:1.16502;stroke-linecap:round;stroke-miterlimit:16" id="path1-3" d="M 15.08125,11.1125 H 8.7312506 L 11.906251,4.7624993 Z" /> </g> <g id="layer1-3" transform="matrix(0.33333334,0,0,0.33333332,16.933333,16.933335)" - style="fill:#0c1116;fill-opacity:1"> + style="fill:#070c11;fill-opacity:1"> <path - style="fill:#0c1116;fill-opacity:1;stroke-width:0.661458;stroke-linecap:round;stroke-miterlimit:16" + style="fill:#070c11;fill-opacity:1;stroke-width:0.661458;stroke-linecap:round;stroke-miterlimit:16" id="path1-7" d="M 5.6178411,3.720292 H 1.7436973 L 3.6807692,0.36518502 Z" transform="matrix(1.6390718,0,0,1.8926372,0.3169551,2.4838372)" /> @@ -43,9 +43,9 @@ <g id="layer1-5-5" transform="matrix(0.33333334,0,0,-0.33333332,2.3812497,21.695833)" - style="fill:#171c22;fill-opacity:1"> + style="fill:#070c11;fill-opacity:1"> <path - style="fill:#171c22;fill-opacity:1;stroke-width:1.16502;stroke-linecap:round;stroke-miterlimit:16" + style="fill:#070c11;fill-opacity:1;stroke-width:1.16502;stroke-linecap:round;stroke-miterlimit:16" id="path1-3-9" d="M 15.08125,11.1125 H 8.7312506 L 11.906251,4.7624993 Z" /> </g> diff --git a/buttons.html b/buttons.html new file mode 100644 index 0000000..2565824 --- /dev/null +++ b/buttons.html @@ -0,0 +1,40 @@ +<!doctype html> +<html lang="en"> + <head> + + <!-- Meta Tags --> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta property="og:title" content="{{ title }}" /> + <meta property="og:type" content="website" /> + <meta property="og:url" content="http://delta.twoexem.com" /> + <meta property="og:description" content="{{ description }}" /> + <meta name="theme-color" content="#ecb256" /> + <title>{{ title }} - darkuss' website</title> + + <!-- Favicon --> + <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png" /> + <link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png" /> + <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png" /> + + <!-- Stylesheets --> + {{ styles }} + + <!-- Scripts --> + {{ scripts }} + </head> + + <body> + <div id="triangles"></div> + {{ .zs/components/nav }} + <main> + <div> + <p>Here's my button (no hotlinking please): + <img src="/assets/button.png" alt="An 88x31 button. It contains a slanted triangle, representing a Greek capital delta. On the right are 5 thin lines, red, orange, yellow, green and blue respectively, filling the rest of the space"> + </p> + <div id="buttons">{{ .zs/components/buttons }}</div> + </div> + </main> + {{ .zs/components/footer }} + </body> +</html> @@ -2,8 +2,11 @@ title: Homepage --- -# hello! cześć! привіт! привет! -I, darkuss <span class="subtle">/'daɹ̠kʏs:/</span>, welcome you to this little corner of the internet +<div> + +{{ .zs/components/wavy }} + +I, darkuss ([/\'daɹ̠kʏs:/](https://en.wikipedia.org/wiki/Help:IPA/English)), welcome you to this little corner of the internet 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/) @@ -11,12 +14,10 @@ I listen to plethora of different genres and artists, from [ShibayanRecords](htt 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 +- soulseek - darkuss - 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: -{{ .zs/components/buttons }} +</div> -## if you feel like linking to me, here's my button -[](/assets/button.png) +{{ .zs/components/webring }} diff --git a/prismite.html b/prismite.html index 1137e45..159ec39 100644 --- a/prismite.html +++ b/prismite.html @@ -24,36 +24,25 @@ </head> <body> - <div id="deco" aria-hidden=true> - <div id="rainbow"></div> - <div id="triangles"></div> - </div> - <div id="upper" role="presentation"> - <nav> - <ul> - {{ .zs/components/nav }} - </ul> - </nav> + <div id="triangles"></div> + {{ .zs/components/nav }} + <main> <div> - <main> - <div> - <div id="logo" aria-label="Prismite"> - <span aria-hidden=true style="color: var(--blue)"> ___ ___ ___ ___ ___ ___ ___ ___ </span> - <span aria-hidden=true style="color: var(--green)"> /\ \ /\ \ /\ \ /\ \ /\__\ /\ \ /\ \ /\ \ </span> - <span aria-hidden=true style="color: var(--yellow)"> /::\ \ /::\ \ _\:\ \ /::\ \ /::L_L_ _\:\ \ \:\ \ /::\ \ </span> - <span aria-hidden=true style="color: var(--orange)"> /::\:\__\ /::\:\__\ /\/::\__\ /\:\:\__\ /:/L:\__\ /\/::\__\ /::\__\ /::\:\__\</span> - <span aria-hidden=true style="color: var(--red)"> \/\::/ / \;:::/ / \::/\/__/ \:\:\/__/ \/_/:/ / \::/\/__/ /:/\/__/ \:\:\/ /</span> - <span aria-hidden=true style="color: var(--pink)"> \/__/ |:\/__/ \:\__\ \::/ / /:/ / \:\__\ \/__/ \:\/ / </span> - <span aria-hidden=true style="color: var(--purple)"> \|__| \/__/ \/__/ \/__/ \/__/ \/__/ </span> - </div> - <h2>prismite - a colourful and comfy theme</h2> - <div id="color_showcase"> - {{ .zs/components/colors }} - </div> - </div> - </main> - {{ .zs/components/footer }} + <div id="logo" aria-label="Prismite"> + <span aria-hidden=true style="color: var(--blue)"> ___ ___ ___ ___ ___ ___ ___ ___ </span> + <span aria-hidden=true style="color: var(--green)"> /\ \ /\ \ /\ \ /\ \ /\__\ /\ \ /\ \ /\ \ </span> + <span aria-hidden=true style="color: var(--yellow)"> /::\ \ /::\ \ _\:\ \ /::\ \ /::L_L_ _\:\ \ \:\ \ /::\ \ </span> + <span aria-hidden=true style="color: var(--orange)"> /::\:\__\ /::\:\__\ /\/::\__\ /\:\:\__\ /:/L:\__\ /\/::\__\ /::\__\ /::\:\__\</span> + <span aria-hidden=true style="color: var(--red)"> \/\::/ / \;:::/ / \::/\/__/ \:\:\/__/ \/_/:/ / \::/\/__/ /:/\/__/ \:\:\/ /</span> + <span aria-hidden=true style="color: var(--pink)"> \/__/ |:\/__/ \:\__\ \::/ / /:/ / \:\__\ \/__/ \:\/ / </span> + <span aria-hidden=true style="color: var(--purple)"> \|__| \/__/ \/__/ \/__/ \/__/ \/__/ </span> + </div> + <h2>prismite - a colourful and comfy theme</h2> + <div id="color_showcase"> + {{ .zs/components/colors }} + </div> </div> - </div> + </main> + {{ .zs/components/footer }} </body> </html> |
