From 7038c517ee9fe4415f17b4b20e39a4c11a934b3c Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 29 Dec 2021 18:11:51 +0100
Subject: chore: make year sticky in posts list

---
 src/components/PostsList/PostsList.module.scss | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

(limited to 'src/components/PostsList/PostsList.module.scss')

diff --git a/src/components/PostsList/PostsList.module.scss b/src/components/PostsList/PostsList.module.scss
index 0b9aa2d..471b172 100644
--- a/src/components/PostsList/PostsList.module.scss
+++ b/src/components/PostsList/PostsList.module.scss
@@ -1,11 +1,32 @@
+@use "@styles/abstracts/mixins" as mix;
 @use "@styles/abstracts/placeholders";
 
 .list {
   @extend %reset-ordered-list;
 
-  margin: var(--spacing-md) auto;
+  margin: 0 auto var(--spacing-md);
 }
 
 li.item {
   margin: var(--spacing-md) 0;
+
+  &:first-of-type {
+    margin-top: var(--spacing-sm);
+  }
+}
+
+.section {
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      display: grid;
+      grid-template-columns: max-content minmax(0, 1fr);
+      align-items: first baseline;
+      gap: var(--spacing-md);
+    }
+  }
+}
+
+.year {
+  position: sticky;
+  top: 0;
 }
-- 
cgit v1.2.3