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%;
-  background: var(--color-neufPink);
+  padding-top: 60%;
+  background: var(--color-placeholder);
+  position: relative;
 
   img {
+    position: absolute;
+    top: 0;
     width: 100%;
-    height: auto;
+    height: 100%;
+    object-fit: cover;
   }
 }
 

web/src/components/general/Body.tsx

@@ -1,7 +1,11 @@
+import { FeaturedBlock } from "../blocks/FeaturedBlock";
 import styles from "./body.module.scss";
 
 export const Body = () => {
   return (
+    <>
+      <FeaturedBlock />
+      <FeaturedBlock />
       <div className={styles.body}>
         <h1>Heading 1</h1>
         <p>
@@ -9,8 +13,8 @@ export const Body = () => {
           tortor a interdum blandit. Sed ac purus sit amet libero posuere
           molestie. Sed sodales nunc quis sapien malesuada, a faucibus turpis
           blandit. Suspendisse potenti. Sed auctor enim et{" "}
-        <a href="#">augue dapibus</a>, vitae laoreet lacus vulputate. Nulla sed
-        finibus diam.
+          <a href="#">augue dapibus</a>, vitae laoreet lacus vulputate. Nulla
+          sed finibus diam.
         </p>
         <h2>Heading 2</h2>
         <p>
@@ -22,8 +26,8 @@ export const Body = () => {
           <em>
             <strong>Suspendisse potenti</strong>
           </em>
-        . Sed auctor enim et augue dapibus, vitae laoreet lacus vulputate. Nulla
-        sed finibus diam.
+          . 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.
@@ -77,5 +81,6 @@ export const Body = () => {
           </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;