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>

src/routes/blog/[slug].svelte

@@ -26,7 +26,8 @@
 </script>
 
 <script lang="ts">
-  import ArticleFooter from '../../components/blog/article-footer.svelte'
+  import ArticleFooter from '../../components/blog/ArticleFooter.svelte'
+  import { contentClass } from './blog.css'
 
   export let post
 </script>
@@ -37,37 +38,7 @@
 
 <h1>{post.title}</h1>
 
-<div class="content">
+<div class="content {contentClass}">
   {@html post.body}
 </div>
 <ArticleFooter {post} />
-
-<style lang="less">
-  @import '../../styles/variables.module.less';
-
-  /*
-		By default, CSS is locally scoped to the component,
-		and any unused styles are dead-code-eliminated.
-		In this page, Svelte can't know which elements are
-		going to appear inside the {{{post.html}}} block,
-		so we have to use the :global(...) modifier to target
-		all elements inside .content
-	*/
-
-  .content :global(ul) {
-    line-height: 1.5;
-  }
-
-  .content :global(li) {
-    margin: 0 0 0.5em 0;
-  }
-
-  .content :global(img) {
-    max-height: 640px;
-  }
-
-  .content :global(img:only-child) {
-    display: block;
-    margin: 0 auto;
-  }
-</style>

src/routes/blog/blog.css.ts

@@ -0,0 +1,21 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+import { vars } from 'src/styles/vars.css'
+
+export const contentClass = style({})
+
+globalStyle(`${contentClass} ul, ${contentClass} ol`, {
+  lineHeight: vars.lineHeight['2x'],
+})
+
+globalStyle(`${contentClass} li`, {
+  marginBottom: vars.space['2x'],
+})
+
+globalStyle(`${contentClass} img`, {
+  maxHeight: vars.height.image,
+})
+
+globalStyle(`${contentClass} img:only-child`, {
+  display: 'block',
+  margin: '0 auto',
+})

src/routes/blog/index.css.ts

@@ -0,0 +1,20 @@
+import { globalStyle } from '@vanilla-extract/css'
+import { vars } from '../../styles/vars.css'
+import { sprinkles } from '../../styles/sprinkles.css'
+
+export const postListClass = sprinkles({
+  padding: 'none',
+  lineHeight: '3x',
+  listStyle: 'none',
+})
+
+export const seeAllClass = sprinkles({
+  textAlign: 'end',
+  width: 'parent',
+  maxWidth: 'max',
+  margin: 'auto',
+})
+
+globalStyle(`${postListClass} > li:not(:last-child)`, {
+  marginBottom: vars.space['4x'],
+})

src/routes/blog/index.json.ts

@@ -1,7 +1,7 @@
 import { getBlogListing } from './_content'
 
 export async function get({ query }) {
-  const { tag } = query
+  const tag = query.get('tag')
   const filteredContents = await getBlogListing(tag)
   return {
     status: 200,

src/routes/blog/index.svelte

@@ -1,14 +1,10 @@
 <script context="module" lang="ts">
+  // TODO Fix query & seeAll functionality
   /**
    * @type {import('@sveltejs/kit').Load}
    */
   export function load({ fetch, page: { params, query } }) {
-    const blogQuery = query
-      ? '?' +
-        Object.entries(query)
-          .map((q) => q.join('='))
-          .join('&')
-      : ''
+    const blogQuery = query ? '?' + query.toString() : ''
     return fetch(`blog.json${blogQuery}`)
       .then((r) => r.json())
       .then((posts) => {
@@ -18,11 +14,15 @@
 </script>
 
 <script lang="ts">
-  import ArticleFooter from '../../components/blog/article-footer.svelte'
+  import ArticleFooter from '../../components/blog/ArticleFooter.svelte'
+  import { postListClass, seeAllClass } from './index.css'
   import type { PostContent } from './_content'
 
   export let posts: PostContent[]
   export let query
+  export let tagQuery
+
+  $: tagQuery = query.get('tag')
 </script>
 
 <svelte:head>
@@ -34,18 +34,18 @@
 {:else}
   <h1>
     Recent
-    {#if query.tag}
-      <em>{query.tag}</em>
+    {#if tagQuery}
+      <em>{tagQuery}</em>
     {/if}
     posts
   </h1>
-  {#if query.tag}
-    <div class="see-all">
-      <a href="/blog" class="">See all posts</a>
+  {#if tagQuery}
+    <div class={seeAllClass}>
+      <a href="/blog">See all posts</a>
     </div>
   {/if}
 {/if}
-<ul class="post-list">
+<ul class="post-list {postListClass}">
   {#each posts as post}
     <!-- we're using the non-standard `rel=prefetch` attribute to
 				tell Sapper to load the data for the page as soon as
@@ -64,20 +64,3 @@
     </li>
   {/each}
 </ul>
-
-<style>
-  .post-list {
-    padding: 0;
-    line-height: 1.5;
-    list-style: none;
-  }
-
-  .post-list > li:not(:last-child) {
-    margin-bottom: 3em;
-  }
-
-  .see-all {
-    text-align: end;
-    margin-top: -1.5em;
-  }
-</style>

src/styles/sprinkles.css.ts

@@ -33,7 +33,7 @@ const responsiveProperties = defineProperties({
     ],
     alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
     flex: ['1'],
-    textAlign: ['left', 'center', 'right', 'justify', 'start'],
+    textAlign: ['center', 'justify', 'start', 'end'],
     textShadow: vars.textShadow,
     paddingTop: vars.space,
     paddingBottom: vars.space,
@@ -47,6 +47,7 @@ const responsiveProperties = defineProperties({
     fontSize: vars.fontSize,
     fontFamily: vars.fontFamily,
     fontWeight: vars.fontWeight,
+    fontStyle: ['italic', 'normal'],
     lineHeight: vars.lineHeight,
     whiteSpace: ['normal', 'nowrap'],
     width: vars.width,

src/styles/vars.css.ts

@@ -19,6 +19,7 @@ export const colors = {
 
 export const menuBackground = transparentize(0.6, colors.tearkiss)
 export const transparent = transparentize(1, '#ffffff')
+const articleText = desaturate(0.16, colors.midnightBlue)
 
 export enum breakpoints {
   s = 400,
@@ -57,7 +58,8 @@ export const vars = createGlobalTheme(':root', {
     '8x': spaceScale(8),
   },
   color: {
-    articleText: desaturate(0.16, colors.midnightBlue),
+    articleText,
+    tintedText: tint(0.25, articleText),
     selection: tint(0.4, colors.pinky),
     link: saturate(0.2, mix(0.66, colors.tearkiss, colors.midnightBlue)),
     linkHover: colors.tearkiss,
@@ -119,4 +121,9 @@ export const vars = createGlobalTheme(':root', {
     full: '100vw',
     parent: '100%',
   },
+  height: {
+    full: '100hw',
+    parent: '100%',
+    image: '640px',
+  },
 })