padding updates

src/app.css

@@ -27,6 +27,9 @@
 
 /* Design tokens & theme variables (light defaults) */
 :root {
+  --page-max-width: 1460px;
+  --page-padding-inline: clamp(1rem, 2vw, 2rem);
+
   /* spacing scale */
   --spacing-0: 0px;
   --spacing-1: 4px;

src/components/layout/Container.svelte

@@ -11,6 +11,6 @@ projected via the default slot.
   export let className = "";
 </script>
 
-<div class="w-full {center ? 'px-4 md:px-6 lg:px-8' : ''} {maxWidth ? '' : 'max-w-[1200px]'} {center ? 'mx-auto' : ''} {className}">
+<div class="w-full {center ? 'px-[var(--page-padding-inline)]' : ''} {maxWidth ? '' : 'max-w-[var(--page-max-width)]'} {center ? 'mx-auto' : ''} {className}">
   <slot />
 </div>

src/components/layout/Section.svelte

@@ -1,10 +1,12 @@
 <script>
   let { 
     bg = "", 
+    background = "",
     padding = "normal", 
-    fullWidth = true, 
+    fullWidth = false, 
     id = "", 
     className = "",
+    contentClassName = "",
     children
   } = $props();
 
@@ -19,9 +21,10 @@
 
 <section
   {id}
-  class="w-full {paddingClasses[padding]} {bg} {className}"
+  class="relative w-full {bg} {className}"
+  style={background ? `background: ${background};` : undefined}
 >
-  <div class="{fullWidth ? '' : 'max-w-[1200px]'} mx-auto">
+  <div class="w-full {fullWidth ? '' : 'max-w-[var(--page-max-width)]'} mx-auto px-[var(--page-padding-inline)] {paddingClasses[padding]} {contentClassName}">
     {@render children?.()}
   </div>
 </section>

src/layout/Footer.svelte

@@ -31,7 +31,7 @@ import {
             </Container>
         </div>
         <div>
-        <Container>
+        <Container center={false}>
             <h3 class="text-3xl font-light flex justify-center pb-4">Sotsiaalmeedia</h3>
             <div class="flex items-center justify-center gap-4">
                 <a href="https://www.instagram.com/lapikud/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="transition-opacity duration-200">

src/routes/Helpdesk.svelte

@@ -2,7 +2,6 @@
   import {
     Section,
     Grid,
-    Container,
   } from "$components";
   import { onMount } from "svelte";
   import { text } from "$lib/i18n";
@@ -57,8 +56,7 @@
 </div>
 
 <!-- Main Content -->
-<Container>
+<Section>
-  <Section>
     <Grid min="480px" gap="var(--space-5)">
       <!-- What is HELPDESK? -->
       <div class="flex flex-col">
@@ -190,4 +188,3 @@
       </div>
     </Grid>
   </Section>
-</Container>

src/routes/Managment.svelte

@@ -76,7 +76,7 @@
 
 <!-- Past Management Section -->
 <Section padding="large" background="rgba(240, 148, 29, 0.05)">
-  <Container>
+  <Container center={false}>
     <Center>
       <h1 class="text-4xl font-light pb-8 text-center">
         Organisatsiooni juhtinud inimesed läbi aegade

src/routes/NewHome.svelte

@@ -3,22 +3,20 @@ import {Section, Stack, Grid, Center, Image, Svg, Button} from "$components";
 import { navigate } from "$lib/router/router.js";
 </script>
 
-<!-- TODO: grid gap dynamic -->
-
 <!-- Hero Section -->
 <Section className="relative min-h-screen overflow-hidden" padding="none" bg="bg-gray-900" id="hero">
   <div class="relative min-h-screen flex items-center">
-    <div class="absolute inset-0" aria-hidden="true">
+    <div class="absolute inset-0 left-1/2 w-screen -translate-x-1/2" aria-hidden="true">
       <Image
-        src="/assets/BSidesTLN25-KerstinTälli-128.jpg"
+        src="/assets/hero.jpg"
-        alt=""
+        alt="illustrative hero image"
         objectFit="cover"
         className="w-full h-full"
         pictureClass="block w-full h-full"
       />
     </div>
     <div
-      class="pointer-events-none absolute inset-0 hidden md:block [clip-path:polygon(42%_0,100%_0,100%_100%,65%_100%)]"
+      class="pointer-events-none absolute inset-0 left-1/2 hidden w-screen -translate-x-1/2 md:block [clip-path:polygon(42%_0,100%_0,100%_100%,65%_100%)]"
       aria-hidden="true"
     >
       <Svg
@@ -34,8 +32,8 @@ import { navigate } from "$lib/router/router.js";
         className="absolute right-0 bottom-[12%] w-[clamp(130px,14vw,230px)] text-[#E18E38]"
       />
     </div>
-    <div class="pointer-events-none absolute inset-y-0 left-0 w-[70%] bg-linear-to-r from-black/65 via-black/35 to-transparent" aria-hidden="true"></div>
+    <div class="pointer-events-none absolute inset-y-0 left-1/2 w-screen -translate-x-1/2 bg-linear-to-r from-black/65 via-black/35 to-transparent" aria-hidden="true"></div>
-    <div class="relative z-20 flex min-h-screen w-full items-stretch px-6 py-8 md:px-10 md:py-12">
+    <div class="relative z-20 flex min-h-screen w-full items-stretch py-8 md:py-12">
       <div class="flex w-full max-w-[460px] flex-col justify-between">
         <img src="/assets/LapLogo_white_orange.png" alt="MTÜ Lapikud" class="w-full max-w-[220px] md:max-w-[260px] h-auto"/>
         <div class="flex flex-col items-start gap-5">
@@ -57,7 +55,7 @@ import { navigate } from "$lib/router/router.js";
 
 
 <Section className="relative overflow-hidden">
-  <div class="pointer-events-none absolute inset-x-0 top-15 z-0" aria-hidden="true">
+  <div class="pointer-events-none absolute inset-x-0 left-1/2 top-15 z-0 w-screen -translate-x-1/2" aria-hidden="true">
     <Svg
       type="connector"
       className="absolute left-0 w-[clamp(130px,14vw,230px)] text-orange-500"
@@ -68,7 +66,7 @@ import { navigate } from "$lib/router/router.js";
     />
   </div>
 
-  <Grid columns={2} largeColumns={3} mobileColumns={1} className="relative z-10 items-start max-w-6xl mx-auto mt-12 px-4 md:mt-20 md:px-6" gap="gap-12 md:gap-16 lg:gap-24">
+  <Grid columns={2} largeColumns={3} mobileColumns={1} className="relative z-10 items-start mt-12 md:mt-20" gap="gap-12 md:gap-16 lg:gap-24">
     <Center dir="col" className="w-full max-w-sm justify-start mx-auto">
       <div class="w-[min(72vw,240px)] md:w-[min(26vw,280px)] lg:w-[min(23vw,300px)] aspect-square rounded-full overflow-hidden">
         <Image