OnClick chroma

layouts/partials/chroma.html

@@ -1,5 +1,6 @@
 <!-- Chromatic abaration effect -->
 <svg width="0" height="0">
+
 	<filter id="chroma">
 		<feColorMatrix type="matrix"
 			result="red_"
@@ -18,4 +19,24 @@
 		<feOffset in="blue_" dx="-3" dy="0" result="blue"/>
 		<feBlend mode="screen" in="red" in2="blue"/>
 	</filter>
+
+	<filter id="chromaClick">
+		<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="4" 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="-5" dy="0" result="blue"/>
+		<feBlend mode="screen" in="red" in2="blue"/>
+	</filter>
+
 </svg>

static/style.css

@@ -14,16 +14,22 @@ body {
 
 summary{cursor:pointer;}
 summary:hover{
-	-webkit-filter: url(#chroma);
+	filter: url(#chroma);
 	color: black;
 	background-color: #E60073;
 }
 
+summary:hover:active{ filter: url(#chromaClick) }
+
 a{
 	color: #E60073;
 	text-decoration: none;
 }
 
+a:hover:active{
+	filter:url(#chromaClick);
+}
+
 a::after{ content: ']'; }
 
 a::before{ content: '['; }
@@ -32,7 +38,7 @@ a:hover{
 	color: black;
 	background-color: #E60073;
 	position:relative;
-	-webkit-filter: url(#chroma);
+	filter: url(#chroma);
 }
 
 a:hover::selection{