feat: migrate to latest web best practices

Informed by Google Lighthouse insights.

The demo of the light Academic template now achieves 100% Accessibility, 100% Best Practices, and 100% SEO scores.

Hero image can now be moved from the media library to the widget page folder, e.g. `home/`, to become responsively sized.

wowchemy/assets/scss/wowchemy/_callouts.scss

@@ -30,7 +30,7 @@ div.alert > div:first-child::before {
   top: -0.5rem;
   left: -2rem;
   font-size: 1.5rem;
-  color: #209cee;
+  color: #1976d2;
   font-family: 'Font Awesome 5 Free';
   font-weight: 900;
   content: '\f05a';
@@ -56,7 +56,7 @@ div.alert a {
 .alert-note {
   color: #12537e;
   background-color: #f6fbfe;
-  border-color: #209cee;
+  border-color: #1976d2;
 }
 
 .alert-warning {

wowchemy/assets/scss/wowchemy/_card.scss

@@ -46,19 +46,19 @@ a.summary-link {
   min-height: 100px;
 }
 
-.card h4 {
+.card .section-subheading {
   font-size: 0.9rem;
   font-weight: 700;
   line-height: 1.5;
   text-transform: uppercase;
 }
 
-.card h4 a {
+.card .section-subheading a {
   color: #000;
   border-bottom: solid 1px transparent;
 }
 
-.card h4 a:hover {
+.card .section-subheading a:hover {
   color: #000;
   border-bottom: solid 1px #000;
   text-decoration: none;

wowchemy/assets/scss/wowchemy/_dark.scss

@@ -100,7 +100,7 @@ body.dark,
   background: #343a40;
 }
 
-.dark .card h4 a {
+.dark .card .section-subheading a {
   color: $sta-primary;
   border-bottom: solid 1px transparent;
 }

wowchemy/assets/scss/wowchemy/_root.scss

@@ -336,6 +336,10 @@ small,
   background: $sta-background;
 }
 
+.dark .modal-content {
+  background: $sta-dark-background;
+}
+
 .modal-title {
   margin: 0; /* Override default h5 margin. */
 }
@@ -366,6 +370,12 @@ small,
   font-size: 0;
 }
 
+.gallery img {
+  // Satisfy Lighthouse criteria even if a lazy image hasn't loaded yet.
+  min-height: 48px;
+  min-width: 48px;
+}
+
 a[data-fancybox] {
   text-decoration: none;
   cursor: zoom-in;
@@ -453,7 +463,7 @@ a.badge:hover {
 .tag-cloud a {
   display: inline-block;
   position: relative;
-  margin: 5px 10px;
+  margin: 8px 10px;
   word-wrap: break-word;
   transition-duration: .2s;
   transition-property: transform;
@@ -491,10 +501,15 @@ a.badge:hover {
 
 .btn.btn-sm {
   padding: 5px .4rem 5px .4rem;
-  font-size: .6rem;
+  font-size: 14px;
   border-radius: .2rem;
 }
 
+.btn-page-header {
+  // Satisfy Lighthouse tap targets criteria.
+  margin: 8px 8px 8px 0;
+}
+
 /*************************************************
  *  Toolbar Buttons
  **************************************************/

wowchemy/assets/scss/wowchemy/_widgets.scss

@@ -23,6 +23,21 @@
   min-height: 100vh;
 }
 
+// Section theming
+
+.home-section.light,
+.home-section.light h1 {
+  color: #000;
+}
+
+.home-section.light a {
+  color: $sta-link;
+}
+
+.home-section.dark a {
+  color: $sta-dark-link;
+}
+
 /* Override dark colors that may be inherited from body.dark */
 .home-section.dark,
 .home-section.dark h1,
@@ -117,6 +132,14 @@
   margin: 0 0 10px 0;
 }
 
+.section-subheading {
+  font-size: 1.25rem;
+  font-family: $sta-font-heading, sans-serif;
+  font-weight: bold;
+  margin-top: 1rem;
+  margin-bottom: .5rem;
+}
+
 .section-heading p {
   font-weight: 400;
   font-size: 1.1rem;
@@ -248,7 +271,7 @@ a.hero-cta-alt:hover {
   text-align: center;
 }
 
-.featurette h3 {
+.featurette .section-subheading {
   margin-top: 0;
   margin-bottom: 5px;
   font-weight: 400;
@@ -256,7 +279,7 @@ a.hero-cta-alt:hover {
 }
 
 .dark .featurette,
-.dark .featurette h3 {
+.dark .featurette .section-subheading {
   color: #fff;
 }
 
@@ -586,3 +609,10 @@ ul.ul-edu li .description p.institution {
   height: 350px;
   width: 100%;
 }
+
+// Prevent OpenStreetMap inheriting link color from section of a different theme variation.
+// E.g. Light colored OpenStreetMap UI inheriting dark themed link (`.home-section.dark a`)
+// from a dark widget page section.
+#map a {
+  color: initial;
+}

wowchemy/data/fonts/minimal.toml

@@ -2,7 +2,7 @@
 name = "Minimal"
 
 # Optional Google font URL
-google_fonts = "Montserrat:400,700|Roboto:400,400italic,700|Roboto+Mono"
+google_fonts = "family=Montserrat:wght@400;700&family=Roboto+Mono&family=Roboto:wght@400;700"
 
 # Font families
 heading_font = "Montserrat"

wowchemy/data/themes/minimal.toml

@@ -5,7 +5,7 @@ name = "Minimal"
 light = true
 
 # Primary
-primary = "#2962ff"
+primary = "#1565c0"
 
 # Menu
 menu_primary = "#fff"
@@ -16,3 +16,7 @@ menu_title = "#2b2b2b"
 # Home sections
 home_section_odd = "rgb(255, 255, 255)"
 home_section_even = "rgb(247, 247, 247)"
+
+[dark]
+  link = "#bbdefb"
+  link_hover = "#bbdefb"

wowchemy/i18n/en.yaml

@@ -15,6 +15,9 @@
 - id: home
   translation: Home
 
+- id: close
+  translation: Close
+
 # General
 
 - id: related

wowchemy/layouts/partials/li_card.html

@@ -51,9 +51,9 @@
   </a>
   {{end}}
 
-  <h3 class="article-title mb-1 mt-3">
+  <div class="section-subheading article-title mb-1 mt-3">
     <a href="{{ $item.RelPermalink }}">{{ $item.Title }}</a>
-  </h3>
+  </div>
 
   {{ with $summary }}
   <a href="{{ $item.RelPermalink }}" class="summary-link">

wowchemy/layouts/partials/li_compact.html

@@ -33,9 +33,9 @@
 <div class="media stream-item">
   <div class="media-body">
 
-    <h3 class="article-title mb-0 mt-0">
+    <div class="section-subheading article-title mb-0 mt-0">
       <a href="{{$link}}" {{ $target | safeHTMLAttr }}>{{ $item.Title }}</a>
-    </h3>
+    </div>
 
     {{ with $summary }}
     <a href="{{ $link }}" {{ $target | safeHTMLAttr }} class="summary-link">

wowchemy/layouts/partials/page_links.html

@@ -10,7 +10,7 @@
   {{ else }}
     {{ $link = . | relURL }}
   {{ end }}
-<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ $link }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary btn-page-header{{ if $is_list }} btn-sm{{end}}" href="{{ $link }}" target="_blank" rel="noopener">
   {{ i18n "btn_preprint" }}
 </a>
 {{ end }}
@@ -25,16 +25,16 @@
 {{ end }}
 
 {{ with $pdf }}
-<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary btn-page-header{{ if $is_list }} btn-sm{{end}}" href="{{ . }}" target="_blank" rel="noopener">
   {{ i18n "btn_pdf" }}
 </a>
 {{ end }}
 {{ $resource := $page.Resources.GetMatch "cite.bib" }}
 {{ with $resource }}
-<button type="button" class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}} js-cite-modal"
+<a href="#" class="btn btn-outline-primary btn-page-header{{ if $is_list }} btn-sm{{end}} js-cite-modal"
         data-filename="{{ .RelPermalink }}">
   {{ i18n "btn_cite" }}
-</button>
+</a>
 {{ end }}
 {{ with $page.Params.url_code }}
   {{ $resource := $page.Resources.GetMatch . }}
@@ -43,7 +43,7 @@
   {{ else }}
     {{ $link = . | relURL }}
   {{ end }}
-<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ $link }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary btn-page-header{{ if $is_list }} btn-sm{{end}}" href="{{ $link }}" target="_blank" rel="noopener">
   {{ i18n "btn_code" }}
 </a>
 {{ end }}
@@ -54,14 +54,14 @@
   {{ else }}
     {{ $link = . | relURL }}
   {{ end }}
-<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ $link }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary btn-page-header{{ if $is_list }} btn-sm{{end}}" href="{{ $link }}" target="_blank" rel="noopener">
   {{ i18n "btn_dataset" }}
 </a>
 {{ end }}
 {{ if $page.Params.projects }}
 {{ range $page.Params.projects }}
   {{ with (site.GetPage (printf "project/%s" .)) }}
-  <a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ .RelPermalink }}">
+  <a class="btn btn-outline-primary btn-page-header{{ if $is_list }} btn-sm{{end}}" href="{{ .RelPermalink }}">
     {{ i18n "btn_project" }}
   </a>
   {{ else }}
@@ -70,7 +70,7 @@
 {{ end }}
 {{ else }}
 {{ with $page.Params.url_project }}
-<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary btn-page-header{{ if $is_list }} btn-sm{{end}}" href="{{ . }}" target="_blank" rel="noopener">
   {{ i18n "btn_project" }}
 </a>
 {{ end }}
@@ -82,13 +82,13 @@
   {{ else }}
     {{ $link = . | relURL }}
   {{ end }}
-<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ $link }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary btn-page-header{{ if $is_list }} btn-sm{{end}}" href="{{ $link }}" target="_blank" rel="noopener">
   {{ i18n "btn_poster" }}
 </a>
 {{ end }}
 {{ if $page.Params.slides }}
   {{ with (site.GetPage (printf "slides/%s" $page.Params.slides)) }}
-  <a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ .RelPermalink }}" target="_blank">
+  <a class="btn btn-outline-primary btn-page-header{{ if $is_list }} btn-sm{{end}}" href="{{ .RelPermalink }}" target="_blank">
     {{ i18n "btn_slides" }}
   </a>
   {{ end }}
