refactor(starter): upgrade to new version of gatsby

src/assets/scss/_base.scss

@@ -1,4 +1,4 @@
 @charset "UTF-8";
 
-@import "normalize-scss";
-@import "base/generic";
+@import "base/generic";
+@import "base/prism";

src/assets/scss/_mixins.scss

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
 @import "mixins/breakpoints";
-@import "mixins/margin";
+@import "mixins/line-height";
 @import "mixins/padding";
-@import "mixins/line-height";
+@import "mixins/margin";

src/assets/scss/_variables.scss

@@ -1,20 +1,17 @@
-/**
- * Variables
- */
 @use "sass:math";
+@use "sass:color";
 
-// Colors
-$color-base: #222;
-$color-primary: #5D93FF;
-$color-secondary: #F7A046;
+$color-base: #222222;
+$color-primary: #5d93ff;
+$color-secondary: #f7a046;
 
-$color-white: #FFF;
-$color-gray: lighten($color-base, 40%);
-$color-gray-border: lighten($color-base, 77%);
-$color-gray-bg: lighten($color-base, 79%);
+$color-white: #ffffff;
+$color-gray: color.adjust($color-base, 40%);
+$color-gray-border: color.adjust($color-base, 77%);
+$color-gray-bg: color.adjust($color-base, 79%);
 
-// Typographic
-$typographic-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+$typographic-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI",
+  "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
 
 $typographic-root-font-size: 100;
 $typographic-base-font-size: 16px;
@@ -26,13 +23,14 @@ $typographic-base-font-color: $color-base;
 $typographic-link-p-font-color: $color-primary;
 $typographic-link-s-font-color: $color-secondary;
 
-$typographic-leading: round(16 * math.div($typographic-root-font-size, 100) * $typographic-base-line-height);
+$typographic-leading: math.round(
+  16 * math.div($typographic-root-font-size, 100) *
+    $typographic-base-line-height
+);
 
-// Buttons
 $button-height: 35px;
 $button-border-radius: 20px;
 
-// Layout
 $layout-post-single-width: 945px;
 $layout-post-width: $layout-post-single-width - 305px;
 

src/assets/scss/base/_generic.scss

@@ -1,25 +1,25 @@
-/** 
- * Generic
- */
+@import "../variables";
+@import "../mixins";
+
 html {
   font-size: $typographic-root-font-size;
 }
 
 body {
-  margin: 0 0 0 calc(100vw - 100%);
-  font-family: $typographic-font-family;
   color: $typographic-base-font-color;
-  line-height: $typographic-base-line-height;
+  font-family: $typographic-font-family;
   font-size: $typographic-base-font-size;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  line-height: $typographic-base-line-height;
+  margin: 0 0 0 calc(100vw - 100%);
+  text-rendering: optimizeLegibility;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
 }
 
-h1,
 h2,
+h1,
 h3,
 h4,
 h5,
@@ -39,55 +39,59 @@ h2 {
   font-size: $typographic-base-font-size * 1.6875;
   @include line-height(1.5);
   @include margin-top(2);
-  @include margin-bottom(.5);
+  @include margin-bottom(0.5);
 }
 
 h3 {
   font-size: $typographic-base-font-size * 1.375;
   @include line-height(1);
   @include margin-top(2);
-  @include margin-bottom(.5);
+  @include margin-bottom(0.5);
 }
 
 h4 {
   font-size: $typographic-base-font-size * 1.2;
   @include line-height(1);
   @include margin-top(1.5);
-  @include margin-bottom(.5);
+  @include margin-bottom(0.5);
 }
 
 h5 {
   font-size: $typographic-base-font-size;
   @include line-height(1);
   @include margin-top(2.5);
-  @include margin-bottom(.5);
+  @include margin-bottom(0.5);
 }
 
 h6 {
   font-size: $typographic-base-font-size;
   @include line-height(1);
   @include margin-top(2.5);
-  @include margin-bottom(.5);
+  @include margin-bottom(0.5);
 }
 
 img {
   border: 0;
-  max-width: 100%;
   display: block;
-  margin: inherit auto;
+  max-width: 100%;
 }
 
 hr {
-  margin-top: 52px;
-  margin-bottom: 52px;
+  background-image: linear-gradient(
+    to bottom,
+    transparent 1px,
+    transparent 11px,
+    $color-base 11px,
+    $color-base 15px,
+    transparent 15px,
+    transparent 26px
+  );
+  background-size: 100% 26px;
   border: 0;
   color: $color-base;
   display: block;
   height: 26px;
-  margin-right: auto;
-  margin-left: auto;
-  background-size: 100% 26px;
-  background-image: linear-gradient(to bottom, transparent 1px, transparent 11px, $color-base 11px, $color-base 15px, transparent 15px, transparent 26px);
+  margin: 52px auto;
   width: 100px;
 }
 
