From 17c381bd69e8f822e976bc587c6e2fd53a6a9c1b Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Mon, 17 Jun 2024 12:38:37 +0200
Subject: [PATCH] style: remove container and enlarge boxes

---
 components/app-footer.vue | 4 ++--
 components/app-header.vue | 4 ++--
 pages/about.vue           | 2 +-
 pages/explore.vue         | 2 +-
 pages/index.vue           | 4 ++--
 tailwind.config.ts        | 1 +
 6 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/components/app-footer.vue b/components/app-footer.vue
index 638a445..b11bd51 100644
--- 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
index e6ea008..c5206fd 100644
--- 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
index caf4b66..2313fa2 100644
--- 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
index 4254fa6..9dca16d 100644
--- 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
index 1fa05a5..0e278b1 100644
--- 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
index 170c0ce..cb32301 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -40,6 +40,7 @@ const config = {
 			padding: "2rem",
 			screens: {
 				"2xl": "1440px",
+				"3xl": "1600px",
 			},
 		},
 		extend: {