Some a11y and Lighthouse testing

astro.config.mjs

@@ -12,6 +12,9 @@ export default defineConfig({
   image: {
     service: sharpImageService()
   },
+  experimental: {
+    optimizeHoistedScript: true,
+  },
   compressHTML: true,
   site: "https://steamwar.de",
   integrations: [svelte(), tailwind(), configureI18n(), sitemap({

public/fonts/barlow-condensed/barlow-condensed.css

@@ -4,6 +4,7 @@
 	font-style: normal;
 	font-weight: 100;
 	src: local("Barlow Condensed Thin"), local("BarlowCondensed-Thin"), url(barlow-condensed-thin.woff2) format("woff2");
+	font-display: swap;
 }
 /* barlow-condensed-thin-italic */
 @font-face {
@@ -11,6 +12,7 @@
 	font-style: italic;
 	font-weight: 100;
 	src: local("Barlow Condensed Thin Italic"), local("BarlowCondensed-ThinItalic"), url(barlow-condensed-thin-italic.woff2) format("woff2");
+	font-display: swap;
 }
 /* barlow-condensed-extralight */
 @font-face {
@@ -18,6 +20,7 @@
 	font-style: normal;
 	font-weight: 400;
 	src: local("Barlow Condensed ExtraLight"), local("BarlowCondensed-ExtraLight"), url(barlow-condensed-extralight.woff2) format("woff2");
+	font-display: swap;
 }
 /* barlow-condensed-extralight-italic */
 @font-face {
@@ -25,6 +28,7 @@
 	font-style: italic;
 	font-weight: 400;
 	src: local("Barlow Condensed ExtraLight Italic"), local("BarlowCondensed-ExtraLightItalic"), url(barlow-condensed-extralight-italic.woff2) format("woff2");
+	font-display: swap;
 }
 /* barlow-condensed-light */
 @font-face {
@@ -32,6 +36,7 @@
 	font-style: normal;
 	font-weight: 300;
 	src: local("Barlow Condensed Light"), local("BarlowCondensed-Light"), url(barlow-condensed-light.woff2) format("woff2");
+	font-display: swap;
 }
 /* barlow-condensed-light-italic */
 @font-face {
@@ -39,6 +44,7 @@
 	font-style: italic;
 	font-weight: 300;
 	src: local("Barlow Condensed Light Italic"), local("BarlowCondensed-LightItalic"), url(barlow-condensed-light-italic.woff2) format("woff2");
+	font-display: swap;
 }
 /* barlow-condensed-regular */
 @font-face {
@@ -46,6 +52,7 @@
 	font-style: normal;
 	font-weight: 400;
 	src: local("Barlow Condensed Regular"), local("BarlowCondensed-Regular"), url(barlow-condensed-regular.woff2) format("woff2");
+	font-display: swap;
 }
 /* barlow-condensed-italic */
 @font-face {
@@ -53,6 +60,7 @@
 	font-style: italic;
 	font-weight: 400;
 	src: local("Barlow Condensed Italic"), local("BarlowCondensed-Italic"), url(barlow-condensed-italic.woff2) format("woff2");
+	font-display: swap;
 }
 /* barlow-condensed-medium */
 @font-face {
@@ -60,6 +68,7 @@
 	font-style: normal;
 	font-weight: 500;
 	src: local("Barlow Condensed Medium"), local("BarlowCondensed-Medium"), url(barlow-condensed-medium.woff2) format("woff2");
+	font-display: swap;
 }
 /* barlow-condensed-medium-italic */
 @font-face {
@@ -67,6 +76,7 @@
 	font-style: italic;
 	font-weight: 500;
 	src: local("Barlow Condensed Medium Italic"), local("BarlowCondensed-MediumItalic"), url(barlow-condensed-medium-italic.woff2) format("woff2");
+	font-display: swap;
 }
 /* barlow-condensed-semibold */
 @font-face {
@@ -74,6 +84,7 @@
 	font-style: normal;
 	font-weight: 400;
 	src: local("Barlow Condensed SemiBold"), local("BarlowCondensed-SemiBold"), url(barlow-condensed-semibold.woff2) format("woff2");
+	font-display: swap;
 }
 /* barlow-condensed-semibold-italic */
 @font-face {
@@ -81,6 +92,7 @@
 	font-style: italic;
 	font-weight: 400;
 	src: local("Barlow Condensed SemiBold Italic"), local("BarlowCondensed-SemiBoldItalic"), url(barlow-condensed-semibold-italic.woff2) format("woff2");
+	font-display: swap;
 }
 /* barlow-condensed-bold */
 @font-face {
@@ -88,6 +100,7 @@
 	font-style: normal;
 	font-weight: 700;
 	src: local("Barlow Condensed Bold"), local("BarlowCondensed-Bold"), url(barlow-condensed-bold.woff2) format("woff2");
+	font-display: swap;
 }
 /* barlow-condensed-bold-italic */
 @font-face {
@@ -95,6 +108,7 @@
 	font-style: italic;
 	font-weight: 700;
 	src: local("Barlow Condensed Bold Italic"), local("BarlowCondensed-BoldItalic"), url(barlow-condensed-bold-italic.woff2) format("woff2");
+	font-display: swap;
 }
 /* barlow-condensed-extrabold */
 @font-face {
@@ -102,6 +116,7 @@
 	font-style: normal;
 	font-weight: 400;
 	src: local("Barlow Condensed ExtraBold"), local("BarlowCondensed-ExtraBold"), url(barlow-condensed-extrabold.woff2) format("woff2");
+	font-display: swap;
 }
 /* barlow-condensed-extrabold-italic */
 @font-face {
@@ -109,6 +124,7 @@
 	font-style: italic;
 	font-weight: 400;
 	src: local("Barlow Condensed ExtraBold Italic"), local("BarlowCondensed-ExtraBoldItalic"), url(barlow-condensed-extrabold-italic.woff2) format("woff2");
+	font-display: swap;
 }
 /* barlow-condensed-black */
 @font-face {
@@ -116,6 +132,7 @@
 	font-style: normal;
 	font-weight: 900;
 	src: local("Barlow Condensed Black"), local("BarlowCondensed-Black"), url(barlow-condensed-black.woff2) format("woff2");
+	font-display: swap;
 }
 /* barlow-condensed-black-italic */
 @font-face {
@@ -123,5 +140,6 @@
 	font-style: italic;
 	font-weight: 900;
 	src: local("Barlow Condensed Black Italic"), local("BarlowCondensed-BlackItalic"), url(barlow-condensed-black-italic.woff2) format("woff2");
+	font-display: swap;
 }
 

src/layouts/Basic.astro

@@ -13,11 +13,10 @@ const iconImage = await getImage({src: icon, height: 32, width: 32, format: 'png
 <head>
     <meta charset="UTF-8">
     <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+          content="width=device-width, user-scalable=5, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <meta name="icbm" content="52.370216;4.895168"/>
     <link rel="icon" type="imgage/png" href={iconImage.src} />
-    <link rel="stylesheet" href="/fonts/barlow-condensed/barlow-condensed.css" />
 
     <SEO
         title={title}

src/layouts/NavbarLayout.astro

@@ -107,7 +107,7 @@ const { title } = Astro.props;
             <main class="flex-1">
                 <slot />
             </main>
-            <footer class="bg-gray-900 w-screen min-h-80 mt-4 pb-2 rounded-t-2xl flex flex-col dark:bg-neutral-900">
+            <footer class="bg-gray-900 w-full min-h-80 mt-4 pb-2 rounded-t-2xl flex flex-col dark:bg-neutral-900">
                 <div class="flex-1 flex justify-evenly items-center md:items-start mt-4 md:flex-row flex-col">
                     <div class="footer-card">
                         <h1>Serverstatus</h1>

src/layouts/PageLayout.astro

@@ -7,7 +7,7 @@ const { title } = Astro.props;
 ---
 
 <NavbarLayout title={title}>
-    <Image src={localBau} alt="Bau" width="1920" height="1080" class="w-screen h-screen dark:brightness-75 fixed -z-10 object-cover" draggable="false" />
+    <Image src={localBau} alt="Bau" width="1920" height="1080" densities={[1.5, 2, 3, 4]} class="w-full h-screen dark:brightness-75 fixed -z-10 object-cover"  draggable="false" />
     <div class="mx-auto bg-gray-100 p-8 rounded-b-md shadow-md pt-40 sm:pt-28 md:pt-14
             dark:text-white dark:bg-neutral-900" style="width: min(100vw, 75em);">
         <slot />

src/pages/index.astro

@@ -37,8 +37,9 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
 ---
 
 <NavbarLayout title={t("home.page")} description="SteamWar.de Homepage">
-	<div class="w-screen h-screen relative mb-4">
+	<link rel="stylesheet" href="/fonts/barlow-condensed/barlow-condensed.css" slot="head" />
-		<Image src={localBau} alt="Bau" width="1920" height="1080" class="w-screen object-cover rounded-b-2xl shadow-2xl dark:brightness-75" style="height: calc(100vh + 1rem)" draggable="false" />
+	<div class="w-full h-screen relative mb-4">
+		<Image src={localBau} alt="Bau" width="1920" height="1080" densities={[1.5, 2, 3, 4]} class="w-full object-cover rounded-b-2xl shadow-2xl dark:brightness-75" style="height: calc(100vh + 1rem)" draggable="false" />
 		<drop-in class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
 			<h1 class="text-4xl sm:text-6xl md:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow" style="transition: transform .7s ease-out, opacity .7s linear; text-shadow: 2px 2px 5px black;">
 				<span class="text-yellow-400">{t("home.title.first")}</span><span class="text-neutral-600">{t("home.title.second")}</span>
@@ -101,7 +102,7 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
 			</script>
 		</drop-in>
 	</div>
-	<section class="w-screen flex flex-col items-center justify-center shadow-2xl rounded-b-2xl pb-8">
+	<section class="w-full flex flex-col items-center justify-center shadow-2xl rounded-b-2xl pb-8">
 		<div class="py-10 flex flex-col lg:flex-row">
 			<div class="card">
 				<Archive heigth="64" width="64" />
@@ -123,7 +124,7 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
 		</div>
 		<a class="btn px-8 flex" href={l("/about")}>Read More <CaretRight width="24" heigth="24" /></a>
 	</section>
-	<section class="w-screen py-12">
+	<section class="w-full py-12">
 		{mapMap(groupedTeamMember, (key, value) => (
 			<div class="flex items-center flex-col">
 				<h2 class="dark:text-white text-4xl font-bold">{t("home.prefix." + key)}</h2>