Something went wrong. Try again.
Fork of Chiri for Astro for my blog forked from quillmatiq.com/augment
Something went wrong. Try again.
3.2 kB · 143 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144---import FormattedDate from '@/components/widgets/FormattedDate.astro'import type { PostListProps } from '@/types'import { themeConfig } from '@/config'
const { posts } = Astro.props as PostListProps---
<ul> { posts.map((post) => ( <li> <a href={`/${post.id}/`}> <div class={`post-item ${!themeConfig.date.dateOnRight ? 'date-left' : ''}`}> {!themeConfig.date.dateOnRight && ( <p class="date font-features"> <FormattedDate date={post.data.pubDate} context="list" /> </p> )} <p class="title">{post.data.title}</p> {themeConfig.date.dateOnRight && ( <div class={themeConfig.general.postListDottedDivider ? 'dotted-divider' : 'divider'} /> )} {themeConfig.date.dateOnRight && ( <p class="date font-features"> <FormattedDate date={post.data.pubDate} context="list" /> </p> )} </div> </a> </li> )) }</ul><div class="placeholder"></div>
<style> ul { padding: 0; margin: 0; list-style-type: none; display: flex; flex-direction: column; gap: 0; }
a { color: var(--text-primary); display: block; text-decoration: none; transition: opacity 0.15s ease-out; }
@media (hover: hover) and (pointer: fine) { ul:hover a { opacity: 0.4; }
ul:hover a:hover { opacity: 1; }
ul:hover a:hover .divider { background-color: var(--text-tertiary); opacity: 0.75; } ul:hover a:hover .dotted-divider { color: var(--text-secondary); } ul:hover a:hover .date { color: var(--text-secondary); opacity: 1; } }
.post-item { height: 2.75rem; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.post-item.date-left { justify-content: flex-start; }
.post-item.date-left .title { flex: 1 1 auto; min-width: 0; }
.post-item.date-left .date { margin-right: 0.75rem; }
.title { margin: 0; flex-shrink: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date { margin: 0; color: var(--text-secondary); opacity: 0.75; letter-spacing: var(--spacing-s); flex-shrink: 0; white-space: nowrap; }
.divider { flex: 1 1 auto; min-width: 3rem; margin: 0 0.25rem; height: 0.5px; background-color: var(--border); }
.dotted-divider { flex: 1 1 3rem; min-width: 3rem; max-width: 100%; text-align: end; letter-spacing: 5px; height: 1.675rem; overflow: hidden; color: var(--text-tertiary); opacity: 0.75; }
.dotted-divider::after { content: '·····························································································································································'; pointer-events: none; }
.placeholder { height: 3rem; }</style>