@@ -100,7 +100,7 @@
   {{ else }}
     {{ $link = . | relURL }}
   {{ end }}
-<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ $link }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary btn-page-header{{ if $is_list }} btn-sm{{end}}" href="{{ $link }}" target="_blank" rel="noopener">
   {{ i18n "btn_slides" }}
 </a>
 {{ end }}
@@ -112,7 +112,7 @@
   {{ else }}
     {{ $link = . | relURL }}
   {{ end }}
-<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ $link }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary btn-page-header{{ if $is_list }} btn-sm{{end}}" href="{{ $link }}" target="_blank" rel="noopener">
   {{ i18n "btn_video" }}
 </a>
 {{ end }}
@@ -123,12 +123,12 @@
   {{ else }}
     {{ $link = . | relURL }}
   {{ end }}
-<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ $link }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary btn-page-header{{ if $is_list }} btn-sm{{end}}" href="{{ $link }}" target="_blank" rel="noopener">
   {{ i18n "btn_source" }}
 </a>
 {{ end }}
 {{ with $page.Params.doi }}
-<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="https://doi.org/{{ . }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary btn-page-header{{ if $is_list }} btn-sm{{end}}" href="https://doi.org/{{ . }}" target="_blank" rel="noopener">
   DOI
 </a>
 {{ end }}
