chore: move Main grid to its children

This way I can use full width background for some blocks.

2 files changed, 30 insertions, 17 deletions

diff --git a/src/components/PostsList/PostsList.module.scss b/src/components/PostsList/PostsList.module.scss
index 471b172..8a6c083 100644
--- a/src/components/PostsList/PostsList.module.scss
+++ b/src/components/PostsList/PostsList.module.scss
@@ -1,9 +1,33 @@
 @use "@styles/abstracts/mixins" as mix;
 @use "@styles/abstracts/placeholders";
 
+.section {
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+    minmax(0, 1fr);
+  align-items: first baseline;
+}
+
+.year {
+  grid-column: 2;
+  margin-bottom: 0;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      grid-column: 1;
+      justify-self: end;
+      position: sticky;
+      top: 0;
+      margin-right: var(--spacing-lg);
+    }
+  }
+}
+
 .list {
   @extend %reset-ordered-list;
 
+  grid-column: 2;
   margin: 0 auto var(--spacing-md);
 }
 
@@ -14,19 +38,3 @@ li.item {
     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;
-}
diff --git a/src/components/PostsList/PostsList.tsx b/src/components/PostsList/PostsList.tsx
index 51698e6..3354dd5 100644
--- a/src/components/PostsList/PostsList.tsx
+++ b/src/components/PostsList/PostsList.tsx
@@ -21,7 +21,12 @@ const PostsList = ({
     return years.map((year) => {
       return (
         <section key={year} className={styles.section}>
-          {showYears && <h2 className={styles.year}>{year}</h2>}
+          {showYears && (
+            <h2 className={styles.year}>
+              <span className="screen-reader-text">{t`Published in`} </span>
+              {year}
+            </h2>
+          )}
           <ol className={styles.list}>
             {posts[year].map((post) => {
               return (