Setup SASS structure, add base color variables and normalize styles

Author: kylegordy

_config.yml

@@ -32,6 +32,10 @@ facebook_username: scribd
 linkedin_username: scribd
 github_username:  scribd
 
+# Assets
+sass:
+    sass_dir: assets/_sass
+
 # Build settings
 plugins:
   - jekyll-feed

_includes/head.html

@@ -3,7 +3,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   {%- seo -%}
-  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+  <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
   {%- feed_meta -%}
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
     {%- include google-analytics.html -%}

assets/_sass/base/_additional-defaults.scss

@@ -0,0 +1,28 @@
+html {
+    scroll-behavior: smooth; // smooth anchor link scrolling
+}
+
+
+body {
+    overflow-x: hidden; // for animation transforms
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+// Global box-sizing
+*,
+*:after,
+*:before {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+// Remove tap highlight on mobile
+a {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-tap-highlight-color: transparent; /* For some Androids */
+}

assets/_sass/base/_colors.scss

@@ -0,0 +1,43 @@
+////////////////////
+// Primary Palette
+////////////////////
+
+$cabernet-dark: #5A1D41;
+$cabernet-dark: #6A244D;
+$cabernet-light: #7F1652;
+
+$midnight-dark: #001927;
+$midnight: #00293F;
+$midnight-light: #003451;
+
+$teal-dark: #0D6069;
+$teal: #1E7B85;
+$teal-light: #509BA8;
+
+////////////////////
+// Secondary Palette
+////////////////////
+
+$seafoam-dark: #017F70;
+$seafoam: #02A793;
+$seafoam-light: #02B7A1;
+
+$plum-dark: #87064B;
+$plum: #A9085E;
+$plum-light: #C20067;
+
+$yellow-dark: #E47B01;
+$yellow: #ED8F02;
+$yellow-light: #F0A534;
+
+////////////////////
+// Grayscale
+////////////////////
+
+$slate-800: #000514;
+$slate-700: #1C263D;
+$slate-600: #57617A;
+$slate-300: #CCD4E8;
+$slate-200: #E9EDF8;
+$slate-100: #F8F9FD;
+$white: #fff;