element.
-#navigation {
- .site-navigation {
- display: none;
- }
-
- &:target {
- .navigation-toggle {
- &.show {
- display: none;
- }
-
- &.hide {
- display: block;
- }
- }
-
- .site-navigation {
- display: block;
- }
- }
-
- @media (screen and min-width: layout.$breakpoint) {
- .site-navigation {
- flex: 0;
- display: block;
-
- ul {
- display: flex;
- margin-bottom: 0;
-
- a {
- display: inline-block;
- }
- }
- }
-
- .navigation-toggle {
- display: none;
- }
- }
+@mixin header-item {
+ padding: 0 layout.$normal-gap;
+ line-height: 3rem;
}
// The site logo text. More specific styles for this element are also present
@@ -63,9 +22,19 @@
// the footer. The former also has some specific styles (see .site-header
// below).
.site-navigation {
- flex-basis: 100%;
+ &.horizontal {
+ > ul {
+ display: flex;
+ margin-bottom: 0;
+ }
- ul {
+ a {
+ display: inline-block;
+ @include header-item;
+ }
+ }
+
+ > ul {
margin: 0;
padding: 0;
list-style: none;
@@ -73,6 +42,7 @@
a {
display: block;
+ padding: layout.$small-gap;
font-size: typography.$large-size;
font-weight: typography.$emphasized-weight;
text-align: center;
@@ -81,40 +51,73 @@
}
}
+.site-mobile-navigation {
+ cursor: pointer;
+
+ > summary {
+ display: block;
+ @include header-item;
+ }
+
+ &[open] {
+ flex-basis: 100%;
+
+ > summary {
+ // The positioning requires that the header component has relative
+ // positioning.
+ position: absolute;
+ top: 0;
+ right: 0;
+ color: colors.$blue-800;
+ }
+ }
+
+ // This is the next site navigation block (the one that's visible on desktop),
+ // while...
+ + .site-navigation {
+ display: none;
+ }
+
+ // ... this here is the one inside the mobile-only
block.
+ > .site-navigation {
+ &::before {
+ content: '';
+ display: block;
+ margin: 0 auto;
+ width: calc(100% - #{2 * layout.$normal-gap});
+ height: 1px;
+ background-color: colors.$gray-300;
+ }
+ }
+
+ @media screen and (min-width: layout.$breakpoint) {
+ display: none;
+
+ + .site-navigation {
+ display: block;
+ }
+ }
+}
+
.site-header {
display: flex;
// This container needs to wrap because when the navigation is open on small
// screens, we want it to overflow into its own line.
flex-wrap: wrap;
align-items: center;
+ // Relative positioning is required here so that we can fake the menu button's
+ // location on mobile.
position: relative;
z-index: 10;
background-color: colors.$main-background;
@include colors.block-shadow;
- a {
- padding: 0 layout.$normal-gap;
- line-height: 3rem;
- }
-
- .site-logo {
+ > .site-logo {
flex-grow: 1;
- padding: 0;
+ margin: 0;
font-size: typography.$large-size;
text-decoration: none;
- }
-
- .site-navigation ul {
- margin: 0 0 layout.$small-gap 0;
- }
-
- .navigation-toggle {
- display: block;
- padding: 0 layout.$normal-gap;
-
- &.hide {
- display: none;
- }
+ @include header-item;
}
}