chore: adjust css grid on listing pages without sidebar

4 files changed, 54 insertions, 31 deletions

diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index 5fe35a1..ece76eb 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -13,6 +13,7 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import useSWRInfinite from 'swr/infinite';
+import styles from '@styles/pages/Listing.module.scss';
 
 const Search: NextPageWithLayout = () => {
   const [query, setQuery] = useState('');
@@ -72,9 +73,9 @@ const Search: NextPageWithLayout = () => {
         <title>{head.title}</title>
         <meta name="description" content={head.description} />
       </Head>
-      <article>
+      <article className={styles.wrapper}>
         <PostHeader title={title} />
-        <div>
+        <div className={styles.body}>
           <PostsList data={data} showYears={false} />
           {hasNextPage && (
             <Button
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index c3387b4..71d0f42 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -35,16 +35,15 @@ const Subject: NextPageWithLayout<SubjectProps> = ({ subject }) => {
         meta={meta}
         title={subject.title}
       />
-      <div
-        className={styles.body}
-        dangerouslySetInnerHTML={{ __html: subject.content }}
-      ></div>
-      {subject.posts.length > 0 && (
-        <section className={styles.section}>
-          <h2>{t`All posts in ${subject.title}`}</h2>
-          <ol className={styles.list}>{getPostsList()}</ol>
-        </section>
-      )}
+      <div className={styles.body}>
+        <div dangerouslySetInnerHTML={{ __html: subject.content }}></div>
+        {subject.posts.length > 0 && (
+          <section className={styles.section}>
+            <h2>{t`All posts in ${subject.title}`}</h2>
+            <ol className={styles.list}>{getPostsList()}</ol>
+          </section>
+        )}
+      </div>
     </article>
   );
 };
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index fb0eda5..72e469c 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -25,16 +25,15 @@ const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
   return (
     <article className={styles.wrapper}>
       <PostHeader intro={thematic.intro} title={thematic.title} />
-      <div
-        className={styles.body}
-        dangerouslySetInnerHTML={{ __html: thematic.content }}
-      ></div>
-      {thematic.posts.length > 0 && (
-        <section className={styles.section}>
-          <h2>{t`All posts in ${thematic.title}`}</h2>
-          <ol className={styles.list}>{getPostsList()}</ol>
-        </section>
-      )}
+      <div className={styles.body}>
+        <div dangerouslySetInnerHTML={{ __html: thematic.content }}></div>
+        {thematic.posts.length > 0 && (
+          <section className={styles.section}>
+            <h2>{t`All posts in ${thematic.title}`}</h2>
+            <ol className={styles.list}>{getPostsList()}</ol>
+          </section>
+        )}
+      </div>
     </article>
   );
 };
diff --git a/src/styles/pages/Listing.module.scss b/src/styles/pages/Listing.module.scss
index 1915148..3d1ee9c 100644
--- a/src/styles/pages/Listing.module.scss
+++ b/src/styles/pages/Listing.module.scss
@@ -1,7 +1,27 @@
+@use "@styles/abstracts/mixins" as mix;
 @use "@styles/abstracts/placeholders";
 
 .wrapper {
-  padding-bottom: var(--spacing-lg);
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+    minmax(0, 1fr);
+  align-items: first baseline;
+  padding-bottom: var(--spacing-xl);
+
+  > header {
+    grid-column: 1 / -1;
+  }
+}
+
+.body {
+  grid-column: 2;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("lg") {
+      grid-row: 2;
+    }
+  }
 }
 
 .list {
@@ -12,14 +32,18 @@ li.item {
   margin: 0 0 var(--spacing-md) 0;
 }
 
-.body,
-.section {
-  display: grid;
-  grid-template-columns:
-    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
-    minmax(0, 1fr);
+.aside {
+  grid-column: 2;
+  margin-top: var(--spacing-lg);
 
-  > * {
-    grid-column: 2;
+  @include mix.media("screen") {
+    @include mix.dimensions("lg") {
+      grid-column: 3;
+      grid-row: 2;
+      margin-left: var(--spacing-lg);
+      position: sticky;
+      top: 0;
+      overflow-y: auto;
+    }
   }
 }