add some featured content blocks, correct event item image size, placeholder color variables

web/src/components/blocks/FeaturedBlock.tsx

@@ -0,0 +1,18 @@
+import styles from "./featuredBlock.module.scss";
+
+export const FeaturedBlock = ({ block }: any) => {
+  return (
+    <div className={styles.featuredBlock}>
+      <div className={styles.text}>
+        <h2>En fremhevet artikkel eller side</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
+          tortor a interdum blandit. Sed ac purus sit amet libero posuere
+          molestie.
+        </p>
+        <a href="#">Mer om denne saken &rarr;</a>
+      </div>
+      <div className={styles.image}></div>
+    </div>
+  );
+};

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

@@ -0,0 +1,56 @@
+.featuredBlock {
+  background: var(--color-background-secondary);
+  margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1);
+  padding: var(--spacing-sitepadding);
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: var(--spacing-gap-column);
+
+  &:nth-of-type(even) {
+    .text {
+      order: 2;
+      align-items: flex-start;
+
+      p {
+        text-align: left;
+      }
+    }
+
+    .image {
+      order: 1;
+    }
+  }
+
+  +.featuredBlock {
+    margin-top: calc(var(--spacing-sitepadding)*-2);
+  }
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  gap: var(--spacing-gap-row);
+
+  h2 {
+    font-size: var(--font-size-h2);
+  }
+
+  p {
+    text-align: right;
+  }
+
+  a {
+    font-family: var(--font-serif);
+    font-size: var(--font-size-lead);
+    font-style: italic;
+    text-decoration: none;
+  }
+}
+
+.image {
+  width: 100%;
+  padding-top: 60%;
+  background: var(--color-placeholder);
+}

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

@@ -67,7 +67,7 @@
         font-weight: 500;
         color: var(--color-chateauBlue);
         border-radius: 1em;
-        background: var(--color-neufPink);
+        background: var(--color-placeholder);
         width: 1.5em;
         height: 1.5em;
         text-align: center;

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

@@ -5,13 +5,16 @@
 
 .image {
   width: 100%;
-  height: auto;
+  padding-top: 60%;
-  // padding-top: 60%;
+  background: var(--color-placeholder);
-  background: var(--color-neufPink);
+  position: relative;
 
   img {
+    position: absolute;
+    top: 0;
     width: 100%;
-    height: auto;
+    height: 100%;
+    object-fit: cover;
   }
 }
 
@@ -26,4 +29,4 @@
 
 .details {
   font-family: var(--font-serif);
-}
+}

web/src/components/general/Body.tsx

