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

Andrew

2024-08-24 c4cd84dcc884469a0d84e2bec239b2fc3596c44f

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.

 quartz/components/PageList.tsx

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

 quartz/components/styles/listPage.scss

@@ -23,7 +23,7 @@
      background-color: transparent;
    }

    & > .meta {
    & .meta {
      margin: 0 1em 0 0;
      opacity: 0.6;
    }