diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss index 9dfd65aa8680dc51c78a8b08ab9ba72b3e66653e..88c57bc82418db98f10f5da384589722dfcdaef5 100644 --- a/src/components/site-header/site-header.scss +++ b/src/components/site-header/site-header.scss @@ -11,7 +11,7 @@ place-content: center space-between; z-index: 99; - @include breakpoint($medium) { + @include breakpoint($narrow) { align-content: center; display: flex; flex-flow: row; @@ -21,11 +21,11 @@ } @include breakpoint($extrawide) { - height: 96px; + height: 80px; } - @include breakpoint($overwide) { - height: 120px; + @include breakpoint($xlarge) { + height: 112px; } &__logo-container { @@ -82,7 +82,7 @@ padding: 15px 16px 15px 12px; @include breakpoint($narrow) { - padding: 15px 28px 15px 10px; + padding: 15px 28px 15px 15px; } &.is-open { @@ -116,7 +116,7 @@ height: 24px; width: 24px; - @include breakpoint($medium) { + @include breakpoint($narrow) { width: 20px; } } @@ -141,7 +141,7 @@ } .menu--secondary { - @include breakpoint($medium) { + @include breakpoint($wide) { align-items: center; display: flex; flex-flow: row; @@ -150,19 +150,22 @@ align-items: center; display: flex; flex-flow: row; - padding: 10px; + margin: 0 10px; + padding: 10px 0; } } @include breakpoint($extrawide) { &__item { - padding: 10px 8px; + margin: 0 6px; + padding: 10px 0; } } - @include breakpoint($overwide) { + @include breakpoint($xlarge) { &__item { - padding: 10px; + margin: 0 8px; + padding: 10px 0; } } } @@ -185,42 +188,45 @@ margin-right: 32px; } - @include breakpoint($overwide) { + @include breakpoint($xlarge) { margin-left: 10px; margin-right: 32px; } &__label { @include breakpoint($wide) { - @include font-size(14px, 14px); + @include font-size(14px, 24px); color: var(--brand-main-nearly-black); font-family: var(--main-font-family); font-weight: 600; + letter-spacing: -0.5px; margin-left: 4px; text-decoration: none; } @include breakpoint($extrawide) { - @include font-size(12px, 14px); + @include font-size(12px, 12px); + letter-spacing: -0.6px; } - @include breakpoint($overwide) { - @include font-size(14px, 14px); + @include breakpoint($xlarge) { + @include font-size(14px, 24px); + letter-spacing: -0.5px; } } svg { @include breakpoint($wide) { height: 16px; - width: 16px; - } - @include breakpoint($overwide) { - height: 14px; - width: 14px; + width: 13.64px; } @include breakpoint($extrawide) { + height: 12px; + width: 10.23px; + } + @include breakpoint($xlarge) { height: 16px; - width: 16px; + width: 13.64px; } } }