@@ -151,7 +151,7 @@
   {{ else if in (slice "http" "https") $scheme }}
     {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
   {{ end }}
-  <a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }}>
+  <a class="btn btn-outline-primary btn-page-header{{ if $is_list }} btn-sm{{end}}" href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }}>
     {{ if .icon }}<i class="{{ $pack }} {{ $pack_prefix }}-{{ .icon }} {{if .name}}mr-1{{end}}"></i>{{end}}
     {{ with .name }}{{ . | safeHTML }}{{end}}
   </a>

wowchemy/layouts/partials/search.html

@@ -9,14 +9,15 @@
           <h1>{{ i18n "search" }}</h1>
         </div>
         <div class="col-6 col-search-close">
-          <a class="js-search" href="#"><i class="fas fa-times-circle text-muted" aria-hidden="true"></i></a>
+          <a class="js-search" href="#" aria-label="{{i18n "close" | default "Close"}}"><i class="fas fa-times-circle text-muted" aria-hidden="true"></i></a>
         </div>
       </div>
 
       <div id="search-box">
         {{ if eq site.Params.search.engine 1 }}
         <input name="q" id="search-query" placeholder="{{i18n "search_placeholder"}}" autocapitalize="off"
-        autocomplete="off" autocorrect="off" spellcheck="false" type="search" class="form-control">
+        autocomplete="off" autocorrect="off" spellcheck="false" type="search" class="form-control"
+        aria-label="{{i18n "search_placeholder"}}">
         {{ else }}
         <!-- Search box will appear here -->
         {{ end }}

