Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Feature/logo update #319

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

[WIP] Feature/logo update #319

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a61040a
Adding new wagtail.org logo
nicklee Aug 3, 2023
910bf53
adding wagtail logo styling
nicklee Aug 3, 2023
bf553bd
move high contrast border into media query
nicklee Aug 3, 2023
07fe31c
prefers-contrast: more > forced-colors: active
nicklee Aug 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions apps/core/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,9 @@
{# Global stylesheets #}
<link rel="stylesheet" href="{% manifest 'main.css' %}">

{# Global iconography #}
{% include "patterns/includes/svg_sprites.html" %}

{% block extra_css %}
{# Override this in templates to add extra stylesheets #}
{% endblock %}
Expand Down
10 changes: 5 additions & 5 deletions apps/core/templates/components/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@
<div class="header__identity">
{% get_current_language as LANGUAGE_CODE %}
<a class="header__logo-link" href="/{{ LANGUAGE_CODE }}/" aria-label="{{ site_title }}">
<svg class="header__logo" width="153" height="65" viewBox="0 0 153 65" aria-hidden="true">
<path class="light" d="M36.862 10.04s-4.18-1.261-5.975 0c-2.643 1.858 1.168.815-1.681 4.409-2.072 2.604-2.044 5.324-.713 8.858 10.201-.858 12.278 4.848 12.278 4.848l-1.58-6.623 2.889-4.278c-.381-4.731-4.396-7.04-5.218-7.214Z"/>
<path class="dark" d="m29.786 24.705.829-1.431c-1.502-1.166-2.538-2.969-2.538-5.09 0-3.498 2.745-6.307 6.163-6.307.88 0 1.657.159 2.382.477.363-.53.725-1.166 1.088-1.961-1.502-1.007-3.315-1.538-5.23-1.538-5.387 0-9.789 4.453-9.789 10.019 0 5.513 4.35 10.019 9.788 10.019 1.606 0 2.33-.425 2.538-1.114l-5.23-3.074ZM42.06 17.284l-2.434 3.71h6.577l-4.143-3.71ZM38.124 17.602c.687 0 1.243-.57 1.243-1.272 0-.703-.556-1.272-1.243-1.272-.686 0-1.243.57-1.243 1.272 0 .702.557 1.272 1.243 1.272Z"/>
<path class="light" stroke="#000" d="M33.036 26.391c-1.043 1.896-3.176 5.806-3.362 6.28L14.951 46.889l15.883-2.607 6.956-13.389-4.754-4.502Z"/>
<path class="dark" d="M41.697 30.642c0-5.407-4.298-9.86-9.632-9.86-2.02 0-3.936.636-5.49 1.75l-2.589-8.535L4.41 48.505l5.697-1.484L.112 64.78l8.441-2.862 3.211-11.026c3.263.159 26.05.689 29.675-18.235v-.053c.051-.371.155-.742.207-1.113h-.052c.052-.318.103-.583.103-.848Zm-21.75 13.464.414-.318C33.153 39.97 33.722 30.96 33.722 30.96l2.175-.742c-2.175 11.608-15.95 13.888-15.95 13.888ZM57.91 45.257h-3.875l-5.55-16.006h3.48l3.964 12.092 3.964-12.093h3.48l3.963 12.093L71.3 29.25h3.48l-5.418 16.007h-3.876l-3.788-10.95-3.787 10.95ZM90.106 45.256h-3.083v-2.154c-1.321 1.583-3.083 2.374-5.33 2.374-1.673 0-3.038-.484-4.14-1.407-1.1-.923-1.629-2.199-1.629-3.782 0-1.583.573-2.77 1.762-3.517 1.145-.792 2.73-1.188 4.712-1.188h4.36v-.615c0-2.111-1.188-3.21-3.567-3.21-1.497 0-3.039.527-4.624 1.627l-1.498-2.111c1.938-1.54 4.14-2.33 6.65-2.33 1.895 0 3.436.483 4.625 1.406 1.19.968 1.806 2.463 1.806 4.486v10.421h-.044Zm-3.391-5.98v-1.363h-3.788c-2.422 0-3.656.747-3.656 2.286 0 .792.309 1.364.925 1.803.617.396 1.454.616 2.51.616 1.058 0 2.027-.308 2.82-.924.792-.571 1.189-1.363 1.189-2.418ZM108.427 29.25v13.94c0 2.814-.748 4.968-2.29 6.376-1.541 1.407-3.523 2.11-5.902 2.11-2.422 0-4.58-.747-6.518-2.242l1.586-2.55c1.585 1.187 3.127 1.758 4.756 1.758 1.586 0 2.863-.396 3.788-1.231.925-.836 1.409-2.155 1.409-3.958v-2.066a5.564 5.564 0 0 1-2.158 2.242c-.925.572-1.982.836-3.127.836-2.114 0-3.876-.748-5.24-2.243-1.366-1.495-2.07-3.342-2.07-5.54 0-2.199.704-4.046 2.07-5.541 1.365-1.495 3.126-2.243 5.24-2.243 2.114 0 3.832.88 5.153 2.639v-2.375h3.303v.088Zm-12.508 7.388c0 1.319.397 2.462 1.234 3.386.792.967 1.893 1.407 3.303 1.407 1.365 0 2.51-.44 3.347-1.363.837-.924 1.277-2.067 1.277-3.43s-.44-2.55-1.277-3.474c-.881-.968-1.982-1.407-3.347-1.407-1.366 0-2.467.483-3.26 1.495-.88.923-1.277 2.066-1.277 3.386ZM116.883 31.933v8.135c0 .747.221 1.363.617 1.802.396.44.969.66 1.674.66.704 0 1.409-.352 2.07-1.055l1.365 2.374c-1.189 1.056-2.51 1.583-3.92 1.583-1.453 0-2.642-.483-3.655-1.495-1.013-1.011-1.542-2.33-1.542-4.001v-8.003h-2.026v-2.727h2.026v-4.969h3.391v5.013h4.229v2.727h-4.229v-.044ZM138.288 45.256h-3.083v-2.154c-1.321 1.583-3.083 2.374-5.329 2.374-1.674 0-3.039-.484-4.14-1.407-1.101-.923-1.63-2.199-1.63-3.782 0-1.583.573-2.77 1.762-3.517 1.145-.792 2.731-1.188 4.713-1.188h4.36v-.615c0-2.111-1.189-3.21-3.568-3.21-1.497 0-3.038.527-4.624 1.627l-1.497-2.111c1.937-1.54 4.14-2.33 6.65-2.33 1.894 0 3.435.483 4.624 1.406 1.19.968 1.806 2.463 1.806 4.486v10.421h-.044Zm-3.391-5.98v-1.363h-3.788c-2.422 0-3.655.747-3.655 2.286 0 .792.308 1.364.925 1.803.616.396 1.453.616 2.51.616 1.057 0 2.026-.308 2.819-.924.792-.571 1.189-1.363 1.189-2.418ZM142.604 26.04a1.992 1.992 0 0 1-.616-1.495c0-.571.22-1.1.616-1.495.441-.44.925-.615 1.498-.615.572 0 1.101.22 1.497.615.441.44.617.924.617 1.495 0 .572-.22 1.1-.617 1.495a2.098 2.098 0 0 1-1.497.616c-.573.044-1.057-.176-1.498-.616Zm3.171 19.216h-3.391V29.25h3.391v16.006ZM152.822 45.257h-3.391V22.919h3.391v22.338Z"/>
<svg class="header__logo header__logo--dark" aria-hidden="true">
<use xlink:href="#wagtail-dark" />
</svg>
<svg class="header__logo header__logo--light" aria-hidden="true">
<use xlink:href="#wagtail-light" />
</svg>
</a>
<div class="header__actions">
Expand Down
21 changes: 21 additions & 0 deletions apps/core/templates/includes/svg_sprites.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="wagtail-dark" class="wagtail-logo wagtail-logo--dark" viewBox="0 0 150 64">
<ellipse class="wagtail-logo__light" cx="31.46" cy="21.49" fill="#fff" opacity=".1" rx="20.99" ry="20.88"/>
<path class="wagtail-logo__light" fill="#fff" d="M39.23 24.51a9.37 9.37 0 0 0-10.9-3.7 6.06 6.06 0 0 1-.81-3.05 6.06 6.06 0 0 1 8.35-5.66c.36-.51.7-1.12 1.06-1.89a8.6 8.6 0 0 1 4.28 6.65L38.4 21l.84 3.5Z"/>
<path class="wagtail-logo__dark" fill="#000" d="m9.9 45.78 1.75 3.66-.35-6.1-1.4 2.44Z"/>
<path class="wagtail-logo__dark "fill="#000" d="m4.37 47.2 18.7-32.73a9.57 9.57 0 0 1 8.75-5.77c1.88 0 3.65.52 5.12 1.5-.36.77-.71 1.38-1.07 1.9a6.06 6.06 0 0 0-8.36 5.66c0 1.12.3 2.15.82 3.04a9.36 9.36 0 0 1 3.09-.52 9.51 9.51 0 0 1 9.42 9.57c0 .22-.04.44-.08.7l-.02.13h.05l-.1.54c-.04.18-.08.36-.1.54v.05c-3.53 18.26-25.55 17.87-28.96 17.7l.02-.07-.35-6.1-1.38 2.43-5.55 1.43Z"/>
<path class="wagtail-logo__light" fill="#fff" d="m19.97 42.62-.4.3s13.47-2.2 15.6-13.48l-2.13.72s-.56 8.75-13.07 12.46Z"/>
<path class="wagtail-logo__dark" fill="#000" d="M37.34 17.2c.67 0 1.22-.56 1.22-1.24 0-.68-.55-1.24-1.22-1.24-.67 0-1.21.56-1.21 1.24 0 .68.54 1.23 1.21 1.23ZM41.2 16.88l-2.39 3.6h6.43l-4.05-3.6ZM11.3 43.34.06 63.04l8.43-2.79 3.16-10.8-.35-6.11Z"/>
<path class="wagtail-logo__light" fill="#fff" d="M56.57 43.86h-3.78l-5.4-15.5h3.39l3.86 11.71 3.86-11.72h3.39l3.86 11.72 3.86-11.72H73l-5.28 15.51h-3.77l-3.7-10.6-3.68 10.6ZM87.92 43.86h-3v-2.08a6.4 6.4 0 0 1-5.2 2.3 6.06 6.06 0 0 1-4.02-1.37 4.52 4.52 0 0 1-1.59-3.66c0-1.54.56-2.69 1.72-3.41 1.11-.77 2.66-1.15 4.59-1.15h4.24v-.6c0-2.05-1.16-3.11-3.47-3.11-1.46 0-2.96.51-4.5 1.58l-1.46-2.05a10.15 10.15 0 0 1 6.47-2.26c1.85 0 3.35.47 4.5 1.37 1.16.93 1.76 2.38 1.76 4.34v10.1h-.04Zm-3.3-5.8v-1.31h-3.69c-2.36 0-3.56.72-3.56 2.21a2 2 0 0 0 .9 1.75c.6.38 1.42.6 2.45.6 1.02 0 1.97-.3 2.74-.9a2.7 2.7 0 0 0 1.16-2.34ZM105.76 28.35v13.51c0 2.73-.73 4.82-2.23 6.18a8.24 8.24 0 0 1-5.74 2.05c-2.36 0-4.46-.73-6.35-2.18l1.54-2.47a7.6 7.6 0 0 0 4.63 1.7c1.55 0 2.8-.38 3.7-1.19.9-.8 1.37-2.09 1.37-3.83v-2a5.71 5.71 0 0 1-5.15 2.98 6.64 6.64 0 0 1-5.1-2.18 7.66 7.66 0 0 1-2.02-5.37c0-2.13.69-3.92 2.01-5.37a6.64 6.64 0 0 1 5.1-2.17 6 6 0 0 1 5.03 2.56v-2.3h3.21v.08Zm-12.18 7.16a4.7 4.7 0 0 0 1.2 3.28c.78.94 1.85 1.37 3.22 1.37 1.33 0 2.44-.43 3.26-1.33.81-.9 1.24-2 1.24-3.32 0-1.32-.42-2.47-1.24-3.37A4.17 4.17 0 0 0 98 30.78c-1.33 0-2.4.47-3.17 1.45-.86.9-1.25 2-1.25 3.28ZM114 30.95v7.88c0 .73.21 1.33.6 1.75.39.43.94.64 1.63.64s1.37-.34 2.02-1.02l1.33 2.3a5.67 5.67 0 0 1-3.82 1.53 4.8 4.8 0 0 1-3.56-1.45 5.22 5.22 0 0 1-1.5-3.87v-7.76h-1.98v-2.64h1.98v-4.82h3.3v4.86h4.12v2.64H114v-.04ZM134.84 43.86h-3v-2.08a6.4 6.4 0 0 1-5.19 2.3 6.06 6.06 0 0 1-4.03-1.37 4.52 4.52 0 0 1-1.59-3.66c0-1.54.56-2.69 1.72-3.41 1.11-.77 2.66-1.15 4.59-1.15h4.24v-.6c0-2.05-1.15-3.11-3.47-3.11-1.46 0-2.96.51-4.5 1.58l-1.46-2.05a10.15 10.15 0 0 1 6.47-2.26c1.85 0 3.35.47 4.5 1.37 1.17.93 1.77 2.38 1.77 4.34v10.1h-.05Zm-3.3-5.8v-1.31h-3.69c-2.36 0-3.56.72-3.56 2.21a2 2 0 0 0 .9 1.75c.6.38 1.42.6 2.45.6 1.03 0 1.97-.3 2.74-.9a2.7 2.7 0 0 0 1.16-2.34ZM139.05 25.24c-.43-.43-.6-.9-.6-1.45 0-.55.21-1.07.6-1.45.43-.43.9-.6 1.46-.6a2.05 2.05 0 1 1 0 4.1 1.8 1.8 0 0 1-1.46-.6Zm3.08 18.62h-3.3V28.35h3.3v15.51ZM149 43.86h-3.3V22.21h3.3v21.65Z"/>
</symbol>

<symbol id="wagtail-light" class="wagtail-logo wagtail-logo--light" viewBox="0 0 150 64">
<ellipse class="wagtail-logo__light" cx="31.46" cy="21.49" fill="#fff" opacity=".1" rx="20.99" ry="20.88"/>
<path class="wagtail-logo__light" fill="#fff" d="M39.23 24.51a9.37 9.37 0 0 0-10.9-3.7 6.06 6.06 0 0 1-.81-3.05 6.06 6.06 0 0 1 8.35-5.66c.36-.51.7-1.12 1.06-1.89a8.6 8.6 0 0 1 4.28 6.65L38.4 21l.84 3.5Z"/>
<path class="wagtail-logo__dark" fill="#000" d="m9.9 45.78 1.75 3.66-.35-6.1-1.4 2.44Z"/>
<path class="wagtail-logo__dark "fill="#000" d="m4.37 47.2 18.7-32.73a9.57 9.57 0 0 1 8.75-5.77c1.88 0 3.65.52 5.12 1.5-.36.77-.71 1.38-1.07 1.9a6.06 6.06 0 0 0-8.36 5.66c0 1.12.3 2.15.82 3.04a9.36 9.36 0 0 1 3.09-.52 9.51 9.51 0 0 1 9.42 9.57c0 .22-.04.44-.08.7l-.02.13h.05l-.1.54c-.04.18-.08.36-.1.54v.05c-3.53 18.26-25.55 17.87-28.96 17.7l.02-.07-.35-6.1-1.38 2.43-5.55 1.43Z"/>
<path class="wagtail-logo__light" fill="#fff" d="m19.97 42.62-.4.3s13.47-2.2 15.6-13.48l-2.13.72s-.56 8.75-13.07 12.46Z"/>
<path class="wagtail-logo__dark" fill="#000" d="M37.34 17.2c.67 0 1.22-.56 1.22-1.24 0-.68-.55-1.24-1.22-1.24-.67 0-1.21.56-1.21 1.24 0 .68.54 1.23 1.21 1.23ZM41.2 16.88l-2.39 3.6h6.43l-4.05-3.6ZM11.3 43.34.06 63.04l8.43-2.79 3.16-10.8-.35-6.11Z"/>
<path class="wagtail-logo__dark" fill="#fff" d="M56.57 43.86h-3.78l-5.4-15.5h3.39l3.86 11.71 3.86-11.72h3.39l3.86 11.72 3.86-11.72H73l-5.28 15.51h-3.77l-3.7-10.6-3.68 10.6ZM87.92 43.86h-3v-2.08a6.4 6.4 0 0 1-5.2 2.3 6.06 6.06 0 0 1-4.02-1.37 4.52 4.52 0 0 1-1.59-3.66c0-1.54.56-2.69 1.72-3.41 1.11-.77 2.66-1.15 4.59-1.15h4.24v-.6c0-2.05-1.16-3.11-3.47-3.11-1.46 0-2.96.51-4.5 1.58l-1.46-2.05a10.15 10.15 0 0 1 6.47-2.26c1.85 0 3.35.47 4.5 1.37 1.16.93 1.76 2.38 1.76 4.34v10.1h-.04Zm-3.3-5.8v-1.31h-3.69c-2.36 0-3.56.72-3.56 2.21a2 2 0 0 0 .9 1.75c.6.38 1.42.6 2.45.6 1.02 0 1.97-.3 2.74-.9a2.7 2.7 0 0 0 1.16-2.34ZM105.76 28.35v13.51c0 2.73-.73 4.82-2.23 6.18a8.24 8.24 0 0 1-5.74 2.05c-2.36 0-4.46-.73-6.35-2.18l1.54-2.47a7.6 7.6 0 0 0 4.63 1.7c1.55 0 2.8-.38 3.7-1.19.9-.8 1.37-2.09 1.37-3.83v-2a5.71 5.71 0 0 1-5.15 2.98 6.64 6.64 0 0 1-5.1-2.18 7.66 7.66 0 0 1-2.02-5.37c0-2.13.69-3.92 2.01-5.37a6.64 6.64 0 0 1 5.1-2.17 6 6 0 0 1 5.03 2.56v-2.3h3.21v.08Zm-12.18 7.16a4.7 4.7 0 0 0 1.2 3.28c.78.94 1.85 1.37 3.22 1.37 1.33 0 2.44-.43 3.26-1.33.81-.9 1.24-2 1.24-3.32 0-1.32-.42-2.47-1.24-3.37A4.17 4.17 0 0 0 98 30.78c-1.33 0-2.4.47-3.17 1.45-.86.9-1.25 2-1.25 3.28ZM114 30.95v7.88c0 .73.21 1.33.6 1.75.39.43.94.64 1.63.64s1.37-.34 2.02-1.02l1.33 2.3a5.67 5.67 0 0 1-3.82 1.53 4.8 4.8 0 0 1-3.56-1.45 5.22 5.22 0 0 1-1.5-3.87v-7.76h-1.98v-2.64h1.98v-4.82h3.3v4.86h4.12v2.64H114v-.04ZM134.84 43.86h-3v-2.08a6.4 6.4 0 0 1-5.19 2.3 6.06 6.06 0 0 1-4.03-1.37 4.52 4.52 0 0 1-1.59-3.66c0-1.54.56-2.69 1.72-3.41 1.11-.77 2.66-1.15 4.59-1.15h4.24v-.6c0-2.05-1.15-3.11-3.47-3.11-1.46 0-2.96.51-4.5 1.58l-1.46-2.05a10.15 10.15 0 0 1 6.47-2.26c1.85 0 3.35.47 4.5 1.37 1.17.93 1.77 2.38 1.77 4.34v10.1h-.05Zm-3.3-5.8v-1.31h-3.69c-2.36 0-3.56.72-3.56 2.21a2 2 0 0 0 .9 1.75c.6.38 1.42.6 2.45.6 1.03 0 1.97-.3 2.74-.9a2.7 2.7 0 0 0 1.16-2.34ZM139.05 25.24c-.43-.43-.6-.9-.6-1.45 0-.55.21-1.07.6-1.45.43-.43.9-.6 1.46-.6a2.05 2.05 0 1 1 0 4.1 1.8 1.8 0 0 1-1.46-.6Zm3.08 18.62h-3.3V28.35h3.3v15.51ZM149 43.86h-3.3V22.21h3.3v21.65Z"/>
</symbol>
</svg>
7 changes: 5 additions & 2 deletions apps/frontend/static_src/scss/components/footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
}
Expand Down
19 changes: 8 additions & 11 deletions apps/frontend/static_src/scss/components/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,12 @@
}
}

&__logo {
.light {
fill: $color--white;
}
&__logo-link {
width: 100%;
height: 100%;

.dark {
fill: $color--black;
&--dark {
display: none;
}
}

Expand Down Expand Up @@ -153,12 +152,10 @@

.theme-dark & {
#{$root}__logo {
.light {
fill: $color--black;
}
display: none;

.dark {
fill: $color--white;
&--dark {
display: block;
}
}

Expand Down
9 changes: 9 additions & 0 deletions apps/frontend/static_src/scss/components/wagtail-logo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.wagtail-logo {
&__dark {
fill: $color--black;
}

&__light {
fill: $color--white;
}
}
2 changes: 1 addition & 1 deletion apps/frontend/static_src/scss/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,5 +43,5 @@
@import './components/streamfield';
@import './components/toc';
@import './components/theme-toggle';

@import './components/wagtail-logo';
@import './utilities';