diff --git a/css/style.css b/css/style.css index 4610d90..5383732 100644 --- a/css/style.css +++ b/css/style.css @@ -351,7 +351,7 @@ a:visited { text-decoration-thickness: 0.175rem; } -button, .link-button, .menu-button, .logo { +button, .link-button, .menu-button, .menu-button-secondary, .logo { appearance: none; -webkit-appearance: none; display: inline-flex; @@ -382,6 +382,12 @@ button, .link-button, .logo, .desktop-nav a[aria-current="page"], color: var(--color-menu-text-button); } +.menu-button-secondary { + background: var(--color-secondary); + color: var(--color-text-button); + box-shadow: var(--shadow-button); +} + .logo { padding: 1rem; aspect-ratio: 1/1; @@ -426,6 +432,19 @@ button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current /* ======================= Layout styles ======================= */ + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + clip-path: inset(50%); + white-space: nowrap; + border: 0; +} #skipLink a { display: block; @@ -510,6 +529,41 @@ button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current } +.desktop-nav-secondary ul { + display: flex; + align-items: stretch; + gap: var(--spacing-4); + margin: 0; + padding: 0; + list-style: none; +} + +.desktop-nav-secondary li { + display: flex; + margin: 0; + padding: 0; +} + +.desktop-nav-secondary svg { + color: var(--color-secondary); + height: 1.5em; + width: 1.5em; + flex: none; + display: block; +} + +.desktop-nav-secondary svg:hover { + color: var(--color-secondary-hover); +} + +.desktop-nav-secondary svg:active { + color: var(--color-secondary-active); +} + +.desktop-nav-secondary svg path { + fill: currentColor; +} + .menu-toggle, .menu-close { width: 44px; diff --git a/index.html b/index.html index a110e70..22f4cb6 100644 --- a/index.html +++ b/index.html @@ -33,7 +33,8 @@