Merge pull request 'fix: Stacking series problem and undefined descriptions problem' (#24) from post/header into main

Reviewed-on: #24
This commit is contained in:
Leni Aniva 2024-10-18 11:27:46 -07:00
commit 6e7ccd73fc
4 changed files with 19 additions and 7 deletions

View File

@ -40,6 +40,7 @@
--shadow: theme('colors.java.800');
--name: theme('colors.java.800');
--navlink: theme('colors.eucalyptus.400');
--series: theme('colors.sunglow.700');
}
.dark {
@ -74,6 +75,7 @@
--shadow: theme('colors.java.100');
--name: theme('colors.java.300');
--navlink: theme('colors.eucalyptus.200');
--series: theme('colors.sunglow.600');
}
}

View File

@ -3,6 +3,6 @@ title: Placeholder 2
date: '2024-09-20'
description: "This is a placeholder description"
tags: ["a123"]
series: ["placeholder"]
series: ["placeholder", "another-series"]
---
## Content

View File

@ -1,7 +1,6 @@
---
title: Placeholder 3
date: '2024-09-24'
description: "This is a placeholder description"
tags: []
series: ["placeholder"]
---

View File

@ -1,5 +1,6 @@
<script lang="ts">
import type { Post } from '$lib/types'
import Dot from "svelte-radix/Dot.svelte"
import DividerVertical from "svelte-radix/DividerVertical.svelte"
export let post: Post;
@ -9,18 +10,28 @@
</script>
<div id="post-heading">
<h2>
{#each series as seriesTag}
{#if series}
<div class="flex flex-row justify-left items-center">
{#each series as seriesTag, i}
{#if i > 0}
<div class="separator text-sm">
<Dot />
</div>
{/if}
<p class="series-tag">{seriesTag}</p>
{/each}
</div>
{/if}
<h2>
{#if inactive}
<p id="post-title">{post.title}</p>
{:else}
<a id="post-title" href="/post/{post.slug}">{post.title}</a>
{/if}
</h2>
<!-- Visually this component should exist to ensure the even spacing between individual posts. -->
<div>
<p class="text-gray-500 h-8">{post.description}</p>
<p class="text-gray-500 h-8">{post?.description || ""}</p>
</div>
<div class="flex flex-row justify-between" style="width: 100%">
<p class="text-gray-200 flex justify-center">
@ -46,6 +57,6 @@
@apply text-3xl;
}
.series-tag {
color: theme('colors.sunglow.600');
color: var(--series);
}
</style>