add news article list components

web/src/components/news/NewsItem.tsx

@@ -0,0 +1,23 @@
+import styles from "./newsItem.module.scss";
+import Link from "next/link";
+import Image from "../general/Image";
+
+export const NewsItem = () => {
+  return (
+    <li className={`${styles.newsItem} linkItem`}>
+      <div className={styles.image}></div>
+      <div className={styles.text}>
+        <p className={styles.date}>Publiseringsdato</p>
+        <h2 className={styles.title}>Nyhetsartikkel</h2>
+        <p className={styles.lead}>
+          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>
+      </div>
+      {/*<Link href={`/lokaler/${venue.slug}`} className="hiddenLink">
+        Mer om lokalet {venue.title}
+  </Link>*/}
+    </li>
+  );
+};

web/src/components/news/NewsList.tsx

@@ -0,0 +1,18 @@
+import { NewsItem } from "./NewsItem";
+import styles from "./newsList.module.scss";
+
+export const NewsList = () => {
+  return (
+    <ul className={styles.newsList}>
+      <NewsItem />
+      <NewsItem />
+      <NewsItem />
+      <NewsItem />
+      <NewsItem />
+      <NewsItem />
+      <NewsItem />
+      <NewsItem />
+      <NewsItem />
+    </ul>
+  );
+};

web/src/components/news/newsItem.module.scss

@@ -0,0 +1,36 @@
+.newsItem {
+  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 2rem;
+}
+
+.date {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-caption);
+}
+
+.title {
+  margin: .4rem 0 .6rem;
+}
+
+.lead {
+  font-size: var(--font-size-caption);
+}

web/src/components/news/newsList.module.scss

@@ -0,0 +1,34 @@
+.newsList {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  column-gap: var(--spacing-gap-column);
+  row-gap: var(--spacing-gap-row);
+  padding-bottom: var(--spacing-section-bottom);
+
+  li {
+    grid-column: span 3;
+
+    h2 {
+      font-size: 1.4rem;
+    }
+
+    &:nth-child(1),
+    &:nth-child(2) {
+      grid-column: span 6;
+
+      h2 {
+        font-size: 1.8rem;
+      }
+    }
+
+    &:nth-child(3),
+    &:nth-child(4),
+    &:nth-child(5) {
+      grid-column: span 4;
+
+      h2 {
+        font-size: 1.6rem;
+      }
+    }
+  }
+}