fix: Add a wrapper element to dates in PageList. (#1345)

* Add a wrapper span to dates in PageList.

This means there is a placeholder when date is not specified, so the values in grid-template-columns always line up correctly.

* Use a <div> instead -- better practice to stick to block elements.
This commit is contained in:
Andrew 2024-08-24 13:13:55 -04:00 committed by GitHub
parent 2be9c096a1
commit c4cd84dcc8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 6 deletions

View File

@ -46,11 +46,13 @@ export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit, sort
return ( return (
<li class="section-li"> <li class="section-li">
<div class="section"> <div class="section">
{page.dates && ( <div>
<p class="meta"> {page.dates && (
<Date date={getDate(cfg, page)!} locale={cfg.locale} /> <p class="meta">
</p> <Date date={getDate(cfg, page)!} locale={cfg.locale} />
)} </p>
)}
</div>
<div class="desc"> <div class="desc">
<h3> <h3>
<a href={resolveRelative(fileData.slug!, page.slug!)} class="internal"> <a href={resolveRelative(fileData.slug!, page.slug!)} class="internal">

View File

@ -23,7 +23,7 @@ li.section-li {
background-color: transparent; background-color: transparent;
} }
& > .meta { & .meta {
margin: 0 1em 0 0; margin: 0 1em 0 0;
opacity: 0.6; opacity: 0.6;
} }