wowchemy/layouts/partials/site_head.html

@@ -78,7 +78,7 @@
       {{ printf "<link rel=\"stylesheet\" href=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\">" (printf $css.academicons.url $css.academicons.version) $css.academicons.sri | safeHTML }}
     {{ end }}
     {{ printf "<link rel=\"stylesheet\" href=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\">" (printf $css.fontAwesome.url $css.fontAwesome.version) $css.fontAwesome.sri | safeHTML }}
-    {{ printf "<link rel=\"stylesheet\" href=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\">" (printf $css.fancybox.url $css.fancybox.version) $css.fancybox.sri | safeHTML }}
+    {{ printf "<link rel=\"stylesheet\" href=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" media=\"print\" onload=\"this.media='all'\">" (printf $css.fancybox.url $css.fancybox.version) $css.fancybox.sri | safeHTML }}
 
     {{/* Default to disabling highlighting, but allow the user to override it in .Params or site.Params.
          Use $scr to store "highlight_enabled", so that we can read it again in footer.html. */}}
@@ -91,21 +91,21 @@
     {{ if ($scr.Get "highlight_enabled") }}
       {{ $v := $css.highlight.version }}
       {{ with site.Params.highlight_style }}
-        {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-light\">" (printf $css.highlight.url $css.highlight.version .) | safeHTML }}
-        {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-dark\" disabled>" (printf $css.highlight.url $css.highlight.version .) | safeHTML }}
+        {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-light\" media=\"print\" onload=\"this.media='all'\">" (printf $css.highlight.url $css.highlight.version .) | safeHTML }}
+        {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-dark\" media=\"print\" onload=\"this.media='all'\" disabled>" (printf $css.highlight.url $css.highlight.version .) | safeHTML }}
       {{ else }}
         {{ if eq ($scr.Get "light") true }}