@@ -1,81 +1,86 @@
+import { FeaturedBlock } from "../blocks/FeaturedBlock";
 import styles from "./body.module.scss";
 
 export const Body = () => {
   return (
-    <div className={styles.body}>
+    <>
-      <h1>Heading 1</h1>
+      <FeaturedBlock />
-      <p>
+      <FeaturedBlock />
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
+      <div className={styles.body}>
-        tortor a interdum blandit. Sed ac purus sit amet libero posuere
+        <h1>Heading 1</h1>
-        molestie. Sed sodales nunc quis sapien malesuada, a faucibus turpis
+        <p>
-        blandit. Suspendisse potenti. Sed auctor enim et{" "}
-        <a href="#">augue dapibus</a>, vitae laoreet lacus vulputate. Nulla sed
-        finibus diam.
-      </p>
-      <h2>Heading 2</h2>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
-        tortor a <strong>interdum blandit</strong>. Sed ac purus sit amet{" "}
-        <em>libero posuere</em>
-        molestie. Sed sodales nunc quis sapien malesuada, a faucibus turpis
-        blandit.{" "}
-        <em>
-          <strong>Suspendisse potenti</strong>
-        </em>
-        . Sed auctor enim et augue dapibus, vitae laoreet lacus vulputate. Nulla
-        sed finibus diam.
-      </p>
-      <p>
-        Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
-        Suspendisse potenti. Sed auctor enim et augue dapibus, vitae laoreet
-        lacus vulputate. Nulla sed finibus diam.
-      </p>
-      <h3>Heading 3</h3>
-      <ul>
-        <li>
-          Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
-          Suspendisse potenti.
-        </li>
-        <li>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
-          tortor.
+          tortor a interdum blandit. Sed ac purus sit amet libero posuere
-        </li>
+          molestie. Sed sodales nunc quis sapien malesuada, a faucibus turpis
-      </ul>
+          blandit. Suspendisse potenti. Sed auctor enim et{" "}
-      <h4>Heading 4</h4>
+          <a href="#">augue dapibus</a>, vitae laoreet lacus vulputate. Nulla
-      <ol>
+          sed finibus diam.
-        <li>
+        </p>
-          Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
+        <h2>Heading 2</h2>
-          Suspendisse potenti.
+        <p>
-        </li>
-        <li>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
-          tortor.
+          tortor a <strong>interdum blandit</strong>. Sed ac purus sit amet{" "}
-        </li>
+          <em>libero posuere</em>
-      </ol>
+          molestie. Sed sodales nunc quis sapien malesuada, a faucibus turpis
-      <h5>Heading 5</h5>
+          blandit.{" "}
-      <p>
+          <em>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
+            <strong>Suspendisse potenti</strong>
-        tortor a interdum blandit.
+          </em>
-      </p>
+          . Sed auctor enim et augue dapibus, vitae laoreet lacus vulputate.
-      <h6>Heading 6</h6>
+          Nulla sed finibus diam.
-      <p>
+        </p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
+        <p>
-        tortor a interdum blandit.
-      </p>
-      <figure>
-        <img src="https://studentersamfundet.no/static/b5503a1525a722cc1060b8652bf587e4/a41d1/53121578648_8b39551a09_o-1.jpg" />
-        <figcaption>
           Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
-          Suspendisse potenti.
+          Suspendisse potenti. Sed auctor enim et augue dapibus, vitae laoreet
-        </figcaption>
+          lacus vulputate. Nulla sed finibus diam.
-      </figure>
+        </p>
-      <figure>
+        <h3>Heading 3</h3>
-        <img src="https://byantikvaren.files.wordpress.com/2017/05/chateau-neuf.jpg?w=584" />
+        <ul>
-        <figcaption>
+          <li>
-          Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
+            Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
-          Suspendisse potenti.
+            Suspendisse potenti.
-        </figcaption>
+          </li>
-      </figure>
+          <li>
-    </div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
+            tortor.
+          </li>
+        </ul>
+        <h4>Heading 4</h4>
+        <ol>
+          <li>
+            Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
+            Suspendisse potenti.
+          </li>
+          <li>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
+            tortor.
+          </li>
+        </ol>
+        <h5>Heading 5</h5>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
+          tortor a interdum blandit.
+        </p>
+        <h6>Heading 6</h6>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
+          tortor a interdum blandit.
+        </p>
+        <figure>
+          <img src="https://studentersamfundet.no/static/b5503a1525a722cc1060b8652bf587e4/a41d1/53121578648_8b39551a09_o-1.jpg" />
+          <figcaption>
+            Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
+            Suspendisse potenti.
+          </figcaption>
+        </figure>
+        <figure>
+          <img src="https://byantikvaren.files.wordpress.com/2017/05/chateau-neuf.jpg?w=584" />
+          <figcaption>
+            Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
+            Suspendisse potenti.
+          </figcaption>
+        </figure>
+      </div>
+    </>
   );
 };

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

@@ -67,7 +67,7 @@
         font-weight: 500;
         color: var(--color-chateauBlue);
         border-radius: 1em;
-        background: var(--color-neufPink);
+        background: var(--color-placeholder);
         width: 1.5em;
         height: 1.5em;
         text-align: center;

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

@@ -3,7 +3,7 @@
   justify-content: space-between;
   align-items: flex-end;
   padding: var(--spacing-sitepadding);
-  background: #ccc;
+  background: var(--color-background-secondary);
 }
 
 .contactList {

web/src/components/people/personItem.module.scss

@@ -10,7 +10,7 @@
   flex: none;
   width: 7rem;
   height: 7rem;
-  background: var(--color-neufPink);
+  background: var(--color-placeholder);
   border-radius: 100%;
 }
 

web/src/css/variables.scss

@@ -6,6 +6,7 @@
   --font-size-caption: .8rem;
   --font-size-body: 1rem;
   --font-size-lead: 1.4rem;
+  --font-size-h2: 1.8rem;
 
 
   // colors
@@ -20,10 +21,15 @@
   --color-white: #fff;
   --color-black: rgb(22, 21, 22);
 
+  // additional colors adjusted for web
+  --color-betongGray-darkened: rgb(220, 216, 204);
+
   // colors in use
   --color-text: var(--color-chateauBlue);
   --color-background: var(--color-betongGray);
+  --color-background-secondary: var(--color-betongGray-darkened);
   --color-cta: var(--color-goldenOrange);
+  --color-placeholder: var(--color-neufPink);
 
   // spacing
   --spacing-sitepadding: 2rem;