news article template, association cleanup, footer email links to serif

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

@@ -50,8 +50,11 @@ export default async function Page({ params }: { params: { slug: string } }) {
 
   return (
     <main className="site-main" id="main">
-      <section className="page-header">
+      <section className="news-header">
-        <h1>{news.title}</h1>
+        <p className="suphead news-details">
+          Nyhet &mdash; {formatDate(news.firstPublishedAt, "d. MMMM yyyy")}
+        </p>
+        <h1 className="news-title">{news.title}</h1>
         {featuredImage && (
           <figure key={featuredImage.id}>
             <Image
@@ -61,13 +64,11 @@ export default async function Page({ params }: { params: { slug: string } }) {
               height={featuredImage.height}
               sizes="100vw"
             />
-            <figcaption>Bildetekst her?</figcaption>
             {featuredImage.attribution && (
               <figcaption>{featuredImage.attribution}</figcaption>
             )}
           </figure>
         )}
-        <p>{formatDate(news.firstPublishedAt, 'd. MMMM yyyy')}</p>
       </section>
       <section className="pageContent">
         <Blocks blocks={news.body} />

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

@@ -1,8 +1,10 @@
 import { getClient } from "@/app/client";
 import { Blocks } from "@/components/blocks/Blocks";
+import Icon from "@/components/general/Icon";
 import Image from "@/components/general/Image";
 import { graphql } from "@/gql";
 import { AssociationFragment } from "@/gql/graphql";
+import Link from "next/link";
 import { notFound } from "next/navigation";
 
 export async function generateStaticParams() {
@@ -51,8 +53,17 @@ export default async function Page({ params }: { params: { slug: string } }) {
 
   return (
     <main className="site-main" id="main">
+      <span className="suphead breadcrumb">
+        <Link href="/foreninger">{association.associationType}</Link>
+      </span>
       <section className="page-header">
         <h1>{association.title}</h1>
+        {association.websiteUrl && (
+          <a className="button" href={association.websiteUrl} target="_blank">
+            <span>Besøk nettside</span>
+            <Icon type="externalLink" />
+          </a>
+        )}
         {association.logo && (
           <Image
             src={association.logo.url}
@@ -65,20 +76,6 @@ export default async function Page({ params }: { params: { slug: string } }) {
       </section>
       <section className="pageContent">
         <Blocks blocks={association.body} />
-        <table>
-          <tbody>
-            <tr>
-              <th>Type</th>
-              <td>{association.associationType}</td>
-            </tr>
-            {association.websiteUrl && (
-              <tr>
-                <th>Nettside</th>
-                <td>{association.websiteUrl}</td>
-              </tr>
-            )}
-          </tbody>
-        </table>
       </section>
     </main>
   );

web/src/components/associations/associationItem.module.scss

@@ -2,12 +2,10 @@
   position: relative;
   list-style: none;
   display: grid;
-  grid-template-columns: 1fr 2fr;
+  grid-template-columns: 7rem 1fr;
   align-items: flex-start;
   column-gap: var(--spacing-gap-column);
   row-gap: var(--spacing-gap-row);
-  background: var(--color-white);
-  color: var(--color-black);
   padding: var(--spacing-s);
 }
 

web/src/components/associations/associationList.module.scss

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

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

@@ -6,6 +6,28 @@
   grid-template-columns: repeat(2, 1fr);
   column-gap: var(--spacing-gap-column);
 
+  &[data-background-color="deepBrick"] {
+    background-color: var(--color-deepBrick);
+  }
+
+  &[data-background-color="neufPink"] {
+    background-color: var(--color-neufPink);
+  }
+
+  &[data-background-color="goldenOrange"] {
+    background-color: var(--color-goldenOrange);
+    color: var(--color-deepBrick);
+  }
+
+  &[data-background-color="goldenBeige"] {
+    background-color: var(--color-goldenBeige);
+  }
+
+  &[data-background-color="chateauBlue"] {
+    background-color: var(--color-chateauBlue);
+    color: var(--color-betongGray);
+  }
+
   &:nth-of-type(even) {
     .text {
       order: 2;

web/src/components/events/eventFilter.module.scss

@@ -2,15 +2,16 @@
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows .5s ease;
-  margin: var(--spacing-sitepadding-block) calc(var(--spacing-sitepadding-inline)*-1) 0;
+  margin: 0 calc(var(--spacing-sitepadding-inline)*-1) 0;
+  transition: margin .5s ease;
 
   .filterContent {
     background-color: var(--color-background);
-    padding: var(--spacing-s) var(--spacing-sitepadding-inline);
+    padding: 0 var(--spacing-sitepadding-inline);
     min-height: 0;
     visibility: hidden;
     opacity: 0;
-    transition: visibility .5s, opacity .5s ease, background-color .5s ease;
+    transition: visibility .5s ease, padding .5s ease, opacity .5s ease, background-color .5s ease;
   }
 
   .filterItem {
@@ -44,8 +45,10 @@
 
   &[data-show=true] {
     grid-template-rows: 1fr;
+    margin: var(--spacing-sitepadding-block) calc(var(--spacing-sitepadding-inline)*-1) 0;
 
     .filterContent {
+      padding: var(--spacing-s) var(--spacing-sitepadding-inline);
       background-color: var(--color-background-secondary);
       visibility: visible;
       opacity: 1;

web/src/components/layout/Footer.tsx

@@ -49,12 +49,16 @@ export const Footer = () => {
           <div>
             Generelle henvendelser
             <br />
-            <a href="/#">post@neuf.no</a>
+            <a href="/#" target="_blank" className={styles.emailLink}>
+              post@neuf.no
+            </a>
           </div>
           <div>
             Billetter
             <br />
-            <a href="/#">billetter@neuf.no</a>
+            <a href="/#" target="_blank" className={styles.emailLink}>
+              billetter@neuf.no
+            </a>
           </div>
           <div>
             <Link href="/kontakt">Øvrig kontaktinfo</Link>

web/src/components/layout/footer.module.scss

@@ -6,10 +6,6 @@
   z-index: 700;
   font-size: var(--font-size-caption);
   overflow: hidden;
-
-  a {
-    font-size: var(--font-size-caption);
-  }
 }
 
 .contactList {
@@ -91,11 +87,18 @@
   }
 }
 
+.emailLink {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-lead);
+}
+
 .pig {
   position: absolute;
   bottom: -2rem;
   right: -2rem;
   z-index: 800;
+
+  display: none;
 }
 
 .toTop {

web/src/components/layout/header.module.scss

@@ -196,5 +196,5 @@
 .observer {
   position: absolute;
   top: calc(100vh + 8rem);
-  height: calc(100% - 100vh - 8rem);
+  height: 100%;
 }

web/src/css/base.scss

@@ -125,6 +125,7 @@ h6 {
 
 img {
   max-width: 100%;
+  height: auto;
 }
 
 blockquote {

web/src/css/main.scss

@@ -3,4 +3,6 @@
 @import 'animations.scss';
 @import 'base.scss';
 
-@import 'button.scss';
+@import 'button.scss';
+
+@import 'news.scss';

web/src/css/news.scss

@@ -0,0 +1,21 @@
+.news-header {
+  display: block;
+  text-align: center;
+}
+
+.news-title {
+  font-size: var(--font-size-h1);
+  margin: 1rem auto 2rem;
+}
+
+.news-details {
+  display: block;
+  font-weight: 400;
+  font-size: var(--font-size-xs);
+  margin-bottom: var(--spacing-s);
+  margin: 0 auto;
+
+  a {
+    text-decoration: none;
+  }
+}