cosmetic tweak (#110)

* cosmetic tweak * loader spedup
bamanczak · Nov 25, 2024 · 446a66a · 446a66a
1 parent 61fdaeb
commit 446a66a
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/blog/src/components/BlogPostsTable.svelte b/blog/src/components/BlogPostsTable.svelte
@@ -92,7 +92,9 @@
                 on:click={() => openPost(slugger.slug(post.id))}
             >
                 <td class={"text-2xl content-center" + setRowClass(index)}>
-                    <Icon class="" icon={post.icon} />
+                    <div class="icon-container">
+                        <Icon class="icon" icon={post.icon} />
+                    </div>
                 </td>
                 <td class={setRowClass(index) + " text-balance text-lg"}>
                     <span class="mb-0">{post.title}</span>
@@ -137,6 +139,18 @@
     .icon-column {
         min-width: 25px;
     }
+    .icon-container {
+        width: 2rem;
+        height: 2rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .icon {
+        width: 100%;
+        height: 100%;
+    }
 
     tr td:first-child,
     thead th:first-child {
@@ -176,4 +190,17 @@
         border-bottom: 1px solid #e0e0e0;
         border-top: 1px solid #e0e0e0;
     }
+
+    .icon-container {
+        width: 2rem;
+        height: 2rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .icon {
+        width: 100%;
+        height: 100%;
+    }
 </style>
diff --git a/blog/src/components/loader.astro b/blog/src/components/loader.astro
@@ -18,7 +18,7 @@ export interface Props {
     threshold?: number | false;
 }
 
-const { animationDuration = 800, threshold = 200 } = Astro.props;
+const { animationDuration = 300, threshold = 400 } = Astro.props;
 ---
 
 <div
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,7 +18,7 @@ export interface Props { @@
         threshold?: number | false;
     }
-    const { animationDuration = 800, threshold = 200 } = Astro.props;
+    const { animationDuration = 300, threshold = 400 } = Astro.props;
     ---
     <div
@@ Expand Down @@