Skip to content

Commit

Permalink
Add new GOV.UK logo lockup
Browse files Browse the repository at this point in the history 
- Add new GOV.UK logo lockup with Tudor crown and integrated GOV.UK text
- Removes HTML and classes that used to wrap the logo group as these are no longer needed
- Adjust the vertical offset of the logo to align with productName text
- Tweak attributes to ensure logo is available to assistive technologies
  • Loading branch information
@querkmachine
querkmachine committed Oct 3, 2023
1 parent f837f9c commit 3df96cd
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 44 deletions.
17 changes: 4 additions & 13 deletions packages/govuk-frontend/src/govuk/components/header/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,14 @@

.govuk-header__logotype {
display: inline-block;
position: relative;
top: -2px;

// Add a gap after the logo in case it's followed by a product name. This
// gets removed later if the logotype is a :last-child.
margin-right: govuk-spacing(1);
fill: currentcolor;
vertical-align: top;

// Prevent readability backplate from obscuring underline in Windows High
// Contrast Mode
Expand All @@ -53,14 +57,6 @@
}
}

.govuk-header__logotype-crown {
position: relative;
top: -1px;
margin-right: 1px;
fill: currentcolor;
vertical-align: top;
}

.govuk-header__product-name {
@include govuk-typography-responsive($size: 24, $override-line-height: 1);
@include govuk-typography-weight-regular;
Expand Down Expand Up @@ -288,11 +284,6 @@
background: transparent;
}

// Hide the inverted crown when printing in browsers that don't support SVG.
.govuk-header__logotype-crown-fallback-image {
display: none;
}

