Change max width

This commit is contained in:
2024-02-27 22:38:20 +01:00
parent 6860c328fa
commit 0110a107ad
7 changed files with 11 additions and 7 deletions

View File

@@ -11,7 +11,7 @@ export default defineAppConfig({
container: {
base: 'mx-auto',
padding: 'px-4 sm:px-6 lg:px-8',
constrained: 'max-w-7xl',
constrained: 'max-w-9xl',
},
dropdown: {
container: 'z-50',

View File

@@ -3,8 +3,12 @@
@tailwind utilities;
@layer components {
.max-w-9xl {
max-width: 96rem;
}
.w-container {
@apply mx-auto max-w-7xl px-4 lg:px-32 md:px-16 sm:px-8;
@apply mx-auto max-w-9xl px-4 lg:px-32 md:px-16 sm:px-8;
}
.text-subtitle {

View File

@@ -4,7 +4,7 @@ const year = computed(() => new Date().getFullYear())
<template>
<footer class="w-full flex justify-center">
<div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-7xl py-4 flex justify-between bg-white dark:bg-zinc-900 border-t border-zinc-100 dark:border-zinc-300/10">
<div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-9xl py-4 flex justify-between bg-white dark:bg-zinc-900 border-t border-zinc-100 dark:border-zinc-300/10">
<div class="w-full duration-300 text-center flex flex-col md:flex-row md:justify-between items-center gap-y-2">
<p class="text-subtitle text-sm">
© {{ year }} ArtDanjProduction

View File

@@ -1,6 +1,6 @@
<template>
<header class="z-30 sticky top-0 left-0 flex justify-center w-full">
<div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-7xl py-4 grid grid-cols-2 lg:grid-cols-3 bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
<div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-9xl py-4 grid grid-cols-2 lg:grid-cols-3 bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
<Logo />
<div class="hidden grow lg:flex justify-center">
<NavBar />

View File

@@ -13,7 +13,7 @@ const getColor = computed(() => appConfig.ui.primary)
<section>
<NuxtLoadingIndicator :color="getColor" />
<section class="fixed inset-0 flex justify-center sm:px-8">
<div class="flex w-full max-w-7xl">
<div class="flex w-full max-w-9xl">
<div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
</div>
</section>

View File

@@ -13,7 +13,7 @@ router.afterEach((route) => {
<Background />
<NuxtLoadingIndicator :color="$colorMode.value === 'light' ? 'black' : 'white'" />
<section class="fixed inset-0 flex justify-center sm:px-8">
<div class="flex w-full max-w-7xl">
<div class="flex w-full max-w-9xl">
<div class="w-full z-20 bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
</div>
</section>

View File

@@ -7,7 +7,7 @@ const getColor = computed(() => appConfig.ui.primary)
<div>
<NuxtLoadingIndicator :color="getColor" />
<section class="fixed inset-0 flex justify-center sm:px-8">
<div class="flex w-full max-w-7xl">
<div class="flex w-full max-w-9xl">
<div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
</div>
</section>