Fixed deprecated statements on simple-grid.scss

.gitignore

@@ -7,3 +7,4 @@ package-lock.json
 *.map
 **/*.map
 yarn.lock
+js/scripts.min.js.LICENSE.txt

assets/styles/base/_typography.scss

@@ -3,15 +3,25 @@ h2,
 h3,
 h4,
 h5,
-h6, 
+h6,
 strong {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 em {
-    font-style: italic;
+  font-style: italic;
 }
 
 small {
-    font-size: .75em;
+  font-size: 0.75em;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $alt-font-family;
+  font-weight: bold;
+  color: map-get($colors, "brand");
 }

assets/styles/components/_nav.scss

@@ -3,63 +3,64 @@
  */
 
 .nav-burger {
-    float: right;
-    transition: all $animation-speed $animation;
+  float: right;
+  transition: all $animation-speed $animation;
 }
 
 .nav-burger__line {
-    width: 35px;
-    height: 3px;
-    background-color: map-get($colors, 'brand');
-    display: none;
-    margin: 8px auto;
-    transition: all $animation-speed $animation;
+  width: 35px;
+  height: 3px;
+  background-color: map-get($colors, "brand");
+  display: none;
+  margin: 8px auto;
+  transition: all $animation-speed $animation;
 
-    @include resp-max($breakpoint-nav) {
-        display: block;
-    }
+  @include resp-max($breakpoint-nav) {
+    display: block;
+  }
 
-    .nav-burger.open & {
-        &:nth-child(2) {
-            opacity: 0;
-        }
+  .nav-burger.open & {
+    &:nth-child(2) {
+      opacity: 0;
+    }
 
-        &:nth-child(1) {
-            transform: translateY(11px) rotate(45deg);
-        }
+    &:nth-child(1) {
+      transform: translateY(11px) rotate(45deg);
+      background-color: map-get($colors, "background");
+    }
 
-        &:nth-child(3) {
-            transform: translateY(-11px) rotate(-45deg);
-        }
+    &:nth-child(3) {
+      transform: translateY(-11px) rotate(-45deg);
+      background-color: map-get($colors, "background");
     }
+  }
 }
 
-
 /**
  * Navs
  */
 
 .nav {
-    list-style: none;
-    margin: 0;
+  list-style: none;
+  margin: 0;
 
-    > li {
-        display: inline-block;
-        margin-right: $base-spacing-unit;
+  > li {
+    display: inline-block;
+    margin-right: $base-spacing-unit;
 
-        &:last-child {
-            margin-right: 0;
-        }
-        > a {
-            display: block;
-        }
+    &:last-child {
+      margin-right: 0;
+    }
+    > a {
+      display: block;
     }
+  }
 }
 
 .nav--header {
-    @include resp-max($breakpoint-nav) {
-        ul {
-            list-style: none;
-        }
+  @include resp-max($breakpoint-nav) {
+    ul {
+      list-style: none;
     }
+  }
 }

assets/styles/config/_variables.scss

@@ -12,59 +12,59 @@ $breakpoint-nav: 1000px;
  * Typography
  */
 
-$base-font-family:        'Helvetica Neue', Helvetica, Arial, sans-serif;
-$alt-font-family:         'Georgia', 'Times New Roman', Times, serif;
+$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$alt-font-family: "Roboto", "Times New Roman", Times, serif;
 
-$base-font-size:          16;
-$base-line-height:        1.5;
-$base-spacing-unit:       ($base-font-size * $base-line-height) * 1px;
+$base-font-size: 16;
+$base-line-height: 1.5;
+$base-spacing-unit: ($base-font-size * $base-line-height) * 1px;
 
 /**
  * Grid
  */
 
 $grid-max-width: 1200px;
-$grid-columns:   12;
-$grid-gutter:    $base-spacing-unit;
+$grid-columns: 12;
+$grid-gutter: $base-spacing-unit;
 
 /**
  * Colors
  */
 
 $colors: (
-    'base': #444,
-    'background': #fff,
-    'brand': #444,
-    'success': #5CB85C,
-    'info': #444,
-    'warning': #F0AD4E,
-    'danger': #D9534F
+  "base": #444,
+  "background": #fff,
+  "brand": #444,
+  "success": #5cb85c,
+  "info": #444,
+  "warning": #f0ad4e,
+  "danger": #d9534f,
 );
 
 /**
  * Spacing
  */
 
- $spacings: (
-    'xl' ($base-spacing-unit * 4),
-    'lg' ($base-spacing-unit * 3),
-    'md' ($base-spacing-unit * 2),
-    'sm' ($base-spacing-unit * 1),
-    'xs' ($base-spacing-unit * 0.5),
-    'none' 0,
+$spacings: (
+  "xl" ($base-spacing-unit * 4),
+  "lg" ($base-spacing-unit * 3),
+  "md" ($base-spacing-unit * 2),
+  "sm" ($base-spacing-unit * 1),
+  "xs" ($base-spacing-unit * 0.5),
+  "none" 0
 );
 
- /**
+/**
  * Font Sizes
  */
 
- $font-sizes: (
-    '2xl' $base-font-size + 16,
-    'xl' $base-font-size + 8,
-    'lg' $base-font-size + 6,
-    'md' $base-font-size + 2,
-    'sm' $base-font-size,
-    'xs' $base-font-size - 2,
+$font-sizes: (
+  "2xl" $base-font-size + 16,
+  "xl" $base-font-size + 8,
+  "lg" $base-font-size + 6,
+  "md" $base-font-size + 2,
+  "sm" $base-font-size,
+  "xs" $base-font-size - 2
 );
 
 /**
@@ -78,4 +78,4 @@ $border-radius: 3px;
  */
 
 $animation-speed: 250ms;
-$animation: ease-in-out;
+$animation: ease-in-out;

assets/styles/layout/_header.scss

@@ -1,21 +1,25 @@
 .header {
-	padding: $base-spacing-unit 0;
-	margin-bottom: ($base-spacing-unit * 2);
-	.header__navigation {
-		@include resp-max($breakpoint-nav) {
-			display: none;
-			position: fixed;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			background-color: map-get($colors, 'background');
-			nav {
-				display: flex;
-				height: 100%;				
-				align-items: center;
-				justify-content: center;
-			}
-		}
-	}
+  padding: $base-spacing-unit 0;
+  margin-bottom: ($base-spacing-unit * 2);
+  .header__navigation {
+    /*This is the mobile navigation screen*/
+    @include resp-max($breakpoint-nav) {
+      display: none;
+      position: fixed;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-color: map-get($colors, "brand");
+      nav {
+        display: flex;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+      }
+      a {
+        color: map-get($colors, "background");
+      }
+    }
+  }
 }

assets/styles/vendor/simple-grid/simple-grid.scss

@@ -2,57 +2,56 @@
  * Default variables and helper mixins
  */
 
-@import 
-    'defaults',
-    'mixins';
-
+@import "defaults", "mixins";
 
 /**
  * Grid scaffolding
  */
 
 .container {
-    @include clearfix;
+  @include clearfix;
+  & {
     max-width: $grid-max-width;
     margin: 0 auto;
     padding: 0 $grid-gutter;
+  }
 }
 
 .row {
-    list-style: none;
-    margin-left: -$grid-gutter;
-    &:not(.row--flex) {
-        @include clearfix;
-    }
-    &.row--gutterless {
-        margin-left: 0;
-    }
-    &.row--flex {
-        display: flex;
-        flex-wrap: wrap;
-    }
+  list-style: none;
+  margin-left: -$grid-gutter;
+  &:not(.row--flex) {
+    @include clearfix;
+  }
+  &.row--gutterless {
+    margin-left: 0;
+  }
+  &.row--flex {
+    display: flex;
+    flex-wrap: wrap;
+  }
 }
 
 .col {
+  & {
     float: left;
     padding-left: $grid-gutter;
     box-sizing: border-box;
-    .row--gutterless & {
-        padding-left: 0;
-    }
+  }
+  .row--gutterless & {
+    padding-left: 0;
+  }
 }
 
-
-
 /**
  * Columns generator
  */
 
 @each $breakpoint in $breakpoints {
-    $name: nth($breakpoint, 1);
-    $declaration: nth($breakpoint, 2);
+  $name: nth($breakpoint, 1);
+  $declaration: nth($breakpoint, 2);
 
-    @media only screen and #{$declaration} {
-        @include grid-loop($name);
-    }
+  @media only screen and #{$declaration} {
+    @include grid-loop($name);
+  }
 }