first commit

src/static/sass/layout/_navigation.scss

@@ -0,0 +1,87 @@
+.navigation {
+   background-color: transparent; 
+
+   grid-column: 1 / 13; 
+   position: fixed;
+   width: 100%;
+   height: 6.7rem;
+   transition-timing-function: ease-in;
+   transition: all 1s;
+
+
+   &.black {
+      background-color: $color-background;
+   }
+
+   &__container {
+      background-color: transparent;
+      margin-left: 3.8rem;
+      display: flex;
+      height: 6.7rem;
+      justify-content: flex-start;
+      align-items: center;
+
+      a:first-child {
+         padding-left: .2%;
+         color: $color-red;
+         font-size: 4rem;
+      }
+
+      &-link {
+         color: #fff;
+         text-decoration: none;
+         margin-right: 3rem;
+      }
+
+      &--left {
+         flex-grow: 1;
+         color: #fff;
+         padding-right: 4.6rem;
+         display: flex;
+         justify-content: flex-end;
+
+      }
+   }
+
+}
+
+input[type="text"] {
+   // display: none;
+   // color: #fff;
+   border: none;
+   outline: none;
+   width: 0px;
+   padding: 10px;
+   padding-right: 2rem;
+   // background: none;
+   transition: width .5s cubic-bezier(0.000, 0.795, 0.000, 1.000);
+   cursor: pointer;
+}
+
+input[type="text"]:focus:hover {
+   border-bottom: 1px solid #BBB;
+   color: #fff;
+}
+
+input[type="text"]:focus {
+   width: 22rem;
+   z-index: 1;
+   background-color: #000;
+   border: 1px solid #fff;
+   cursor: text;
+}
+
+input[type="submit"] {
+   height: 67px;
+   width: 63px;
+
+   color: red;
+   text-indent: -10000px;
+   border: none;
+   position: absolute;
+   z-index: 2;
+   cursor: pointer;
+   opacity: 0.4;
+   cursor: pointer;
+   transition: opacity .4s ease;
+}