From b83d502ac968eb4933656e8a741463535adb97b5 Mon Sep 17 00:00:00 2001
From: Benjamin <bstadlbauer@posteo.de>
Date: Sun, 5 Feb 2023 22:48:55 +0100
Subject: [PATCH] Change link styling

---
 cv.html | 42 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 8 deletions(-)

diff --git a/cv.html b/cv.html
index ea580aa..a54d1f8 100644
--- a/cv.html
+++ b/cv.html
@@ -25,14 +25,15 @@
 	<style>
 		:root {
 			--color-primary-light: #000000;
-			--color-secondary-light: #000053;
 			--color-background-light: #ffffff;
 			--color-primary-dark: #ffffff;
-			--color-secondary-dark: #ababff;
 			--color-background-dark: #121212;
+			--color-hover-background-light: #ececec;
+			--color-hover-background-dark: #202020;
+			--color-a-after: #999;
 			--color-primary: var(--color-primary-light);
-			--color-secondary: var(--color-secondary-light);
 			--color-background: var(--color-background-light);
+			--color-hover-background: var(--color-hover-background-light);
 		}
 
 		body {
@@ -54,10 +55,28 @@
 		}
 
 		a {
-			color: var(--color-secondary);
+			color: inherit;
 			text-decoration: none;
 		}
 
+		a::after {
+			/* copied from https://practicaltypography.com/how-to-use.html */
+			position: relative;
+			content: "\FEFF°";
+			margin-left: 0.1em;
+			font-size: 90%;
+			top: -0.1em;
+			color: var(--color-a-after);
+			font-feature-settings: "caps";
+			font-variant-numeric: normal;
+		}
+
+		a:hover {
+			background: var(--color-hover-background);
+			transition-property: background;
+			transition-duration: 0.2s;
+		}
+
 		h2 {
 			border-bottom-width: 1px;
 			border-bottom-color: var(--color-primary);
@@ -96,16 +115,16 @@
 		@media (prefers-color-scheme: light) {
 			:root {
 				--color-primary: var(--color-primary-light);
-				--color-secondary: var(--color-secondary-light);
 				--color-background: var(--color-background-light);
+				--color-hover-background: var(--color-hover-background-light);
 			}
 		}
 
 		@media (prefers-color-scheme: dark) {
 			:root {
 				--color-primary: var(--color-primary-dark);
-				--color-secondary: var(--color-secondary-dark);
 				--color-background: var(--color-background-dark);
+				--color-hover-background: var(--color-hover-background-dark);
 			}
 		}
 
@@ -119,8 +138,7 @@
 				padding: 0;
 			}
 
-			body,
-			a {
+			body {
 				color: #000000;
 			}
 
@@ -128,6 +146,14 @@
 				opacity: 1.0;
 			}
 
+			a::after {
+				display: none;
+			}
+
+			a:hover {
+				background: inherit;
+			}
+
 			@page {
 				margin: 25mm;
 				size: A4;