add component for associationheader, misc association design adjustments

web/src/components/associations/AssociationHeader.tsx

@@ -0,0 +1,36 @@
+import { AssociationFragment } from "@/gql/graphql";
+import { Image } from "@/components/general/Image";
+import styles from './associationHeader.module.scss';
+import { Breadcrumb } from "../general/Breadcrumb";
+import Icon from "../general/Icon";
+
+export const AssociationHeader = ({
+  association,
+}: {
+  association: AssociationFragment;
+}) => {
+  return (
+    <section className={`${styles.associationHeader} ${association.logo && styles.hasLogo}`}>
+      <div>
+          <Breadcrumb link="/foreninger" text={association.associationType ? association.associationType : "Foreninger"} />
+          <h1>{association.title}</h1>
+          {association.websiteUrl && (
+            <a className="button" href={association.websiteUrl} target="_blank">
+              <span>Besøk nettside</span>
+              <Icon type="externalLink" />
+            </a>
+          )}
+        </div>
+        {association.logo && (
+          <Image
+            src={association.logo.url}
+            alt={`Logoen til ${association.title}`}
+            width={association.logo.width}
+            height={association.logo.height}
+            sizes="100vw"
+            className={styles.logo}
+          />
+        )}
+    </section>
+  );
+};

web/src/components/associations/AssociationItem.tsx

@@ -10,8 +10,8 @@ export const AssociationItem = ({
 }) => {
   return (
     <li className={`${styles.associationItem} linkItem`}>
-      <div className={styles.image}>
-        {association.logo && (
+      {association.logo && (
+        <div className={styles.image}>
           <Image
             src={association.logo.url}
             alt={`Logoen til ${association.title}`}
@@ -19,8 +19,8 @@ export const AssociationItem = ({
             height={0}
             sizes="20vw"
           />
-        )}
-      </div>
+        </div>
+      )}
       <div className={styles.text}>
         <h1 className={styles.title}>{association.title}</h1>
         {association.excerpt && (

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

@@ -0,0 +1,27 @@
+.associationHeader {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  column-gap: var(--spacing-gap-column);
+  row-gap: var(--spacing-gap-row);
+  max-width: var(--size-width-p);
+  margin: 0 auto var(--spacing-section-bottom);
+
+  &.hasLogo {
+    max-width: var(--size-width-lead);
+  }
+
+  h1 {
+    font-size: var(--font-size-h1);
+    margin-bottom: var(--spacing-m);
+  }
+}
+
+@media (max-width: 600px) {
+  .associationHeader {
+    grid-template-columns: 1fr;
+
+    img {
+      max-width: 16rem;
+    }
+  }
+}