From 6db60fa38aa0fd9aaf9ad6c8eb110ae6f7a5b07f Mon Sep 17 00:00:00 2001
From: Marty Sluijtman <marty.wanderer@disroot.org>
Date: Thu, 10 Aug 2023 23:20:58 +0200
Subject: [PATCH] Chromatic abaration effect

---
 layouts/_default/baseof.html |  3 +++
 layouts/partials/chroma.html | 21 +++++++++++++++++++++
 static/style.css             | 17 +++++++++++++++--
 3 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 layouts/partials/chroma.html

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 1cba0a0..17673f1 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -11,4 +11,7 @@
 		</main>
 		{{- partial "footer.html" . -}}
 	</body>
+
+{{- partial "chroma.html" . -}}
+
 </html>
diff --git a/layouts/partials/chroma.html b/layouts/partials/chroma.html
new file mode 100644
index 0000000..3610293
--- /dev/null
+++ b/layouts/partials/chroma.html
@@ -0,0 +1,21 @@
+<!-- Chromatic abaration effect -->
+<svg width="0" height="0">
+	<filter id="chroma">
+		<feColorMatrix type="matrix"
+			result="red_"
+			values="4 0 0 0 0 
+					0 0 0 0 0 
+					0 0 0 0 0 
+					0 0 0 1 0"/>
+		<feOffset in="red_" dx="2" dy="0" result="red"/>
+		<feColorMatrix type="matrix" 
+			in="SourceGraphic"
+			result="blue_"
+			values="0 0 0 0 0
+					0 3 0 0 0 
+					0 0 10 0 0 
+					0 0 0 1 0"/>
+		<feOffset in="blue_" dx="-3" dy="0" result="blue"/>
+		<feBlend mode="screen" in="red" in2="blue"/>
+	</filter>
+</svg>
diff --git a/static/style.css b/static/style.css
index e101f59..2ed0c28 100644
--- a/static/style.css
+++ b/static/style.css
@@ -13,6 +13,11 @@ body {
 }
 
 summary{cursor:pointer;}
+summary:hover{
+	-webkit-filter: url(#chroma);
+	color: black;
+	background-color: #E60073;
+}
 
 a{
 	color: #E60073;
@@ -26,6 +31,13 @@ a::before{ content: '['; }
 a:hover{
 	color: black;
 	background-color: #E60073;
+	position:relative;
+	-webkit-filter: url(#chroma);
+}
+
+a:hover::selection{
+	background-color: black;
+	color: #E60073;
 }
 
 .postImage a::before{ content: none; }
@@ -55,11 +67,11 @@ main{
 }
 
 a.anchor{visibility: hidden; text-decoration: none;}
-h1:target::before,h2:target::before,h3:target::before,h4:target::before,h5:target::before,h6:target::before{content:"> ";}
+h1:target::before,h2:target::before,h3:target::before,h4:target::before,h5:target::before,h6:target::before{content:"> "; }
 h1:hover>a,h2:hover>a,h3:hover>a,h4:hover>a,h5:hover>a,h6:hover>a{visibility:visible;}
+h1:target>a,h2:target>a,h3:target>a,h4:target>a,h5:target>a,h6:target>a{color:black; visibility:visible;}
 :target{color:black; background-color: #E60073;}
 
-
 footer{
 	text-align: center;
 	border-top:1pt solid;
@@ -71,6 +83,7 @@ footer pre{
 }
 
 table.posts{ width: 100%; }
+
 .post-content{
 	text-align: justify;
 }