Update styles (#6)

* Update header styles to have max width and slightly better spacing with header links

* Spacing to header on various pages and dashboard

* Updated here and main content areas on home page

* Fix hero styles on tablet down

* Removed lingering border

* Fix some stray padding

* Update built CSS

Co-authored-by: Michael Arestad <[email protected]>
Co-authored-by: Kelly Dwan <[email protected]>

resources/assets/sass/components/_base.scss

@@ -55,14 +55,22 @@ input[type="text"], input[type="email"], input[type="password"] {
 }
 
 .site-header {
-  padding-top: 30px;
-  padding-bottom: 30px;
+  max-width: 1240px;
+  padding-top: 60px;
+  padding-bottom: 60px;
+
+  .page-innerpage-dashboard & {
+    padding-top: 30px;
+    padding-bottom: 30px;
+  }
 
   a {
     color: $cardinal;
     font-weight: bold;
     text-decoration: none;
     border-bottom: 2px solid transparent;
+    margin-left: 16px;
+    margin-right: 16px;
 
     &:hover,
     &:active,
@@ -74,10 +82,6 @@ input[type="text"], input[type="email"], input[type="password"] {
     &.active {
       border-color: currentColor;
     }
-
-    & + a {
-      margin-left: 2em;
-    }
   }
 
   .site-title a {
@@ -109,11 +113,6 @@ input[type="text"], input[type="email"], input[type="password"] {
       }
     }
   }
-
-  .page-inner:not(.page-dashboard) & {
-    border-bottom: 3px dotted $light-brown;
-    margin-bottom: 90px;
-  }
 
   @media screen and (max-width: 550px) {
     flex-wrap: wrap;
@@ -140,6 +139,10 @@ input[type="text"], input[type="email"], input[type="password"] {
   }
 }
 
+.info-navigation {
+  margin-left: -16px;
+}
+
 .page-content {
   margin: 0 auto;
   padding: 0 30px;
@@ -152,3 +155,12 @@ input[type="text"], input[type="email"], input[type="password"] {
     color: $black;
   }
 }
+
+main {
+  .page:not(.page-inner):not(.page-innerpage-dashboard) & {
+    max-width: 1240px;
+  }
+  .page-inner:not(.page-innerpage-dashboard) & {
+    padding-top: 30px;
+  }
+}

resources/assets/sass/components/_landing.scss

@@ -4,24 +4,49 @@
   background-size: cover;
   background-position: center;
 
+  @media (min-width: 1280px) {
+    max-width: 1340px;
+    margin: 0 auto 90px;
+    border-radius: 12px;
+    overflow: auto;
+  }
+
+  > .container {
+    max-width: 1240px;
+    padding: 0;
+  }
+
   .hero__text-box {
     padding: 30px;
     margin-bottom: 90px;
     background: $blue;
     color: white;
     font-size: 16px;
+
+    @media #{$tablet-portrait-down} {
+      flex-grow: 1;
+    }
   }
 
   .btn-white {
     color: $blue;
   }
 
   .hero__information {
-    padding: 30px;
+    padding: 0 30px 30px;
     color: $white;
-    border-top: 3px dotted $white;
     background: linear-gradient( rgba(0,0,0,0), rgba(0,0,0,1) 75%);
 
+    .container {
+      padding: 0;
+    }
+
+    @media #{$tablet-portrait-up} {
+      p {
+        margin: 0;
+      }
+    }
+
     .btn {
       margin-left: 30px;
     }