feat: make post page responsive

Author: openscript

.changeset/silly-jeans-lie.md

@@ -0,0 +1,5 @@
+---
+"r.obin.ch": patch
+---
+
+Make post page responsive

src/components/Foldable.astro

@@ -0,0 +1,7 @@
+---
+---
+
+<details>
+  <summary><slot name="title" /></summary>
+  <slot />
+</details>

src/components/GitInfo.astro

@@ -3,6 +3,7 @@ import type { GitInfoFrontmatter } from '../remark/remark-git-info'
 import { getLocaleFromUrl, useTranslations } from '../utils/i18n';
 import Button from './Button.astro';
 import DateTime from './DateTime.astro';
+import Foldable from './Foldable.astro';
 
 type Props = GitInfoFrontmatter;
 
@@ -12,8 +13,8 @@ const t = useTranslations(locale);
 
 ---
 
-<div>
-  <span class="label">{t('gitInfoLabel')}</span>
+<Foldable>
+  <span class="label" slot="title">{t('gitInfoLabel')}</span>
   <dl>
     <slot name="before" />
     {git?.lastCommit && (
@@ -30,4 +31,4 @@ const t = useTranslations(locale);
     )}
     <slot name="after" />
   </dl>
-</div>
+</Foldable>

src/components/TableOfContents.astro

@@ -1,5 +1,6 @@
 ---
 import { getLocaleFromUrl, useTranslations } from "../utils/i18n";
+import Foldable from "./Foldable.astro";
 
 type Props = {
   fromDepth?: number;
@@ -56,19 +57,6 @@ const t = useTranslations(locale);
   }
 </style>
 
-<nav class="table-of-contents">
-  <span class="label">{t("tableOfContentsLabel")}</span>
-  <ul>
-    {
-      headings.map((heading) => (
-        <li class={`depth-${heading.depth}`}>
-          <a href={`#${heading.slug}`}>{heading.text}</a>
-        </li>
-      ))
-    }
-  </ul>
-</nav>
-
 <script>
   document.addEventListener("astro:page-load", () => {
     const observer = new IntersectionObserver((entries) => {
@@ -100,3 +88,18 @@ const t = useTranslations(locale);
     });
   });
 </script>
+
+<Foldable>
+  <span class="label" slot="title">{t("tableOfContentsLabel")}</span>
+  <nav class="table-of-contents">
+    <ul>
+      {
+        headings.map((heading) => (
+          <li class={`depth-${heading.depth}`}>
+            <a href={`#${heading.slug}`}>{heading.text}</a>
+          </li>
+        ))
+      }
+    </ul>
+  </nav>
+</Foldable>

src/layouts/DefaultLayout.css

@@ -175,11 +175,15 @@ main :is(h1, h2, h3, h4, h5, h6) a {
 }
 
 main :is(img, video) {
-  width: 100%;
+  max-width: 100%;
   height: auto;
   border-radius: var(--border-radius);
 }
 
+p:has(> img) {
+  text-align: center;
+}
+
 article {
   line-height: var(--line-height);
 }

src/layouts/pages/Post.astro

@@ -1,15 +1,16 @@
 ---
-import DateTime from '../../components/DateTime.astro';
+import DateTime from "../../components/DateTime.astro";
 
 type Props = {
   frontmatter?: {
-    title?: string
+    title?: string;
     publishedAt?: Date;
-  }
+  };
 };
 
 const { frontmatter } = Astro.props;
 ---
+
 <style>
   .post {
     padding: 1.4rem 0;
@@ -47,6 +48,18 @@ const { frontmatter } = Astro.props;
     text-align: center;
   }
 
+  @media (max-width: 1280px) {
+    .post {
+      grid-template-columns: 1fr;
+      grid-template-areas: "title" "left" "right" "article";
+      gap: 1.4rem;
+    }
+    aside {
+      justify-self: center;
+      width: 100%;
+      max-width: 50rem;
+    }
+  }
 </style>
 <div class="post">
   <slot name="title">