From 74eea9c13a4bd9846fd82bbaae841322cf5650fc Mon Sep 17 00:00:00 2001
From: Filip Wandzio <contact@philw.dev>
Date: Wed, 20 Aug 2025 16:57:38 +0200
Subject: Make website more accessible, fix color schemes, update research
 information, optimize css

Signed-off-by: Filip Wandzio <contact@philw.dev>
---
 index.css | 267 ++++++++++++++++++++++++++++++--------------------------------
 1 file changed, 129 insertions(+), 138 deletions(-)

(limited to 'index.css')

diff --git a/index.css b/index.css
index 256e2fc..72f84cf 100644
--- a/index.css
+++ b/index.css
@@ -1,138 +1,129 @@
- * {
-      box-sizing: border-box;
-    }
-
-    body {
-      margin: 0;
-      background: #fcfdfe; /* base07 - light background */
-      color: #000c18;      /* base00 - dark text */
-      line-height: 1.75;
-      font-size: 1rem;
-      display: flex;
-      flex-direction: column;
-      min-height: 100vh;
-      overflow-x: hidden;
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    }
-
-    header, footer {
-      padding: 2em;
-      text-align: center;
-    }
-
-    main {
-      flex-grow: 1;
-      padding: 2em;
-      width: 100%;
-      box-sizing: border-box;
-      max-width: 900px;
-      margin: 0 auto;
-    }
-
-    footer {
-      border-top: 1px solid #000c18; /* base00 */
-      color: #000c18;                /* base00 */
-    }
-
-    h1, h2 {
-      font-weight: normal;
-      margin: 0;
-      font-size: 2.25rem;
-      color: inherit; /* inherit from body */
-    }
-
-    section {
-      margin-bottom: 3em;
-      color: inherit; /* inherit from body */
-      width: 100%;
-      padding: 0 2%;
-    }
-
-    a {
-      color: #22aa44; /* base0B - green */
-      text-decoration: underline;
-      font-weight: 700;
-      transition: color 0.3s ease, text-decoration-color 0.3s ease;
-      text-underline-offset: 3px;
-      text-decoration-thickness: 2px;
-      text-decoration-color: transparent;
-    }
-
-    a:hover,
-    a:focus {
-      color: #9966b8; /* base08 - purple */
-      text-decoration-color: currentColor;
-      outline-offset: 3px;
-      outline: 2px solid #22aa44;
-      outline-radius: 3px;
-    }
-
-    a:focus-visible {
-      outline-offset: 4px;
-      outline: 3px solid #22aa44; /* base0B */
-      outline-radius: 3px;
-    }
-
-    .links a {
-      color: #22aa44; /* base0B */
-    }
-
-    .links a:hover {
-      color: #e6550d; /* base09 */
-    }
-
-    @media (max-width: 768px) {
-      h1 {
-        font-size: 1.8rem;
-      }
-
-      h2 {
-        font-size: 1.6rem;
-      }
-
-      footer {
-        font-size: 0.9em;
-      }
-
-      .privacy {
-        font-size: 0.8em;
-      }
-
-      main {
-        padding: 1.5em;
-      }
-    }
-
-    @media (prefers-color-scheme: dark) {
-      body {
-        background: #000c18; /* base00 */
-        color: #b7b8b9;      /* base05 */
-      }
-
-      footer {
-        border-color: #fcfdfe; /* base07 */
-        color: #fcfdfe;        /* base07 */
-      }
-
-      a {
-        color: #22aa44; /* keep green links in dark mode */
-        text-decoration-color: transparent;
-      }
-
-      a:hover,
-      a:focus {
-        color: #9966b8; /* base08 */
-        text-decoration-color: currentColor;
-      }
-    }
-
-    .high-contrast {
-      background-color: #fcfdfe; /* base07 */
-      color: #000c18;            /* base00 */
-    }
-
-    .highlight {
-      background-color: #9966b8; /* base08 */
-      color: #fcfdfe;            /* base07 */
-    }
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 1.125rem;   /* 18px base */
+  line-height: 1.8;      
+  background: #fcfdfe;
+  color: #000c18;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+header, footer { padding: 2em; }
+
+main {
+  flex-grow: 1;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 2em;
+}
+
+footer {
+  border-top: 1px solid currentColor;
+  text-align: center;
+  font-size: 1.05rem; 
+}
+
+h2 {
+  margin: 0 0 0.75em;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+h1 { font-size: 2.5rem; } 
+h2 { font-size: 2rem; }  
+
+header h1 { font-size: 2rem; }
+section { margin-bottom: 3em; padding: 0 2%; }
+a {
+  color: #22aa44;
+  font-weight: 700;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 2px;
+  transition: color .3s, text-decoration-color .3s;
+}
+a:hover,
+a:focus {
+  color: #9966b8;
+  text-decoration-color: currentColor;
+}
+a:focus-visible {
+  outline: 3px solid #22aa44;
+  outline-offset: 4px;
+  border-radius: 3px;
+}
+header { text-align: center; }
+
+.header-top {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+}
+
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 2rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+nav a { 
+  font-weight: 600; 
+  font-size: 1.125rem; 
+}
+.menu-toggle {
+  display: none;
+  background: none;
+  border: 0;
+  font-size: 1.75rem;
+  cursor: pointer;
+  color: inherit;
+}
+.sr-only {
+  position: absolute;
+  width: 1px; height: 1px;
+  margin: -1px; padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
+}
+@media (max-width: 768px) {
+  h1 { font-size: 2rem; }
+  h2 { font-size: 1.75rem; }
+  main { padding: 1.5em; }
+
+  .header-top {
+    justify-content: space-between;
+    text-align: left;
+  }
+  nav ul {
+    flex-direction: column;
+    align-items: center;
+    gap: 1.25rem;
+    display: none;
+  }
+  nav ul.open { display: flex; }
+  .menu-toggle { display: block; }
+  header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    background: inherit;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  body { background: #000c18; color: #b7b8b9; }
+  footer { border-color: #fcfdfe; color: #fcfdfe; }
+  a { color: #22aa44; }
+  a:hover, a:focus { color: #9966b8; }
+}
+.highlight { background: #9966b8; color: #fcfdfe; }
-- 
cgit v1.2.3