Fix see all posts and convert css to sprinkles

src/components/blog/ArticleFooter.css.ts

@@ -0,0 +1,41 @@
+import { style } from '@vanilla-extract/css'
+import { desaturate, transparentize } from 'polished'
+import { colors } from '../../styles/vars.css'
+import { sprinkles } from '../../styles/sprinkles.css'
+
+export const tagsListClass = sprinkles({
+  listStyle: 'none',
+  margin: 'none',
+  padding: 'none',
+  display: 'inline',
+})
+
+export const tagsListLiClass = sprinkles({
+  display: 'inline',
+  fontStyle: 'italic',
+})
+
+export const publishedClass = sprinkles({
+  whiteSpace: 'nowrap',
+  fontStyle: 'italic',
+})
+
+export const publishedLabelClass = sprinkles({
+  color: 'tintedText',
+})
+
+export const footerClass = style([
+  sprinkles({
+    display: 'flex',
+    fontSize: 'sm',
+    justifyContent: 'space-between',
+    paddingTop: '1x',
+    marginTop: '2x',
+  }),
+  {
+    borderTop: `1px solid ${transparentize(
+      0.6,
+      desaturate(0.5, colors.tearkiss)
+    )}`,
+  },
+])

src/components/blog/ArticleFooter.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { format } from 'date-fns'
+  import type { PostContent } from '../../routes/blog/_content'
+  import {
+    footerClass,
+    publishedClass,
+    publishedLabelClass,
+    tagsListClass,
+    tagsListLiClass,
+  } from './ArticleFooter.css'
+
+  export let post: PostContent
+</script>
+
+<footer class={footerClass}>
+  <div class="article-tags">
+    {#if post.tags.length > 0}
+      <span class="lighten">Tags:</span>
+      <ul class={tagsListClass}>
+        {#each post.tags as tag}
+          <li class={tagsListLiClass}>
+            <a href="/blog?tag={tag}">{tag}</a>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+  <div class="created-at">
+    <span class={publishedLabelClass}>Published on</span>
+    <time datetime={post.date} class={publishedClass}>
+      {format(new Date(post.date), "do MMMM',' y")}
+    </time>
+  </div>
+</footer>

src/components/blog/article-footer.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-  import { format } from 'date-fns'
-  import type { PostContent } from '../../routes/blog/_content'
-
-  export let post: PostContent
-</script>
-
-<footer>
-  <div class="article-tags">
-    {#if post.tags.length > 0}
-      <span class="lighten">Tags:</span>
-      <ul class="tags-list">
-        {#each post.tags as tag}
-          <li>
-            <a href="/blog?tag={tag}">{tag}</a>
-          </li>
-        {/each}
-      </ul>
-    {/if}
-  </div>
-  <div class="created-at">
-    <span class="lighten">Published on</span>
-    <time datetime={post.date}>
-      {format(new Date(post.date), "do MMMM',' y")}
-    </time>
-  </div>
-</footer>
-
-<style lang="less">
-  @import '../../styles/variables.module.less';
-
-  .tags-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: inline;
-  }
-
-  .tags-list li {
-    display: inline;
-    font-style: italic;
-  }
-
-  .lighten {
-    color: tint(@article-text-color, 25%);
-  }
-
-  time {
-    white-space: nowrap;
-    font-style: italic;
-  }
-
-  footer {
-    display: flex;
-    font-size: 0.8em;
-    justify-content: space-between;
-    padding-top: 0.6em;
-    margin-top: 1em;
-    border-top: 1px solid fade(desaturate(@tearkiss, 50%), 40%);
-  }
-</style>