Change link styling
This commit is contained in:
parent
c04b6def18
commit
b83d502ac9
42
cv.html
42
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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue