chore: add favicon and font and colors v1

package.json

@@ -16,6 +16,7 @@
   "packageManager": "[email protected]",
   "dependencies": {
     "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "@fontsource-variable/outfit": "^5.2.8",
     "@tailwindcss/vite": "^4.1.18",
     "animejs": "^4.2.2",
     "astro": "^5.16.8",

public/favicon/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "2026.es.pycon.org",
+    "short_name": "PyConES 2026",
+    "icons": [
+        {
+            "src": "/favicon/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/favicon/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

src/components/LanguagePicker.astro

@@ -31,7 +31,7 @@ const getPathForLang = (lang) => {
 }
 ---
 
-<ul aria-label={t['alttext']} class="flex gap-6 p-2 pr-6 justify-end text-green-400 font-mono">
+<ul aria-label={t['alttext']} class="flex gap-6 p-2 pr-6 justify-end text-pycon-yellow font-outfit">
   {
     languages.map((lang) => (
       <li>

src/components/index.astro

@@ -16,15 +16,15 @@ const t = texts[lang as keyof typeof texts]
   <main class="min-h-screen flex flex-col justify-center items-center text-center px-4">
     <div class="relative z-10 max-w-3xl">
       <h1
-        class="text-4xl md:text-7xl font-bold text-white font-mono tracking-tighter cursor-default"
+        class="text-4xl md:text-7xl font-bold text-white font-outfit tracking-tighter cursor-default"
         aria-label="PyConES 2026"
       >
         <span aria-hidden="true" data-value="PyConES 2026" id="matrix-text"> PyConES 2026 </span>
       </h1>
 
       <h2
         id="subtitle-container"
-        class="mt-4 text-xl md:text-2xl text-green-400 font-mono h-8 flex justify-center items-center gap-2"
+        class="mt-4 text-xl md:text-2xl text-pycon-yellow font-mono h-8 flex justify-center items-center gap-2"
         aria-live="polite"
         aria-busy="true"
       >
@@ -42,7 +42,7 @@ const t = texts[lang as keyof typeof texts]
             id="sponsor-btn"
             type="button"
             aria-describedby="sponsor-hint"
-            class="group relative px-7 py-2 bg-green-500 text-black font-mono font-bold text-lg hover:bg-green-400 transition-all duration-300 shadow-[0_0_15px_rgba(34,197,94,0.5)] hover:shadow-[0_0_25px_rgba(34,197,94,0.8)] cursor-pointer focus:outline-none focus:ring-4 focus:ring-green-300/50 rounded-sm"
+            class="group relative px-7 py-2 bg-pycon-orange text-black font-mono font-bold text-lg hover:bg-pycon-yellow transition-all duration-300 shadow-[0_0_15px_rgba(255,130,0,0.5)] hover:shadow-[0_0_25px_rgba(255,130,0,0.8)] cursor-pointer focus:outline-none focus:ring-4 focus:ring-pycon-orange/50 rounded-sm"
           >
             <span
               class="absolute inset-0 w-full h-full bg-white opacity-0 group-hover:opacity-20 transition-opacity pointer-events-none"

src/layouts/Layout.astro

@@ -2,6 +2,7 @@
 import LanguagePicker from '../components/LanguagePicker.astro'
 import '../style/global.css'
 import '@fontsource-variable/jetbrains-mono'
+import '@fontsource-variable/outfit'
 import { ClientRouter } from 'astro:transitions'
 
 interface Props {
@@ -18,15 +19,18 @@ const { title, description = 'PyconES 2026' } = Astro.props
     <meta charset="UTF-8" />
     <meta name="description" content={description} />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/svg+xml" href="/2026.es.pycon.org/favicon.svg" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
+    <link rel="manifest" href="/favicon/site.webmanifest" />
     <meta name="generator" content={Astro.generator} />
 
     <title>{title}</title>
 
     <ClientRouter />
   </head>
 
-  <body class="bg-slate-900 text-white antialiased h-screen bg-linear-to-r from-gray to-blue-900 bg-radial">
+  <body class="bg-pycon-black text-white antialiased h-screen bg-[radial-gradient(ellipse_at_top,var(--tw-gradient-stops))] from-[#2a2a28] via-pycon-black to-pycon-black">
     <nav class="relative z-11">
       <LanguagePicker lang={lang} />
     </nav>
@@ -40,13 +44,8 @@ const { title, description = 'PyconES 2026' } = Astro.props
 <style is:global>
   /* Global CSS styles (Vanilla CSS) */
 
-  :root {
-    /* If you want to define native CSS variables */
-    --accent: 136, 58, 234;
-  }
-
   html {
-    font-family: system-ui, sans-serif;
+    font-family: 'Outfit Variable', sans-serif;
     scroll-behavior: smooth; /* Smooth scroll when navigating by anchors (#) */
   }
 
@@ -55,13 +54,13 @@ const { title, description = 'PyconES 2026' } = Astro.props
     width: 10px;
   }
   ::-webkit-scrollbar-track {
-    background: #0f172a;
+    background: #1d1d1b;
   }
   ::-webkit-scrollbar-thumb {
-    background: #334155;
+    background: #555554;
     border-radius: 5px;
   }
   ::-webkit-scrollbar-thumb:hover {
-    background: #475569;
+    background: #8e8e8d;
   }
 </style>