Make footer sticky to viewport bottom in templates

Make footer component stay at bottom of viewport in templates if there is not enough content to push the footer down the page.

Author: JoelCDL

src/css/templates/bios.css

@@ -1,7 +1,14 @@
 /* Bios Template */
 
+.t-bios {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+}
+
 .t-bios__content {
   display: grid;
+  align-content: start;
   gap: var(--uc3-space-lg);
   padding-block: var(--uc3-space-base) var(--uc3-space-lg);
   padding-inline: var(--template-inline-content-padding);

src/css/templates/blog-index.css

@@ -1,5 +1,11 @@
 /* Blog Index Template */
 
+.t-blog-index {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+}
+
 .t-blog-index__image-1 {
   min-height: 30rem;
 }
@@ -17,6 +23,7 @@
 
 .t-blog-index__content-1 {
   display: grid;
+  align-content: start;
   gap: var(--uc3-space-lg);
   padding-block: var(--uc3-space-base) var(--uc3-space-lg);
   padding-inline: var(--uc3-space-lg);

src/css/templates/blog-post.css

@@ -1,5 +1,11 @@
 /* Blog Post Template */
 
+.t-blog-post {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+}
+
 .t-blog-post__content {
   padding-block: var(--uc3-space-base) var(--uc3-space-lg);
   padding-inline: var(--template-inline-content-padding);

src/css/templates/plain.css

@@ -1,6 +1,10 @@
 /* Plain Template */
 
 .t-plain {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+
   header {
     margin-block-end: var(--uc3-space-lg);
   }

src/css/templates/search-results.css

@@ -1,6 +1,10 @@
 /* Search Results Template */
 
 .t-search-results {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+
   .c-breadcrumb {
     margin-inline: var(--uc3-space-lg);
   }

src/css/templates/secondary.css

@@ -1,5 +1,11 @@
 /* Secondary Template */
 
+.t-secondary {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+}
+
 .t-secondary__image-1 {
   min-height: 30rem;
 }