Changing branding & scss

Author: killshot13

README.md

@@ -39,29 +39,29 @@ You can [create a site](https://app.stackbit.com/create?theme=https://github.com
 
 ## Develop Locally
 
-1.  Install [Node.js and npm](https://nodejs.org/en/)
+1. Install [Node.js and npm](https://nodejs.org/en/)
 
-1.  Install npm dependencies:
+1. Install npm dependencies:
 
         npm install
 
-1.  Get "stackbit-api-key" from project menu in [Stackbit dashboard](https://app.stackbit.com/dashboard)
+1. Get "stackbit-api-key" from project menu in [Stackbit dashboard](https://app.stackbit.com/dashboard)
 
-1.  Run the following command to assign this key to `STACKBIT_API_KEY` environment variable:
+1. Run the following command to assign this key to `STACKBIT_API_KEY` environment variable:
 
-        export STACKBIT_API_KEY={stackbit_netlify_api_key}
+        export STACKBIT_API_KEY={stackbit_api_key}
 
-1.  Run the following command to fetch additional site contents from Stackbit if needed:
+1. Run the following command to fetch additional site contents from Stackbit if needed:
 
-        npx @stackbit/stackbit-pull --stackbit-pull-api-url=https://api.stackbit.com/pull/60323df295aa610015b59f66
+        npx @stackbit/stackbit-pull --stackbit-pull-api-url=https://api.stackbit.com/pull/60323df295aa610015b59f66 --stackbit-api-key=STACKBIT_API_KEY
 
-1.  Start the Gatsby local development server:
+1. Start the Gatsby local development server:
 
         npm run develop
 
-1.  Open [http://localhost:8000/](http://localhost:8000/) in the browser
+1. Open [http://localhost:8000/](http://localhost:8000/) in the browser
 
-1.  🎉
+1. 🎉
 
 ## Editing Content
 

src/components/Layout.js

@@ -65,7 +65,6 @@ export default class Body extends React.Component {
 							)
 						}
 					)}
-					<link href='https://use.typekit.net/hye7dbv.css' rel='stylesheet' />
 					{_.get(this.props, 'pageContext.site.siteMetadata.favicon', null) && (
 						<link
 							rel='icon'

src/pages/posts/how-to-build-an-smtp-mail-server-with-express-node-and-gmail-aof.md

@@ -8,7 +8,7 @@ excerpt: >-
 thumb_img_path: >-
   https://res.cloudinary.com/practicaldev/image/fetch/s--U2LLP4Iw--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/de3p75v2w0yfb2sxcgpy.jpg
 comments_count: 5
-positive_reactions_count: 224
+positive_reactions_count: 225
 tags:
   - tutorial
   - node

src/pages/posts/on-winning-the-node-badge-2m0n.md

@@ -8,7 +8,7 @@ excerpt: >-
 thumb_img_path: >-
   https://res.cloudinary.com/practicaldev/image/fetch/s--IQGV29YR--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ongx7g58br8kxelasq1.png
 comments_count: 0
-positive_reactions_count: 0
+positive_reactions_count: 2
 tags:
   - discuss
   - webdev

src/sass/imports/_general.scss

@@ -2,15 +2,15 @@
  * General
  */
 html {
-  font-family: _font(primary);
   font-size: 112.5%;
   height: 100%;
   min-height: 100%;
 }
 
 body {
-  background: #fff;
-  color: _palette(primary);
+  font-family: _font(text);
+  background: _palette(blue10);
+  color: _palette(text20);
   line-height: 1.66667;
 }
 
@@ -33,7 +33,8 @@ h3,
 h4,
 h5,
 h6 {
-  color: _palette(secondary);
+  font-family: _font(primary);
+  color: _palette(text20);
   font-weight: bold;
   line-height: 1.2;
   margin: 1.66667rem 0 0.83333rem;
@@ -164,8 +165,8 @@ ol {
   padding: 0 0 0 1.33333em;
 }
 
-li > ul,
-li > ol {
+li>ul,
+li>ol {
   margin-bottom: 0;
 }
 
@@ -227,6 +228,7 @@ input[type="search"],
 input[type="url"],
 select,
 textarea {
+  font-family: _font(accent);
   background: _palette(bg);
   border: 1px solid _palette(border);
   border-radius: 5px;
@@ -331,11 +333,11 @@ input[type="submit"],
 input[type="button"],
 input[type="reset"],
 .button {
-  background: _palette(accent);
+  background: _palette(blue10);
   border: 2px solid _palette(accent);
   border-radius: 30px;
   box-sizing: border-box;
-  color: #fff;
+  color: _palette(accent);
   display: inline-block;
   font-size: 14px;
   letter-spacing: 0.075em;
@@ -415,8 +417,8 @@ img {
 
 /* Text meant only for screen readers */
 .screen-reader-text,
-.site-logo + .site-identity .site-title,
-.site-logo + .site-identity .site-description {
+.site-logo+.site-identity .site-title,
+.site-logo+.site-identity .site-description {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;

src/sass/imports/_header.scss

@@ -2,9 +2,9 @@
  * Site Header
  */
 .site-header {
-  background: #fff;
+  background: _palette(blue20);
   border-bottom: 1px solid _palette(border);
-  color: _palette(primary);
+  color: _palette(text20);
 }
 
 .site-header-inside {

src/sass/imports/_post-navigation.scss

@@ -31,7 +31,7 @@
   right: 0;
 }
 
-.post-full + .block-read-next {
+.post-full+.block-read-next {
   margin-bottom: 3.33333em;
   margin-top: 5em;
 }

src/sass/main.scss

@@ -1,30 +1,39 @@
+@charset "utf-8";
+
+@import url("https://use.typekit.net/hye7dbv.css");
+
 // Font.
-$font: (
-  primary: (
-    "Roboto",
-    Helvetica,
-    sans-serif,
-  ),
-  monospace: (
-    Consolas,
-    Monaco,
-    "Andale Mono",
-    "Ubuntu Mono",
-    monospace,
-  ),
+$font: (primary: ("Paralucent",
+    sans-serif),
+  text: ("Paralucent Text",
+    sans-serif),
+  accent: ("Paralucent Stencil"
+    sans-serif),
+  monospace: ("Fira Mono",
+    monospace),
 );
 
 // Palette.
-$palette: (
-  primary: #555e69,
-  secondary: darken(#555e69, 15%),
-  meta: lighten(#555e69, 25%),
-  border: lighten(#555e69, 55%),
-  bg: lighten(#555e69, 60%),
-  accent: #1de2bc,
+$palette: (primary: #5E8CA7,
+  secondary: darken(#5E8CA7, 15%),
+  meta: lighten(#5E8CA7, 25%),
+  border: lighten(#5E8CA7, 55%),
+  bg: lighten(#5E8CA7, 60%),
+  accent: #1CEDCA,
   accent-blue: #10bcf9,
   accent-violet: #9371e6,
   accent-orange: #fc6e51,
+  glow10: #B0FBBC,
+  glow20: #82F9A1,
+  sth10: #BAEDA5,
+  sth20: #1CEDCA,
+  text10: #ECF8FF,
+  text20: #CDE2F0,
+  blue10: #111A20,
+  blue20: #1C2C35,
+  blue30: #243B4A,
+  blue40: #416883,
+  blue50: #5E8CA7,
 );
 
 @import "imports/functions";