src/lib/app.scss

@@ -1,4 +1,4 @@
-@import 'variables.scss';
+@import '../variables.scss';
 
 @font-face {
   font-family: 'ZenKakuGothicNew-Regular';

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-  import '../app.scss';
+  import '$lib/app.scss';
 </script>
 
 <slot />

src/routes/+page.server.ts

@@ -29,11 +29,11 @@ export const load: PageServerLoad = async ({ params }) => {
       title: row.title,
       image: row.image,
       date: row.updated_at.toISOString().slice(0, 10),
-      link: `/post/${row.category}/${row.id}`,
+      link: `/article/${row.category}/${row.id}`,
       tags: row.tags,
     }));
-    const tags = await db.query("SELECT * FROM tag ORDER BY ref_count DESC");
+    const tags = await db.query("SELECT * FROM tag ORDER BY ref_count DESC LIMIT 20");
-    data.tags = tags.rows.map((row) => row.name + ":" + row.ref_count);
+    data.tags = tags.rows.map((row) => row.name);
   } catch (e) {
     await db.rollback();
     throw error(500, e as Error);

src/routes/+page.svelte

@@ -306,10 +306,15 @@
 		.tags {
 			ul {
 				display: flex;
+        flex-wrap: wrap;
+        justify-content: left;
+        flex-direction: row;
 				gap: 3px;
 				li {
 					font-size: 1rem;
 					padding: 3px 5px;
+          border: 1px solid var(--line-primary);
+          border-radius: 5px;
 				}
 			}
 		}

src/routes/article/+layout.svelte

@@ -0,0 +1,5 @@
+<script>
+  import '$lib/app.scss';
+</script>
+
+<slot />

src/routes/articles/+layout.svelte

@@ -1,5 +0,0 @@
-<script>
-  import '../app.scss';
-</script>
-
-<slot />

src/variables.scss

@@ -1,5 +1,6 @@
 :root {
-  --background-primary: #343434;
+  --background-primary: #1b1b1b;
-  --line-primary: rgba(255, 255, 255, 0.1);
+  --line-primary: rgba(255, 255, 255, 0.2);
+  --line-secondary: rgba(255, 255, 255, 0.1);
   --highlight-primary: rgba(255, 115, 0, 0.2);
 }