set browserslist

adjust image sizes somewhat
prioritize all three featured event images
2026-06-01 04:38:21 +02:00 · 2026-06-01 04:30:14 +02:00 · 2026-06-01 04:17:54 +02:00 · 2026-06-01 04:09:41 +02:00 · 2026-06-01 03:40:43 +02:00
6 changed files with 36 additions and 6 deletions
@@ -48,5 +48,9 @@
  "overrides": {
    "@types/react": "19.2.14",
    "@types/react-dom": "19.2.3"
-  }
+  },
+  "browserslist": [
+    "> 0.5% in NO",
+    "not dead"
+  ]
 }
@@ -35,7 +35,22 @@ export default function RootLayout({
    <html lang="no">
      <head>
        <link rel="preconnect" href="https://use.typekit.net" crossOrigin="anonymous" />
-        <link rel="stylesheet" href="https://use.typekit.net/spa5smt.css" />
+        <link rel="preconnect" href="https://p.typekit.net" crossOrigin="anonymous" />
+        {/*
+          Load Adobe Fonts without blocking render: the stylesheet is requested
+          with media="print" (fetched but not applied), then the inline script
+          below swaps it to media="all" once it has loaded.
+        */}
+        <link
+          id="typekit-css"
+          rel="stylesheet"
+          href="https://use.typekit.net/spa5smt.css"
+          media="print"
+          suppressHydrationWarning
+        />
+        <script>
+          {`(function(){var l=document.getElementById('typekit-css');if(!l)return;function s(){l.media='all'}if(l.sheet){s()}else{l.addEventListener('load',s)}})();`}
+        </script>
        {process.env.UMAMI_SCRIPT_URL && process.env.UMAMI_WEBSITE_ID && (
          <script
            defer
@@ -58,7 +58,7 @@ export const EventItem = ({
            alt={featuredImage.alt}
            width={0}
            height={0}
-            sizes="(max-width: 900px) 100vw, 25vw"
+            sizes="(max-width: 900px) calc(100vw - 2rem), 30vw"
            loading={imageLoading}
            fetchPriority={imageFetchPriority}
          />
@@ -9,13 +9,13 @@ export const FeaturedEvents = ({ events }: { events: EventListItemFragment[] })
    <section className={styles.featuredEvents}>
      <SectionHeader heading="Arrangementer" link="/arrangementer" linkText="Se alle arrangementer" />
      <ul className={styles.eventList}>
-        {events.slice(0, 3).map((event, index) => (
+        {events.slice(0, 3).map((event) => (
          <EventItem
            key={event.id}
            event={event}
            mode="list"
            imageLoading="eager"
-            imageFetchPriority={index < 2 ? "high" : undefined}
+            imageFetchPriority="high"
          />
        ))}
      </ul>
@@ -25,8 +25,12 @@ export const Header = () => {
  const { replace } = useRouter();
  const pathname = usePathname();
  const [showMenu, setShowMenu] = useState(false);
+  // Only enable the menu's slide/fade animations once the user has interacted,
+  // so they don't play on first page load
+  const [hasInteracted, setHasInteracted] = useState(false);

  function toggleMenu() {
+    setHasInteracted(true);
    setShowMenu(!showMenu);
  }

@@ -61,6 +65,7 @@ export const Header = () => {
      <header
        className={styles.header}
        data-show={showMenu}
+        data-animate={hasInteracted}
        data-small={!isInView}
      >
        <Link href="/" aria-label="Hjem">
@@ -54,6 +54,12 @@
      transition: transform .6s ease;
    }
  }
+
+  &[data-animate=false] {
+    .mainMenu {
+      animation: none;
+    }
+  }
 }

 .overlay {
@@ -282,4 +288,4 @@
  .logo {
    font-size: 1rem;
  }
-}
+}
Author	SHA1	Message	Date
ponas	5d5f0879c2	set browserslist	2026-06-01 04:38:21 +02:00
ponas	046099b7f1	adjust image sizes somewhat	2026-06-01 04:30:14 +02:00
ponas	d245f2f00a	prioritize all three featured event images	2026-06-01 04:17:54 +02:00
ponas	8ad7df30d7	don't let typekit css block rendering	2026-06-01 04:09:41 +02:00
ponas	dcb1a59777	don't animate menu unless interacted with	2026-06-01 03:40:43 +02:00