Add optional page description/subheading

content/foundation/_index.md

@@ -1,5 +1,6 @@
 ---
 title: Kosmos Infrastructure Foundation
+description: Providing physical infrastructure for  Kosmos software and services
 menu:
   main:
     identifier: foundation

themes/kosmos-22/layouts/_default/section.html

@@ -5,6 +5,9 @@
   <div class="max-w-5xl mx-auto -mt-12 py-8 px-8 text-left bg-white">
   <header class="mb-8">
     <h2 class="text-2xl font-bold">{{ .Title }}</h1>
+    {{ if .Description }}
+    <p class="mt-2 text-lg text-zinc-500">{{ .Description }}</p>
+    {{ end }}
   </header>
   <div class="content">
     {{ .Content }}

themes/kosmos-22/layouts/_default/single.html

@@ -5,6 +5,9 @@
   <div class="max-w-5xl mx-auto -mt-12 py-8 px-8 text-left bg-white">
   <header class="mb-8">
     <h2 class="text-2xl font-bold">{{ .Title }}</h1>
+    {{ if .Description }}
+    <p class="mt-2 text-lg text-zinc-500">{{ .Description }}</p>
+    {{ end }}
   </header>
   <div class="content">
     {{ .Content }}

themes/kosmos-22/static/css/main.css

@@ -685,14 +685,26 @@ Ensure the default browser behavior of the `hidden` attribute.
   text-align: center;
 }
 
+.align-top {
+  vertical-align: top;
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
+.align-bottom {
+  vertical-align: bottom;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
 }
 
-.text-4xl {
+.text-lg {
-  font-size: 2.25rem;
+  font-size: 1.125rem;
-  line-height: 2.5rem;
+  line-height: 1.75rem;
 }
 
 .font-bold {
@@ -703,11 +715,9 @@ Ensure the default browser behavior of the `hidden` attribute.
   text-transform: uppercase;
 }
 
-@media (min-width: 640px) {
+.text-zinc-500 {
-  .sm\:px-0 {
+  --tw-text-opacity: 1;
-    padding-left: 0px;
+  color: rgb(113 113 122 / var(--tw-text-opacity));
-    padding-right: 0px;
-  }
 }
 
 @media (min-width: 768px) {