From 94ee809f9ec4b7a47fd8c56857eee6cd7e48bfa1 Mon Sep 17 00:00:00 2001
From: Botond Hende <nettingman@gmail.com>
Date: Sun, 8 Sep 2024 01:00:53 +0200
Subject: added extra theme

---
 assets/css/blog.css               | 41 +++++++++++++++++++++++++++++++++++----
 assets/image/balloon.svg          |  1 +
 assets/js/theme.js                |  6 +++++-
 templates/acknowledgement.html.j2 |  3 ++-
 templates/sidebar.html.j2         |  8 ++++++--
 5 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 assets/image/balloon.svg

diff --git a/assets/css/blog.css b/assets/css/blog.css
index ddee44f..a7385e2 100644
--- a/assets/css/blog.css
+++ b/assets/css/blog.css
@@ -16,7 +16,7 @@
     }
 }
 
-[used-theme="light"] {
+[data-theme="light"] {
     --term-fg: #515151;
     --term-bg: #f3f3f3;
     --term-black: #8e8e8e;
@@ -33,16 +33,49 @@
     }
 }
 
+[data-theme="pink"] {
+    --term-fg: #c61c72;
+    --term-bg: #f8b9ce;
+    --term-black: #960052;
+    --term-red: #ff001e;
+    --term-green: #6fd800;
+    --term-yellow: #fcf6a6;
+    --term-blue: #00aff4;
+    --term-magenta: #a8005b;
+    --term-cyan: #00dad5;
+    --term-white: #f3f3f3;
+
+    .filter-yellow {
+        filter: brightness(0) saturate(100%) invert(95%) sepia(12%) saturate(1428%) hue-rotate(334deg) brightness(108%) contrast(98%);
+    }
+}
+
 a[class*="theme-selector"] {
     color: var(--term-green);
 }
 
-html:not([used-theme]) .theme-selector-dark,
-html[used-theme="dark"] .theme-selector-dark,
-html[used-theme="light"] .theme-selector-light {
+
+html:not([data-theme]) .theme-selector-dark,
+html[data-theme="dark"] .theme-selector-dark,
+html[data-theme="light"] .theme-selector-light,
+html[data-theme="pink"] .theme-selector-pink,
+html:not([data-extended-theme]) .theme-extender-target {
     display: none;
 }
 
+.theme-extender {
+    color: var(--term-fg);
+    font-weight: normal;
+}
+
+.theme-extender:hover {
+    text-decoration: none;
+}
+
+html:not([data-extended-theme]) .theme-extender {
+    color: var(--term-bg);
+}
+
 header, .icon-text {
     display: flex;
     flex-flow: row;
diff --git a/assets/image/balloon.svg b/assets/image/balloon.svg
new file mode 100644
index 0000000..62584c0
--- /dev/null
+++ b/assets/image/balloon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="#00dad5" d="M13.16 12.74L14 14h-1.5c-.15 2.71-.5 5.41-1 8.08l-1-.16c.5-2.62.84-5.26 1-7.92H10l.84-1.26C8.64 11.79 7 8.36 7 6a5 5 0 0 1 5-5a5 5 0 0 1 5 5c0 2.36-1.64 5.79-3.84 6.74"/></svg>
\ No newline at end of file
diff --git a/assets/js/theme.js b/assets/js/theme.js
index ffb6d48..9f1660c 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -1,5 +1,5 @@
 "use strict"
-const THEME_KEY = "used-theme";
+const THEME_KEY = "data-theme";
 
 function updateTheme() {
     let theme = localStorage.getItem(THEME_KEY);
@@ -13,4 +13,8 @@ function setTheme(theme) {
     updateTheme();
 }
 
+function setThemeExtend() {
+    document.documentElement.setAttribute("data-extended-theme", "true")
+}
+
 updateTheme();
\ No newline at end of file
diff --git a/templates/acknowledgement.html.j2 b/templates/acknowledgement.html.j2
index 6cb5938..2c11f76 100644
--- a/templates/acknowledgement.html.j2
+++ b/templates/acknowledgement.html.j2
@@ -2,7 +2,7 @@
 {% block page_title %}Acknowledgement {{ super() }}{% endblock %}
 {% block page_title_short %}Acknowledgement{% endblock %}
 {% block content %}
-<h1 class="first-element">Acknowledgement<h1>
+<h1 class="first-element">Acknowledgement</h1>
 <p>Thank you for everyone, who made this blog possible, like...<br>
 <br>
 <a href="https://blog.marcsello.com">Marcsello</a> who was kind enough to share his blog source with the world, so I could <del>steal</del> get inspired by it<br>
@@ -13,6 +13,7 @@
 <a href="https://www.jetbrains.com">Jetbrains</a> for their amazing <a href="https://www.jetbrains.com/lp/mono">font</a> which I use literally everywhere<br>
 <a href="http://terminal.sexy">terminal.sexy</a> for the cool terminal color template<br>
 <a href="https://icon-sets.iconify.design">iconify</a> for all the icons<br>
+<a href="https://isotropic.co/tool/hex-color-to-css-filter/">Isotropic</a> for their hex to css filter converter<br>
 <br>
 ... and last but not least, You dear Reader!</p>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/sidebar.html.j2 b/templates/sidebar.html.j2
index a58c2cb..ef89489 100644
--- a/templates/sidebar.html.j2
+++ b/templates/sidebar.html.j2
@@ -25,15 +25,19 @@ Sometimes I touch upon some more artistic stuff, but mostly just to amuse myself
 <p>ls <a href="/tags">~/tags/</a></p>
 <p>{% for tag in site.top_tags %}<a href="/tags/{{ tag }}.html">{{ tag }}/</a>{% if not loop.last %} {% endif %}{% endfor %}</p>
 <h3 class="magenta">I want different colors</h3>
-<p>~/themes/</p>
+<p>ls ~/themes/ <a class="theme-extender" href="javascript:void(0);" onclick="setThemeExtend()">-A</a></p>
 <a href="javascript:void(0);" class="icon-text theme-selector-light" onclick="setTheme('light')">
     <img src="/assets/image/sun.svg" class="svg-icon" />
-    <span>sweet-celestia.sh</span>
+    <span>sweet-celestial.sh</span>
 </a>
 <a href="javascript:void(0);" class="icon-text theme-selector-dark" onclick="setTheme('dark')">
     <img src="/assets/image/moon.svg" class="svg-icon" />
     <span>luna-eclipsed.sh</span>
 </a>
+<a href="javascript:void(0);" class="icon-text theme-selector-pink theme-extender-target" onclick="setTheme('pink')">
+    <img src="/assets/image/balloon.svg" class="svg-icon" />
+    <span>.pinky-swear.sh</span>
+</a>
 <h3 class="magenta">Never miss a post</h3>
 <a href="/feed.xml" class="icon-text">
 <img src="/assets/image/rss.svg" class="svg-icon" />
-- 
cgit v1.2.3-70-g09d2