@@ -100,7 +104,6 @@ a {
   &:active {
     color: $typographic-link-s-font-color;
   }
-
 }
 
 b,
@@ -113,10 +116,9 @@ ul {
   @include margin-bottom(1);
 
   & li {
-    padding: 0 5px;
     margin-bottom: 10px;
+    padding: 0 5px;
   }
-
 }
 
 p {
@@ -125,20 +127,20 @@ p {
 }
 
 blockquote {
-  padding: 0;
   font-style: italic;
+  padding: 0;
   text-align: center;
 }
 
 figure {
   display: block;
-  width: 100%;
   height: auto;
+  width: 100%;
 }
 
 figcaption {
-  @include line-height(.75);
-  @include margin-top(.25);
+  @include line-height(0.75);
+  @include margin-top(0.25);
   color: $color-base;
   font-size: $typographic-small-font-size;
   font-style: italic;
@@ -165,5 +167,4 @@ figcaption {
   .float-left {
     float: left;
   }
-
 }

src/assets/scss/base/_prism.scss

@@ -0,0 +1,117 @@
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #657b83;
+  font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
+  font-size: 1em;
+  -ms-hyphens: none;
+  -moz-hyphens: none;
+  -webkit-hyphens: none;
+  hyphens: none;
+  line-height: 1.5;
+  -o-tab-size: 4;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  text-align: left;
+  white-space: pre;
+  word-break: normal;
+  word-spacing: normal;
+  word-wrap: normal;
+}
+
+pre[class*="language-"] {
+  border-radius: 0.3em;
+  margin: 0.5em 0;
+  overflow: auto;
+  padding: 1em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background-color: #fdf6e3;
+}
+
+:not(pre) > code[class*="language-"] {
+  border-radius: 0.3em;
+  padding: 0.1em;
+}
+
+code[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+pre[class*="language-"]::-moz-selection {
+  background: #073642;
+}
+
+code[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+pre[class*="language-"]::selection {
+  background: #073642;
+}
+
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  color: #93a1a1;
+}
+
+.token.punctuation {
+  color: #586e75;
+}
+
+.namespace {
+  opacity: 0.7;
+}
+
+.token.boolean,
+.token.constant,
+.token.deleted,
+.token.number,
+.token.property,
+.token.symbol,
+.token.tag {
+  color: #268bd2;
+}
+
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector,
+.token.string,
+.token.url {
+  color: #2aa198;
+}
+
+.token.entity {
+  background: #eee8d5;
+  color: #657b83;
+  cursor: help;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #859900;
+}
+
+.token.class-name,
+.token.function {
+  color: #b58900;
+}
+
+.token.important,
+.token.regex,
+.token.variable {
+  color: #cb4b16;
+}
+
+.token.bold,
+.token.important {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}

src/assets/scss/main.scss

@@ -2,4 +2,4 @@
 
 @import "variables";
 @import "mixins";
-@import "base";
+@import "base";

src/assets/scss/mixins/_breakpoints.scss

@@ -1,25 +1,23 @@
-/**
- * Breakpoints
- */
+@import "../variables";
 
 @mixin breakpoint-xs {
-    @content;
+  @content;
 }
 
 @mixin breakpoint-sm {
-    @media screen and (min-width: $layout-breakpoint-sm) {
-        @content;
-    }
+  @media screen and (min-width: $layout-breakpoint-sm) {
+    @content;
+  }
 }
 
 @mixin breakpoint-md {
-    @media screen and (min-width: $layout-breakpoint-md) {
-        @content;
-    }
+  @media screen and (min-width: $layout-breakpoint-md) {
+    @content;
+  }
 }
 
 @mixin breakpoint-lg {
-    @media screen and (min-width: $layout-breakpoint-lg) {
-        @content
-    }
-}
+  @media screen and (min-width: $layout-breakpoint-lg) {
+    @content;
+  }
+}

src/assets/scss/mixins/_line-height.scss

@@ -1,7 +1,5 @@
-/**
- * Line-Height
- */
+@import "../variables";
 
 @mixin line-height($number) {
-    line-height: #{ $number * $typographic-leading + "px"};
-}
+  line-height: #{$number * $typographic-leading + "px"};
+}

