feat: index page

Signed-off-by: João Augusto Costa Branco Marado Torres <torres.dev@disroot.org>

1 files changed, 84 insertions, 17 deletions

diff --git a/src/styles/global.css b/src/styles/global.css
index b7ee55d..47dc065 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -3,16 +3,40 @@
   --ff-sans: ui-sans-serif, sans-serif;
   --ff-mono: ui-monospace, monospace;
   --ff-icons: "glyphicons", emoji;
-  --color-link: #106535;
-  --color-visited: #00331b;
-  --color-active: #a50026;
+
+  --color-background: white;
+  --color-foreground: contrast-color(var(--color-background));
+  --color-foreground: black;
+  --color-link: oklch(0.4539 0.0946 153.93);
+  --color-visited: color-mix(in oklch, var(--color-link), black);
+  --color-active: oklch(0.4564 0.1835 20.81);
+  --color-mute: oklch(0.46 0 0);
+  --color-light: oklch(0.66 0 0);
+  --color-dark: oklch(0.47 0 0);
+
+  --size-13: 7.4375rem;
+  --size-12: 5.5625rem;
+  --size-11: 4.1875;
+  --size-10: 3.125;
+  --size-9: 2.3125;
+  --size-8: 1.75;
+  --size-7: 1.5;
+  --size-6: 1.3125rem;
+  --size-5: 1.15625rem;
+  --size-4: 1;
+  --size-3: 0.75;
+  --size-2: 0.5625;
+  --size-1: 0.4375;
+  --size-0: 0.3125;
 }
 
 body {
-  margin: 1rem auto;
+  background: var(--color-background);
+  color: var(--color-foreground);
+  margin: calc(var(--size-4) * 1em) auto;
   max-width: 80ch;
   font-family: var(--ff-sans);
-  padding: 0 0.62em 3.24em;
+  padding: 0 calc(var(--size-2) * 1em) calc(var(--size-10) * 1em);
 }
 
 a:link {
@@ -29,14 +53,14 @@ a:active {
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-link: #66bd63;
-    --color-visited: #a6d96a;
-    --color-active: #f46d43;
-  }
-
-  body {
-    background: #000;
-    color: #fff;
+    --color-background: black;
+    --color-foreground: white;
+    --color-link: oklch(0.7223 0.1514 143.16);
+    --color-visited: color-mix(in oklch, var(--color-link), white);
+    --color-active: oklch(0.6923 0.1759 37.7);
+    --color-mute: oklch(0.67 0 0);
+    --color-dark: oklch(0.66 0 0);
+    --color-light: oklch(0.47 0 0);
   }
 }
 
@@ -47,6 +71,14 @@ a:active {
   }
 }
 
+[lang="pt-PT"] * {
+  hyphens: auto;
+}
+
+[lang]:not([lang="pt-PT"]) * {
+  hyphens: initial;
+}
+
 .emoji {
   font-family: var(--ff-icons);
 }
@@ -55,6 +87,41 @@ a:active {
   border-bottom: thin dashed;
 }
 
+h1 {
+  text-align: center;
+  font-size: calc(var(--size-9) * 1rem);
+  font-weight: 800;
+}
+h1, h2, h3 {
+  scroll-margin: calc(var(--size-12) * 1rem);
+}
+
+.lead {
+  font-size: calc(var(--size-6) * 1rem);
+}
+
+.small {
+  font-size: calc(var(--size-3) * 1rem);
+  font-weight: 500;
+}
+
+.mute {
+  color: var(--color-mute);
+  font-size: calc(var(--size-3) * 1rem);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 dt::after {
   content: ":";
 }
@@ -63,7 +130,7 @@ dl {
   display: grid;
   grid-template-columns: max-content 1fr;
   grid-auto-rows: auto;
-  gap: 0.25rem 1rem;
+  gap: calc(var(--size-0) * 1em) calc(var(--size-3) * 1em);
   align-items: start;
 }
 
@@ -88,11 +155,11 @@ dl.divider dl {
   gap: 0;
 }
 dl.divider dt {
-  padding-inline-end: 1em;
+  padding-inline-end: calc(var(--size-4) * 1em);
 }
 dl.divider dt + dd:not(:first-of-type) {
-  border-block-start: 1px solid #181818;
+  border-block-start: 1px solid var(--color-dark);
 }
 dl.divide dd + dt {
-  border-block-start: 1px solid #181818;
+  border-block-start: 1px solid var(--color-dark);
 }