pub / ktistec-tweaks

commit cf5c53dfc1332ec5747eefcec4b0571ca73d40fe
parent a9b818c177f24bbbd96defed7ba9fd5070c04afc
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date:   Tue,  9 Dec 2025 13:50:18 +0100

feat: add simple.css colours theme

Diffstat:
M
Makefile
 | 
37
+++++++++++++++++++++++++++++++++++--
M
README.md
 | 
4
++++
A
css/cards.css
 | 
30
++++++++++++++++++++++++++++++
A
css/cards.min.css
 | 
2
++
M
css/purpleish.css
 | 
31
++-----------------------------
M
css/purpleish.min.css
 | 
4
++--
A
css/simple.css
 | 
79
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
A
css/simple.min.css
 | 
2
++

8 files changed, 156 insertions(+), 33 deletions(-)
diff --git a/Makefile b/Makefile
@@ -13,6 +13,34 @@ minify-css:
 			-e 's/\s*>\s*/>/g' \
 			-e 's/\s*<\s*/</g' | \
 		tee css/purpleish.min.css > /dev/null
+	cat css/simple.css | \
+		sed -r ':a; s%(.*)/\*.*\*/%\1%; ta; /\/\*/ !b; N; ba' | \
+		tr -d '\t' | \
+		tr -d '\n' | \
+		tr -s ' ' ' ' | \
+		sed -E \
+			-e 's/\s*;\s*/;/g' \
+			-e 's/\s*:\s*/:/g' \
+			-e 's/\s*\{\s*/{/g' \
+			-e 's/\s*\}\s*/}/g' \
+			-e 's/\s*,\s*/,/g' \
+			-e 's/\s*>\s*/>/g' \
+			-e 's/\s*<\s*/</g' | \
+		tee css/simple.min.css > /dev/null
+	cat css/cards.css | \
+		sed -r ':a; s%(.*)/\*.*\*/%\1%; ta; /\/\*/ !b; N; ba' | \
+		tr -d '\t' | \
+		tr -d '\n' | \
+		tr -s ' ' ' ' | \
+		sed -E \
+			-e 's/\s*;\s*/;/g' \
+			-e 's/\s*:\s*/:/g' \
+			-e 's/\s*\{\s*/{/g' \
+			-e 's/\s*\}\s*/}/g' \
+			-e 's/\s*,\s*/,/g' \
+			-e 's/\s*>\s*/>/g' \
+			-e 's/\s*<\s*/</g' | \
+		tee css/cards.min.css > /dev/null
 	cat css/visibility.css | \
 		sed -r ':a; s%(.*)/\*.*\*/%\1%; ta; /\/\*/ !b; N; ba' | \
 		tr -d '\t' | \
@@ -28,7 +56,12 @@ minify-css:
 			-e 's/\s*<\s*/</g' | \
 		tee css/visibility.min.css > /dev/null
 
-apply-css-docker:
-	docker cp ./css/purpleish.min.css ktistec:/app/public/themes/purpleish.min.css
+apply-common-css-docker:
+	docker cp ./css/cards.min.css ktistec:/app/public/themes/cards.min.css
 	docker cp ./css/visibility.min.css ktistec:/app/public/themes/visibility.min.css
 
