michaelh/hugo-academic-mirror
1
0
Fork 0
mirror of https://github.com/gcushen/hugo-academic.git synced 2025-07-26 19:15:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: push footer to window bottom for short pages

Browse source 
Also, for Card view, add image zoom on hover.
This commit is contained in:
George Cushen 2020-10-28 22:37:13 +00:00
commit f851142fb2
4 changed files with 62 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

2
wowchemy/test/view.sh Normal file → Executable file
View file

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