fix padding

Author: oxkitsune

src/app/contact/page.tsx

@@ -7,10 +7,12 @@ export const metadata: Metadata = {
 
 export default function ContactPage() {
   return (
-    <section className="page">
-      <div className="container">
-        <h1>Contact</h1>
-        <p className="lead">
+    <section className="pb-20 pt-10 sm:pb-32 sm:pt-12">
+      <div className="mx-auto w-full max-w-[1120px] px-8 sm:px-10 lg:px-12 xl:px-4">
+        <h1 className="mb-3 mt-0 text-[clamp(1.8rem,2.5vw,2.4rem)]">
+          Contact
+        </h1>
+        <p className="mb-8 mt-0 text-(--ink-muted)">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a sem
           sit amet nulla placerat tincidunt in in nunc.
         </p>

src/app/globals.scss

@@ -112,23 +112,17 @@ body {
   display: flex;
   gap: 1rem;
   align-items: center;
-  justify-content: space-between;
-  padding: 1.25rem 0;
+  justify-content: flex-start;
+  text-align: left;
+  padding-block: 1.25rem;
   color: var(--ink-muted);
 }
 
-.container {
-  width: 100%;
-  max-width: 1120px;
-  margin: 0 auto;
-  padding: 0 1rem;
-}
-
 .nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.9rem 0;
+  padding-block: 1.1rem;
 }
 
 .nav-list-container {
@@ -389,17 +383,6 @@ body {
 }
 
 /* Utility */
-.page {
-  padding: 3rem 0 8rem;
-}
-.page h1 {
-  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
-  margin: 0 0 0.75rem;
-}
-.lead {
-  color: var(--ink-muted);
-  margin: 0 0 2rem;
-}
 .grid {
   display: grid;
   gap: 1rem;
@@ -546,18 +529,6 @@ body {
   box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.15);
 }
 
-/* Simple full-center layout */
-.center {
-  min-height: 100dvh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-  position: relative;
-  overflow: hidden;
-}
-
 .hero-container {
   display: flex;
   flex-direction: column;
@@ -567,14 +538,6 @@ body {
   animation: fadeInUp 1s ease-out;
 }
 
-/* Primary hero call-to-actions */
-.cta-row {
-  display: flex;
-  gap: 0.75rem;
-  margin-top: 0.6rem;
-  justify-content: center;
-}
-
 .headline {
   margin: 0;
   font-size: clamp(2.25rem, 6vw, 4rem);
@@ -731,10 +694,6 @@ body {
   letter-spacing: 0.2px;
 }
 
-.max-700 {
-  max-width: 700px;
-}
-
 .btn.hero {
   color: #0b1020;
   background: #ffffff;
@@ -751,12 +710,6 @@ body {
 .btn-icon {
   margin-right: 0.25rem;
 }
-.hero-note {
-  margin-top: 0.6rem;
-  color: var(--ink-muted);
-  font-size: 0.9rem;
-}
-
 /* --- Wind Particles --- */
 .wind-particles {
   position: absolute;
@@ -922,7 +875,7 @@ body {
   .nav {
     position: relative;
     gap: 0.75rem;
-    padding: 0.75rem 0;
+    padding-block: 1rem;
   }
 
   .nav-toggle {
@@ -931,12 +884,12 @@ body {
 
   .nav-list-container {
     position: absolute;
-    inset: calc(100% + 0.75rem) 0 auto 0;
+    inset: calc(100% + 0.75rem) 2rem auto 2rem;
     display: none;
     flex-direction: column;
     align-items: stretch;
     gap: 0.75rem;
-    padding: 1.1rem;
+    padding: 1.25rem;
     background: rgba(12, 22, 52, 0.86);
     backdrop-filter: blur(16px) saturate(160%);
     -webkit-backdrop-filter: blur(16px) saturate(160%);
@@ -990,20 +943,12 @@ body {
     justify-content: center;
   }
 
-  .cta-row {
-    flex-wrap: wrap;
-  }
-
   .footer-inner {
     gap: 0.75rem;
   }
 }
 
 @media (max-width: 640px) {
-  .container {
-    padding: 0 1.25rem;
-  }
-
   .logo {
     height: 3.2em;
   }
@@ -1023,15 +968,6 @@ body {
     padding-right: 0;
   }
 
-  .cta-row {
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .page {
-    padding: 2.5rem 0 5rem;
-  }
-
   .grid {
     grid-template-columns: 1fr;
   }

src/app/layout.tsx

@@ -35,7 +35,7 @@ export default function RootLayout({
         <main className="site-main">{children}</main>
 
         <footer className="site-footer">
-          <div className="container footer-inner">
+          <div className="footer-inner w-full px-8 text-left sm:px-10 lg:px-12">
             <p>Made with ❤️ by Team whIRLwind — University of Amsterdam</p>
           </div>
         </footer>

src/app/page.tsx

@@ -2,7 +2,10 @@ import Image from "next/image";
 
 export default function Home() {
   return (
-    <section className="center hero-like" aria-label="Hero">
+    <section
+      className="hero-like relative flex min-h-[100dvh] flex-col items-center justify-center overflow-hidden px-8 sm:px-10 lg:px-12 xl:px-4"
+      aria-label="Hero"
+    >
       <div className="hero-backdrop" aria-hidden />
 
       <div className="wind-particles" aria-hidden>
@@ -29,16 +32,18 @@ export default function Home() {
         <p className="team">
           Your local artificially intelligent robotics team
         </p>
-        <p className="tagline max-700">
+        <p className="tagline max-w-[700px]">
           University of Amsterdam · Intelligent Robotics Lab.
         </p>
 
-        <div className="cta-row">
+        <div className="mt-[0.6rem] flex justify-center gap-3">
           <a className="btn hero" href="/publications">
             Explore Publications
           </a>
         </div>
-        <div className="hero-note">more coming soon</div>
+        <div className="mt-[0.6rem] text-[0.9rem] text-(--ink-muted)">
+          more coming soon
+        </div>
       </div>
     </section>
   );

src/app/publications/page.tsx

@@ -26,10 +26,12 @@ function formatPublicationType(type?: string): string {
 
 export default function PublicationsPage() {
   return (
-    <section className="page">
-      <div className="container">
-        <h1>Publications</h1>
-        <p className="lead">
+    <section className="pb-20 pt-10 sm:pb-32 sm:pt-12">
+      <div className="mx-auto w-full max-w-[1120px] px-8 sm:px-10 lg:px-12 xl:px-4">
+        <h1 className="mb-3 mt-0 text-[clamp(1.8rem,2.5vw,2.4rem)]">
+          Publications
+        </h1>
+        <p className="mb-8 mt-0 text-(--ink-muted)">
           Research papers, technical reports, and theses from Team whIRLwind
           members (2021-2025).
         </p>

src/app/socials/page.tsx

@@ -16,10 +16,12 @@ const socials = [
 
 export default function SocialsPage() {
   return (
-    <section className="page">
-      <div className="container">
-        <h1>Socials</h1>
-        <p className="lead">
+    <section className="pb-20 pt-10 sm:pb-32 sm:pt-12">
+      <div className="mx-auto w-full max-w-[1120px] px-8 sm:px-10 lg:px-12 xl:px-4">
+        <h1 className="mb-3 mt-0 text-[clamp(1.8rem,2.5vw,2.4rem)]">
+          Socials
+        </h1>
+        <p className="mb-8 mt-0 text-(--ink-muted)">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
           blandit tristique risus, sed cursus lorem hendrerit at.
         </p>

src/app/sponsors/page.tsx

@@ -57,10 +57,12 @@ const sponsorTiers: SponsorTier[] = [
 
 export default function SponsorsPage() {
   return (
-    <section className="page">
-      <div className="container">
-        <h1>Sponsors</h1>
-        <p className="lead">
+    <section className="pb-20 pt-10 sm:pb-32 sm:pt-12">
+      <div className="mx-auto w-full max-w-[1120px] px-8 sm:px-10 lg:px-12 xl:px-4">
+        <h1 className="mb-3 mt-0 text-[clamp(1.8rem,2.5vw,2.4rem)]">
+          Sponsors
+        </h1>
+        <p className="mb-8 mt-0 text-(--ink-muted)">
           These partners keep our robots rolling and make it possible to share
           the work beyond the lab.
         </p>

src/components/SiteHeader.tsx

@@ -40,7 +40,7 @@ export default function SiteHeader() {
 
   return (
     <header className={`site-header ${open ? "site-header--open" : ""}`}>
-      <div className="container nav">
+      <div className="nav w-full px-8 py-4 sm:px-10 lg:px-12 xl:mx-auto xl:max-w-[1120px] xl:px-4">
         <Link
           href="/"
           className="brand"