Some a11y and Lighthouse testing
Dieser Commit ist enthalten in:
Ursprung
6c9c496f05
Commit
2286c6a3eb
@ -12,6 +12,9 @@ export default defineConfig({
|
||||
image: {
|
||||
service: sharpImageService()
|
||||
},
|
||||
experimental: {
|
||||
optimizeHoistedScript: true,
|
||||
},
|
||||
compressHTML: true,
|
||||
site: "https://steamwar.de",
|
||||
integrations: [svelte(), tailwind(), configureI18n(), sitemap({
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 />
|
||||
|
||||
@ -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">
|
||||
<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" />
|
||||
<link rel="stylesheet" href="/fonts/barlow-condensed/barlow-condensed.css" slot="head" />
|
||||
<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>
|
||||
|
||||
Laden…
In neuem Issue referenzieren
Einen Benutzer sperren