initial commit

styles/comps/_all.sass

@@ -0,0 +1,5 @@
+// import all components from this folder
+@import 'footer.sass';
+@import 'navbar.sass';
+@import 'spinner.sass'; 
+@import 'paginate.sass';

styles/comps/footer.sass

@@ -0,0 +1,6 @@
+.footer
+  text-align: center;
+  padding: 10px 10px 15px;
+  background: $primaryAlt;
+  p 
+    margin-bottom: 0; 

styles/comps/navbar.sass

@@ -0,0 +1,126 @@
+.navbar
+  background: $primaryAlt; 
+  display: flex; 
+  flex-direction: row; 
+  align-items: center; 
+  height: 55px; 
+  
+  .navbar-brand
+    margin-left: 0.75em; 
+    margin-right: auto;
+    
+    h3 
+      margin-bottom: 0; 
+
+  .navbar-burger
+    display: none; 
+    width: 32px;
+    margin-right: 10px;  
+
+    &.active div
+      &:nth-child(1)
+        transform-origin: center; 
+        transform: translateY(8px) rotate(45deg); 
+      &:nth-child(2)
+        opacity: 0; 
+      &:nth-child(3)
+        transform-origin: left -6px; 
+        transform: translateY(8px) rotate(-45deg); 
+
+    div
+      transition: all ease-in-out 150ms;  
+      width: 100%;
+      height: 2px; 
+      margin: 5px 0; 
+      border-radius: 1px; 
+      background: $text; 
+
+
+  .navbar-items
+    display: inline-flex; 
+    flex-direction: row; 
+    
+    .active .item, .item:hover
+      background: $primary; 
+
+    .item
+      margin: 0; 
+      cursor: pointer; 
+      padding: 15px 20px;
+
+  // .dropdown
+  //   position: relative; 
+
+  //   &:hover 
+  //     .dropdown-items
+  //       height: auto; 
+
+  //   .dropdown-root:after
+  //     content: ' \25BE'; 
+
+  //   .dropdown-items
+  //     height: 0;
+  //     width: 125px; 
+  //     overflow: hidden;
+  //     top: 100%; 
+  //     left: 0px; 
+  //     z-index: 6;
+  //     position: absolute; 
+  //     background: $primaryAlt; 
+
+  //     .item 
+  //       padding: 0; 
+  //       margin: 0 !important; 
+  //       padding: 8px 10px;
+  //       &.active, &:hover,
+  //         background: none; 
+  //         color: $linkAct;
+
+
+@media screen and (max-width: 840px) 
+  .navbar
+    .navbar-burger
+      display: inline-block; 
+
+    .navbar-items
+        display: block; 
+        overflow: hidden;
+        position: fixed; 
+        top: 55px; 
+        left: 0; 
+        z-index: 5; 
+        background: $primaryAlt; 
+        width: 100%; 
+        transform: scaleY(0); 
+        transform-origin: top; 
+        transition: all ease-in-out 125ms; 
+
+        &.active
+          transform: scaleY(1); 
+          overflow: auto; 
+
+        .item
+          text-align: center; 
+          width: 100%; 
+          padding: 5px 0; 
+
+    // .dropdown
+    //   padding: 0 !important; 
+
+    // .dropdown-root
+    //   display: none; 
+
+    // .dropdown-items
+    //   position: relative !important; 
+    //   overflow: hidden;
+    //   padding: 0 !important; 
+    //   height: auto !important;
+    //   width: 100% !important; 
+
+    //   .item
+    //     width: 100% !important;
+    //     padding: 5px 0 !important;
+    //     text-align: center !important; 
+
+    //     &:last-child
+    //       padding: 5px 0 0 !important;

styles/comps/paginate.sass

@@ -0,0 +1,18 @@
+.paginate
+  list-style: none; 
+  text-align: center; 
+  user-select: none; 
+  margin: 0; 
+
+  li
+    display: inline-block;
+    
+    &.active a
+      border-color: $link;
+
+    a
+      outline: 0; 
+      border-radius: 50%; 
+      border: 1px solid;
+      border-color: transparent;
+      padding: 3px 8px;

styles/comps/spinner.sass

@@ -0,0 +1,15 @@
+.spinner
+  height: 24px; 
+  width: 24px; 
+  border-radius: 100%; 
+  border: 2px solid $text; 
+  $noBorder: none; 
+  border-right: $noBorder; 
+  border-bottom: $noBorder; 
+  animation: spinner 500ms linear infinite;  
+
+@keyframes spinner 
+  from 
+    transform: rotate(0deg); 
+  to
+    transform: rotate(360deg);