From fddc0296e6e0949deb34b7e31a38ce444267a428 Mon Sep 17 00:00:00 2001
From: elise <hei@elisejakob.no>
Date: Tue, 6 Aug 2024 22:47:53 +0200
Subject: [PATCH] messing around with spacing and page headers

---
 web/src/app/aktuelt/page.tsx                      | 2 +-
 web/src/app/arrangementer/page.tsx                | 2 +-
 web/src/components/general/PageHeader.tsx         | 4 +++-
 web/src/components/general/pageHeader.module.scss | 8 +++++++-
 web/src/components/venues/neufMap.module.scss     | 2 +-
 web/src/css/base.scss                             | 6 +-----
 web/src/css/variables.scss                        | 7 ++++---
 7 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/web/src/app/aktuelt/page.tsx b/web/src/app/aktuelt/page.tsx
index 692f0a9..b7ad8dd 100644
--- a/web/src/app/aktuelt/page.tsx
+++ b/web/src/app/aktuelt/page.tsx
@@ -12,7 +12,7 @@ export default async function Page() {
 
   return (
     <main className="site-main" id="main">
-      <PageHeader heading={index.title} lead={index.lead} />
+      <PageHeader heading={index.title} lead={index.lead} align="left" />
       <NewsList news={news} />
     </main>
   );
diff --git a/web/src/app/arrangementer/page.tsx b/web/src/app/arrangementer/page.tsx
index 24696f7..7ec8127 100644
--- a/web/src/app/arrangementer/page.tsx
+++ b/web/src/app/arrangementer/page.tsx
@@ -19,7 +19,7 @@ export default async function Page() {
 
   return (
     <main className="site-main" id="main">
-      <PageHeader heading="Dette skjer på Chateau Neuf" />
+      <PageHeader heading="Dette skjer på Chateau Neuf" align="left" />
       <Suspense>
         <EventContainer
           events={events}
diff --git a/web/src/components/general/PageHeader.tsx b/web/src/components/general/PageHeader.tsx
index c5b8669..9d60539 100644
--- a/web/src/components/general/PageHeader.tsx
+++ b/web/src/components/general/PageHeader.tsx
@@ -3,12 +3,14 @@ import styles from "./pageHeader.module.scss";
 export const PageHeader = ({
   heading,
   lead,
+  align
 }: {
   heading: string;
   lead?: string;
+  align?: "center" | "left"
 }) => {
   return (
-    <div className={styles.pageHeader}>
+    <div className={`${styles.pageHeader} ${align && styles[align]}`}>
       <h1 className={styles.title}>{heading}</h1>
       {lead && (
         <div className="lead" dangerouslySetInnerHTML={{ __html: lead }} />
diff --git a/web/src/components/general/pageHeader.module.scss b/web/src/components/general/pageHeader.module.scss
index 7ab67ee..2de2cd6 100644
--- a/web/src/components/general/pageHeader.module.scss
+++ b/web/src/components/general/pageHeader.module.scss
@@ -1,6 +1,12 @@
 .pageHeader {
   position: relative;
-  padding: var(--spacing-s) 0 var(--spacing-sitepadding-block);
+  width: var(--size-width-lead);
+  max-width: 100%;
+  margin: 0 auto var(--spacing-l);
+
+  &.left {
+    margin-left: 0;
+  }
 }
 
 .title {
diff --git a/web/src/components/venues/neufMap.module.scss b/web/src/components/venues/neufMap.module.scss
index 24f627a..c8ddec0 100644
--- a/web/src/components/venues/neufMap.module.scss
+++ b/web/src/components/venues/neufMap.module.scss
@@ -4,7 +4,7 @@
   gap: var(--spacing-gap-column);
   width: 100%;
   max-width: 1200px;
-  margin: var(--spacing-xl) auto;
+  margin: var(--spacing-xxl) auto;
 }
 
 .floorHeading {
diff --git a/web/src/css/base.scss b/web/src/css/base.scss
index a64ca7b..eb34b96 100644
--- a/web/src/css/base.scss
+++ b/web/src/css/base.scss
@@ -59,7 +59,6 @@ p {
   &.lead {
     font-size: var(--font-size-lead);
     max-width: 34em;
-    margin-bottom: var(--spacing-m);
   }
 }
 
@@ -67,7 +66,6 @@ p {
 .lead p {
   font-size: var(--font-size-lead);
   max-width: 34em;
-  margin-bottom: var(--spacing-m);
 }
 
 h1,
@@ -211,9 +209,7 @@ select {
 }
 
 .anchorLinks {
-  /*position: sticky;
-  top: 0;*/
-
+  margin-top: var(--spacing-xl);
   >span {
     display: block;
     margin-bottom: var(--spacing-xs);
diff --git a/web/src/css/variables.scss b/web/src/css/variables.scss
index a145730..cd34434 100644
--- a/web/src/css/variables.scss
+++ b/web/src/css/variables.scss
@@ -55,7 +55,8 @@
   --spacing-s: 1rem;
   --spacing-m: 2rem;
   --spacing-l: 3rem;
-  --spacing-xl: 6rem;
+  --spacing-xl: 4rem;
+  --spacing-xxl: 6rem;
   --spacing-section-bottom: var(--spacing-l);
 
   // sizes
@@ -75,7 +76,7 @@
 
 @media (min-width: 1400px) {
   :root {
-    --spacing-sitepadding-block: 2.5rem;
+    --spacing-sitepadding-block: 2.4rem;
     --spacing-sitepadding-inline: 6rem;
   }
 }
@@ -107,7 +108,7 @@
     --spacing-s: 1rem;
     --spacing-m: 1.4rem;
     --spacing-l: 1.8rem;
-    --spacing-xl: 6rem;
+    --spacing-xl: 3rem;
     --spacing-section-bottom: var(--spacing-l);
 
     // sizes