Feat: Move tags from beside to below page listings

- moved tags from being displayed in right-hand grid column to instead be displayed below each page listing
- put `{description}` inside `<p>` tags for HTML semantics
- enabled tags to be displayed in page listings on mobile

Author: MasssiveJuice08

quartz/components/PageList.tsx

@@ -70,9 +70,10 @@ export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit, sort
                     {title}
                   </a>
                 </h3>
-                {description}
-              </div>
-              <ul class="tags">
+                <p>
+                  {description}
+                </p>
+                <ul class="tags">
                 {tags.map((tag) => (
                   <li>
                     <a
@@ -84,6 +85,7 @@ export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit, sort
                   </li>
                 ))}
               </ul>
+              </div>
             </div>
           </li>
         )

quartz/components/styles/listPage.scss

@@ -11,13 +11,13 @@ li.section-li {
 
   & > .section {
     display: grid;
-    grid-template-columns: fit-content(8em) 3fr 1fr;
+    grid-template-columns: fit-content(8em) 3fr;
 
-    @media all and (max-width: $mobileBreakpoint) {
-      & > .tags {
-        display: none;
-      }
-    }
+    // @media all and (max-width: $mobileBreakpoint) {
+    //   & > .tags {
+    //     display: none;
+    //   }
+    // }
 
     & > .desc > h3 > a {
       background-color: transparent;
@@ -27,6 +27,14 @@ li.section-li {
       margin: 0 1em 0 0;
       opacity: 0.6;
     }
+
+    & > .desc > ul.tags {
+      margin: .5rem 0;
+    }
+
+    & > .desc > p {
+      margin: 0
+    }
   }
 }