home loop start

dev/scss/components/_home-loop.scss

@@ -0,0 +1,29 @@
+.home-loop {
+  position: relative;
+  overflow: hidden;
+
+  a {
+    display: table;
+    min-height: 250px;
+    text-decoration: none;
+  }
+
+  h1 {
+    margin: $gutter;
+    background-color: rgba($black, 0.15);
+    color: $white;
+  }
+
+  img {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+  }
+
+}

dev/scss/elements/_inputs.scss

@@ -5,16 +5,8 @@ textarea,
 [type="search"],
 [type="tel"],
 [type="text"] {
-  border: 0;
-  box-shadow: $box-shadow-light;
-  background-color: $gray-light;
   padding: 8px;
   width: 100%;
-
-  .dark & {
-    box-shadow: none;
-    background-color: $white;
-  }
 }
 
 .select-wrapper {

dev/scss/elements/_section.scss

@@ -1,5 +0,0 @@
-@media screen and (max-width: #{$screen-tablet - 1}) {
-  section {
-    margin: 0 $gutter;
-  }
-}

dev/scss/generic/_skips.scss

@@ -0,0 +1,17 @@
+.skip-nav {
+  &:active,
+  &:focus {
+    position: absolute;
+    top: 15px;
+    left: 10px;
+    border: 1px solid $white;
+    background-color: $gray-dark;
+    padding: 5px 10px;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    white-space: normal;
+    color: $white;
+    clip: auto;
+  }
+}

dev/scss/generic/_typography.scss

@@ -14,9 +14,9 @@ h6 {
   font-weight: 700;
 }
 
-h1 { font-size: 3rem; }
-h2 { font-size: 2.375rem; }
-h3 { font-size: 1.875rem; }
+h1 { font-size: 2rem; }
+h2 { font-size: 1.875rem; }
+h3 { font-size: 1.375rem; }
 h4 { font-size: 1.25rem; }
 h5 { font-size: 1rem; }
 
@@ -31,7 +31,7 @@ p {
 
 article,
 section {
-  font-size: 1.125em;
+  // font-size: 1.125em;
 
   li { line-height: 1.6; }
 }
@@ -49,11 +49,11 @@ section {
   font-weight: 700;
 }
 
-@media screen and (min-width: $screen-tablet-lg) {
-  h1 { font-size: 3.4375rem; }
-  h2 { font-size: 3rem; }
-  h3 { font-size: 2.5rem; }
-  h4 { font-size: 1.5rem; }
-  h5 { font-size: 1rem; }
-  h6 { font-size: 1rem; }
-}
+// @media screen and (min-width: $screen-tablet-lg) {
+//   h1 { font-size: 3.4375rem; }
+//   h2 { font-size: 3rem; }
+//   h3 { font-size: 2.5rem; }
+//   h4 { font-size: 1.5rem; }
+//   h5 { font-size: 1rem; }
+//   h6 { font-size: 1rem; }
+// }

dev/scss/main.scss

@@ -19,6 +19,7 @@
 @import 'generic/container';
 @import 'generic/grid';
 @import 'generic/typography';
+@import 'generic/skips';
 
 // Elements
 //     styling for bare HTML elements (like H1, A, etc.). These come with
@@ -42,6 +43,7 @@
 //     specific UI components. This is where majority of our work takes place
 //     and our UI components are often composed of Objects and Components
 @import 'components/main-nav';
+@import 'components/home-loop';
 
 // Utilities
 //     utilities and helper classes with ability to override anything which