Amadeus
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: fix a style bug in the tag list (#41, #93)

This commit is contained in:
saicaca 2024-06-07 00:16:25 +08:00
parent c3ac8d9728
commit 5dd1287255
1 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/PostMeta.astro
View File

@ -32,12 +32,12 @@ const className = Astro.props.class;
> >
<Icon name="material-symbols:menu-rounded" class="text-xl"></Icon> <Icon name="material-symbols:menu-rounded" class="text-xl"></Icon>
</div> </div>
<div class="flex flex-row flex-nowrap"> <div class="flex flex-row flex-nowrap items-center">
<div><a href={url(`/archive/category/${category || 'uncategorized'}/`)} aria-label=`View all posts in the ${category} category` <a href={url(`/archive/category/${category || 'uncategorized'}/`)} aria-label=`View all posts in the ${category} category`
class="link-lg transition text-50 text-sm font-medium class="link-lg transition text-50 text-sm font-medium
hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap"> hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
{category || i18n(I18nKey.uncategorized)} {category || i18n(I18nKey.uncategorized)}
</a></div> </a>
</div> </div>
</div> </div>
@ -47,16 +47,15 @@ const className = Astro.props.class;
> >
<Icon name="material-symbols:tag-rounded" class="text-xl"></Icon> <Icon name="material-symbols:tag-rounded" class="text-xl"></Icon>
</div> </div>
<div class="flex flex-row flex-nowrap"> <div class="flex flex-row flex-nowrap items-center">
{(tags && tags.length > 0) && tags.map(tag => <div {(tags && tags.length > 0) && tags.map((tag, i) => (
class="with-divider" <div class:list={[{"hidden": i == 0}, "mx-1.5 text-[var(--meta-divider)] text-sm"]}>/</div>
>
<a href={url(`/archive/tag/${tag}/`)} aria-label=`View all posts with the ${tag} tag` <a href={url(`/archive/tag/${tag}/`)} aria-label=`View all posts with the ${tag} tag`
class="link-lg transition text-50 text-sm font-medium class="link-lg transition text-50 text-sm font-medium
hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap"> hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
{tag} {tag}
</a> </a>
</div>)} ))}
{!(tags && tags.length > 0) && <div class="transition text-50 text-sm font-medium">{i18n(I18nKey.noTags)}</div>} {!(tags && tags.length > 0) && <div class="transition text-50 text-sm font-medium">{i18n(I18nKey.noTags)}</div>}
</div> </div>
</div> </div>