set more elaborate typography styles

Signed-off-by: Robert Günzler <r@gnzler.io>

1 files changed, 58 insertions, 7 deletions

diff --git a/links/main.css b/links/main.css
index f54e630..126a106 100644
--- a/links/main.css
+++ b/links/main.css
@@ -10,13 +10,6 @@
   --body-line-height: 1.3;
 
   color-scheme: light dark;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: justify;
-  text-justify: inter-word;
 }
 
 ::selection {
@@ -576,3 +569,61 @@ ul.nobull li {
     width: 100%;
   }
 }
+
+/* typography */
+
+:root {
+  --vf-grad: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --vf-grad: -50;
+  }
+}
+
+html {
+  font-synthesis: none;
+  font-variation-settings: "GRAD" var(--vf-grad, 0);
+
+  text-size-adjust: none;
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+
+  text-align: justify;
+  text-justify: inter-word;
+  text-decoration-skip-ink: auto;
+}
+
+main {
+  margin-block-start: var(--body-spacing);
+}
+
+main pre,
+main code,
+main var,
+main samp,
+main kbd,
+main h1,
+main h2,
+main h3,
+main h4,
+main h5,
+main h6 {
+  -webkit-hyphens: manual;
+  hyphens: manual;
+}
+
+h1 {
+  font-variant-numeric: lining-nums;
+  font-variant-ligatures: discretionary-ligatures;
+}
+
+td,
+math,
+time[datetime*=":"] {
+  font-variant-numeric: tabular-nums lining-nums slashed-zero;
+}