Add Menu and Navigation

css/grid.css

@@ -5,6 +5,7 @@
   grid-auto-flow: dense;
   grid-gap: var(--spaceSm);
   grid-template-columns: 1fr;
+  max-width: 1200px;
   margin: 0 var(--spaceSm);
 }
 

css/icon.css

@@ -11,6 +11,11 @@
   width: 24px;
 }
 
+.Icon--large {
+  height: 48px;
+  width: 48px;
+}
+
 .Icon--facebook {
   color: var(--colorFacebook);
 }

css/index.css

@@ -16,20 +16,24 @@ License URI: http://www.gnu.org/licenses/gpl-2.0.html
 @import "article";
 @import "metadata";
 @import "footer";
+@import "menu";
+@import "nav";
+@import "search";
 @import "icon";
 
 :root {
-  --colorPrimaryBlue: #201f42;
   --colorNearBlack: #333;
+  --colorDarkBlue: #201f42;
+  --colorLightBlue: #1b8eff;
   --colorGrey: #828282;
   --colorLightGrey: #e0e0e0;
   --colorFacebook: #3e5a98;
   --colorTwitter: #1da1f2;
-  --colorLightBlue: #1b8eff;
   --spaceSm: 10px;
   --spaceMd: 30px;
   --spaceLg: 60px;
   --transitionMd: 300ms;
+  --transitionSl: 600ms;
   --headingFontFamily: 'Raleway', sans-serif;
   --bodyFontFamily: 'Open Sans', sans-serif;
 }

css/menu.css

@@ -0,0 +1,75 @@
+/** @define Menu */
+
+.Menu {
+  background-color: var(--colorDarkBlue);
+  border-radius: 999px;
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+  display: block;
+  height: 64px;
+  left: 5px;
+  position: fixed;
+  top: 5px;
+  transform: translateX(-100px);
+  transition:
+    filter var(--transitionMd) ease-out,
+    opacity var(--transitionMd) ease-out,
+    transform var(--transitionMd) ease-out;
+  width: 64px;
+  will-change: opacity, transition;
+  z-index: 5;
+}
+
+.Menu-line {
+  background-color: #fff;
+  border-radius: 2px;
+  height: 4px;
+  left: 15px;
+  position: absolute;
+  right: 15px;
+  transform: translateY(-50%);
+}
+
+.Menu-line:nth-of-type(1) {
+  top: 33%;
+}
+
+.Menu-line:nth-of-type(2) {
+  top: 50%;
+}
+
+.Menu-line:nth-of-type(3) {
+  top: 66%;
+}
+
+.Menu-text {
+  left: -10000px;
+  position: absolute;
+  top: -10000px;
+}
+
+.Menu--visible {
+  transform: translateX(0);
+}
+
+.Menu--minimized {
+  opacity: 0.5;
+  transform: translateX(-20px) translateY(-20px);
+}
+
+/**
+ * Focus state
+ */
+
+.Menu:focus {
+  outline: none;
+}
+
+/**
+ * Hover state
+ */
+
+.Menu:hover {
+  opacity: 1;
+  filter: brightness(125%);
+}

css/nav.css

@@ -0,0 +1,144 @@
+/** @define Nav */
+
+:root {
+  --Nav-transitionDuration: var(--transitionMd);
+}
+
+.Nav::after {
+  background-color: rgba(0, 0, 0, 0.5);
+  bottom: 0;
+  content: '';
+  left: 0;
+  opacity: 0;
+  position: fixed;
+  right: 0;
+  transition:
+    opacity var(--Nav-transitionDuration) ease-out,
+    visibility var(--Nav-transitionDuration) ease-out;
+  top: 0;
+  visibility: hidden;
+  z-index: 5;
+}
+
+.Nav-content {
+  background-color: var(--colorDarkBlue);
+  bottom: 0;
+  box-shadow: 6px 0 4px rgba(0, 0, 0, 0.25);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  padding: var(--spaceSm);
+  position: fixed;
+  top: 0;
+  transform: translateX(-100%);
+  transition: transform var(--Nav-transitionDuration) ease-out;
+  z-index: 10;
+}
+
+.Nav-title {
+  font-family: var(--headingFontFamily);
+  font-size: 2.5rem;
+  margin-right: 62px;
+}
+
+.Nav-close {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  display: block;
+  height: 32px;
+  padding: 0;
+  position: absolute;
+  right: 15px;
+  top: 15px;
+  width: 32px;
+}
+
+.Nav-closeBar {
+  background-color: #fff;
+  border-radius: 2px;
+  height: 4px;
+  left: 4px;
+  position: absolute;
+  transition: transform var(--Nav-transitionDuration) ease-out var(--Nav-transitionDuration);
+  top: 14px;
+  width: 24px;
+}
+
+.Nav-closeText {
+  left: -10000px;
+  position: absolute;
+  top: -10000px;
+}
+
+/**
+ * Nav List
+ */
+
+.Nav-list {
+  flex-grow: 1;
+  font-family: var(--headingFontFamily);
+  font-size: 1.5rem;
+  margin: var(--spaceMd) 0 0 var(--spaceMd);
+}
+
+.Nav--subList {
+  margin-top: 0;
+}
+
+.Nav--open::after {
+  visibility: visible;
+  opacity: 1;
+}
+
+.Nav-link,
+.Nav-link:active,
+.Nav-link:focus,
+.Nav-link:hover,
+.Nav-link:visited {
+  color: #fff;
+  display: inline-block;
+  margin-bottom: var(--spaceSm);
+  transition: text-shadow var(--Nav-transitionDuration) ease-out;
+}
+
+.Nav-link:focus,
+.Nav-link:hover {
+  text-shadow: 0 0 2px #fff;
+}
+
+/**
+ * Nav Social
+ */
+
+.Nav-social {
+  margin-bottom: var(--spaceSm);
+}
+
+.Nav-socialLink,
+.Nav-socialLink:active,
+.Nav-socialLink:focus,
+.Nav-socialLink:hover,
+.Nav-socialLink:visited {
+  color: #fff;
+  transition: filter var(--Nav-transitionDuration) ease-out;
+}
+
+.Nav-socialLink:focus,
+.Nav-socialLink:hover {
+  filter: drop-shadow(0 0 2px #fff);
+}
+
+.Nav--open .Nav-content {
+  transform: translateX(0);
+}
+
+.Nav--open .Nav-closeBar:nth-of-type(1) {
+  transform: rotate(45deg);
+}
+
+.Nav--open .Nav-closeBar:nth-of-type(2) {
+  transform: rotate(-45deg);
+}
+

css/search.css

@@ -0,0 +1,28 @@
+/** @define Search */
+
+.Search {
+  display: flex;
+}
+
+.Search-label {
+  left: -10000px;
+  position: absolute;
+  top: -10000px;
+}
+
+.Search-input {
+  border: none;
+  border-radius: 0;
+  color: var(--colorNearBlack);
+  font-family: var(--headingFontFamily);
+  max-width: 200px;
+  padding: 10px;
+}
+
+.Search-submit {
+  background-color: var(--colorLightBlue);
+  border: none;
+  color: #fff;
+  font-family: var(--headingFontFamily);
+  min-width: 100px;
+}