changes styles

kwangjong · Jan 25, 2025 · a45a8ab · a45a8ab
1 parent 876b721
commit a45a8ab
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 8 deletions.
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
@@ -7,7 +7,7 @@
     //export let data: {content: string}
 
     async function fetchBlogData(pageNum : number) {
-        const maxPerPage: number = 6;
+        const maxPerPage: number = 7;
         let tok : string|null = getToken();
 
         let response: {entries: ListEntry[], hasNext: boolean} = await fetch(

diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
@@ -31,7 +31,10 @@
 
         header = `
         <h1 class="title">${post.Title}</h1>
-        <time class="date" datetime="${date.toISOString()}" itemprop="datePublished">${dateString}</time>`;
+        <time class="date" datetime="${date.toISOString()}" itemprop="datePublished">${dateString}</time>
+        <div class="tags">
+          ${post.Tags.map(tag => `<span class="tag">#${tag}</span>`).join('')}
+        </div>`;
         body = post.Html;
         isAuthedFlag = await isAuthed();
     }
@@ -63,13 +66,15 @@
 </script>
 
 <SyntaxHighlight/>
-<div class="post">
+<div class="post-header">
 {@html header }
 {#if isAuthedFlag}
 <div class="admin-option">
     <button on:click={edit_post}>edit</button>
     <button on:click={delete_post}>delete</button>
 </div>
 {/if}
+</div>
+<div class="post">
 {@html body }
 </div>
diff --git a/src/stylesheets/post.scss b/src/stylesheets/post.scss
@@ -1,16 +1,41 @@
+.post-header {
+    h1, h2, h3, h4, h5, h6 {
+        margin-bottom: 0;
+    }
+
+    .tags {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+
+        .tag {
+            display: inline-block;
+            background-color: rgba(26, 129, 255, 0.1);
+            color: var(--highlight-color);
+            padding: 5px 10px;
+            border-radius: 15px;
+            font-size: 0.9rem;
+            font-weight: 500;
+        }
+    }
+}
+
 .post {
     h1, h2, h3, h4, h5, h6 {
         margin-bottom: 0;
     }
-
-    p {
-	margin-top: 0;
+
+    p, ul, ol, blockquote {
+        margin-top: 0.7em;
+        margin-bottom: 0.7em;
     }
 
     .date {
         color: var(--secondary-color);
         font-size: 0.9em;
-	margin-bottom: 1em;
+	    margin-bottom: 1em;
     }
 
     img {
@@ -21,4 +46,36 @@
     pre {
         font-size: 0.8em;
     }
-}
+
+    blockquote {
+        border-left: 4px solid var(--highlight-color);
+        padding: 10px 20px;
+        margin: 10px 0;
+    }
+
+    blockquote p {
+        margin: 0;
+    }
+
+    table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-top: 1em;
+        font-size: 0.9rem;
+    }
+
+    th, td {
+        border: 1px solid #3a3a3a;
+        padding: 8px 12px;
+        text-align: left;
+    }
+
+    th {
+        background-color: #252525;
+        font-weight: bold;
+    }
+
+    tr:nth-child(even) {
+        background-color: #252525
+    }
+}