feat(ui): ♿ limit page global content width

components/Footer.css

@@ -1,11 +1,16 @@
 footer {
 	height: fit-content;
+	background-color: var(--_translucent);
+}
+
+footer div {
+	max-width: var(--_wide-screen);
 	width: 100%;
 	padding: var(--_gap);
 	display: flex;
 	gap: var(--_gap);
 	justify-content: space-around;
-	background-color: var(--_translucent);
+	margin: auto;
 }
 
 .footer__badges {

components/Footer.tsx

@@ -1,6 +1,7 @@
 export function Footer() {
 	return (
 		<footer>
+			<div>
 				<section>
 					<h3>Contact</h3>
 					<p>
@@ -82,6 +83,7 @@ export function Footer() {
 						</a>
 					</div>
 				</section>
+			</div>
 		</footer>
 	)
 }

components/Header.css

@@ -1,14 +1,20 @@
 header {
 	width: 100%;
-	padding: var(--_gap);
+	padding: 0;
-	display: flex;
-	gap: var(--_gap);
 	margin: 0;
 	background-color: var(--_translucent);
 	color: var(--_font-color);
 	user-select: none;
 }
 
+header div {
+	max-width: var(--_wide-screen);
+	margin: auto;
+	padding: var(--_gap);
+	display: flex;
+	gap: var(--_gap);
+}
+
 header span {
 	text-wrap: nowrap;
 	padding: var(--_gap);

components/Header.tsx

@@ -3,6 +3,7 @@ import { asset } from '$fresh/runtime.ts'
 export function Header() {
 	return (
 		<header>
+			<div>
 				<span>
 					<a href='/'>
 						Coh<img
@@ -34,6 +35,7 @@ export function Header() {
 					</li>
 				</nav>
 				<input type='search' name='' id='' placeholder='Rechercher' />
+			</div>
 		</header>
 	)
 }

src/stylesheets/base.css

@@ -12,6 +12,7 @@
 	/* size */
 	--_gap: var(--size-3);
 	--_gap-half: calc(var(--_gap) / 2);
+	--_wide-screen: 1400px;
 
 	/* color */
 	--_accent-color: var(--lime-6);