From f77a4ee94388472fffcccb037770754bd7b71dfa Mon Sep 17 00:00:00 2001
From: elise <hei@elisejakob.no>
Date: Wed, 10 Jul 2024 17:10:51 +0200
Subject: [PATCH] adjust news article list for mobile

---
 web/src/components/news/newsItem.module.scss | 28 +++++++++++++++
 web/src/components/news/newsList.module.scss | 38 ++++++++++++++++++++
 2 files changed, 66 insertions(+)

diff --git a/web/src/components/news/newsItem.module.scss b/web/src/components/news/newsItem.module.scss
index fdf201b..85e79af 100644
--- a/web/src/components/news/newsItem.module.scss
+++ b/web/src/components/news/newsItem.module.scss
@@ -34,4 +34,32 @@
 
 .lead {
   font-size: var(--font-size-caption);
+}
+
+@media (max-width: 600px) {
+  .newsItem {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    column-gap: 1rem;
+  }
+  .image {
+    width: 10rem;
+    height: 10rem;
+  }
+  .text {
+    padding-top: 0;
+    max-height: 10rem;
+    overflow: hidden;
+    position: relative;
+    &:after {
+      content: "";
+      background-image: linear-gradient(to top, var(--color-background), transparent);
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 4rem;
+      pointer-events: none;
+    }
+  }
 }
\ No newline at end of file
diff --git a/web/src/components/news/newsList.module.scss b/web/src/components/news/newsList.module.scss
index e6d0563..63b713a 100644
--- a/web/src/components/news/newsList.module.scss
+++ b/web/src/components/news/newsList.module.scss
@@ -52,4 +52,42 @@
       }
     }
   }
+}
+
+@media (max-width: 900px) {
+  .newsList, .newsList.featured {
+    li {
+      grid-column: span 6;
+      &:nth-child(1),
+      &:nth-child(2),
+      &:nth-child(3),
+      &:nth-child(4),
+      &:nth-child(5){
+        grid-column: span 6;
+
+        h2 {
+          font-size: 1.4rem;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 600px) {
+  .newsList, .newsList.featured {
+    li {
+      grid-column: span 12;
+      &:nth-child(1),
+      &:nth-child(2),
+      &:nth-child(3),
+      &:nth-child(4),
+      &:nth-child(5){
+        grid-column: span 12;
+
+        h2 {
+          font-size: 1.2rem;
+        }
+      }
+    }
+  }
 }
\ No newline at end of file