.govuk-header__link {
&:link,
&:visited {
Expand Down
47 changes: 16 additions & 31 deletions packages/govuk-frontend/src/govuk/components/header/template.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,22 @@
<div class="govuk-header__container {{ params.containerClasses | default('govuk-width-container') }}">
<div class="govuk-header__logo">
<a href="{{ params.homepageUrl | default('/') }}" class="govuk-header__link govuk-header__link--homepage">
<span class="govuk-header__logotype">
{#- We use an inline SVG for the crown so that we can cascade the
currentColor into the crown whilst continuing to support older browsers
which do not support external SVGs without a Javascript polyfill. This
adds approximately 1kb to every page load.
We use currentColour so that we can easily invert it when printing and
when the focus state is applied. This also benefits users who override
colours in their browser as they will still see the crown.
The SVG needs `focusable="false"` so that Internet Explorer does not
treat it as an interactive element - without this it will be
'focusable' when using the keyboard to navigate. #}
<svg
aria-hidden="true"
focusable="false"
class="govuk-header__logotype-crown"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 132 97"
height="30"
width="36"
>
<path
fill="currentColor" fill-rule="evenodd"
d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
></path>
</svg>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
</span>
{#- The SVG needs `focusable="false"` so that Internet Explorer does
not treat it as an interactive element - without this it will be
'focusable' when using the keyboard to navigate. #}
<svg
focusable="false"
role="img"
class="govuk-header__logotype"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 148 30"
height="30"
width="148"
>
<title>GOV.UK</title>
<path d="M22.64 10.4a1.84 1.84 0 0 1-2.41-1 1.84 1.84 0 0 1 1.01-2.41c.93-.38 2.01.07 2.4 1.01.38.94-.07 2.02-1 2.4M16.77 17.06a1.84 1.84 0 0 1-2.41-1 1.84 1.84 0 0 1 1.01-2.41c.93-.38 2.01.07 2.4 1.01.38.94-.07 2.02-1 2.4M27.58 13.35a1.84 1.84 0 0 1-2.41-1 1.84 1.84 0 0 1 1.01-2.41c.93-.38 2.01.07 2.4 1.01.38.94-.07 2.02-1 2.4M30.85 18.21c-.95.39-2.03-.06-2.41-.99a1.84 1.84 0 0 1 1.01-2.41c.93-.38 2.01.07 2.4 1.01.38.93-.07 2.01-1 2.39M17.04 4.68l2.34 1.22V2.46l-2.33.74-.01-.01c-.06-.09-.14-.16-.23-.23l-.01-.01.94-2.95h-3.36l.94 2.95-.02.01c-.08.07-.16.14-.23.23l-.01.01-2.33-.74V5.9l2.33-1.23h.01c.07.09.15.17.24.24l-1.34 4.04v.02c-.06.2-.1.42-.1.64 0 1.09.81 2 1.86 2.15.02 0 .03.01.05.01.09.01.18.02.27.02.09 0 .18-.01.27-.02.02 0 .03 0 .05-.01a2.184 2.184 0 0 0 1.86-2.15c0-.22-.03-.44-.1-.64v-.02l-1.34-4.04c.09-.06.18-.14.25-.23M9.45 10.4c.95.39 2.03-.06 2.41-1A1.84 1.84 0 1 0 8.46 8c-.39.94.06 2.02.99 2.4M4.51 13.35c.95.39 2.03-.06 2.41-1a1.84 1.84 0 0 0-1.01-2.41c-.93-.38-2.01.07-2.4 1.01-.38.94.07 2.02 1 2.4M1.24 18.21c.95.39 2.03-.06 2.41-.99a1.84 1.84 0 0 0-1.01-2.41c-.93-.38-2.01.07-2.4 1.01-.38.93.07 2.01 1 2.39"></path>
<path d="M16.05 29.17c4.42 0 8.6.3 12.33.83 1.06-4.45 2.35-7 3.67-8.81l-2.5-.89c.25 1.27.29 1.86.01 2.68-.41-.4-.8-1.15-1.11-2.28l-1.21 4.04c.74-.51 1.31-.84 1.96-.85-1.15 2.49-2.6 3.13-3.53 2.95-1.14-.21-1.67-1.23-1.49-2.09.26-1.22 1.52-1.54 2.1-.12 1.12-2.29-.78-3-2-2.32 1.88-1.88 2.09-3.54.58-5.56-2.11 1.62-2.14 3.22-1.19 5.47-1.23-1.41-3.16-.65-2.46 1.63.89-1.38 2.07-.51 1.88.8-.16 1.14-1.66 2.06-3.54 1.9-2.69-.24-2.85-2.1-2.92-3.63.66-.12 1.85.49 2.87 1.92l.37-4.28c-1.1 1.15-2.11 1.37-3.22 1.4.37-1.16 2.08-3.05 2.08-3.05h-5.35s1.7 1.9 2.08 3.05c-1.11-.04-2.12-.25-3.22-1.4l.37 4.28c1.02-1.42 2.2-2.04 2.87-1.92-.07 1.54-.23 3.39-2.92 3.63-1.88.16-3.38-.76-3.54-1.9-.19-1.31.99-2.18 1.88-.8.69-2.28-1.23-3.04-2.46-1.63.95-2.25.93-3.85-1.19-5.47-1.52 2.02-1.3 3.68.58 5.56-1.22-.68-3.13.04-2 2.32.59-1.42 1.84-1.1 2.1.12.18.86-.35 1.88-1.49 2.09-.93.17-2.38-.47-3.53-2.95.65.02 1.22.34 1.96.85L3.66 20.7c-.31 1.13-.7 1.88-1.11 2.28-.28-.82-.24-1.41.01-2.68l-2.5.89C1.39 23 2.67 25.55 3.73 30c3.73-.53 7.91-.83 12.32-.83M44.44 17.57c0 .9.11 1.76.34 2.59s.57 1.56 1.03 2.2 1.04 1.15 1.76 1.53 1.56.58 2.55.58c.95 0 1.74-.15 2.37-.45s1.13-.68 1.51-1.14.64-.94.79-1.47.21-1.02.21-1.47v-.21h-5.38V16.5h9.51v11.51h-3.72v-2.46c-.26.41-.59.78-.98 1.12s-.83.62-1.32.86-1.02.43-1.6.56-1.2.21-1.85.21c-1.53 0-2.9-.28-4.09-.83s-2.19-1.32-3.01-2.3-1.44-2.12-1.86-3.43-.64-2.72-.64-4.23c0-1.5.24-2.91.71-4.23s1.15-2.46 2.02-3.43 1.93-1.74 3.16-2.3 2.62-.84 4.15-.84c1 0 1.94.11 2.83.34s1.71.56 2.45.98 1.39.94 1.96 1.54 1.03 1.27 1.38 2L55 13.67c-.22-.45-.49-.87-.79-1.25s-.65-.72-1.05-1-.85-.5-1.35-.66-1.07-.24-1.7-.24c-.99 0-1.84.19-2.55.58s-1.3.9-1.76 1.53-.8 1.37-1.03 2.21-.34 1.7-.34 2.59v.14zM71.83 6.71c1.56 0 2.96.28 4.2.84s2.29 1.33 3.16 2.3 1.52 2.11 1.98 3.43.68 2.72.68 4.23c0 1.51-.23 2.92-.68 4.23s-1.11 2.45-1.98 3.43-1.92 1.74-3.16 2.3-2.64.83-4.2.83c-1.57 0-2.98-.28-4.21-.83s-2.29-1.32-3.15-2.3c-.86-.98-1.52-2.12-1.98-3.43s-.68-2.72-.68-4.23c0-1.5.23-2.91.68-4.23s1.11-2.46 1.98-3.43c.86-.97 1.91-1.74 3.15-2.3s2.64-.84 4.21-.84zm0 17.76c.92 0 1.73-.17 2.42-.52s1.29-.83 1.77-1.44.84-1.34 1.08-2.18.37-1.76.37-2.75v-.12c0-.99-.12-1.9-.37-2.75s-.61-1.57-1.08-2.19-1.07-1.1-1.77-1.44-1.51-.52-2.42-.52-1.73.17-2.43.52-1.29.83-1.77 1.44-.83 1.35-1.08 2.19-.37 1.76-.37 2.75v.12c0 1 .12 1.91.37 2.75s.6 1.57 1.08 2.18 1.06 1.1 1.77 1.44 1.51.52 2.43.52zM88.81 28.01l-5.93-21h4.76L91.7 22.8h.15l3.97-15.79h4.7l-5.93 21.01h-5.78zM100.51 25.64c0-.36.07-.7.21-1.02s.33-.6.58-.83.53-.43.86-.57.67-.21 1.03-.21.7.07 1.03.21.61.33.85.57.44.52.58.83.21.66.21 1.02a2.622 2.622 0 0 1-.79 1.89c-.25.24-.53.43-.85.57s-.66.21-1.03.21-.71-.07-1.03-.21-.61-.33-.86-.57-.44-.53-.58-.85-.21-.67-.21-1.04zM117.8 24.47c.62 0 1.19-.09 1.72-.27s.99-.45 1.38-.82.69-.83.92-1.39.34-1.22.34-1.98V6.98h4.17v13.65c0 1.17-.21 2.23-.64 3.18s-1.01 1.75-1.77 2.42c-.76.66-1.66 1.18-2.7 1.54-1.04.36-2.19.54-3.42.54s-2.38-.18-3.42-.54-1.95-.87-2.71-1.54c-.76-.66-1.35-1.47-1.78-2.42s-.64-2.01-.64-3.18V6.98h4.2V20c0 .76.11 1.42.34 1.98s.53 1.03.92 1.39.84.64 1.38.82 1.09.28 1.71.28zM130.5 7.01h4.25v9.1l7.5-9.1h5.23l-7.29 8.35 7.76 12.66h-4.94l-5.55-9.42-2.71 3.03v6.39h-4.25V7.01z"></path>
</svg>
{% if (params.productName) %}
<span class="govuk-header__product-name">
{{ params.productName }}
Expand Down

0 comments on commit 3df96cd

Please sign in to comment.