Make some fixes

css/fonts.css

@@ -1,4 +1,5 @@
 @font-face {
+  font-display: swap;
   font-family: 'Comic Code';
   src: url('https://fonts.doughmination.co.uk/ComicCode-Regular_2022-05-24-151938_hsmz.woff2') format('woff2'),
     url('https://fonts.doughmination.co.uk/ComicCode-Regular_2022-05-24-151938_hsmz.woff') format('woff');
@@ -7,6 +8,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'Comic Code';
   src: url('https://fonts.doughmination.co.uk/ComicCode-Italic_2022-05-24-151939_rdtu.woff2') format('woff2'),
     url('https://fonts.doughmination.co.uk/ComicCode-Italic_2022-05-24-151939_rdtu.woff') format('woff');
@@ -15,6 +17,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'Comic Code';
   src: url('https://fonts.doughmination.co.uk/ComicCode-Medium_2022-05-24-151941_ugqm.woff2') format('woff2'),
     url('https://fonts.doughmination.co.uk/ComicCode-Medium_2022-05-24-151941_ugqm.woff') format('woff');
@@ -23,6 +26,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'Comic Code';
   src: url('https://fonts.doughmination.co.uk/ComicCode-Bold_2022-05-24-152309_zqkm.woff2') format('woff2'),
     url('https://fonts.doughmination.co.uk/ComicCode-Bold_2022-05-24-152309_zqkm.woff') format('woff');

css/index.css

@@ -1,43 +1,46 @@
 /* IMPORTS */
-
+@import url(fonts.css);
-@import url("fonts.css");
+@import url(picker.css);
 @import url(theme-switcher.css);
-@import url("picker.css");
-@import url(themes/mocha.css);
-@import url(themes/macchiato.css);
 @import url(themes/frappe.css);
 @import url(themes/latte.css);
+@import url(themes/macchiato.css);
+@import url(themes/mocha.css);
 
-/* Index.html */
+*,
-
+*::before,
-
+*::after {
-html,
+    box-sizing: border-box;
-body {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 1.5rem 1rem;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    font-family: 'Comic Code', sans-serif;
-    overflow-x: hidden;
-    max-width: 100vw;
-    margin: 0;
-    min-height: 100vh;
-    background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
-    color: var(--text);
 }
 
 html {
+    height: 100%;
     background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
 }
 
-.hub {
+body {
-    position: auto;
+    margin: 0;
-    z-index: 1;
+    min-height: 100vh;
     width: 100%;
-    max-width: 460px;
+    max-width: 100vw;
+    overflow-x: hidden;
+    font-family: 'Comic Code', sans-serif;
+    background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
+    color: var(--text);
+
+    /* top-anchored, horizontally centered, scrollable */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: clamp(2.5rem, 9vh, 6rem) 1.25rem 5rem;
+}
+
+/* main content column */
+main.intro,
+.hub {
+    width: 100%;
+    max-width: 480px;
+    z-index: 1;
 }
 
 .pfp {
@@ -138,19 +141,20 @@ body::before {
     filter: invert(78%) sepia(36%) saturate(640%) hue-rotate(280deg) brightness(105%);
 }
 
-
-
 @media (max-width: 600px) {
     .intro {
-        margin-top: 10vh;
         color: var(--text);
         text-align: center;
-        padding: 5vh
+        padding: 0;
     }
 
     .intro-text {
-        margin-top: 1vh;
+        margin-top: 0.75rem;
-        padding: 1vh;
+        padding: 0 0.25rem;
+    }
+
+    .hub-header h1 {
+        font-size: 1.7rem;
     }
 }
 
@@ -164,19 +168,41 @@ body::before {
     }
 }
 
+.intro-text {
+    max-width: 42ch;
+    margin-left: auto;
+    margin-right: auto;
+    line-height: 1.6;
+    color: var(--subtext-1);
+    font-size: 0.98rem;
+}
+
 .gitgay-link {
     background-color: var(--mauve);
     border: none;
     color: black;
-  padding: 20px;
+    padding: 0.85rem 1.5rem;
     text-align: center;
     text-decoration: none;
     display: inline-block;
-  font-size: 16px;
+    font-size: 1rem;
+    font-weight: 600;
     margin: 4px 2px;
     cursor: pointer;
-  border-radius: 15px;
+    border-radius: 14px;
     font-family: "Comic Code";
+    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
+    box-shadow: 0 6px 18px -8px rgba(var(--accent-rgb), 0.7);
+}
+
+.gitgay-link:hover {
+    transform: translateY(-2px);
+    filter: brightness(1.05);
+    box-shadow: 0 10px 24px -8px rgba(var(--accent-rgb), 0.8);
+}
+
+.gitgay-link:active {
+    transform: translateY(0);
 }
 
 .hub-header, .pfp, .hey, .pronouns, .intro-text, .gitgay-link {
@@ -242,7 +268,7 @@ body.message-page {
 }
 
 .message-card {
-    background: var(--surface0);
+    background: var(--surface-0);
     padding: 2.5rem;
     border-radius: 12px;
     max-width: 520px;
@@ -251,7 +277,7 @@ body.message-page {
     text-align: center;
     line-height: 1.6;
     color: var(--text);
-    border: 1px solid var(--surface1);
+    border: 1px solid var(--surface-1);
 }
 
 .message-card h1 {
@@ -261,7 +287,7 @@ body.message-page {
 }
 
 .message-card p {
-    color: var(--subtext1);
+    color: var(--subtext-1);
 }
 
 .message-card .ok    { color: var(--green); }
@@ -269,7 +295,7 @@ body.message-page {
 .message-card .warn  { color: var(--yellow); }
 
 .message-card .muted {
-    color: var(--overlay1);
+    color: var(--overlay-1);
     font-size: 0.9rem;
     margin-top: 1.5rem;
 }

index.html

@@ -8,6 +8,7 @@
     <!-- Page Title -->
     <title>Ari</title>
     <link rel="icon" type="image/png" href="/assets/media/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css">
     <script>try { var f = localStorage.getItem('ctpFlavor'); document.documentElement.setAttribute('data-flavor', ['mocha', 'macchiato', 'frappe', 'latte'].indexOf(f) >= 0 ? f : 'mocha'); } catch (e) { document.documentElement.setAttribute('data-flavor', 'mocha'); }</script>
 
     <!-- SEO Meta Tags -->
@@ -39,14 +40,12 @@
     <meta name="twitter:card" content="summary_image" />
     <meta name="twitter:title" content="Ari Stuff" />
     <meta name="twitter:description" content="Personal Site for Ari on git.gay" />
-    <link href="css/index.css" rel="stylesheet" />
-    <link href="css/picker.css" rel="stylesheet" />
 </head>
 
 <body>
     <main class="intro">
         <header class="hub-header">
-            <img class="pfp" src="assets/media/avatar.png" alt="Ari avatar">
+            <img class="pfp" src="assets/media/avatar.webp" alt="Ari avatar" width="96" height="96" fetchpriority="high">
             <div>
                 <h1 class="hey">Hi, I'm<span class="name">Ari</span></h1>
             </div>
@@ -56,7 +55,7 @@
                 and just tries to help out whenever she can.
             </div>
             <div>
-                <a href="https://git.gay/Ari" target="_blank"><button class="gitgay-link">Check out my Git.Gay</button></a>
+                <a class="gitgay-link" href="https://git.gay/Ari" target="_blank" rel="noopener">Check out my Git.Gay</a>
             </div>
         </header>
 
@@ -69,16 +68,4 @@
         <img src="/assets/88x31/skirt.gif" alt="Skirt" loading="lazy">
         <img src="/assets/88x31/gitgay.png" alt="GitGay" loading="lazy">
         <img src="/assets/88x31/blink.gif" alt="Blink" loading="lazy">
-        <img src="/assets/88x31/firefox.gif" alt="Firefox" loading="lazy">
-        <img src="/assets/88x31/nft.gif" alt="NFT" loading="lazy">
-        <img src="/assets/88x31/noweb32.gif" alt="No Web 3.2" loading="lazy">
-        <img src="/assets/88x31/meltice.gif" alt="Melt Ice" loading="lazy">
-        <img src="/assets/88x31/transnow2.gif" alt="Melt Ice" loading="lazy">
    
-    </aside>
-</body>
-<script src="js/index.js"></script>
-<script src="js/flavors.js"></script>
-<script src="js/cat.js"></script>
-
-</html>