diff --git a/src/components/ReutersLogo/ReutersLogo.svelte b/src/components/ReutersLogo/ReutersLogo.svelte index e00511bf..99c741d3 100644 --- a/src/components/ReutersLogo/ReutersLogo.svelte +++ b/src/components/ReutersLogo/ReutersLogo.svelte @@ -11,13 +11,171 @@ diff --git a/src/components/SiteHeader/MobileMenu/index.svelte b/src/components/SiteHeader/MobileMenu/index.svelte index 0b9c5536..d98e703c 100644 --- a/src/components/SiteHeader/MobileMenu/index.svelte +++ b/src/components/SiteHeader/MobileMenu/index.svelte @@ -17,7 +17,7 @@ --nav-primary: var(--theme-colour-text-primary, #404040); --nav-rules: var(--theme-colour-brand-rules, #d0d0d0); --nav-accent: var(--theme-colour-brand-logo, #fa6400); - --nav-shadow: 0 1px 4px 2px var(--theme-colour-brand-shadow, rgb(255 255 255 / 10%)); + --nav-shadow: 0 1px 4px 2px var(--theme-colour-brand-shadow, rgba(64,64,64,.08)); `}" >
@@ -82,6 +82,7 @@ z-index: 1; display: flex; align-items: center; + justify-content: space-between; height: $mobile-nav-height; box-sizing: border-box; background: var(--nav-background); @@ -89,7 +90,7 @@ .logo { font-size: 0; - width: 127px; + width: 94px; } .close-button { @@ -142,17 +143,26 @@ max-width: 100%; .subsections { - margin: 20px 0 0 0; + margin: 20px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); + grid-column-gap: 2.2222222222vw; grid-row-gap: 16px; @include spacing-single(grid-column-gap); + @media (max-width: 1023.9px) { + grid-column-gap: 4.2666666667vw; + } + + li { + margin: 0; + } } .section-link { font-size: 14px; + font-weight: 500; } .section-link, @@ -166,5 +176,8 @@ text-decoration: underline; } } + .subsection-link { + font-size: 16px; + } } diff --git a/src/components/SiteHeader/SiteHeader.svelte b/src/components/SiteHeader/SiteHeader.svelte index 7c7d6461..0aae401b 100644 --- a/src/components/SiteHeader/SiteHeader.svelte +++ b/src/components/SiteHeader/SiteHeader.svelte @@ -168,19 +168,12 @@ display: block; font-size: 0; - @include for-tablet-down { - width: 127px; - min-width: 127px; - } + width: 126px; + min-width: 126px; - @include for-desktop { - width: 154px; - min-width: 154px; - } - - @include for-wide-desktop { - width: 184px; - min-width: 184px; + @media (max-width: 768px) { + width: 94px; + min-width: 94px; } } } diff --git a/src/components/Theme/themes/light.js b/src/components/Theme/themes/light.js index 1f62909d..f7328d24 100644 --- a/src/components/Theme/themes/light.js +++ b/src/components/Theme/themes/light.js @@ -7,9 +7,9 @@ export default { background: '#ffffff', 'text-primary': '#404040', 'text-secondary': '#666666', - accent: ' #fa6400', - 'brand-logo': '#fa6400', + accent: ' #d64000', + 'brand-logo': '#d64000', 'brand-rules': '#d0d0d0', - 'brand-shadow': 'rgb(64 64 64 / 80%)', + 'brand-shadow': 'rgba(64, 64, 64, .08)', }, };