From 9d7fdb26f9cd5b20932db99492ab42c2504f7cd9 Mon Sep 17 00:00:00 2001
From: delta <darkussdelta@gmail.com>
Date: Sun, 2 Mar 2025 03:10:06 +0100
Subject: add prismite page

---
 assets/css/main.css     |  1 +
 assets/css/prismite.css | 70 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 assets/css/prismite.css

(limited to 'assets')

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