CSS and @font-face fixes

2026-03-12 16:31:58 -03:00
parent 0c4823d263
commit beffd5f4e8
30 changed files with 128 additions and 90 deletions
--- a/static/404.html
+++ b/static/404.html
@@ -1,20 +1,24 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>404 Not Found — mifi Ventures</title>
-    <meta name="theme-color" content="#0052cc" media="(prefers-color-scheme: light)">
-    <meta name="theme-color" content="#4da6ff" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-    <link rel="stylesheet" href="/assets/error-pages.css">
-</head>
-<body class="error-page">
-    <main>
-        <div class="emoji" aria-hidden="true">🔍</div>
-        <h1>404 Not Found</h1>
-        <p>This page went off to find itself. We’re not sure it’s coming back.</p>
-        <p><a href="/">Back to mifi Ventures →</a></p>
-    </main>
-</body>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>404 Not Found — mifi Ventures</title>
+        <meta
+            name="theme-color"
+            content="#0052cc"
+            media="(prefers-color-scheme: light)"
+        />
+        <meta name="theme-color" content="#4da6ff" media="(prefers-color-scheme: dark)" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="stylesheet" href="/assets/error-pages.css" />
+    </head>
+    <body class="error-page">
+        <main>
+            <div class="emoji" aria-hidden="true">🔍</div>
+            <h1>404 Not Found</h1>
+            <p>This page went off to find itself. We’re not sure it’s coming back.</p>
+            <p><a href="/">Back to mifi Ventures →</a></p>
+        </main>
+    </body>
 </html>
--- a/static/410.html
+++ b/static/410.html
@@ -1,20 +1,24 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>410 Gone — mifi Ventures</title>
-    <meta name="theme-color" content="#0052cc" media="(prefers-color-scheme: light)">
-    <meta name="theme-color" content="#4da6ff" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-    <link rel="stylesheet" href="/assets/error-pages.css">
-</head>
-<body class="error-page">
-    <main>
-        <div class="emoji" aria-hidden="true">👋</div>
-        <h1>410 Gone</h1>
-        <p>This page has left the building. We’ve moved on—and so should you.</p>
-        <p><a href="/">Back to mifi Ventures →</a></p>
-    </main>
-</body>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>410 Gone — mifi Ventures</title>
+        <meta
+            name="theme-color"
+            content="#0052cc"
+            media="(prefers-color-scheme: light)"
+        />
+        <meta name="theme-color" content="#4da6ff" media="(prefers-color-scheme: dark)" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="stylesheet" href="/assets/error-pages.css" />
+    </head>
+    <body class="error-page">
+        <main>
+            <div class="emoji" aria-hidden="true">👋</div>
+            <h1>410 Gone</h1>
+            <p>This page has left the building. We’ve moved on—and so should you.</p>
+            <p><a href="/">Back to mifi Ventures →</a></p>
+        </main>
+    </body>
 </html>
--- a/static/assets/error-pages.css
+++ b/static/assets/error-pages.css
@@ -32,22 +32,33 @@
 }

 /* Local fonts — same paths as +layout.svelte preloads */
+
@font-face {
-    font-family: 'Inter';
+    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-v20-latin-regular.woff2') format('woff2');
 }
+
@font-face {
-    font-family: 'Inter';
+    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-v20-latin-500.woff2') format('woff2');
 }
+
@font-face {
-    font-family: 'Fraunces';
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/assets/fonts/inter-v20-latin-700.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: Fraunces;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
@@ -67,15 +78,18 @@
    color: var(--ep-text);
    background-color: var(--ep-bg-alt);
 }
+
 .error-page main {
    text-align: center;
    padding: 2rem 1.5rem;
    max-width: 28rem;
 }
+
 .error-page .emoji {
    font-size: 4rem;
    margin-bottom: 0.5rem;
 }
