add expanded menu

assets/css/src/generic.css

@@ -1,3 +1,7 @@
+.sr-only {
+  display: none;
+}
+
 body.progress * {
   cursor: progress !important;
 }

assets/css/src/nav.css

@@ -1,17 +1,86 @@
 /* Nav */
+
+.expanded-nav,
+.main-nav {
+  padding: 1rem;
+  padding-right: var(--space-m);
+}
+
+/* Expanded nav */
+
+.expanded-nav {
+  position: fixed;
+  width: 100%;
+  box-sizing: border-box;
+  top: -20rem;
+  z-index: 2;
+  background-color: var(--color-brown-light);
+  display: grid;
+  grid-template-columns: 1fr 4fr 1fr;
+  transition: top 0.5s var(--curve-quick-slow);
+}
+.expanded-nav.open {
+  top: 0rem;
+}
+
+.expanded-nav__columns {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.expanded-nav .close-btn {
+  position: relative;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: end;
+}
+
+.expanded-nav .close-btn__line,
+.expanded-nav .close-btn__line::before {
+  content: "";
+  width: 100%;
+  height: 3px;
+  background-color: #000;
+  position: absolute;
+}
+
+.expanded-nav .close-btn__line {
+  transform: rotate(-45deg);
+}
+.expanded-nav .close-btn__line::before {
+  transform: rotate(90deg);
+}
+
+.expanded-nav__category {
+  margin-bottom: 1rem;
+}
+.expanded-nav__subcategory {
+  font-size: var(--font-size-s);
+}
+
+/* Header */
+
 .main-nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: var(--border);
-  padding: 1rem;
 }
 
 .main-nav__right {
   display: flex;
+  align-items: center;
 }
 
-.main-nav__right > *:not(:last-child) {
+.main-nav__featured-pages {
+  display: flex;
+}
+
+.main-nav__right > *:not(:last-child),
+.main-nav__featured-pages li:not(:last-child) {
   margin-right: 2.69rem;
 }
 

assets/css/src/variables.css

@@ -10,7 +10,7 @@
   --font-size-h2: 1.875rem;
   --font-size-h1: 2.8125rem;
 
-  --curve-quick-slow: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --curve-quick-slow: cubic-bezier(0.455, 0.03, 0.515, 0.955);
   --padding-vertical: 2rem;
   --space-m: 4vw;