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