fix: layout dimensions cross-browser (chrome, firefox)

acdh-oeaw · May 24, 2024 · 3ca8e0f · 3ca8e0f
1 parent dcebca2
commit 3ca8e0f
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 32 deletions.
diff --git a/components/app-header.vue b/components/app-header.vue
@@ -16,10 +16,10 @@ const links = computed(() => {
 
 <template>
 	<header class="border-b bg-frisch-marine">
-		<div class="w-full pb-4 pt-10">
+		<div class="w-full pb-4 pt-12">
 			<nav :aria-label="t('AppHeader.navigation-main')">
 				<ul class="container grid grid-cols-2 items-end" role="list">
-					<div class="text-2xl font-extrabold text-frisch-orange">
+					<div class="text-4xl font-semibold text-frisch-orange">
 						<NavLink :href="homeLink.href">
 							Digitales Archiv
 							<br />
@@ -34,8 +34,12 @@ const links = computed(() => {
 						"
 						class="ml-auto flex gap-x-4 font-semibold transition"
 					>
-						<li v-for="(link, key, index) of links" :key="key" class="flex shrink-0 gap-x-4">
-							<Separator v-if="index > 0" class="h-5 w-0.5 bg-frisch-orange" />
+						<li
+							v-for="(link, key, index) of links"
+							:key="key"
+							class="flex shrink-0 gap-x-4 text-xl"
+						>
+							<Separator v-if="index > 0" class="h-full w-0.5 bg-frisch-orange" />
 							<NavLink
 								:href="link.href"
 								:class="route.path === `/${key}` ? 'text-frisch-indigo' : 'text-frisch-orange'"

diff --git a/pages/about.vue b/pages/about.vue
@@ -46,37 +46,39 @@ const { data: memberList } = useQuery({
 </script>
 
 <template>
-	<MainContent class="container grid grid-cols-[auto_1fr] gap-8 px-40 py-8">
-		<Card class="size-64 bg-frisch-grey">
-			<CardContent class="flex size-full py-4 text-xl font-bold text-white">
-				ÜBER DAS PROJEKT
-			</CardContent>
-		</Card>
-		<div class="prose">
+	<MainContent class="container grid grid-cols-[2fr_3fr] gap-8 py-8">
+		<div class="flex justify-end">
+			<Card class="size-72 bg-frisch-grey">
+				<CardContent class="flex size-full py-4 text-2xl font-bold text-white">
+					ÜBER DAS PROJEKT
+				</CardContent>
+			</Card>
+		</div>
+		<div class="prose max-w-3xl">
 			<ContentRenderer
 				v-if="team != null"
 				:value="team"
 				class="prose prose-lg max-w-3xl text-balance text-center"
 			>
-				<h3 class="font-bold text-frisch-orange">
+				<h2 class="font-bold text-frisch-orange">
 					{{ team.title }}
-				</h3>
+				</h2>
 				<ContentRendererMarkdown :value="team" />
 				<template #empty></template>
 			</ContentRenderer>
 
 			<ContentRenderer
 				v-if="journey != null"
 				:value="journey"
-				class="prose prose-lg max-w-3xl text-balance text-center"
+				class="prose prose-lg text-balance text-center"
 			>
-				<ul class="list-none p-0">
+				<ul class="list-none px-0 py-8">
 					<li
 						v-for="member of memberList"
 						:key="member._id"
 						class="grid grid-cols-[auto_1fr] gap-4 p-0"
 					>
-						<div class="not-prose relative grid size-64 place-items-center overflow-hidden">
+						<div class="not-prose relative grid size-72 place-items-center overflow-hidden">
 							<img
 								v-if="member.image != null"
 								alt=""
@@ -96,9 +98,9 @@ const { data: memberList } = useQuery({
 					</li>
 				</ul>
 
-				<h3 class="font-bold text-frisch-orange">
+				<h2 class="font-bold text-frisch-orange">
 					{{ journey.title }}
-				</h3>
+				</h2>
 				<ContentRendererMarkdown :value="journey" />
 				<template #empty></template>
 			</ContentRenderer>

diff --git a/pages/explore.vue b/pages/explore.vue
@@ -3,9 +3,9 @@ import { Card } from "../components/ui/card";
 </script>
 
 <template>
-	<MainContent class="container">
-		<div class="mx-auto flex size-full max-h-full grid-cols-3 items-center gap-4 font-semibold">
-			<div class="mx-auto grid max-h-full max-w-7xl gap-4 font-bold grid-fluid-cols-60">
+	<MainContent class="container py-8">
+		<div class="mx-auto flex size-full max-h-full items-center justify-center font-semibold">
+			<div class="mx-auto grid max-h-full w-[70%] grid-cols-5 gap-4 text-2xl font-bold">
 				<Card
 					class="relative aspect-square overflow-hidden bg-frisch-orange p-4 text-white transition hover:scale-[105%]"
 				>

diff --git a/pages/imprint.vue b/pages/imprint.vue
@@ -7,10 +7,14 @@ defineRouteRules({
 </script>
 
 <template>
-	<MainContent class="container grid grid-cols-[auto_1fr] gap-8 px-40 py-8">
-		<Card class="size-64 bg-frisch-orange-light">
-			<CardContent class="flex size-full py-4 text-xl font-bold text-white">IMPRESSUM</CardContent>
-		</Card>
-		<Imprint class="prose font-sans prose-h2:text-frisch-orange" />
+	<MainContent class="container grid grid-cols-[2fr_3fr] gap-8 px-40 py-8">
+		<div class="flex justify-end">
+			<Card class="size-72 bg-frisch-orange-light">
+				<CardContent class="flex size-full py-4 text-2xl font-bold text-white">
+					IMPRESSUM
+				</CardContent>
+			</Card>
+		</div>
+		<Imprint class="prose prose-h2:text-frisch-orange" />
 	</MainContent>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
@@ -4,19 +4,21 @@ import { Card, CardContent } from "@/components/ui/card";
 
 <template>
 	<MainContent class="container h-full py-8">
-		<div class="mx-auto flex size-full w-[850px] grid-cols-3 gap-4 text-xl font-bold">
+		<div
+			class="mx-auto grid size-full w-1/2 grid-cols-[1fr_1fr_1fr] justify-center gap-4 text-2xl font-bold"
+		>
 			<NuxtLink href="/search">
-				<Card class="h-full w-[280px] bg-frisch-orange transition hover:scale-[105%]">
+				<Card class="size-full bg-frisch-orange transition hover:scale-[105%]">
 					<CardContent class="flex size-full items-center text-white">SUCHE</CardContent>
 				</Card>
 			</NuxtLink>
 			<NuxtLink href="/explore">
-				<Card class="h-full w-[280px] bg-frisch-indigo transition hover:scale-[105%]">
+				<Card class="size-full bg-frisch-indigo transition hover:scale-[105%]">
 					<CardContent class="flex size-full items-center text-white">ENTDECKEN</CardContent>
 				</Card>
 			</NuxtLink>
 			<NuxtLink href="/about">
-				<Card class="h-full w-[280px] bg-frisch-grey transition hover:scale-[105%]">
+				<Card class="size-full bg-frisch-grey transition hover:scale-[105%]">
 					<CardContent class="flex size-full items-center text-white">ÜBER DAS PROJEKT</CardContent>
 				</Card>
 			</NuxtLink>

diff --git a/styles/index.css b/styles/index.css
@@ -8,3 +8,7 @@ body,
 	block-size: 100%;
 	isolation: isolate;
 }
+
+#__nuxt {
+	overflow-y: scroll;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -38,9 +38,9 @@ const config: Config = {
 	theme: {
 		container: {
 			center: true,
-			padding: "2rem",
+			padding: "5rem",
 			screens: {
-				"2xl": "1400px",
+				"2xl": "max-width",
 			},
 		},
 		extend: {