Clean up page summary and update styles

assets/css/099_page_summary.css

@@ -3,7 +3,9 @@
  **************************/
 
 .page-summary {
-  &:not(:first-child) {
+  grid-column: main-start / main-end;
+
+  p + & {
     margin-block-start: var(--space-xl);
   }
 
@@ -12,23 +14,38 @@
   }
 
   .page-summary__date {
-    font-weight: normal;
+    color: var(--text-color-secondary);
+    display: block;
+    font-size: var(--text-s);
+    line-height: 1;
   }
 
   .page-summary__title {
+    font-size: var(--text-l);
+    line-height: 1;
     margin-block: 0;
+
+    a {
+      color: var(--text-color-body);
+
+      &:hover {
+        color: var(--text-color-link);
+      }
+    }
   }
 
   .page-summary__subtitle {
+    color: var(--text-color-secondary);
     font-family: var(--font-family-heading);
     font-weight: normal;
   }
 
-  .page-summary__content {
+  :is(
-    margin-block-end: var(--space-m);
+    .page-summary__heading,
-  }
+    .page-summary__subtitle,
-
+    .page-summary__content,
-  :is(.page-summary__title, .page-summary__subtitle, .page-summary__date):last-child {
+    .page-summary__date
+  ):not(:last-child) {
     margin-block-end: var(--space-xs);
   }
 }

layouts/_default/page_summary.html

@@ -1,16 +1,13 @@
 <article class="page-summary">
-  <header>
+  <header class="page-summary__heading">
-    <h2 class="page-summary__title">{{ .Title }}</h2>
+    <h2 class="page-summary__title"><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></h2>
-    {{ with .Params.subtitle | default .Description | markdownify }}
-      <p class="page-summary__subtitle">{{ . }}</p>
-    {{ end }}
   </header>
   {{ if (.Params.rendersSummary | default true) -}}
-    <div class="page-summary__content">
+    {{ with .Description }}
-      {{ .Summary }}
+      <div class="page-summary__content">{{ . | markdownify }}</div>
-    </div>
+    {{ end }}
   {{- end }}
-  <footer class="page-summary__footer">
+  {{ with .Date }}
-    <a href="{{ .RelPermalink }}">More →</a>
+    <time class="page-summary__date" datetime="{{ . | time.Format "2006-01-02" }}">{{ . | time.Format ":date_medium" }}</time>
-  </footer>
+  {{ end }}
 </article>