fix mobile view issues

fixed landing page secions and post view
with pre block min-width addressed

added TOC auto-hide

src/app.postcss

@@ -47,4 +47,8 @@ body {
   @apply rounded border-text/60 bg-transparent checked:bg-primary focus:ring-accent/60;
 }
 
+.prose pre {
+  @apply overflow-x-auto;
+}
+
 /* vim: set ft=css: */

src/routes/+layout.svelte

@@ -17,6 +17,8 @@
   export let data;
   const { session } = data;
 
+  // TODO: scroll detection & changing title
+
   async function postAction(action: string) {
     const res = await fetch(`${base}/post?/${action}`, {
       method: "POST",

src/routes/+page.svelte

@@ -41,7 +41,7 @@
   ];
 </script>
 
-<section class="h-[65vh] w-full items-center p-4">
+<section class="h-[65vh] min-h-[20rem] w-full items-center p-4">
   <div class="relative mx-auto h-full max-w-screen-xl">
     <div
       class="absolute left-0 top-1/2 z-10 flex max-w-lg -translate-y-1/2 flex-col items-start gap-4"
@@ -94,9 +94,9 @@
 
 <section class="w-full px-4 py-16" id="news">
   <div
-    class="mx-auto flex h-full max-w-screen-xl flex-col items-center justify-center gap-6 lg:flex-row"
+    class="mx-auto flex h-full max-w-screen-xl flex-col items-center justify-center gap-4 md:flex-row"
   >
-    <div class="max-w-lg space-y-4">
+    <div class="max-w-lg flex-grow basis-80 space-y-4">
       <header class="text-center text-2xl font-bold">最新消息</header>
       <div class="text-lg">
         你好，我是狒狒，目前在中国台湾桃园市六福村附近山区，刚刚突然开始下大雷雨，我急需钱买雨具，若我日后逃脱成功，必有钜额回报，你可以帮帮我吗？请加Line：87878787monkey，谢谢！
@@ -117,10 +117,10 @@
 
 <section class="w-full px-4 py-16" id="interests">
   <div
-    class="mx-auto flex h-full max-w-screen-xl flex-col items-center justify-center gap-4 lg:flex-row"
+    class="mx-auto flex h-full max-w-screen-xl flex-col items-center justify-center gap-4 md:flex-row"
   >
-    <div class="flex max-w-lg flex-col items-center gap-4">
-      <header class="text-2xl font-bold">社團活動</header>
+    <div class="max-w-lg flex-grow basis-80 space-y-4">
+      <header class="text-center text-2xl font-bold">社團活動</header>
       <div class="text-lg">
         應該永遠不會去玩了😡😡<br />
         好歹我也是Google地圖6級在地導覽📌<br />

src/routes/post/[...post]/+page.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
   import Markdown from "svelte-exmarkdown";
   import { gfmPlugin } from "svelte-exmarkdown/gfm";
-  import { createTableOfContents } from "@melt-ui/svelte";
+  import { createTableOfContents, createDialog, melt } from "@melt-ui/svelte";
 
   import PageTitle from "$lib/components/PageTitle.svelte";
   import Toc from "$lib/components/TableOfContents.svelte";
   import Pin from "~icons/mdi/pin";
+  import List from "~icons/mdi/format-list-bulleted-type";
   import Pencil from "~icons/mdi/pencil-circle";
 
   import { withIcon } from "$lib/components/actions.js";
   import { rawPlugin, slugPlugin, componentsPlugin } from "$lib/utils/exmarkdown-plugins";
   import { localeDateFromString } from "$lib/utils/date.js";
   import { base } from "$app/paths";
+  import { fade, fly } from "svelte/transition";
 
   export let data;
 
@@ -30,14 +32,21 @@
     activeType: "all",
     headingFilterFn: (heading) => !heading.hasAttribute("data-toc-ignore")
   });
+
+  const {
+    elements: { trigger, overlay, content, title: dTitle, portalled },
+    states: { open }
+  } = createDialog({
+    forceVisible: true
+  });
 </script>
 
 <div class="flex w-full p-4">
   <!-- left space -->
   <div class="flex-1" />
 
   <div class="order-last flex-1">
-    <div class="sticky top-20 w-max max-w-xs p-4">
+    <div class="sticky top-20 hidden w-max max-w-xs p-4 md:block">
       <p class="font-bold">On This Page</p>
       <nav>
         {#key $headingsTree}
@@ -47,7 +56,7 @@
     </div>
   </div>
 
-  <div id="post-content" class="relative flex w-full max-w-screen-xl flex-col gap-4">
+  <div id="post-content" class="relative flex w-full min-w-0 max-w-screen-xl flex-col gap-4">
     <PageTitle current="post" {title}>
       <div use:withIcon>
         {#if pinned}
@@ -62,12 +71,41 @@
       </div>
     </PageTitle>
 
-    {#if data.session?.user?.role === "admin"}
-      <a class="btn-accent absolute right-4 top-10" href="{base}/post/{url}/edit" use:withIcon>
-        <Pencil class="h-4 w-4" />
-        <span>Edit</span>
-      </a>
-    {/if}
+    <div class="absolute right-4 top-10 flex gap-2">
+      <button class="btn-text flex items-center gap-2 md:hidden" use:melt={$trigger}>
+        <!-- NOTE: cannot use withIcon because of melt -->
+        <List class="h-4 w-4" />
+        <span>Contents</span>
+      </button>
+      {#if data.session?.user?.role === "admin"}
+        <a class="btn-accent" href="{base}/post/{url}/edit" use:withIcon>
+          <Pencil class="h-4 w-4" />
+          <span>Edit</span>
+        </a>
+      {/if}
+    </div>
+
+    <div use:melt={$portalled}>
+      {#if $open}
+        <div
+          use:melt={$overlay}
+          class="fixed inset-0 z-top bg-background/60"
+          transition:fade={{ duration: 150 }}
+        />
+        <div
+          class="fixed right-0 top-0 z-top h-full w-full max-w-sm bg-background p-4 shadow-glow-sm shadow-text/60"
+          use:melt={$content}
+          transition:fly={{ duration: 150, x: 10 }}
+        >
+          <p class="font-bold" use:melt={$dTitle}>On This Page</p>
+          <nav>
+            {#key $headingsTree}
+              <Toc tree={$headingsTree} activeHeadingIdxs={$activeHeadingIdxs} {item} />
+            {/key}
+          </nav>
+        </div>
+      {/if}
+    </div>
 
     {#if image}
       <div class="p-4">
@@ -80,7 +118,7 @@
     {/if}
 
     <article class="prose space-y-4">
-      <!-- TODO: codeblock highlighting / custom codeblock -->
+      <!-- TODO: codeblock highlighting, styling / custom codeblock -->
       <!-- TODO: footnotes plugin -->
       <Markdown {md} plugins={[gfmPlugin, rawPlugin, slugPlugin, componentsPlugin]} />
     </article>