Initialize the repository

Signed-off-by: philw <contact@philw.dev>

1 files changed, 138 insertions, 0 deletions

diff --git a/index.css b/index.css
new file mode 100644
index 0000000..256e2fc
--- /dev/null
+++ b/index.css
@@ -0,0 +1,138 @@
+ * {
+      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 */
+    }