+
 .error-page h1 {
    font-family: var(--ep-font-heading);
    font-size: 2rem;
@@ -83,19 +97,23 @@
    margin: 0 0 0.75rem;
    color: var(--ep-text);
 }
+
 .error-page p {
    margin: 0 0 1.5rem;
    color: var(--ep-text-secondary);
 }
+
 .error-page a {
    color: var(--ep-primary);
    font-weight: 500;
    text-decoration: none;
 }
+
 .error-page a:hover {
    color: var(--ep-primary-hover);
    text-decoration: underline;
 }
+
 .error-page a:focus-visible {
    outline: 2px solid var(--ep-primary);
    outline-offset: 2px;
--- a/static/assets/js/cookie-consent.js
+++ b/static/assets/js/cookie-consent.js
@@ -69,10 +69,7 @@
        try {
            var clarityScript = document.createElement('script');
            clarityScript.defer = true;
-            setScriptSrc(
-                clarityScript,
-                'https://www.clarity.ms/tag/vuo5q3yf79?ref=bwt',
-            );
+            setScriptSrc(clarityScript, 'https://www.clarity.ms/tag/vuo5q3yf79?ref=bwt');
            document.head.appendChild(clarityScript);
        } catch (e2) {
            console.error('Failed to load Microsoft Clarity', e2);
@@ -142,4 +139,3 @@
        init();
    }
 })();
-
--- a/static/assets/js/copyright-year.js
+++ b/static/assets/js/copyright-year.js
@@ -1,5 +1,5 @@
 (function () {
-  'use strict';
-  var el = document.getElementById('copyright-year');
-  if (el) el.textContent = new Date().getFullYear();
+    'use strict';
+    var el = document.getElementById('copyright-year');
+    if (el) el.textContent = new Date().getFullYear();
 })();
--- a/static/assets/js/ga-init.js
+++ b/static/assets/js/ga-init.js
@@ -1,8 +1,10 @@
 window.dataLayer = window.dataLayer || [];
-function gtag(){ window.dataLayer.push(arguments); }
+function gtag() {
+    window.dataLayer.push(arguments);
+}

-gtag("js", new Date());
-gtag("config", "G-36F29PDKRT", {
+gtag('js', new Date());
+gtag('config', 'G-36F29PDKRT', {
    // optional, but often helpful:
    anonymize_ip: true,
 });
--- a/static/assets/js/mobile-menu-helper.js
+++ b/static/assets/js/mobile-menu-helper.js
@@ -1,8 +1,7 @@
 const MOBILE_BREAKPOINT_PX = 768;

 /** All focusable elements inside the menu (links). */
-const getMenuFocusables = (menu) =>
-    menu.querySelectorAll('a[href]');
+const getMenuFocusables = (menu) => menu.querySelectorAll('a[href]');

 const mobileMenuHelper = () => {
    const mobileMenu = document.getElementById('nav-menu');
@@ -15,10 +14,7 @@ const mobileMenuHelper = () => {
    const syncMenuAriaHidden = () => {
        if (isMobile()) {
            const hidden = !mobileMenuToggle.checked;
-            mobileMenu.setAttribute(
-                'aria-hidden',
-                hidden ? 'true' : 'false',
-            );
+            mobileMenu.setAttribute('aria-hidden', hidden ? 'true' : 'false');
            // inert removes the subtree from the a11y tree and makes descendants non-focusable
            if (hidden) {
                mobileMenu.setAttribute('inert', '');
--- a/static/assets/js/umami-helper.js
+++ b/static/assets/js/umami-helper.js
@@ -1,9 +1,6 @@
 // Umami: safe track (no-op if script blocked or not loaded)
 function umamiTrack(name, data) {
-    if (
-        typeof window.umami !== 'undefined' &&
-        typeof window.umami.track === 'function'
-    ) {
+    if (typeof window.umami !== 'undefined' && typeof window.umami.track === 'function') {
        if (data != null) window.umami.track(name, data);
        else window.umami.track(name);
    }