From 4b9ee3021cb4b9c085d318692ff71478b5d6abb5 Mon Sep 17 00:00:00 2001 From: George Cushen Date: Wed, 6 Jan 2021 21:55:05 +0000 Subject: [PATCH] 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 | 4 +-- wowchemy/assets/scss/wowchemy/_card.scss | 6 ++-- wowchemy/assets/scss/wowchemy/_dark.scss | 2 +- wowchemy/assets/scss/wowchemy/_root.scss | 19 +++++++++-- wowchemy/assets/scss/wowchemy/_widgets.scss | 34 +++++++++++++++++-- wowchemy/data/fonts/minimal.toml | 2 +- wowchemy/data/themes/minimal.toml | 6 +++- wowchemy/i18n/en.yaml | 3 ++ wowchemy/layouts/partials/li_card.html | 4 +-- wowchemy/layouts/partials/li_compact.html | 4 +-- wowchemy/layouts/partials/page_links.html | 30 ++++++++-------- wowchemy/layouts/partials/search.html | 5 +-- wowchemy/layouts/partials/site_head.html | 20 ++++++----- wowchemy/layouts/partials/widget_page.html | 12 +++---- wowchemy/layouts/partials/widgets/about.html | 4 +-- .../partials/widgets/accomplishments.html | 2 +- .../layouts/partials/widgets/experience.html | 6 ++-- .../layouts/partials/widgets/featurette.html | 2 +- wowchemy/layouts/partials/widgets/hero.html | 29 +++++++++++++--- 19 files changed, 134 insertions(+), 60 deletions(-) diff --git a/wowchemy/assets/scss/wowchemy/_callouts.scss b/wowchemy/assets/scss/wowchemy/_callouts.scss index c229003c..bada8b43 100644 --- a/wowchemy/assets/scss/wowchemy/_callouts.scss +++ b/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 { diff --git a/wowchemy/assets/scss/wowchemy/_card.scss b/wowchemy/assets/scss/wowchemy/_card.scss index 99125397..6ef62078 100644 --- a/wowchemy/assets/scss/wowchemy/_card.scss +++ b/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; diff --git a/wowchemy/assets/scss/wowchemy/_dark.scss b/wowchemy/assets/scss/wowchemy/_dark.scss index 374ff6ff..c78eef5d 100644 --- a/wowchemy/assets/scss/wowchemy/_dark.scss +++ b/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; } diff --git a/wowchemy/assets/scss/wowchemy/_root.scss b/wowchemy/assets/scss/wowchemy/_root.scss index 3eff9e8e..3b018923 100644 --- a/wowchemy/assets/scss/wowchemy/_root.scss +++ b/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 **************************************************/ diff --git a/wowchemy/assets/scss/wowchemy/_widgets.scss b/wowchemy/assets/scss/wowchemy/_widgets.scss index f8ba7bdc..acfa8bf9 100644 --- a/wowchemy/assets/scss/wowchemy/_widgets.scss +++ b/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; +} diff --git a/wowchemy/data/fonts/minimal.toml b/wowchemy/data/fonts/minimal.toml index 171d9539..54e515c5 100644 --- a/wowchemy/data/fonts/minimal.toml +++ b/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" diff --git a/wowchemy/data/themes/minimal.toml b/wowchemy/data/themes/minimal.toml index fcf13b48..46c7d570 100644 --- a/wowchemy/data/themes/minimal.toml +++ b/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" diff --git a/wowchemy/i18n/en.yaml b/wowchemy/i18n/en.yaml index 05d8010f..a3055c40 100644 --- a/wowchemy/i18n/en.yaml +++ b/wowchemy/i18n/en.yaml @@ -15,6 +15,9 @@ - id: home translation: Home +- id: close + translation: Close + # General - id: related diff --git a/wowchemy/layouts/partials/li_card.html b/wowchemy/layouts/partials/li_card.html index f6795c63..d58b1ba0 100644 --- a/wowchemy/layouts/partials/li_card.html +++ b/wowchemy/layouts/partials/li_card.html @@ -51,9 +51,9 @@ {{end}} -

+
{{ $item.Title }} -

+ {{ with $summary }} diff --git a/wowchemy/layouts/partials/li_compact.html b/wowchemy/layouts/partials/li_compact.html index cbd8f49a..2bd2b058 100644 --- a/wowchemy/layouts/partials/li_compact.html +++ b/wowchemy/layouts/partials/li_compact.html @@ -33,9 +33,9 @@
-

+
{{ $item.Title }} -

+
{{ with $summary }} diff --git a/wowchemy/layouts/partials/page_links.html b/wowchemy/layouts/partials/page_links.html index 4e88aa4f..a9bfadc4 100644 --- a/wowchemy/layouts/partials/page_links.html +++ b/wowchemy/layouts/partials/page_links.html @@ -10,7 +10,7 @@ {{ else }} {{ $link = . | relURL }} {{ end }} - + {{ i18n "btn_preprint" }} {{ end }} @@ -25,16 +25,16 @@ {{ end }} {{ with $pdf }} - + {{ i18n "btn_pdf" }} {{ end }} {{ $resource := $page.Resources.GetMatch "cite.bib" }} {{ with $resource }} - + {{ end }} {{ with $page.Params.url_code }} {{ $resource := $page.Resources.GetMatch . }} @@ -43,7 +43,7 @@ {{ else }} {{ $link = . | relURL }} {{ end }} - + {{ i18n "btn_code" }} {{ end }} @@ -54,14 +54,14 @@ {{ else }} {{ $link = . | relURL }} {{ end }} - + {{ i18n "btn_dataset" }} {{ end }} {{ if $page.Params.projects }} {{ range $page.Params.projects }} {{ with (site.GetPage (printf "project/%s" .)) }} - + {{ i18n "btn_project" }} {{ else }} @@ -70,7 +70,7 @@ {{ end }} {{ else }} {{ with $page.Params.url_project }} - + {{ i18n "btn_project" }} {{ end }} @@ -82,13 +82,13 @@ {{ else }} {{ $link = . | relURL }} {{ end }} - + {{ i18n "btn_poster" }} {{ end }} {{ if $page.Params.slides }} {{ with (site.GetPage (printf "slides/%s" $page.Params.slides)) }} - + {{ i18n "btn_slides" }} {{ end }} @@ -100,7 +100,7 @@ {{ else }} {{ $link = . | relURL }} {{ end }} - + {{ i18n "btn_slides" }} {{ end }} @@ -112,7 +112,7 @@ {{ else }} {{ $link = . | relURL }} {{ end }} - + {{ i18n "btn_video" }} {{ end }} @@ -123,12 +123,12 @@ {{ else }} {{ $link = . | relURL }} {{ end }} - + {{ i18n "btn_source" }} {{ end }} {{ with $page.Params.doi }} - + DOI {{ end }} @@ -151,7 +151,7 @@ {{ else if in (slice "http" "https") $scheme }} {{ $target = "target=\"_blank\" rel=\"noopener\"" }} {{ end }} - + {{ if .icon }}{{end}} {{ with .name }}{{ . | safeHTML }}{{end}} diff --git a/wowchemy/layouts/partials/search.html b/wowchemy/layouts/partials/search.html index d88a910c..df77280c 100644 --- a/wowchemy/layouts/partials/search.html +++ b/wowchemy/layouts/partials/search.html @@ -9,14 +9,15 @@

{{ i18n "search" }}

- +