messing around with spacing and page headers

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>
   );

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}

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 }} />

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 {

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 {

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);

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