-          {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-light\">" (printf $css.highlight.url $css.highlight.version "github") | safeHTML }}
-          {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-dark\" disabled>" (printf $css.highlight.url $css.highlight.version "dracula") | safeHTML }}
+          {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-light\" media=\"print\" onload=\"this.media='all'\">" (printf $css.highlight.url $css.highlight.version "github") | safeHTML }}
+          {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-dark\" media=\"print\" onload=\"this.media='all'\" disabled>" (printf $css.highlight.url $css.highlight.version "dracula") | safeHTML }}
         {{ else }}
-          {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-light\" disabled>" (printf $css.highlight.url $css.highlight.version "github") | safeHTML }}
-          {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-dark\">" (printf $css.highlight.url $css.highlight.version "dracula") | safeHTML }}
+          {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-light\" media=\"print\" onload=\"this.media='all'\" disabled>" (printf $css.highlight.url $css.highlight.version "github") | safeHTML }}
+          {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-dark\" media=\"print\" onload=\"this.media='all'\">" (printf $css.highlight.url $css.highlight.version "dracula") | safeHTML }}
         {{ end }}
       {{ end }}
     {{ end }}
 
     {{ if or (eq site.Params.map.engine 2) (eq site.Params.map.engine 3) }}
-    {{ printf "<link rel=\"stylesheet\" href=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\">" (printf $css.leaflet.url $css.leaflet.version) $css.leaflet.sri | safeHTML }}
+    {{ printf "<link rel=\"stylesheet\" href=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" media=\"print\" onload=\"this.media='all'\">" (printf $css.leaflet.url $css.leaflet.version) $css.leaflet.sri | safeHTML }}
     {{ end }}
 
     {{ if eq site.Params.search.engine 2 }}
@@ -134,11 +134,13 @@
   {{ with ($scr.Get "google_fonts") }}
     {{ if hasPrefix . "family=" }}
       {{/* If `google_fonts` starts with "family=", use API v2 (https://developers.google.com/fonts/docs/css2) */}}
-      <link rel="stylesheet" {{ printf "href=\"https://fonts.googleapis.com/css2?%s&display=swap\"" . | safeHTMLAttr }}>
+      <link rel="preload" as="style" {{ printf "href=\"https://fonts.googleapis.com/css2?%s&display=swap\"" . | safeHTMLAttr }}>
+      <link rel="stylesheet" {{ printf "href=\"https://fonts.googleapis.com/css2?%s&display=swap\"" . | safeHTMLAttr }} media="print" onload="this.media='all'">
     {{ else }}
       {{/* Otherwise, use API v1 */}}
       {{/* Hugo's htmlEscape cannot escape "|" in Google Font URIs so we implement our own escape functionality. */}}
       <link rel="stylesheet" {{ printf "href=\"https://fonts.googleapis.com/css?family=%s&display=swap\"" . | replaceRE "\\|" "%7C" | safeHTMLAttr }}>
+      {{ warnf "There is a new version of Google Fonts. Learn how to upgrade your font pack at https://wowchemy.com/docs/customization/#custom-font" }}
     {{ end }}
   {{ end }}
 

wowchemy/layouts/partials/widget_page.html

@@ -39,13 +39,9 @@
   {{ end }}
 
   {{ if $bg.image }}
-    {{ $darken := "" }}
-    {{ if $bg.image_darken }}
-      {{ $darken = printf "linear-gradient(rgba(0, 0, 0, %s), rgba(0, 0, 0, %s))," (string $bg.image_darken) (string $bg.image_darken) }}
-    {{ end }}
     {{/* See Hugo note on linking assets in styles: https://github.com/gohugoio/hugoThemes#common-permalink-issues */}}
     {{ $media_dir := $.Scratch.Get "media_dir" }}
-    {{ $style_bg = printf "%sbackground-image: %s url('%s');" $style_bg $darken (printf "%s/%s" $media_dir $bg.image | absURL) }}
+    {{ $style_bg = printf "%sbackground-image: url('%s');" $style_bg (printf "%s/%s" $media_dir $bg.image | absURL) }}
     {{ with $bg.image_size }}
       {{/* Allow sizes: actual, cover, and contain. */}}
       {{ $style_bg = printf "%sbackground-size: %s;" $style_bg (replace . "actual" "auto") }}
