beautify venue pages

web/src/app/lokaler/[slug]/page.tsx

@@ -103,17 +103,10 @@ export default async function Page({ params }: { params: { slug: string } }) {
   return (
     <main className="site-main" id="main">
       <ImageSliderBlock block={placeholderBlock} hero />
-      <Breadcrumb link="/utleie" text="Lokale" />
-      <h1 className="page-title">{venue.title}</h1>
-      {/*featuredImage && (
-          <Image
-            src={featuredImage.url}
-            alt={featuredImage.alt}
-            width={featuredImage.width}
-            height={featuredImage.height}
-            sizes="100vw"
-          />
-        )*/}
+      <div className="page-header-small">
+        <Breadcrumb link="/utleie" text="Lokale" />
+        <h1 className="page-title">{venue.title}</h1>
+      </div>
       <Blocks blocks={venue.body} />
       <VenueInfo venue={venue} />
       <NeufMap venueSlug={venue.slug} />

web/src/components/blocks/imageSliderBlock.module.scss

@@ -3,7 +3,7 @@
   padding-top: 56%;
   background: var(--color-black);
   color: var(--color-goldenBeige);
-  margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepadding-inline)*-1);
+  margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepadding-inline)*-1) var(--spacing-sitepadding-block);
 
   figure {
     width: 100%;

web/src/components/venues/neufMap.module.scss

@@ -10,4 +10,11 @@
 .floorHeading {
   color: var(--color-deepBrick);
   font-weight: 600;
+}
+
+@media (max-width: 800px) {
+  .neufMap {
+    max-width: 600px;
+    grid-template-columns: 1fr;
+  }
 }

web/src/components/venues/venueInfo.module.scss

@@ -9,7 +9,7 @@
   }
 
   tr {
-    border-bottom: var(--border);
+    border-top: var(--border);
   }
 
   th {

web/src/css/base.scss

@@ -326,4 +326,9 @@ select {
     right: 0;
     bottom: -50%;
   }
+}
+
+.page-header-small {
+  max-width: var(--size-width-p);
+  margin: 0 auto 1rem;
 }