Jenessawhite/fix sass

.gitignore

@@ -9,6 +9,7 @@
 # development artifacts
 /.sass-cache
 /_site
+src/**/*.css
 
 # production
 /build

package.json

@@ -4,15 +4,21 @@
   "private": true,
   "dependencies": {
     "@blueprintjs/core": "^2.2.1",
+    "node-sass-chokidar": "1.3.0",
+    "npm-run-all": "4.1.3",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
     "react-ga": "2.5.0",
     "react-scripts": "1.1.4",
     "react-transition-group": "^2.3.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build-css": "node-sass-chokidar src/ -o src/",
+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build-js": "react-scripts build",
+    "build": "npm-run-all build-css build-js",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "precommit": "lint-staged"

src/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './styles/index.css';
 import App from './components/App';
 import registerServiceWorker from './registerServiceWorker';
 

src/styles/App.scss

@@ -0,0 +1,10 @@
+@import '~@blueprintjs/core/lib/css/blueprint.css';
+@import '~@blueprintjs/icons/lib/css/blueprint-icons.css';
+@import '~@blueprintjs/core/lib/css/blueprint.css';
+@import '~@blueprintjs/icons/lib/css/blueprint-icons.css';
+
+@import "variables";
+@import "common";
+@import "header";
+@import "sections";
+@import '//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css';

src/styles/_common.scss

@@ -0,0 +1,39 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+.App {
+  text-align: center;
+}
+
+.bg-pink {
+  background-color: $pink;
+}
+
+.white .pt-icon {
+  color: $white;
+}
+
+hr {
+  border-top: 1px solid #f44e86;
+  border-bottom: none;
+  max-width: 100px;
+  margin: 15px auto;
+}
+
+/* mailchimp embedded form */
+#mc_embed_signup {
+  clear: left;
+  font: 14px Helvetica, Arial, sans-serif;
+}
+
+#mc_embed_signup .button {
+  background-color: #f44e86;
+}
+
+#mc_hidden {
+  position: absolute;
+  left: -5000px;
+}

src/styles/_header.scss

@@ -0,0 +1,3 @@
+.logo {
+  height: 40px;
+}

src/styles/_sections.scss

@@ -0,0 +1,42 @@
+section p {
+  padding: rem(20px);
+}
+
+// WELCOME SECTION
+#welcome {
+  background: linear-gradient(
+      0deg,
+      rgba(0, 121, 176, 0.6) 0%,
+      rgba(0, 121, 176, 0.6)
+    ),
+    url(../images/banner.jpg) no-repeat center center / cover;
+  min-height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .overlay {
+    color: white;
+    max-width: 550px;
+    padding: 20px;
+    font-size: 1.7em;
+  }
+}
+
+// CONTACT SECTION
+#contact {
+  background-color: #0079b0;
+  color: white;
+  padding: 20px;
+
+  h2,
+  h3 {
+    color: white;
+  }
+
+  a {
+    color: white;
+    text-decoration: underline;
+  }
+
+}

src/styles/_variables.scss

@@ -0,0 +1,95 @@
+// Use this file to overwrite the basic Bootstrap variables and add your own variables
+// To overwrite a Bootstrap variable you don´t have to touch the Bootstrap folder.
+// Just copy a variable from src/sass/bootstrap4/_variables.scss, paste it here and edit the value.
+
+// COLORS
+$pink: #c9297b;
+$light-pink: #f44e86;
+$blue: #0079b0;
+$light-blue: #56d3f4;
+$white: #fff;
+$black: #010a07;
+
+// PX to REM - https://github.com/pierreburel/sass-rem
+$rem-baseline: 16px !default;
+$rem-fallback: false !default;
+$rem-px-only: false !default;
+
+@function rem-separator($list, $separator: false) {
+  @if $separator == 'comma' or $separator == 'space' {
+    @return append($list, null, $separator);
+  }
+
+  @if function-exists('list-separator') == true {
+    @return list-separator($list);
+  }
+
+  // list-separator polyfill by Hugo Giraudel (https://sass-compatibility.github.io/#list_separator_function)
+  $test-list: ();
+  @each $item in $list {
+    $test-list: append($test-list, $item, space);
+  }
+
+  @return if($test-list == $list, space, comma);
+}
+
+@mixin rem-baseline($zoom: 100%) {
+  font-size: $zoom / 16px * $rem-baseline;
+}
+
+@function rem-convert($to, $values...) {
+  $result: ();
+  $separator: rem-separator($values);
+
+  @each $value in $values {
+    @if type-of($value) == 'number' and unit($value) == 'rem' and $to == 'px' {
+      $result: append($result, $value / 1rem * $rem-baseline + 0px, $separator);
+    } @else if
+      type-of($value) ==
+      'number' and
+      unit($value) ==
+      'px' and
+      $to ==
+      'rem'
+    {
+      $result: append($result, $value / $rem-baseline + 0rem, $separator);
+    } @else if type-of($value) == 'list' {
+      $value-separator: rem-separator($value);
+      $value: rem-convert($to, $value...);
+      $value: rem-separator($value, $value-separator);
+      $result: append($result, $value, $separator);
+    } @else {
+      $result: append($result, $value, $separator);
+    }
+  }
+
+  @return if(length($result) == 1, nth($result, 1), $result);
+}
+
+@function rem($values...) {
+  @if $rem-px-only {
+    @return rem-convert(px, $values...);
+  } @else {
+    @return rem-convert(rem, $values...);
+  }
+}
+
+@mixin rem($properties, $values...) {
+  @if type-of($properties) == 'map' {
+    @each $property in map-keys($properties) {
+      @include rem($property, map-get($properties, $property));
+    }
+  } @else {
+    @each $property in $properties {
+      @if $rem-fallback or $rem-px-only {
+        #{$property}: rem-convert(px, $values...);
+      }
+      @if not $rem-px-only {
+        #{$property}: rem-convert(rem, $values...);
+      }
+    }
+  }
+}
+// End PX to REM
+
+