Home Explore Help
Sign In
xry111
/
hugo-academic
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

feat: push footer to window bottom for short pages

Also, for Card view, add image zoom on hover.
George Cushen 4 years ago
parent
e8c96d1db9
commit
f851142fb2
4 changed files with 60 additions and 13 deletions
Split View Show Diff Stats
  1. 42 1
      wowchemy/assets/scss/wowchemy/_root.scss
  2. 16 10
      wowchemy/layouts/_default/baseof.html
  3. 1 1
      wowchemy/layouts/partials/li_card.html
  4. 1 1
      wowchemy/test/view.sh

+ 42 - 1
wowchemy/assets/scss/wowchemy/_root.scss
View File 

@@ -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;

+ 16 - 10
wowchemy/layouts/_default/baseof.html
View File 

@@ -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" . }}
 
-
 
-  {{ block "main" . }}{{ end }}
 
+  <div class="page-header">
 
+    {{ partial "navbar" . }}
 
+  </div>
 
 
-  {{ partial "site_js" . }}
 
+  <div class="page-body">
 
+    {{ block "main" . }}{{ end }}
 
+  </div>
 
 
-  {{/* 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>

+ 1 - 1
wowchemy/layouts/partials/li_card.html
View File 

@@ -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}}

+ 1 - 1
wowchemy/test/view.sh
View File 

@@ -1 +1 @@
 
-hugo server -p 1330 --minify
 
+hugo server -p 1330 --minify --templateMetrics --templateMetricsHints