chore: move Main grid to its children

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

9 files changed, 73 insertions, 48 deletions

diff --git a/src/components/Breadcrumb/Breadcrumb.module.scss b/src/components/Breadcrumb/Breadcrumb.module.scss
index bfba21f..b469ee0 100644
--- a/src/components/Breadcrumb/Breadcrumb.module.scss
+++ b/src/components/Breadcrumb/Breadcrumb.module.scss
@@ -1,13 +1,26 @@
+@use "@styles/abstracts/functions" as fun;
 @use "@styles/abstracts/placeholders";
 
+.wrapper {
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+    minmax(0, 1fr);
+  align-items: center;
+  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md)
+    var(--spacing-lg);
+  border-bottom: fun.convert-px(3) solid var(--color-border-lighter);
+}
+
 .list {
   @extend %reset-ordered-list;
 
+  grid-column: 2;
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   gap: var(--spacing-2xs);
-  margin: 0 0 var(--spacing-md) 0;
+  margin: 0;
   font-size: var(--font-size-sm);
 }
 
diff --git a/src/components/Main/Main.module.scss b/src/components/Main/Main.module.scss
deleted file mode 100644
index a513f73..0000000
--- a/src/components/Main/Main.module.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.wrapper {
-  display: grid;
-  grid-template-columns:
-    minmax(0, 1fr) min(calc(50vw - var(--spacing-md)), 40ch) min(
-      calc(50vw - var(--spacing-md)),
-      40ch
-    )
-    minmax(0, 1fr);
-  align-items: center;
-  padding: var(--spacing-md) 0;
-}
-
-.body {
-  grid-column: 2 / 4;
-}
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
index 8b2e822..ad270f6 100644
--- a/src/components/Main/Main.tsx
+++ b/src/components/Main/Main.tsx
@@ -1,12 +1,7 @@
 import { FunctionComponent } from 'react';
-import styles from './Main.module.scss';
 
 const Main: FunctionComponent = ({ children }) => {
-  return (
-    <main id="main" className={styles.wrapper}>
-      <div className={styles.body}>{children}</div>
-    </main>
-  );
+  return <main id="main">{children}</main>;
 };
 
 export default Main;
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 (
diff --git a/src/components/Sharing/Sharing.module.scss b/src/components/Sharing/Sharing.module.scss
index 3186675..fe13125 100644
--- a/src/components/Sharing/Sharing.module.scss
+++ b/src/components/Sharing/Sharing.module.scss
@@ -2,11 +2,18 @@
 @use "@styles/abstracts/mixins" as mix;
 @use "@styles/abstracts/placeholders";
 
+.wrapper {
+  max-height: 100vh;
+  padding-bottom: var(--spacing-sm);
+  position: sticky;
+  top: 0;
+  overflow-y: auto;
+}
+
 .list {
   @extend %flex-list;
 
   gap: var(--spacing-sm);
-  margin-bottom: var(--spacing-md);
 }
 
 .link {
@@ -55,9 +62,8 @@
     filter: drop-shadow(
       #{fun.convert-px(1)} #{fun.convert-px(1)} #{fun.convert-px(1)} hsl(0, 0%, 0%)
     );
-    width: 2ex;
-    height: 2ex;
-    margin-right: var(--spacing-2xs);
+    width: fun.convert-px(30);
+    height: fun.convert-px(30);
   }
 
   &--diaspora {
diff --git a/src/components/Sharing/Sharing.tsx b/src/components/Sharing/Sharing.tsx
index 4bcad5d..4df8e0d 100644
--- a/src/components/Sharing/Sharing.tsx
+++ b/src/components/Sharing/Sharing.tsx
@@ -90,9 +90,10 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
         <li key={id}>
           <a
             href={sharingUrl}
+            title={name}
             className={`${styles.link} ${styles[linkModifier]}`}
           >
-            {name}
+            <span className="screen-reader-text">{name}</span>
           </a>
         </li>
       );
@@ -100,7 +101,7 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
   };
 
   return (
-    <div>
+    <div className={styles.wrapper}>
       <h2>{t`Share`}</h2>
       <ul className={styles.list}>{getItems()}</ul>
     </div>
diff --git a/src/components/ToC/ToC.module.scss b/src/components/ToC/ToC.module.scss
new file mode 100644
index 0000000..27e79ad
--- /dev/null
+++ b/src/components/ToC/ToC.module.scss
@@ -0,0 +1,11 @@
+.wrapper {
+  max-height: 100vh;
+  padding-bottom: var(--spacing-sm);
+  position: sticky;
+  top: 0;
+  overflow-y: auto;
+}
+
+.list {
+  margin-bottom: 0;
+}
diff --git a/src/components/ToC/ToC.tsx b/src/components/ToC/ToC.tsx
index e7aafa5..3ab482c 100644
--- a/src/components/ToC/ToC.tsx
+++ b/src/components/ToC/ToC.tsx
@@ -2,6 +2,7 @@ import { t } from '@lingui/macro';
 import { Heading } from '@ts/types/app';
 import { slugify } from '@utils/helpers/slugify';
 import useHeadingsTree from '@utils/hooks/useHeadingsTree';
+import styles from './ToC.module.scss';
 
 const ToC = () => {
   const headingsTree = useHeadingsTree('article');
@@ -21,10 +22,10 @@ const ToC = () => {
   };
 
   return (
-    <>
+    <div className={styles.wrapper}>
       <h2>{title}</h2>
-      <ol>{getItems(headingsTree)}</ol>
-    </>
+      <ol className={styles.list}>{getItems(headingsTree)}</ol>
+    </div>
   );
 };