@@ -56,6 +52,10 @@
     {{ end }}
   {{ end }}
 
+  {{ if $bg.image_darken }}
+    {{ $style_bg = printf "%sfilter: brightness(%s);" $style_bg (string $bg.image_darken) }}
+  {{ end }}
+
   {{ with $st.Params.design.spacing.padding }}
     {{ $style_pad := printf "padding: %s;" (delimit . " ") }}
     {{ $style = print $style $style_pad }}
@@ -103,7 +103,7 @@
   {{ $use_cols := in (slice "pages" "featured" "experience" "accomplishments" "contact" "blank" "tag_cloud" "portfolio") $widget }}
 
   {{/* Dedicated child div for bg prevents parallax 100% height issue within new CSS grid page wrapper. */}}
-  <section id="{{$hash_id}}" class="home-section {{$widget_class}} {{if $bg.text_color_light}}dark{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}} {{print $extra_attributes | safeHTMLAttr}}>
+  <section id="{{$hash_id}}" class="home-section {{$widget_class}} {{if $bg.text_color_light}}dark{{else if (eq $bg.text_color_light false)}}light{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}} {{print $extra_attributes | safeHTMLAttr}}>
    <div class="home-section-bg {{if $bg.image}} bg-image{{if ($bg.image_parallax | default true) }} parallax{{end}}{{end}}" {{with $style_bg}}style="{{. | safeCSS}}"{{end}}></div>
     {{if $use_container}}<div class="container">{{end}}
 

wowchemy/layouts/partials/widgets/about.html

@@ -80,7 +80,7 @@
 
       {{ with $person.interests }}
       <div class="col-md-5">
-        <h3>{{ i18n "interests" | markdownify }}</h3>
+        <div class="section-subheading">{{ i18n "interests" | markdownify }}</div>
         <ul class="ul-interests">
           {{ range . }}
           <li>{{ . | markdownify | emojify }}</li>
@@ -91,7 +91,7 @@
 
       {{ with $person.education }}
       <div class="col-md-7">
-        <h3>{{ i18n "education" | markdownify }}</h3>
+        <div class="section-subheading">{{ i18n "education" | markdownify }}</div>
         <ul class="ul-edu fa-ul">
           {{ range .courses }}
           <li>

wowchemy/layouts/partials/widgets/accomplishments.html

@@ -11,7 +11,7 @@
     <div class="card experience course">
       <div class="card-body">
         {{- with .url -}}<a href="{{.}}" target="_blank" rel="noopener">{{- end -}}
-        <h4 class="card-title exp-title text-muted my-0">{{.title | markdownify | emojify}}</h4>
+        <div class="section-subheading card-title exp-title text-muted my-0">{{.title | markdownify | emojify}}</div>
         {{- with .url -}}</a>{{- end -}}
 
         <div class="card-subtitle my-0 article-metadata">

wowchemy/layouts/partials/widgets/experience.html

@@ -28,10 +28,10 @@
     <div class="col py-2">
       <div class="card">
         <div class="card-body">
-          <h4 class="card-title exp-title text-muted mt-0 mb-1">{{.title | markdownify | emojify}}</h4>
-          <h4 class="card-title exp-company text-muted my-0">
+          <div class="section-subheading card-title exp-title text-muted mt-0 mb-1">{{.title | markdownify | emojify}}</div>
+          <div class="section-subheading card-title exp-company text-muted my-0">
             {{- with .company_url}}<a href="{{.}}" target="_blank" rel="noopener">{{end}}{{.company | markdownify | emojify}}{{with .company_url}}</a>{{end -}}
-          </h4>
+          </div>
           <div class="text-muted exp-meta">
             {{ (time .date_start).Format ($page.Params.date_format | default "January 2006") }} –
             {{ if .date_end}}

