From 2fe602e6e2319daf792c85560b84dac09594a291 Mon Sep 17 00:00:00 2001
From: Niclas Norin <103985736+NiclasNorin@users.noreply.github.com>
Date: Tue, 10 Dec 2024 15:18:01 +0100
Subject: [PATCH] feat: news item ordering main content (#992)

* feat: news item ordering main content

* fix: cover column

* fix: header-right always right placement
---
 source/sass/component/_newsitem.scss | 81 +++++++++++++++++++---------
 1 file changed, 55 insertions(+), 26 deletions(-)

diff --git a/source/sass/component/_newsitem.scss b/source/sass/component/_newsitem.scss
index ce83325db..20bbaba5b 100644
--- a/source/sass/component/_newsitem.scss
+++ b/source/sass/component/_newsitem.scss
@@ -3,18 +3,27 @@ $c-newsitem-heading-color: var(--c-newsitem-heading-color, $color-primary) !defa
 
 // Basic laying down
 .c-newsitem {
-    display: block;
+    display: grid;
+    gap: calc($base * 2);
+    grid-template-columns: repeat(12, 1fr);
     container-type: inline-size;
     container-name: newsitem;
 
     // Areas (components)
-    .c-newsitem__main {
-        display: grid;
-        gap: calc($base * 3);
-        grid-template-columns: 2fr 1fr;
+    .c-newsitem__main-left {
+        grid-column: span 8;
+
+        &.cover {
+            grid-column: span 12;
+        }
+    }
+    
+    .c-newsitem__main-right {
+        grid-column: span 4;
     }
 
     .c-newsitem__header {
+        grid-column: span 12;
         display: flex;
         justify-content: space-between;
         padding: $base 0;
@@ -23,12 +32,16 @@ $c-newsitem-heading-color: var(--c-newsitem-heading-color, $color-primary) !defa
     }
 
     .c-newsitem__title {
-        margin: calc($base * 2) 0;
+        grid-column: span 12;
         display: grid;
         grid-template-columns: 1fr auto;
         gap: calc($base * 3);
     }
 
+    .c-newsitem__title-left.cover {
+        grid-column: span 2;
+    }
+
     // Partials (individual items)
     .c-newsitem__heading {
         color: $c-newsitem-heading-color;
@@ -42,6 +55,10 @@ $c-newsitem-heading-color: var(--c-newsitem-heading-color, $color-primary) !defa
         gap: $base;
     }
 
+    .c-newsitem__header-right {
+        margin-left: auto;
+    }
+
     .c-newsitem__date,
     .c-newsitem__read-time {
         display: flex;
@@ -88,49 +105,61 @@ a.c-newsitem {
 
 // Standing
 .c-newsitem.c-newsitem--standing {
-    .c-newsitem__main {
-        grid-template-columns: 1fr;
-        gap: calc($base * 2);
+    .c-newsitem__header {
+        order: 1;
     }
-
     .c-newsitem__main-right {
-        order: 1;
+        order: 2;
+        grid-column: span 12;
+    }
+
+    .c-newsitem__title {
+        order: 3;
     }
 
     .c-newsitem__main-left {
-        order: 2;
+        order: 4;
+        grid-column: span 12;
     }
 }
 
 // Responsive
 .c-newsitem {
     @container newsitem (max-width: 650px) {
-        .c-newsitem__main {
-            grid-template-columns: 1fr;
-            gap: calc($base * 2);
+        .c-newsitem__header {
+            order: 1;
         }
-
         .c-newsitem__main-right {
-            order: 1;
+            order: 2;
+            grid-column: span 12;
         }
-
+    
+        .c-newsitem__title {
+            order: 3;
+        }
+    
         .c-newsitem__main-left {
-            order: 2;
+            order: 4;
+            grid-column: span 12;
         }
     }
 
     @supports not (container-type: inline-size) {
-        .c-newsitem.c-newsitem__main {
-            grid-template-columns: 1fr;
-            gap: calc($base * 2);
+        .c-newsitem__header {
+            order: 1;
         }
-
         .c-newsitem__main-right {
-            order: 1;
+            order: 2;
+            grid-column: span 12;
         }
-
+    
+        .c-newsitem__title {
+            order: 3;
+        }
+    
         .c-newsitem__main-left {
-            order: 2;
+            order: 4;
+            grid-column: span 12;
         }
     }
 }
\ No newline at end of file