From a61040ac23ccc5a7f20cef5adee36277a28f6e43 Mon Sep 17 00:00:00 2001 From: Nick Lee Date: Thu, 3 Aug 2023 09:47:27 +0100 Subject: [PATCH 1/4] Adding new wagtail.org logo --- apps/core/templates/base.html | 3 +++ apps/core/templates/components/header.html | 10 ++++----- apps/core/templates/includes/svg_sprites.html | 21 +++++++++++++++++++ .../static_src/scss/components/header.scss | 19 +++++++---------- 4 files changed, 37 insertions(+), 16 deletions(-) create mode 100644 apps/core/templates/includes/svg_sprites.html 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/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; } } From 910bf5312202dd80b31ebe8ff6dc28f8c1715d06 Mon Sep 17 00:00:00 2001 From: Nick Lee Date: Thu, 3 Aug 2023 12:23:29 +0100 Subject: [PATCH 2/4] adding wagtail logo styling --- .../static_src/scss/components/wagtail-logo.scss | 9 +++++++++ apps/frontend/static_src/scss/main.scss | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 apps/frontend/static_src/scss/components/wagtail-logo.scss 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'; From bf553bd3d2338719b57f825ad57be00839f405e9 Mon Sep 17 00:00:00 2001 From: Nick Lee Date: Thu, 3 Aug 2023 16:53:17 +0100 Subject: [PATCH 3/4] move high contrast border into media query --- apps/frontend/static_src/scss/components/footer.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/apps/frontend/static_src/scss/components/footer.scss b/apps/frontend/static_src/scss/components/footer.scss index 0efab339..eee26155 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 (prefers-contrast: more) { + // For High-contrast mode users + border-top: 1px solid $color--blue; + } + &__container { @include grid-layout(); } From 07fe31c0ccdedf2bfdf06c485f74c0af0558062e Mon Sep 17 00:00:00 2001 From: Nick Lee Date: Thu, 3 Aug 2023 16:57:18 +0100 Subject: [PATCH 4/4] prefers-contrast: more > forced-colors: active --- apps/frontend/static_src/scss/components/footer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/frontend/static_src/scss/components/footer.scss b/apps/frontend/static_src/scss/components/footer.scss index eee26155..9359e8df 100644 --- a/apps/frontend/static_src/scss/components/footer.scss +++ b/apps/frontend/static_src/scss/components/footer.scss @@ -3,7 +3,7 @@ padding: ($gutter * 2) 0 ($gutter * 3); color: $color--white; - @media (prefers-contrast: more) { + @media (forced-colors: active) { // For High-contrast mode users border-top: 1px solid $color--blue; }