From 9d7fdb26f9cd5b20932db99492ab42c2504f7cd9 Mon Sep 17 00:00:00 2001 From: delta Date: Sun, 2 Mar 2025 03:10:06 +0100 Subject: add prismite page --- .zs/generate_colors | 2 + .zs/generate_colors.jq | 10 ++++ .zs/layout.html | 2 +- .zs/palette.json | 132 ++++++++++++++++++++++++++++++++++++++++++++++++ assets/css/main.css | 1 + assets/css/prismite.css | 70 +++++++++++++++++++++++++ prismite.html | 62 +++++++++++++++++++++++ projects.md | 1 + 8 files changed, 279 insertions(+), 1 deletion(-) create mode 100755 .zs/generate_colors create mode 100644 .zs/generate_colors.jq create mode 100644 .zs/palette.json create mode 100644 assets/css/prismite.css create mode 100644 prismite.html 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("

\(.[0])

\(.[1])

") | "

" + join("") + "

") | "

" + join("") + "

" ) | +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 @@ -

+ 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 @@ + + + + + + + + + + + + prismite - darkuss' website + + + + + + + + {{ styles }} + + + {{ scripts }} + + + + +

+ +

+ + + + + + + +

prismite - a colourful and comfy theme

+ {{ generate_colors }} +

+ +

+ + 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 -- cgit v1.2.3