custom logo styling on index page + adjustments to venue styling and leads

web/src/app/lokaler/page.tsx

@@ -50,13 +50,13 @@ export default async function Page() {
   const { data, error } = await getClient().query(allVenuesQuery, {});
   const venues = (data?.venues ?? []) as VenueFragment[];
 
-    console.log('data', data)
+  console.log("data", data);
 
   return (
     <main className="site-main" id="main">
       <section className="page-header">
         <h1>Lokaler</h1>
-        <p>
+        <p className="lead">
           Her kan vi presentere lokalene på Chateau Neuf, og eventuelt henvise
           videre til undersiden om <Link href="/utleie">utleie</Link>.
         </p>

web/src/components/general/Logo.tsx

@@ -1,8 +1,13 @@
+"use client";
 import styles from "./logo.module.scss";
+import { usePathname } from "next/navigation";
 
 export const Logo = () => {
+  // Check if the current page is the index page
+  const isIndexPage = usePathname() === "/";
+
   return (
-    <div className={styles.logo}>
+    <div className={`${styles.logo} ${isIndexPage && styles.index}`}>
       <svg viewBox="0 0 297 112" fill="none" xmlns="http://www.w3.org/2000/svg">
         <title>Chateau Neuf</title>
         <path

web/src/components/general/logo.module.scss

@@ -1,6 +1,10 @@
 .logo {
   color: currentColor;
-  width: 24rem;
+  width: 16rem;
+
+  &.index {
+    width: 24rem;
+  }
 
   svg {
     width: 100%;

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

@@ -1,3 +1,32 @@
 .venueItem {
-    
+  position: relative;
+  list-style: none;
+}
+
+.image {
+  width: 100%;
+  padding-top: 60%;
+  background: var(--color-placeholder);
+  position: relative;
+
+  img {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.text {
+  padding: .8rem 0;
+}
+
+.title,
+.details {
+  font-size: 1.6rem;
+}
+
+.details {
+  font-family: var(--font-serif);
 }

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

@@ -1,3 +1,7 @@
 .venueList {
-    
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: var(--spacing-gap-column);
+  row-gap: var(--spacing-gap-row);
+  padding-bottom: var(--spacing-section-bottom);
 }

web/src/css/base.scss

@@ -59,6 +59,7 @@ p {
   &.lead {
     font-size: var(--font-size-lead);
     max-width: 36em;
+    margin-bottom: 2.5rem;
   }
 }