From 2cf395488df36ba169a7b2931fee3ebea1a4c5d2 Mon Sep 17 00:00:00 2001
From: gustambolopez <mogolixzq@gmail.com>
Date: Sat, 1 Nov 2025 10:28:56 -0500
Subject: [PATCH] make website actually good

---
 website/index.html | 276 +++++++++++++++++++++++++++++++++++++++------
 1 file changed, 242 insertions(+), 34 deletions(-)
diff --git a/website/index.html b/website/index.html
index c4af263..a759238 100644
--- a/website/index.html
+++ b/website/index.html
@@ -1,36 +1,244 @@
-<!DOCTYPE html>
-
+<!doctype html>
 <html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+        <link rel="icon" href="finger.png" />
+        <meta name="description" content="A heavily opinionated Linux distro" />
+        <title>Fuck linux</title>
+        <style>
+            @import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap");
+
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+
+            :root {
+                --background: oklch(1 0 0);
+                --foreground: oklch(0.125 0 0);
+                --muted: oklch(0.96 0 0);
+                --muted-foreground: oklch(0.556 0 0);
+                --border: oklch(0.95 0 0);
+            }
+
+            body {
+                font-family: "Geist", sans-serif;
+                background-color: var(--background);
+                color: var(--foreground);
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                min-height: 100vh;
+                position: relative;
+            }
+
+            main {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                padding: 8rem 1.5rem;
+                min-height: 100vh;
+            }
+
+            .container {
+                max-width: 42rem;
+                width: 100%;
+            }
+
+            h1 {
+                text-align: center;
+                font-size: 3rem;
+                font-weight: 300;
+                letter-spacing: -0.02em;
+                line-height: 1.1;
+                margin-bottom: 1.5rem;
+            }
+
+            h1 span {
+                font-weight: 500;
+                display: block;
+            }
+
+            .subheading {
+                text-align: center;
+                font-size: 1.125rem;
+                color: var(--muted-foreground);
+                line-height: 1.6;
+                margin-bottom: 3rem;
+                font-weight: 400;
+            }
+
+            .cta-buttons {
+                display: flex;
+                flex-direction: column;
+                gap: 1rem;
+                justify-content: center;
+                align-items: center;
+                margin-bottom: 4rem;
+            }
+            .cta-buttons .btn {
+                min-width: 12rem;
+                text-align: center;
+            }
+
+            .btn {
+                padding: 0.75rem 2rem;
+                border-radius: 9999px;
+                font-size: 1rem;
+                font-weight: 500;
+                text-decoration: none;
+                transition: all 300ms;
+                cursor: pointer;
+                border: none;
+                display: inline-block;
+                text-align: center;
+            }
+
+            .btn-primary {
+                background-color: var(--foreground);
+                color: white;
+            }
+
+            .btn-primary:hover {
+                opacity: 0.9;
+            }
+
+            .btn-primary:active {
+                transform: scale(0.95);
+            }
+
+            .btn-secondary {
+                background-color: transparent;
+                color: var(--foreground);
+                border: 1px solid rgba(0, 0, 0, 0.2);
+            }
+
+            .btn-secondary:hover {
+                border-color: rgba(0, 0, 0, 0.4);
+                background-color: rgba(0, 0, 0, 0.05);
+            }
+
+            .btn-secondary:active {
+                transform: scale(0.95);
+            }
+
+            .video {
+                margin-top: 5rem;
+            }
+
+            .video-container {
+                position: relative;
+                aspect-ratio: 16 / 9;
+                width: 100%;
+                max-width: 42rem;
+                margin: 0 auto;
+                border-radius: 1rem;
+                overflow: hidden;
+                background-color: var(--muted);
+                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+                transition: box-shadow 500ms;
+            }
+
+            .video-container:hover {
+                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            }
+
+            video {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+
+            .floating-accent {
+                position: fixed;
+                inset: 0;
+                z-index: -1;
+                overflow: hidden;
+                pointer-events: none;
+            }
+
+            .accent-blur {
+                position: absolute;
+                top: 25%;
+                right: 0;
+                width: 24rem;
+                height: 24rem;
+                background: linear-gradient(to left, rgba(239, 246, 255, 0.4), transparent);
+                border-radius: 9999px;
+                filter: blur(96px);
+                opacity: 0.4;
+            }
+
+            @media (min-width: 640px) {
+                .cta-buttons {
+                    flex-direction: row;
+                }
+            }
+
+            @media (min-width: 768px) {
+                main {
+                    padding: 10rem 1.5rem;
+                }
+
+                h1 {
+                    font-size: 4.5rem;
+                }
+
+                .subheading {
+                    font-size: 1.25rem;
+                }
+            }
+
+            @media (min-width: 1024px) {
+                h1 {
+                    font-size: 6rem;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <div class="floating-accent">
+            <div class="accent-blur"></div>
+        </div>
+
+        <main>
+            <div class="container">
+                <h1>
+                    <span>An actually good Linux distro.</span>
+                </h1>
+
+                <p class="subheading">
+                    Heavily opinionated. Built for developers who want simplicity without
+                    compromise.
+                </p>
+
+                <div class="cta-buttons">
+                    <button class="btn btn-primary" id="download">Download</button>
+                    <a
+                        href="https://github.com/face-hh/fuck"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="btn btn-secondary"
+                    >
+                        View on GitHub
+                    </a>
+                </div>
+
+                <div class="video">
+                    <div class="video-container">
+                        <video src="video.webm" controls id="video"></video>
+                    </div>
+                </div>
+            </div>
+        </main>
 
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Fuck Linux</title>
-
-    <link rel="icon" href="finger.png">
-    <style>
-        body {
-            margin: 0;
-            padding: 0;
-            background-color: #fff;
-        }
-    </style>
-</head>
-
-<body>
-    <div style="text-align: center;">
-        <h1 style="font-size:120px; margin-bottom:2px">Fuck Linux</h1>
-
-        <h3>An actually good, heavily opinionated Linux distro.</h3>
-
-        <video width="40%" src="video.webm" controls></video>
-
-        <br>
-        <br>
-        <button style="font-size: 28px" onclick="window.location.href = 'https://github.com/face-hh/fuck/releases'">Download</button>
-        <br>
-        <a style="font-size: 10px" href="https://github.com/face-hh/fuck" target="_blank">github</a>
-    </div>
-</body>
-
-</html>
\ No newline at end of file
+        <script>
+            document.getElementById("download").addEventListener("click", function () {
+                window.location.href = "https://github.com/face-hh/fuck/releases";
+            });
+        </script>
+    </body>
+</html>
