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 @@ export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit, sort
         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 @@ li.section-li {
       background-color: transparent;
     }
 
-    & > .meta {
+    & .meta {
       margin: 0 1em 0 0;
       opacity: 0.6;
     }