alter links

src/app.css

@@ -12,4 +12,5 @@ body{
     font-family: "LXGW WenKai TC", cursive;
     font-weight: 400;
     font-style: normal;
+    overflow-x: hidden;
 }

src/routes/+layout.svelte

@@ -1,6 +1,20 @@
 <script lang="ts">
 	import "../app.css"
 	let { children } = $props();
+	let template1 = ["grid-cols-4 h-16", "col-span-3 text-4xl grid-cols-4", ""]
+	let template2 = ["grid-cols-1 grid-rows-4 h-1/4", "place-items-center row-span-3 text-6xl text-center", ""]
+	let template = $state(template1)
+
 </script>
 
+<div class="grid w-full {template[0]} sticky top-0">
+    <div class="grid {template[1]}">
+            <a class="m-auto" href="/">中工匿名</a>
+    </div>
+    <div class="grid grid-cols-3 grid-rows-1 text-center {template[2]}">
+        <a class="my-auto" href="/tos">服務條款</a>
+        <a class="my-auto" href="/links">鏈接</a>
+        <a class="my-auto" href="/fav">每月精選</a>
+    </div>
+</div>
 {@render children()}

src/routes/+page.svelte

@@ -1,26 +1,43 @@
 <script lang="ts">
-let sctop = $state(0)
+let body_state = $state(false);
-let template1 = ["grid-cols-4 h-16", "col-span-3 text-3xl", ""]
+$inspect(body_state)
-let template2 = ["grid-cols-1 grid-rows-4 h-1/4", "row-span-3 text-6xl text-center", ""]
+const overlay = () => {
-
+    body_state = !body_state; 
-let template = $state(template2)
+    if(body_state){
-
+        document.body.classList.add("overflow-y-hidden");
+    }else{
+        document.body.classList.remove("overflow-y-hidden");
+    }
+};
 </script>
-<svelte:window bind:scrollY={sctop}/>
+<div style="width:100dvw;" class="h-dvh grid">
-<div class="grid w-full {template[0]}">
+    <p class="justify-self-center m-auto">空空如也...</p>
-    <div class="grid place-items-center {template[1]}">
-            <h1>中工匿名</h1>
 </div>
-    <div class="grid grid-cols-3 grid-rows-1 text-center {template[2]}">
+<button id="add" onclick={overlay}>
-        <p class="my-auto">服務條款</p>
++
-        <p class="my-auto">鏈接</p>
+</button>
-        <p class="my-auto">每月精選</p>
+<div id="overlay" class:overlay_enable={body_state} class:hidden={!body_state}>
+    <div>
+        <button onclick={overlay}>close</button>
     </div>
 </div>
-<div style="width:100dvw;" class="h-3/4">
-
-</div>
 
 <style>
-
+#add{
+    position: fixed;
+    bottom:calc(15dvh);
+    right:calc(10dvw);
+}
+#overlay{
+    position: fixed;
+    width:100%;
+    height: 100%;
+    top:0;
+    left:0;
+    z-index: 10;
+    cursor:pointer;
+}
+.overlay_enable{
+    backdrop-filter: blur(3px);
+}
 </style>

src/routes/tos/+page.svelte

@@ -0,0 +1,5 @@
+<div class="flex justify-center">
+    <p class="w-1/2 break-keep text-2xl">
+        “中工匿名”不記錄個人網路位置, 名字。可選用匿名，或佚名作為發表時署名。如訊息侵害他人權利，違反大眾道德觀，皆不保證留存。
+    </p>
+</div>