Renamed /src to /frontend.

frontend/styles/banner.scss

@@ -0,0 +1,222 @@
+@import "./media-queries.scss";
+@import "./variables.scss";
+
+.top-banner{
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 0.5fr 1fr 0.5fr;
+  grid-template-areas: "menu logo clock";
+  grid-gap: 1em;
+  align-items: center;
+  justify-items: center;
+  background-color: $primary;
+
+  // ios homescreen app whitespace above header fix.
+  &::before {
+    content: '';
+    width: 100%;
+    height: 3rem;
+    position: absolute;
+    top: -3rem;
+    background-color: inherit;
+  }
+}
+
+.company-logo{
+  grid-area: logo;
+}
+
+.menu-toggle-container{
+  grid-area: menu;
+  color: #1e1e1e;
+  border-radius: 50% 50%;
+  z-index: 3;
+  width: 42px;
+  height: 42px;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  &:hover{
+    cursor: pointer;
+  }
+
+  span{
+    display: block;
+    position: relative;
+    border-radius: 3px;
+    height: 3px;
+    width: 18px;
+    background: #111;
+    z-index: 1;
+    transform-origin: 4px 0px;
+    transition: 
+      transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+      background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+      opacity 0.55s ease;
+  }
+  
+  span:first-child{
+    transform-origin: 0% 0%;
+    margin-bottom: 4px;
+  }
+
+  span:nth-last-child(2){
+    transform-origin: 0% 100%;
+    margin-bottom: 4px;
+  }
+
+  &.open{
+    span{
+      opacity: 1;
+      transform: rotate(-45deg) translate(2px, -2px);
+      background: #232323;
+    }
+
+    span:nth-last-child(2){
+      opacity: 0;
+      transform: rotate(0deg) scale(0.2, 0.2);
+    }
+
+    span:nth-last-child(3){
+      transform: rotate(45deg) translate(3.5px, -2px);
+    }
+  }
+
+  &.open{
+    background: #fff;
+    
+  }
+}
+
+.menu{
+  position: fixed;
+  top: 0;
+  background-color: $primary;
+  width: 100%;
+  z-index: 2;
+  overflow: hidden;
+  transition: max-height 0.5s ease-out;
+  height: 100vh;
+  max-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: 3em;
+
+  &.collapsed{
+    max-height: 0%;
+  }
+
+  a{
+    text-decoration: none;
+  }
+
+  .single-route{
+    font-size: 3em;
+    outline: 0;
+    text-decoration: none;
+    color: #1e1e1e;
+    border-bottom: 4px solid transparent;
+    display: block;
+
+    &.open{
+      -webkit-animation: fadeInFromNone 3s ease-out;
+      -moz-animation: fadeInFromNone 3s ease-out;
+      -o-animation: fadeInFromNone 3s ease-out;
+      animation: fadeInFromNone 3s ease-out;
+    }
+
+    &:hover{
+      cursor: pointer;
+      border-color: $link-color;
+    }
+  }
+}
+
+@-webkit-keyframes fadeInFromNone {
+  0% {
+      display: none;
+      opacity: 0;
+  }
+
+  10% {
+      display: block;
+      opacity: 0;
+  }
+
+  100% {
+      display: block;
+      opacity: 1;
+  }
+}
+
+@-moz-keyframes fadeInFromNone {
+  0% {
+      display: none;
+      opacity: 0;
+  }
+
+  10% {
+      display: block;
+      opacity: 0;
+  }
+
+  100% {
+      display: block;
+      opacity: 1;
+  }
+}
+
+@-o-keyframes fadeInFromNone {
+  0% {
+      display: none;
+      opacity: 0;
+  }
+
+  10% {
+      display: block;
+      opacity: 0;
+  }
+
+  100% {
+      display: block;
+      opacity: 1;
+  }
+}
+
+@keyframes fadeInFromNone {
+  0% {
+      display: none;
+      opacity: 0;
+  }
+
+  10% {
+      display: block;
+      opacity: 0;
+  }
+
+  100% {
+      display: block;
+      opacity: 1;
+  }
+}
+
+.clock {
+  grid-area: clock;
+  text-decoration: none;
+  color: #333333;
+  display: flex;
+  font-family: Arial;
+  @include mobile {
+    font-size: 0.8em;
+    margin-right: 1rem;
+  }
+  h2 {
+    display: flex;
+  }
+}