add prismite page

author: delta <darkussdelta@gmail.com> 2025-03-02 03:10:06 +0100
committer: delta <darkussdelta@gmail.com> 2025-03-02 03:10:06 +0100
commit: 9d7fdb26f9cd5b20932db99492ab42c2504f7cd9 (patch)
tree: b9568e152b31649ffccd9ab7ab5fd7fae313dc14
parent: 5a91b2d5b74f02791a4e426bebcf8917a29f341e (diff)
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
author	delta <darkussdelta@gmail.com>	2025-03-02 03:10:06 +0100
committer	delta <darkussdelta@gmail.com>	2025-03-02 03:10:06 +0100
commit	9d7fdb26f9cd5b20932db99492ab42c2504f7cd9 (patch)
tree	b9568e152b31649ffccd9ab7ab5fd7fae313dc14
parent	5a91b2d5b74f02791a4e426bebcf8917a29f341e (diff)