From f851142fb295d1d6a32810bd328de99d5c6321a9 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Wed, 28 Oct 2020 22:37:13 +0000
Subject: [PATCH] feat: push footer to window bottom for short pages

Also, for Card view, add image zoom on hover.
---
 wowchemy/assets/scss/wowchemy/_root.scss | 43 +++++++++++++++++++++++-
 wowchemy/layouts/_default/baseof.html    | 26 ++++++++------
 wowchemy/layouts/partials/li_card.html   |  2 +-
 wowchemy/test/view.sh                    |  2 +-
 4 files changed, 60 insertions(+), 13 deletions(-)
 mode change 100644 => 100755 wowchemy/test/view.sh

diff --git a/wowchemy/assets/scss/wowchemy/_root.scss b/wowchemy/assets/scss/wowchemy/_root.scss
index db0c7fd2..f28da641 100644
--- a/wowchemy/assets/scss/wowchemy/_root.scss
+++ b/wowchemy/assets/scss/wowchemy/_root.scss
@@ -1,5 +1,5 @@
 /*************************************************
- *  Academic's Core
+ *  Wowchemy's Core Style
  **************************************************/
 
 html {
@@ -33,6 +33,32 @@ body.no-navbar {
   margin-top: 0 !important;
 }
 
+// PAGE LAYOUT
+// Designed to push footer to bottom of viewport for short pages.
+
+.page-wrapper {
+  // Min height = viewport height - navbar height
+  min-height: calc(100vh - 70px);
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+@include media-breakpoint-down(md) {
+  .page-wrapper {
+    min-height: calc(100vh - 50px);
+  }
+}
+
+.page-header,
+.page-footer {
+  flex-shrink: 0;
+}
+
+.page-body {
+  flex-grow: 1;
+}
+
+// UTILITIES
+
 .max-width-640 {
   max-width: 640px;
 }
@@ -162,6 +188,21 @@ video {
   margin: 0 auto;
 }
 
+/* Hide overflowing of zoomed child img element */
+.img-hover-zoom {
+  overflow: hidden;
+}
+
+/* Smooth transition for image zoom on hover */
+.img-hover-zoom img {
+  transition: transform .3s ease-in-out;
+}
+
+/* Transform the image scale when container gets hovered */
+.img-hover-zoom:hover img {
+  transform: scale(1.1);
+}
+
 // Center all figure images by default.
 figure img {
   @extend .margin-auto;
diff --git a/wowchemy/layouts/_default/baseof.html b/wowchemy/layouts/_default/baseof.html
index 2e974d76..944320d9 100644
--- a/wowchemy/layouts/_default/baseof.html
+++ b/wowchemy/layouts/_default/baseof.html
@@ -6,7 +6,7 @@
 
 {{ $show_navbar := site.Params.main_menu.enable | default true }}
 {{- $highlight_active_link := site.Params.main_menu.highlight_active_link | default true -}}
-<body id="top" data-spy="scroll" {{ if $show_navbar }}data-offset="70"{{end}} data-target="{{ if or .IsHome (eq .Type "widget_page") | and $highlight_active_link }}#navbar-main{{else}}#TableOfContents{{end}}" class="{{ if not (.Scratch.Get "light") }}dark{{end}} {{ if not $show_navbar }}no-navbar{{end}}">
+<body id="top" data-spy="scroll" {{ if $show_navbar }}data-offset="70"{{end}} data-target="{{ if or .IsHome (eq .Type "widget_page") | and $highlight_active_link }}#navbar-main{{else}}#TableOfContents{{end}}" class="page-wrapper {{ if not (.Scratch.Get "light") }}dark{{end}} {{ if not $show_navbar }}no-navbar{{end}}">
 
   {{/* Load day/night theme. */}}
   {{/* Initialise default theme. */}}
@@ -23,20 +23,26 @@
 
   {{ partial "search" . }}
 
-  {{ partial "navbar" . }}
+  <div class="page-header">
+    {{ partial "navbar" . }}
+  </div>
 
-  {{ block "main" . }}{{ end }}
+  <div class="page-body">
+    {{ block "main" . }}{{ end }}
+  </div>
 
-  {{ partial "site_js" . }}
-
-  {{/* Docs and Updates layouts include the site footer in a different location. */}}
-  {{ if not (in (slice "book" "docs" "updates") .Type) }}
-  <div class="container">
-    {{ partial "site_footer" . }}
+  <div class="page-footer">
+    {{/* Docs and Updates layouts include the site footer in a different location. */}}
+    {{ if not (in (slice "book" "docs" "updates") .Type) }}
+    <div class="container">
+      {{ partial "site_footer" . }}
+    </div>
+    {{ end }}
   </div>
-  {{ end }}
 
   {{ partial "citation" . }}
 
+  {{ partial "site_js" . }}
+
 </body>
 </html>
diff --git a/wowchemy/layouts/partials/li_card.html b/wowchemy/layouts/partials/li_card.html
index 753cf2f3..d8f1ebf6 100644
--- a/wowchemy/layouts/partials/li_card.html
+++ b/wowchemy/layouts/partials/li_card.html
@@ -45,7 +45,7 @@
   {{ with $resource }}
   {{ $image := .Fill (printf "918x517 q90 %s" $anchor) }}
   <a href="{{ $item.RelPermalink }}">
-      <img src="{{ $image.RelPermalink }}" class="article-banner" alt="{{ $item.Title }}">
+    <div class="img-hover-zoom"><img src="{{ $image.RelPermalink }}" class="article-banner" alt="{{ $item.Title }}"></div>
   </a>
   {{end}}
 
diff --git a/wowchemy/test/view.sh b/wowchemy/test/view.sh
old mode 100644
new mode 100755
index 1079ef68..6321f034
--- a/wowchemy/test/view.sh
+++ b/wowchemy/test/view.sh
@@ -1 +1 @@
-hugo server -p 1330 --minify
+hugo server -p 1330 --minify --templateMetrics --templateMetricsHints