diff --git a/addons/rose/addon/styles/rose/components/header/_brand.scss b/addons/rose/addon/styles/rose/components/header/_brand.scss index 463cbb639..671e38ffc 100644 --- a/addons/rose/addon/styles/rose/components/header/_brand.scss +++ b/addons/rose/addon/styles/rose/components/header/_brand.scss @@ -7,8 +7,8 @@ align-items: center; color: var(--white); text-decoration: none; - padding: 10px; - margin: 0 10px; + padding: 0 10px; + margin: 10px; svg { // 28px... header sizes do not follow the sizing system diff --git a/addons/rose/addon/styles/rose/components/header/nav/_index.scss b/addons/rose/addon/styles/rose/components/header/nav/_index.scss index 3605a62a2..e950cb452 100644 --- a/addons/rose/addon/styles/rose/components/header/nav/_index.scss +++ b/addons/rose/addon/styles/rose/components/header/nav/_index.scss @@ -1,3 +1,4 @@ +@use '../../../variables/sizing'; @use '../../../variables/media'; @import 'link'; @@ -7,12 +8,9 @@ display: flex; flex-wrap: wrap; align-items: center; - padding: 10px 0; -} -@media (max-width: media.width(small)) { - .rose-header-nav { - padding: 10px 20px; + @media (max-width: media.width(small)) { + padding: 0 20px; background: var(--ui-header-subtler); } } diff --git a/addons/rose/addon/styles/rose/components/header/nav/_link.scss b/addons/rose/addon/styles/rose/components/header/nav/_link.scss index cbea143c3..8a143fcd2 100644 --- a/addons/rose/addon/styles/rose/components/header/nav/_link.scss +++ b/addons/rose/addon/styles/rose/components/header/nav/_link.scss @@ -10,11 +10,12 @@ text-decoration: none; color: var(--white); - opacity: 0.5; + opacity: 0.75; // again, nonstandard sizing for header stuff + margin: 10px 0; padding: 6px 12px; - border-radius: 4px; + border-radius: sizing.rems(xxs); &.active { opacity: 1;