style: remove container and enlarge boxes

acdh-oeaw · Jun 17, 2024 · 17c381b · 17c381b
1 parent 485439c
commit 17c381b
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 8 deletions.
diff --git a/components/app-footer.vue b/components/app-footer.vue
@@ -11,8 +11,8 @@ const links = computed(() => {
 </script>
 
 <template>
-	<footer class="border-t">
-		<div class="container flex items-center justify-between gap-4 py-4">
+	<footer class="border-t px-12">
+		<div class="flex items-center justify-between gap-4 py-4">
 			<nav :aria-label="t('AppFooter.navigation-secondary')">
 				<ul class="flex items-center gap-4 text-sm" role="list">
 					<li v-for="(link, key) of links" :key="key">

diff --git a/components/app-header.vue b/components/app-header.vue
@@ -17,10 +17,10 @@ const links = computed(() => {
 </script>
 
 <template>
-	<header class="border-b bg-frisch-marine">
+	<header class="border-b bg-frisch-marine px-12">
 		<div class="w-full pb-4 pt-12">
 			<nav :aria-label="t('AppHeader.navigation-main')">
-				<div class="container grid items-end gap-4 lg:grid-cols-2">
+				<div class="grid items-end gap-4 lg:grid-cols-2">
 					<div class="text-4xl font-semibold text-frisch-orange">
 						<NavLink :href="homeLink.href">
 							Digitales Archiv

diff --git a/pages/about.vue b/pages/about.vue
@@ -41,7 +41,7 @@ const { data: memberList } = useQuery({
 </script>
 
 <template>
-	<MainContent class="container grid grid-cols-[2fr_3fr] gap-8 py-8">
+	<MainContent class="grid grid-cols-[2fr_3fr] gap-8 px-12 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">

diff --git a/pages/explore.vue b/pages/explore.vue
@@ -14,7 +14,7 @@ usePageMetadata({
 	<MainContent class="container py-8">
 		<h1 class="sr-only">{{ t("ExplorePage.title") }}</h1>
 		<div class="mx-auto flex size-full max-h-full items-center justify-center font-semibold">
-			<div class="mx-auto grid max-h-full gap-4 text-2xl font-bold grid-fluid-cols-60">
+			<div class="mx-auto grid max-h-full gap-4 text-2xl font-bold grid-fluid-cols-72">
 				<Card
 					class="relative aspect-square overflow-hidden bg-frisch-orange p-4 text-white transition hover:scale-105"
 				>

diff --git a/pages/index.vue b/pages/index.vue
@@ -17,10 +17,10 @@ const links = {
 </script>
 
 <template>
-	<MainContent class="container h-full py-8">
+	<MainContent class="h-full py-8">
 		<h1 class="sr-only">{{ t("IndexPage.title") }}</h1>
 		<div
-			class="grid h-full gap-4 text-2xl font-bold sm:grid-cols-[repeat(3,minmax(0,250px))] sm:justify-center"
+			class="grid h-full gap-4 text-2xl font-bold sm:grid-cols-[repeat(3,minmax(0,350px))] sm:justify-center"
 		>
 			<NuxtLink v-for="(link, id) of links" :key="id" :href="link.href">
 				<Card class="size-full transition hover:scale-105" :class="link.color">

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -40,6 +40,7 @@ const config = {
 			padding: "2rem",
 			screens: {
 				"2xl": "1440px",
+				"3xl": "1600px",
 			},
 		},
 		extend: {