Chromatic abaration effect

layouts/_default/baseof.html

@@ -11,4 +11,7 @@
 		</main>
 		{{- partial "footer.html" . -}}
 	</body>
+
+{{- partial "chroma.html" . -}}
+
 </html>

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>

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; }
@@ -57,9 +69,9 @@ 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: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;
 }