wowchemy/layouts/partials/widgets/featurette.html

@@ -34,7 +34,7 @@
       {{- end -}}
     </div>
     {{ end }}
-    <h3>{{ .name | markdownify | emojify }}</h3>
+    <div class="section-subheading">{{ .name | markdownify | emojify }}</div>
     {{ with .description }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
   </div>
   {{ end }}

wowchemy/layouts/partials/widgets/hero.html

@@ -31,7 +31,7 @@
         {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
       {{ end }}
     <p class="cta-btns">
-      <a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }} class="btn {{if $bg.text_color_light}}btn-light{{else}}btn-primary{{end}} btn-lg">{{ if $page.Params.cta.icon }}<i class="{{ $pack }} {{ $pack_prefix }}-{{ $page.Params.cta.icon }} pr-1" aria-hidden="true"></i>{{end}}{{ $page.Params.cta.label | markdownify | emojify | safeHTML }}</a>
+      <a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }} class="btn {{if $bg.text_color_light}}btn-light{{else}}btn-primary{{end}} btn-lg mb-3 mb-md-1">{{ if $page.Params.cta.icon }}<i class="{{ $pack }} {{ $pack_prefix }}-{{ $page.Params.cta.icon }} pr-1" aria-hidden="true"></i>{{end}}{{ $page.Params.cta.label | markdownify | emojify | safeHTML }}</a>
 
       {{/* Alternative Call-to-action link */}}
       {{ if $page.Params.cta_alt.url }}
@@ -43,24 +43,43 @@
         {{ else if in (slice "http" "https") $scheme }}
           {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
         {{ end }}
-      <a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }} class="hero-cta-alt pl-4">{{ $page.Params.cta_alt.label | markdownify | emojify | safeHTML }} <i class="fas fa-angle-right"></i></a>
+      <a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }} class="hero-cta-alt btn-lg pl-md-4">{{ $page.Params.cta_alt.label | markdownify | emojify | safeHTML }} <i class="fas fa-angle-right"></i></a>
       {{ end }}
     </p>
     {{ end }}
 
     {{/* Call-to-action note */}}
     {{ with $page.Params.cta_note }}
-    <p class="hero-note text-muted mb-0">
+    <p class="hero-note text-muted mb-3 mb-md-1">
       {{ .label | markdownify | emojify | safeHTML }}
     </p>
     {{ end }}
 
   {{/* Hero image */}}
   {{ if $page.Params.hero_media }}
-    {{ $media_dir := $.Scratch.Get "media_dir" }}
   </div>
   <div class="col-12 mx-auto col-md-6 order-md-2 hero-media">
-    <img src="{{ printf "%s/%s" $media_dir $page.Params.hero_media | relURL }}" alt="">
+    {{ $image := $page.Parent.Resources.GetMatch $page.Params.hero_media }}
+    {{ if $image }}
+      {{ $legacy_img := $image.Resize "400x" }}
+      {{ $img_src := "" }}
+      {{ $img_src_set := slice }}
+      {{ $widths := slice 1200 800 400 }}
+
+      {{ range $widths }}
+        {{ $src_link := ($image.Resize (printf "%dx" .)).RelPermalink }}
+        {{ if eq $img_src "" }}
+          {{ $img_src = $src_link }}
+        {{ end }}
+        {{ $img_src_set = $img_src_set | append (printf "%s %dw" $src_link .) }}
+      {{ end }}
+      {{ $img_src_set = delimit $img_src_set "," }}
+
+      <img src="{{ $legacy_img.RelPermalink }}" srcset="{{ $img_src_set }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $page.Title }}">
+    {{ else }}
+      {{ $media_dir := $.Scratch.Get "media_dir" }}
+      <img src="{{ printf "%s/%s" $media_dir $page.Params.hero_media | relURL }}" alt="{{ $page.Title }}">
+    {{ end }}
   </div>
 </div>
 {{ end }}