src/assets/scss/mixins/_margin.scss

@@ -1,25 +1,43 @@
-/**
- * Margin
- */
+@import "../variables";
 
 @mixin margin-top($number) {
-    margin-top: #{ $number * $typographic-leading + "px"};
+  margin-top: #{$number * $typographic-leading + "px"};
 }
 
 @mixin margin-bottom($number) {
-    margin-bottom: #{ $number * $typographic-leading + "px"};
+  margin-bottom: #{$number * $typographic-leading + "px"};
 }
 
-@mixin margin($top, $right, $bottom:null, $left:null) {
-    @if $left==null and $bottom==null {
-        margin: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"};
-    }
-
-    @else if $left==null or $left==$right {
-        margin: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"} #{ $bottom * $typographic-leading + "px"};
-    }
-    
-    @else {
-        margin: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"} #{ $bottom * $typographic-leading + "px"} #{ $left * $typographic-leading + "px"};
-    }
-}
+@mixin margin($top, $right, $bottom: null, $left: null) {
+  @if not $left and not $bottom {
+    margin: #{$top *
+      $typographic-leading +
+      "px"}
+      #{$right *
+      $typographic-leading +
+      "px"};
+  } @else if not $left or $left == $right {
+    margin: #{$top *
+      $typographic-leading +
+      "px"}
+      #{$right *
+      $typographic-leading +
+      "px"}
+      #{$bottom *
+      $typographic-leading +
+      "px"};
+  } @else {
+    margin: #{$top *
+      $typographic-leading +
+      "px"}
+      #{$right *
+      $typographic-leading +
+      "px"}
+      #{$bottom *
+      $typographic-leading +
+      "px"}
+      #{$left *
+      $typographic-leading +
+      "px"};
+  }
+}

src/assets/scss/mixins/_padding.scss

@@ -1,19 +1,39 @@
-/**
- * Padding
- */
+@import "../variables";
 
-@mixin padding($top, $right, $bottom:null, $left:null) {
-    @if $left==null and $bottom==null {
-        padding: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"};
-    }
-    @else if $left==null or $left==$right {
-        padding: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"} #{ $bottom * $typographic-leading + "px"};
-    }
-    @else {
-        padding: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"} #{ $bottom * $typographic-leading + "px"} #{ $left * $typographic-leading + "px"};
-    }
+@mixin padding($top, $right, $bottom: null, $left: null) {
+  @if not $left and not $bottom {
+    padding: #{$top *
+      $typographic-leading +
+      "px"}
+      #{$right *
+      $typographic-leading +
+      "px"};
+  } @else if not $left or $left == $right {
+    padding: #{$top *
+      $typographic-leading +
+      "px"}
+      #{$right *
+      $typographic-leading +
+      "px"}
+      #{$bottom *
+      $typographic-leading +
+      "px"};
+  } @else {
+    padding: #{$top *
+      $typographic-leading +
+      "px"}
+      #{$right *
+      $typographic-leading +
+      "px"}
+      #{$bottom *
+      $typographic-leading +
+      "px"}
+      #{$left *
+      $typographic-leading +
+      "px"};
+  }
 }
 
 @mixin padding-equal($number) {
-    padding: #{ $number * $typographic-leading + "px"};
-}
+  padding: #{$number * $typographic-leading + "px"};
+}