summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rwxr-xr-x.zs/generate_colors2
-rw-r--r--.zs/generate_colors.jq10
-rw-r--r--.zs/layout.html2
-rw-r--r--.zs/palette.json132
-rw-r--r--assets/css/main.css1
-rw-r--r--assets/css/prismite.css70
-rw-r--r--prismite.html62
-rw-r--r--projects.md1
8 files changed, 279 insertions, 1 deletions
diff --git a/.zs/generate_colors b/.zs/generate_colors
new file mode 100755
index 0000000..7ade457
--- /dev/null
+++ b/.zs/generate_colors
@@ -0,0 +1,2 @@
+#!/bin/sh
+cat .zs/palette.json | jq -r -f .zs/generate_colors.jq
diff --git a/.zs/generate_colors.jq b/.zs/generate_colors.jq
new file mode 100644
index 0000000..d61686a
--- /dev/null
+++ b/.zs/generate_colors.jq
@@ -0,0 +1,10 @@
+to_entries |
+map([
+ (.key | gsub("_"; "-")),
+ ("oklch(" + (.value | join(" ")) + ")")
+]) |
+# group_by(.[0] | gsub("-.*"; "")) |
+reduce .[] as $item ([]; .[if ($item[0] | test("fg|bg|border")) then 0 else 1 end] += [$item]) |
+map(reduce .[] as $item ({}; .[$item[0] | gsub("-.*"; "")] += [$item])) |
+map(map(map("<div style=\"background-color: var(--\(.[0]))\"\(if (.[0] | test("bg|border")) then " class=\"fg-light\"" else "" end)><div class=\"color_name\">\(.[0])</div><div class=\"color_value\">\(.[1])</div></div>") | "<div>" + join("") + "</div>") | "<div>" + join("") + "</div>" ) |
+join("\n")
diff --git a/.zs/layout.html b/.zs/layout.html
index a686192..5c0671b 100644
--- a/.zs/layout.html
+++ b/.zs/layout.html
@@ -24,7 +24,7 @@
</head>
<body>
- <div id="deco">
+ <div id="deco" aria-hidden=true>
<div id="rainbow"></div>
<div id="triangles"></div>
</div>
diff --git a/.zs/palette.json b/.zs/palette.json
new file mode 100644
index 0000000..56b1944
--- /dev/null
+++ b/.zs/palette.json
@@ -0,0 +1,132 @@
+{
+ "fg_low": {
+ "l": "75%",
+ "c": "0.01368",
+ "h": "253.09"
+ },
+ "fg": {
+ "l": "85%",
+ "c": "0.01368",
+ "h": "253.09"
+ },
+ "fg_high": {
+ "l": "95%",
+ "c": "0.01368",
+ "h": "253.09"
+ },
+ "bg_lowest": {
+ "l": "15%",
+ "c": "0.01368",
+ "h": "253.09"
+ },
+ "bg_low": {
+ "l": "17.5%",
+ "c": "0.01368",
+ "h": "253.09"
+ },
+ "bg": {
+ "l": "20%",
+ "c": "0.01368",
+ "h": "253.09"
+ },
+ "bg_high": {
+ "l": "22.5%",
+ "c": "0.01368",
+ "h": "253.09"
+ },
+ "bg_highest": {
+ "l": "25%",
+ "c": "0.01368",
+ "h": "253.09"
+ },
+ "border": {
+ "l": "35%",
+ "c": "0.023",
+ "h": "253.09"
+ },
+ "border_variant": {
+ "l": "30%",
+ "c": "0.023",
+ "h": "253.09"
+ },
+ "red": {
+ "l": "80%",
+ "c": "0.15765",
+ "h": "24.728"
+ },
+ "red_bright": {
+ "l": "90%",
+ "c": "0.15765",
+ "h": "24.728"
+ },
+ "orange": {
+ "l": "80%",
+ "c": "0.139",
+ "h": "45.216"
+ },
+ "orange_bright": {
+ "l": "90%",
+ "c": "0.139",
+ "h": "45.216"
+ },
+ "yellow": {
+ "l": "80%",
+ "c": "0.12758",
+ "h": "76.402"
+ },
+ "yellow_bright": {
+ "l": "90%",
+ "c": "0.12758",
+ "h": "76.402"
+ },
+ "green": {
+ "l": "80%",
+ "c": "0.11211",
+ "h": "147.63"
+ },
+ "green_bright": {
+ "l": "90%",
+ "c": "0.11211",
+ "h": "147.63"
+ },
+ "cyan": {
+ "l": "80%",
+ "c": "0.09919",
+ "h": "181.49"
+ },
+ "cyan_bright": {
+ "l": "90%",
+ "c": "0.09919",
+ "h": "181.49"
+ },
+ "blue": {
+ "l": "80%",
+ "c": "0.09994",
+ "h": "249.58"
+ },
+ "blue_bright": {
+ "l": "90%",
+ "c": "0.09994",
+ "h": "249.58"
+ },
+ "purple": {
+ "l": "80%",
+ "c": "0.09923",
+ "h": "296.61"
+ },
+ "purple_bright": {
+ "l": "90%",
+ "c": "0.09923",
+ "h": "296.61"
+ },
+ "pink": {
+ "l": "80%",
+ "c": "0.06662",
+ "h": "9.2146"
+ },
+ "pink_bright": {
+ "l": "90%",
+ "c": "0.06662",
+ "h": "9.2146"
+ }
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index 62d2eae..edd431a 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -35,6 +35,7 @@
--border-width: 2px;
--padding: 5px;
--padding-big: 10px;
+ --easing: cubic-bezier(0.2, 0.0, 0, 1.0);
}
body {
diff --git a/assets/css/prismite.css b/assets/css/prismite.css
new file mode 100644
index 0000000..5d11838
--- /dev/null
+++ b/assets/css/prismite.css
@@ -0,0 +1,70 @@
+#logo {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ line-height: 1.25;
+ font-family: "Aporetic Mono", monospace;
+ margin-bottom: var(--padding-big);
+}
+
+#logo > span {
+ white-space: pre;
+}
+
+#color_showcase {
+ color: var(--bg);
+ /* writing-mode: sideways-lr; */
+ max-width: 100%;
+ display: flex;
+ /* flex-direction: column; */
+ flex-wrap: wrap;
+ gap: var(--padding-big);
+}
+
+#color_showcase > div {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ gap: var(--padding-big);
+}
+
+#color_showcase > div:not(:first-child) {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(20vw, 1fr));
+}
+
+#color_showcase > div > div {
+ border-radius: var(--border-radius);
+ overflow: hidden;
+}
+
+#color_showcase > div > div {
+ display: flex;
+ gap: var(--padding);
+}
+
+#color_showcase > div > div > div {
+ padding: var(--padding);
+ font-size: 0.75em;
+ transition: color 0.3s var(--easing);
+ font-family: "Aporetic Mono", monospace;
+ flex: 1;
+}
+
+#color_showcase > div:last-child > div {
+ flex-direction: column;
+}
+
+/* #color_showcase > div > div:hover { */
+/* color: transparent; */
+/* user-select: none; */
+/* } */
+
+.fg-light {
+ color: var(--fg);
+}
+
+main > div > h2 {
+ text-align: center;
+}
diff --git a/prismite.html b/prismite.html
new file mode 100644
index 0000000..cd212d7
--- /dev/null
+++ b/prismite.html
@@ -0,0 +1,62 @@
+<!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>prismite - 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="deco" aria-hidden=true>
+ <div id="rainbow"></div>
+ <div id="triangles"></div>
+ </div>
+ <div id="upper">
+ <nav>
+ <ul>
+ {{ generate_nav }}
+ </ul>
+ </nav>
+ <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">
+ {{ generate_colors }}
+ </div>
+ </div>
+ </main>
+ <footer class="subtle">
+ <span>made with <span style="color: var(--red)">&lt;3</span> by darkuss</span><span><a href="/credits.html">credits</a></span
+ ><span>last modified: <time datetime="{{ current_date }}">{{ current_date }}</time></span>
+ </footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/projects.md b/projects.md
index d10bc58..4808ae9 100644
--- a/projects.md
+++ b/projects.md
@@ -6,3 +6,4 @@ title: Projects
- [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
+- [prismite](https://delta.twoexem.com/prismite.html) - my very own colourscheme
generated by cgit v1.2.3 (git 2.46.0) at 2025-10-21 11:28:07 +0000