refactor: Layout and BlogLayout

macx · Apr 15, 2024 · b705f6d · b705f6d
1 parent 9733523
commit b705f6d
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 18 deletions.
diff --git a/src/components/RelatedArticles.astro b/src/components/RelatedArticles.astro
@@ -43,11 +43,24 @@ const { all, some, one, none } = mappedTags
 const output = [...all, ...some, ...one, ...none]
 ---
 
-<section class='related-tags'>
+<section class='related-articles'>
   <h2 class='title-centered'>Lese als Nächstes</h2>
 
   <div class='articles'>
     <ArticleCard article={output[0]} />
     <ArticleCard article={output[1]} />
+    <ArticleCard article={output[2]} />
   </div>
 </section>
+
+<style lang='scss'>
+  .related-articles {
+    margin-block-start: var(--sp-l);
+  }
+
+  .articles {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: var(--sp-content);
+  }
+</style>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -29,11 +29,15 @@ const { title, description, pubDate, toc, cover, ogType } =
     <Header />
 
     <main id='main'>
-      <div class:list={['content', { wide: layout === 'wide' }]}>
-        <slot />
+      <div class='stage'>
+        <div class:list={['content', { wide: layout === 'wide' }]}>
+          <slot />
+        </div>
+
+        {toc && <TableOfContent headings={headings} />}
       </div>
 
-      {toc && <TableOfContent headings={headings} />}
+      <slot name='page-footer' />
     </main>
 
     <Footer />

diff --git a/src/layouts/BlogPostLayout.astro b/src/layouts/BlogPostLayout.astro
@@ -62,7 +62,9 @@ const toc = true
     <Tags tags={tags as string[]} divider={true} />
   </article>
 
-  <slot name='related' />
+  <Fragment slot='page-footer'>
+    <slot name='related' />
+  </Fragment>
 </BaseLayout>
 
 <style lang='scss'>

diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
@@ -67,9 +67,6 @@ strong {
 }
 
 main {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--sp-content) + var(--sp));
   max-width: var(--layout-max-width);
   padding-block: var(--sp-l);
   margin-inline: auto;
@@ -79,6 +76,12 @@ main {
   width: 100%;
   flex: 1;
 
+  .stage {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--sp-content) + var(--sp));
+  }
+
   .content {
     width: 100%;
     max-width: var(--content-max-width);
@@ -113,12 +116,11 @@ main {
   }
 
   @include mixins.respond('l') {
-    flex-direction: row;
-    justify-content: space-between;
     padding-block: var(--sp-l);
 
-    .content {
-      // flex: 1 0 auto;
+    .stage {
+      flex-direction: row;
+      justify-content: space-between;
     }
 
     aside {

diff --git a/src/styles/components/_content.scss b/src/styles/components/_content.scss
@@ -152,9 +152,3 @@
     border-color: var(--clr-line);
   }
 }
-
-.articles {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: var(--sp-content);
-}