diff --git a/apps/core/templates/base.html b/apps/core/templates/base.html index 2618e004..5718ff14 100644 --- a/apps/core/templates/base.html +++ b/apps/core/templates/base.html @@ -59,6 +59,9 @@ {# Global stylesheets #} + {# Global iconography #} + {% include "patterns/includes/svg_sprites.html" %} + {% block extra_css %} {# Override this in templates to add extra stylesheets #} {% endblock %} diff --git a/apps/core/templates/components/header.html b/apps/core/templates/components/header.html index d9410323..3198836c 100644 --- a/apps/core/templates/components/header.html +++ b/apps/core/templates/components/header.html @@ -7,11 +7,11 @@
{% get_current_language as LANGUAGE_CODE %} -
diff --git a/apps/core/templates/includes/svg_sprites.html b/apps/core/templates/includes/svg_sprites.html new file mode 100644 index 00000000..6b61411d --- /dev/null +++ b/apps/core/templates/includes/svg_sprites.html @@ -0,0 +1,21 @@ + + + + + diff --git a/apps/frontend/static_src/scss/components/footer.scss b/apps/frontend/static_src/scss/components/footer.scss index 0efab339..9359e8df 100644 --- a/apps/frontend/static_src/scss/components/footer.scss +++ b/apps/frontend/static_src/scss/components/footer.scss @@ -1,10 +1,13 @@ .footer { background-color: $color--blue; - // For High-contrast mode users - border-top: 1px solid $color--blue; padding: ($gutter * 2) 0 ($gutter * 3); color: $color--white; + @media (forced-colors: active) { + // For High-contrast mode users + border-top: 1px solid $color--blue; + } + &__container { @include grid-layout(); } diff --git a/apps/frontend/static_src/scss/components/header.scss b/apps/frontend/static_src/scss/components/header.scss index 31f36588..4d828a32 100644 --- a/apps/frontend/static_src/scss/components/header.scss +++ b/apps/frontend/static_src/scss/components/header.scss @@ -44,13 +44,12 @@ } } - &__logo { - .light { - fill: $color--white; - } + &__logo-link { + width: 100%; + height: 100%; - .dark { - fill: $color--black; + &--dark { + display: none; } } @@ -153,12 +152,10 @@ .theme-dark & { #{$root}__logo { - .light { - fill: $color--black; - } + display: none; - .dark { - fill: $color--white; + &--dark { + display: block; } } diff --git a/apps/frontend/static_src/scss/components/wagtail-logo.scss b/apps/frontend/static_src/scss/components/wagtail-logo.scss new file mode 100644 index 00000000..9e9a8185 --- /dev/null +++ b/apps/frontend/static_src/scss/components/wagtail-logo.scss @@ -0,0 +1,9 @@ +.wagtail-logo { + &__dark { + fill: $color--black; + } + + &__light { + fill: $color--white; + } +} diff --git a/apps/frontend/static_src/scss/main.scss b/apps/frontend/static_src/scss/main.scss index 2df027cd..01499d81 100644 --- a/apps/frontend/static_src/scss/main.scss +++ b/apps/frontend/static_src/scss/main.scss @@ -43,5 +43,5 @@ @import './components/streamfield'; @import './components/toc'; @import './components/theme-toggle'; - +@import './components/wagtail-logo'; @import './utilities';