add / fix styles

fixed EasyMde styles on preview extracted button styles to global `.btn-<color>`
tnfshcec · Nov 5, 2023 · fd8356d · fd8356d
1 parent 58f23bd
commit fd8356d
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 33 deletions.
diff --git a/src/app.postcss b/src/app.postcss
@@ -21,6 +21,19 @@
   }
 }
 
+@layer components {
+  .btn-accent {
+    @apply rounded p-2 transition-all;
+    @apply border border-accent/80 text-accent;
+    @apply hover:border-accent hover:shadow-glow hover:shadow-accent/40 active:shadow-accent/60;
+  }
+  .btn-text {
+    @apply rounded p-2 transition-all;
+    @apply border border-text/80 text-text;
+    @apply hover:border-text hover:shadow-glow hover:shadow-text/40 active:shadow-text/60;
+  }
+}
+
 html,
 body {
   @apply h-full overflow-auto bg-background text-text;
@@ -30,4 +43,17 @@ body {
   @apply bg-primary/60;
 }
 
+.prose input[type="checkbox"] {
+  @apply rounded border-text/60 bg-transparent checked:bg-primary focus:ring-accent/60;
+}
+
+.editor-preview table td,
+.editor-preview table th {
+  border: 0;
+}
+
+.editor-preview pre {
+  background: transparent;
+}
+
 /* vim: set ft=css: */
diff --git a/src/lib/components/EasyMde.svelte b/src/lib/components/EasyMde.svelte
@@ -64,6 +64,6 @@
   }
 
   .cm-comment {
-    @apply font-mono text-primary/20;
+    @apply font-mono;
   }
 </style>
diff --git a/src/lib/components/weird.svelte → src/lib/components/Weird.svelte b/src/lib/components/weird.svelte → src/lib/components/Weird.svelte
@@ -4,9 +4,7 @@
 
 <p>游😶育是甲，這是真的!</p>
 
-<button type="button" class="btn variant-soft" on:click={() => n++}>
-  猜謎: 南一中第一甲是誰?
-</button>
+<button class="btn-accent" on:click={() => n++}> 猜謎: 南一中第一甲是誰? </button>
 
 <p>
   {#each Array(n) as _}

diff --git a/src/lib/utils/exmarkdown-plugins.ts b/src/lib/utils/exmarkdown-plugins.ts
@@ -3,7 +3,7 @@ import { visit } from "unist-util-visit";
 import rehypeRaw from "rehype-raw";
 import rehypeSlug from "rehype-slug";
 
-import Weird from "../components/weird.svelte";
+import Weird from "../components/Weird.svelte";
 
 /*
 export const codeBlockPlugin: Plugin = {

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -101,11 +101,7 @@
       <div class="text-lg">
         你好，我是狒狒，目前在中国台湾桃园市六福村附近山区，刚刚突然开始下大雷雨，我急需钱买雨具，若我日后逃脱成功，必有钜额回报，你可以帮帮我吗？请加Line：87878787monkey，谢谢！
       </div>
-      <a
-        class="mx-auto w-fit rounded border border-accent/80 p-2 text-accent transition-all hover:border-accent hover:shadow-glow hover:shadow-accent/40"
-        href="{base}/post"
-        use:withIcon
-      >
+      <a class="btn-accent mx-auto w-fit" href="{base}/post" use:withIcon>
         <ArrowRight class="h-6 w-6" />
         <span>查看其他</span>
       </a>

diff --git a/src/routes/post/[...post]/+page.svelte b/src/routes/post/[...post]/+page.svelte
@@ -53,18 +53,17 @@
         {#if pinned}
           <Pin class="h-4 w-4 text-primary" />
         {/if}
-        {author ? `By ${author}` : ""}
-        {author && date ? "/" : ""}
-        {localeDate}
+        <span>
+          {pinned && !author && !date ? "Pinned" : ""}
+          {author ? `By ${author}` : ""}
+          {author && date ? "/" : ""}
+          {localeDate}
+        </span>
       </div>
     </PageTitle>
 
     {#if data.session?.user?.role === "admin"}
-      <a
-        class="absolute right-4 top-10 rounded border border-accent/80 p-2 text-accent transition-all hover:border-accent hover:shadow-glow hover:shadow-accent/40"
-        href="{base}/post/{url}/edit"
-        use:withIcon
-      >
+      <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>

diff --git a/src/routes/post/[...post]/edit/+page.svelte b/src/routes/post/[...post]/edit/+page.svelte
@@ -75,28 +75,21 @@
         {#if postData.pinned}
           <Pin class="h-4 w-4 text-primary" />
         {/if}
-        {postData.author ? `By ${postData.author}` : ""}
-        {postData.author && postData.date ? "/" : ""}
-        {localeDate}
+        <span>
+          {postData.pinned && !postData.author && !postData.date ? "Pinned" : ""}
+          {postData.author ? `By ${postData.author}` : ""}
+          {postData.author && postData.date ? "/" : ""}
+          {localeDate}
+        </span>
       </div>
     </PageTitle>
 
     <div class="absolute right-4 top-10 flex gap-2">
-      <button
-        class="rounded border border-accent/80 p-2 text-accent transition-all hover:border-accent hover:shadow-glow hover:shadow-accent/40"
-        form="post-edit"
-        formaction="?/save"
-        use:withIcon
-      >
+      <button class="btn-accent" form="post-edit" formaction="?/save" use:withIcon>
         <Save class="h-4 w-4" />
         Save
       </button>
-      <button
-        class="rounded border border-text/80 p-2 text-text transition-all hover:border-text hover:shadow-glow hover:shadow-text/40"
-        form="post-edit"
-        formaction="?/delete"
-        use:withIcon
-      >
+      <button class="btn-text" form="post-edit" formaction="?/delete" use:withIcon>
         <Alert class="h-4 w-4" />
         Delete
       </button>