+apply-simple-css-docker:
+	docker cp ./css/simple.min.css ktistec:/app/public/themes/simple.min.css
+
+apply-purpleish-css-docker:
+	docker cp ./css/purpleish.min.css ktistec:/app/public/themes/purpleish.min.css
diff --git a/README.md b/README.md
@@ -44,6 +44,10 @@ Currently, the `./css/` directory contains following theming tweaks:
 - [visibility](#visibility): small adjustments to improve visibility of content
   in the sense of accessibility
 
+### Simple.CSS
+
+Theme based on colours from the [Simple.css Framework](https://simplecss.org/)
+
 ### Purple-Ish Theme:
 
 ![Purpleish Theme in Dark and Bright Mode](https://paste.jayvii.de/7e381ec8f9dd995c8c6b3c597fb6b8ec650626b177e70ae6742472eec1880ce0)
diff --git a/css/cards.css b/css/cards.css
@@ -0,0 +1,30 @@
+/* Style Posts and Post Threads as Cards */
+ section.ui.feed > turbo-frame {
+   border-radius: 10px;
+   background-color: var(--bg-icon-menu) !important;
+   margin-top: 0.5em !important;
+   margin-bottom: 0.5em !important;
+   padding: 0.5em !important;
+   box-shadow: 3px 3px 10px #00000080;
+}
+
+/* Style Pagination Buttons */
+.ui.secondary.pagination.menu > a {
+   border-radius: 5px;
+   background-color: var(--bg-icon-menu) !important;
+   box-shadow: 3px 3px 10px #00000080;
+   margin-bottom: 1em;
+}
+
+/* Style Navigation bars */
+nav {
+    background-color: var(--bg-icon-menu) !important;
+}
+nav > div > a,
+nav > div > .right.menu > form > div > input,
+nav > div > span.link,
+nav > div > div.right > a
+{
+    color: var(--text-primary) !important;
+}
+
diff --git a/css/cards.min.css b/css/cards.min.css
@@ -0,0 +1 @@
+ section.ui.feed>turbo-frame{border-radius:10px;background-color:var(--bg-icon-menu) !important;margin-top:0.5em !important;margin-bottom:0.5em !important;padding:0.5em !important;box-shadow:3px 3px 10px #00000080;}.ui.secondary.pagination.menu>a{border-radius:5px;background-color:var(--bg-icon-menu) !important;box-shadow:3px 3px 10px #00000080;margin-bottom:1em;}nav{background-color:var(--bg-icon-menu) !important;}nav>div>a,nav>div>.right.menu>form>div>input,nav>div>span.link,nav>div>div.right>a{color:var(--text-primary) !important;}
+\ No newline at end of file
diff --git a/css/purpleish.css b/css/purpleish.css
@@ -33,6 +33,8 @@
 @media (prefers-color-scheme: dark) {
   :root
   {
+    color-scheme: dark;
+
     --text-primary: #dcdcdc;
     --text-primary-inverted: #1d1e26;
     --text-secondary: #dcdcdc99;
@@ -44,32 +46,3 @@
     --bg-icon-menu: #2b2b2b;
   }
 }
-
-/* Style Posts and Post Threads as Cards */
- section.ui.feed > turbo-frame {
-   border-radius: 10px;
-   background-color: var(--bg-icon-menu) !important;
-   margin-top: 0.5em !important;
-   margin-bottom: 0.5em !important;
-   padding: 0.5em !important;
-   box-shadow: 3px 3px 10px #00000080;
-}
-
-/* Style Pagination Buttons */
-.ui.secondary.pagination.menu > a {
-   border-radius: 5px;
-   background-color: var(--bg-icon-menu) !important;
-   box-shadow: 3px 3px 10px #00000080;
-}
-
-/* Style Navigation bars */
-nav {
-    background-color: var(--bg-icon-menu) !important;
-}
-nav > div > a,
-nav > div > .right.menu > form > div > input,
-nav > div > span.link,
-nav > div > div.right > a
-{
-    color: var(--text-primary) !important;
-}
diff --git a/css/purpleish.min.css b/css/purpleish.min.css
@@ -1 +1 @@
-:root{--text-primary:#1d1e26;--text-primary-inverted:#dcdcdc;--text-secondary:#3f426c;--text-muted:#1d1e2699;--bg-primary:#fcfcfc;--bg-hover:#e3e3d9;--bg-transparent:#fcfcfc80;--bg-icon-menu:#f8f8f2;--bg-accent-code:var(--bg-icon-menu);--bg-accent-pre:var(--bg-accent-code);--bg-input:var(--bg-icon-menu);--bg-label:var(--bg-icon-menu);--semantic-primary:#7277cf;--semantic-affirmative:var(--semantic-primary);--semantic-negative:#ff0000;--semantic-dangerous:#ff0000;--semantic-dangerous-hover:#cc0000;--color-blue:var(--semantic-primary);--color-purple:var(--semantic-primary);--color-yellow:var(--semantic-primary);--border-color:var(--text-secondary);--anchor-color:var(--semantic-primary);}@media (prefers-color-scheme:dark){:root{--text-primary:#dcdcdc;--text-primary-inverted:#1d1e26;--text-secondary:#dcdcdc99;--text-muted:#dcdcdc80;--bg-primary:#212121;--bg-hover:#21212120;--bg-transparent:#21212180;--bg-icon-menu:#2b2b2b;}}section.ui.feed>turbo-frame{border-radius:10px;background-color:var(--bg-icon-menu) !important;margin-top:0.5em !important;margin-bottom:0.5em !important;padding:0.5em !important;box-shadow:3px 3px 10px #00000080;}.ui.secondary.pagination.menu>a{border-radius:5px;background-color:var(--bg-icon-menu) !important;box-shadow:3px 3px 10px #00000080;}nav{background-color:var(--bg-icon-menu) !important;}nav>div>a,nav>div>.right.menu>form>div>input,nav>div>span.link,nav>div>div.right>a{color:var(--text-primary) !important;}
-\ No newline at end of file
+:root{--text-primary:#1d1e26;--text-primary-inverted:#dcdcdc;--text-secondary:#3f426c;--text-muted:#1d1e2699;--bg-primary:#fcfcfc;--bg-hover:#e3e3d9;--bg-transparent:#fcfcfc80;--bg-icon-menu:#f8f8f2;--bg-accent-code:var(--bg-icon-menu);--bg-accent-pre:var(--bg-accent-code);--bg-input:var(--bg-icon-menu);--bg-label:var(--bg-icon-menu);--semantic-primary:#7277cf;--semantic-affirmative:var(--semantic-primary);--semantic-negative:#ff0000;--semantic-dangerous:#ff0000;--semantic-dangerous-hover:#cc0000;--color-blue:var(--semantic-primary);--color-purple:var(--semantic-primary);--color-yellow:var(--semantic-primary);--border-color:var(--text-secondary);--anchor-color:var(--semantic-primary);}@media (prefers-color-scheme:dark){:root{color-scheme:dark;--text-primary:#dcdcdc;--text-primary-inverted:#1d1e26;--text-secondary:#dcdcdc99;--text-muted:#dcdcdc80;--bg-primary:#212121;--bg-hover:#21212120;--bg-transparent:#21212180;--bg-icon-menu:#2b2b2b;}}
+\ No newline at end of file
diff --git a/css/simple.css b/css/simple.css
@@ -0,0 +1,79 @@
+/* Set main colours for the purpleish theme */
+:root {
+  --text-primary:#212121;
+  --text-primary-inverted:#dcdcdc;
+  --text-secondary:#585858;
+  --text-muted:#444444;
+  
+  --bg-primary:#ffffff;
+  --bg-hover:#f5f7ff;
+  --bg-transparent:#ffffff80;
+  --bg-icon-menu:#f5f7ff;
+
+  --bg-accent-code:var(--bg-icon-menu);
+  --bg-accent-pre:var(--bg-accent-code);
+  --bg-input:var(--bg-icon-menu);
+  --bg-label:var(--bg-icon-menu);
+
+  --semantic-primary:#0d47a1;
+  --semantic-affirmative:#1266e2;
+  --semantic-negative:#d81b60;
+  --semantic-dangerous:#ffdd33;
+  --semantic-dangerous-hover:#ffdd3380;
+
+  --color-blue:#0d47a1;
+  --color-purple:#d81b60;
+  --color-yellow:#ffdd33;
+  --border-color:#898EA4;
+
+  --anchor-color:var(--semantic-primary);
+}
+
+/* Dark colours for the purpleish theme */
+@media (prefers-color-scheme: dark) {
+  :root
+  {
+    color-scheme: dark;
+    
+    --text-primary:#dcdcdc;
+    --text-primary-inverted:#212121;
+    --text-secondary:#ababab;
+    --text-muted:#cccccc;
+
+    --bg-primary:#212121;
+    --bg-hover:#2b2b2b;
+    --bg-transparent:#21212180;
+    --bg-icon-menu:#2b2b2b;
+
+    --semantic-primary:#ffb300;
+}
+
+/* Style Posts and Post Threads as Cards */
+ section.ui.feed > turbo-frame {
+   border-radius: 10px;
+   background-color: var(--bg-icon-menu) !important;
+   margin-top: 0.5em !important;
+   margin-bottom: 0.5em !important;
+   padding: 0.5em !important;
+   box-shadow: 3px 3px 10px #00000080;
+}
+
+/* Style Pagination Buttons */
+.ui.secondary.pagination.menu > a {
+   border-radius: 5px;
+   background-color: var(--bg-icon-menu) !important;
+   box-shadow: 3px 3px 10px #00000080;
+   margin-bottom: 1em;
+}
+
+/* Style Navigation bars */
+nav {
+    background-color: var(--bg-icon-menu) !important;
+}
+nav > div > a,
+nav > div > .right.menu > form > div > input,
+nav > div > span.link,
+nav > div > div.right > a
+{
+    color: var(--text-primary) !important;
+}
diff --git a/css/simple.min.css b/css/simple.min.css
@@ -0,0 +1 @@
+:root{--text-primary:#212121;--text-primary-inverted:#dcdcdc;--text-secondary:#585858;--text-muted:#444444;--bg-primary:#ffffff;--bg-hover:#f5f7ff;--bg-transparent:#ffffff80;--bg-icon-menu:#f5f7ff;--bg-accent-code:var(--bg-icon-menu);--bg-accent-pre:var(--bg-accent-code);--bg-input:var(--bg-icon-menu);--bg-label:var(--bg-icon-menu);--semantic-primary:#0d47a1;--semantic-affirmative:#1266e2;--semantic-negative:#d81b60;--semantic-dangerous:#ffdd33;--semantic-dangerous-hover:#ffdd3380;--color-blue:#0d47a1;--color-purple:#d81b60;--color-yellow:#ffdd33;--border-color:#898EA4;--anchor-color:var(--semantic-primary);}@media (prefers-color-scheme:dark){:root{color-scheme:dark;--text-primary:#dcdcdc;--text-primary-inverted:#212121;--text-secondary:#ababab;--text-muted:#cccccc;--bg-primary:#212121;--bg-hover:#2b2b2b;--bg-transparent:#21212180;--bg-icon-menu:#2b2b2b;--semantic-primary:#ffb300;}section.ui.feed>turbo-frame{border-radius:10px;background-color:var(--bg-icon-menu) !important;margin-top:0.5em !important;margin-bottom:0.5em !important;padding:0.5em !important;box-shadow:3px 3px 10px #00000080;}.ui.secondary.pagination.menu>a{border-radius:5px;background-color:var(--bg-icon-menu) !important;box-shadow:3px 3px 10px #00000080;margin-bottom:1em;}nav{background-color:var(--bg-icon-menu) !important;}nav>div>a,nav>div>.right.menu>form>div>input,nav>div>span.link,nav>div>div.right>a{color:var(--text-primary) !important;}
+\ No newline at end of file