Add stylelint CSS fixes

src/components/button/style.scss

@@ -9,9 +9,11 @@ $button-font-size: $text-font-size;
   0% {
     opacity: 0;
   }
+
   20% {
     opacity: 1;
   }
+
   100% {
     width: 200%;
     padding-bottom: 200%;

src/components/global-footer/style.scss

@@ -20,6 +20,7 @@ $author-text-color: $gray;
       text-align: left;
     }
   }
+
   .author-metadata {
     margin-left: 5px;
     color: $author-text-color;

src/components/hero/style.scss

@@ -6,6 +6,7 @@ $thismoment-background-color: $brand-thismoment;
   position: relative;
   z-index: 1;
   background-color: #999;
+
   .hero-background-image {
     height: 200px;
     background-position: top center;
@@ -26,6 +27,7 @@ $thismoment-background-color: $brand-thismoment;
     @include breakpoint(large) {
       height: 600px;
     }
+
     &.home {
       background-image: url('../../assets/images/home/tableau-large.jpg');
     }

src/components/menu/style.scss

@@ -24,10 +24,12 @@ $transition-timing-function: ease;
       transform $transition-duration $transition-timing-function,
       y $transition-duration $transition-delay $transition-timing-function;
   }
+
   .line-middle {
     opacity: 1;
     transition: opacity 0.25s $transition-delay $transition-timing-function;
   }
+
   .line-bottom {
     transition:
       transform $transition-duration $transition-timing-function,
@@ -42,10 +44,12 @@ $transition-timing-function: ease;
         y $transition-duration $transition-timing-function,
         transform $transition-duration $transition-delay $transition-timing-function;
     }
+
     .line-middle {
       opacity: 0;
       transition: opacity 0.25s $transition-timing-function;
     }
+
     .line-bottom {
       y: 18px;
       transform: rotate(45deg);

src/styles/base/_colors.scss

@@ -14,7 +14,7 @@ $cerulean: #00aeff;
 $giants-orange: #fe5a1d;
 
 // Branded Colors
-$brand-sony: #343A64;
+$brand-sony: #343a64;
 $brand-thismoment: #6bc04b;
 $brand-linkedin: #0077b5;
 $brand-instagram: #e1306c;

src/styles/base/_fonts.scss

@@ -9,15 +9,18 @@ $hack-path: 'hack';
 // Helvetica Neue Roman
 @font-face {
   font-family: 'HelveticaNeueLTStd-Roman';
-  src: url('#{$font-path}/#{$helvetica-neue-roman-path}/HelveticaNeueLTStd-Roman.eot?#iefix') format('embedded-opentype'),
+  src:
+    url('#{$font-path}/#{$helvetica-neue-roman-path}/HelveticaNeueLTStd-Roman.eot?#iefix') format('embedded-opentype'),
     url('#{$font-path}/#{$helvetica-neue-roman-path}/HelveticaNeueLTStd-Roman.otf') format('opentype'),
-    url('#{$font-path}/#{$helvetica-neue-roman-path}/HelveticaNeueLTStd-Roman.woff') format('woff'), url('#{$font-path}/#{$helvetica-neue-roman-path}/HelveticaNeueLTStd-Roman.ttf') format('truetype');
+    url('#{$font-path}/#{$helvetica-neue-roman-path}/HelveticaNeueLTStd-Roman.woff') format('woff'),
+    url('#{$font-path}/#{$helvetica-neue-roman-path}/HelveticaNeueLTStd-Roman.ttf') format('truetype');
 }
 
 // Helvetica Neue Light
 @font-face {
   font-family: 'HelveticaNeueLTStd-Lt';
-  src: url('#{$font-path}/#{$helvetica-neue-light-path}/HelveticaNeueLTStd-Lt.eot?#iefix') format('embedded-opentype'),
+  src:
+    url('#{$font-path}/#{$helvetica-neue-light-path}/HelveticaNeueLTStd-Lt.eot?#iefix') format('embedded-opentype'),
     url('#{$font-path}/#{$helvetica-neue-light-path}/HelveticaNeueLTStd-Lt.otf') format('opentype'),
     url('#{$font-path}/#{$helvetica-neue-light-path}/HelveticaNeueLTStd-Lt.woff') format('woff'),
     url('#{$font-path}/#{$helvetica-neue-light-path}/HelveticaNeueLTStd-Lt.ttf') format('truetype');
@@ -26,7 +29,8 @@ $hack-path: 'hack';
 // Gotham Book
 @font-face {
   font-family: 'Gotham-Book';
-  src: url('#{$font-path}/#{$gotham-book-path}/Gotham-Book.eot?#iefix') format('embedded-opentype'),
+  src:
+    url('#{$font-path}/#{$gotham-book-path}/Gotham-Book.eot?#iefix') format('embedded-opentype'),
     url('#{$font-path}/#{$gotham-book-path}/Gotham-Book.otf') format('opentype'),
     url('#{$font-path}/#{$gotham-book-path}/Gotham-Book.woff') format('woff'),
     url('#{$font-path}/#{$gotham-book-path}/Gotham-Book.ttf') format('truetype');
@@ -35,7 +39,8 @@ $hack-path: 'hack';
 // Gotham Round Light
 @font-face {
   font-family: 'GothamRounded-Light';
-  src: url('#{$font-path}/#{$gotham-round-light-path}/GothamRounded-Light.eot?#iefix') format('embedded-opentype'),
+  src:
+    url('#{$font-path}/#{$gotham-round-light-path}/GothamRounded-Light.eot?#iefix') format('embedded-opentype'),
     url('#{$font-path}/#{$gotham-round-light-path}/GothamRounded-Light.otf')  format('opentype'),
     url('#{$font-path}/#{$gotham-round-light-path}/GothamRounded-Light.woff') format('woff'),
     url('#{$font-path}/#{$gotham-round-light-path}/GothamRounded-Light.ttf')  format('truetype');
@@ -44,7 +49,8 @@ $hack-path: 'hack';
 // Hack
 @font-face {
   font-family: 'Hack';
-  src: url('#{$font-path}/#{$hack-path}/hack-regular-webfont.eot?#iefix') format('embedded-opentype'),
+  src:
+    url('#{$font-path}/#{$hack-path}/hack-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('#{$font-path}/#{$hack-path}/hack-regular-webfont.woff') format('woff'),
     url('#{$font-path}/#{$hack-path}/hack-regular-webfont.ttf') format('truetype');
 }

src/styles/layout/_images.scss

@@ -1,6 +1,7 @@
 // Images
 figure {
   margin: 0;
+
   img {
     width: 100%;
   }

src/styles/layout/_links.scss

@@ -16,7 +16,7 @@ a {
     content: '';
   }
 
-  @media (hover:hover) {
+  @media (hover: hover) {
     &:hover {
       color: $link-text-hover-color;
       transition: color 0.25s ease-in;

src/styles/layout/_main.scss

@@ -22,6 +22,7 @@ body {
   position: relative;
   z-index: 1;
   margin: 0;
+
   &:before {
     position: absolute;
     z-index: 100;

src/styles/utilities/_mixins.scss

@@ -5,7 +5,7 @@
 // e.g., font-size: 1em = 1rem = 16px = 100%;
 // http://www.w3.org/TR/css3-mediaqueries/#units
 
-$screen-sm: 0em; // 0px
+$screen-sm: 0; // 0px
 $screen-md: 40em; // 640px
 $screen-lg: 64em; // 1024px
 
@@ -25,17 +25,20 @@ $breakpoints: (
         @content;
       }
     }
+
     @else if $breakpoint == 'medium' {
       @media only screen and (min-width: map-get($breakpoints, medium)) {
         @content;
       }
     }
+
     @else if $breakpoint == 'large' {
       @media only screen and (min-width: map-get($breakpoints, large)) {
         @content;
       }
     }
   }
+
   @else {
     @warn 'Not a valid breakpoint: ' + $breakpoint;
   }