Change link styling

This commit is contained in:
Benjamin 2023-02-05 22:48:55 +01:00
parent c04b6def18
commit b83d502ac9

42
cv.html
View file

@ -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;