From da1b9f624c7af6ba304e77ffa52faf2162479e2b Mon Sep 17 00:00:00 2001
From: Lukas Geiger <lukas.geiger94@gmail.com>
Date: Wed, 11 Oct 2017 22:09:04 -0500
Subject: [PATCH] Use prettier

---
 components/content-section/content-section.js |  96 +++++-----
 .../content-section/content-section.scss      |  43 ++---
 components/download-buttons.js                |  65 +++----
 components/footer/footer.js                   |  96 +++++-----
 components/footer/footer.scss                 |  16 +-
 components/head/head.js                       |  20 +-
 components/header/header.js                   | 148 ++++++++-------
 components/header/header.scss                 |  53 +++---
 components/kernels/kernel-page.js             |   2 +-
 components/kernels/kernel.js                  |  60 +++---
 components/kernels/node.js                    |  54 +++---
 components/kernels/page-header.js             |   6 +-
 components/kernels/python.js                  |  58 +++---
 components/layout/layout.js                   |  36 ++--
 components/layout/layout.scss                 |  59 +++---
 components/navigation/navigation-left.js      |   4 +-
 components/navigation/navigation-right.js     |   8 +-
 components/navigation/navigation.scss         |   1 -
 components/page-header/page-header.js         |  44 ++---
 components/page-header/page-header.scss       |  51 ++---
 next.config.js                                |  68 +++----
 package.json                                  |  10 +-
 pages/_error.js                               |   5 +-
 pages/about.js                                |  29 ++-
 pages/atom.js                                 |  55 +++---
 pages/desktop.js                              |  12 +-
 pages/index.js                                |  48 +++--
 pages/kernels/index.js                        |  96 +++++-----
 pages/kernels/node.js                         |  97 +++++-----
 pages/kernels/python.js                       |  96 +++++-----
 pages/kernels/r.js                            |  97 +++++-----
 postcss.config.js                             |  12 +-
 styles/common.scss                            |  10 +-
 styles/partials/abstract/abstract.scss        |   4 +-
 styles/partials/abstract/colors.scss          |  10 +-
 styles/partials/abstract/effects.scss         |   1 -
 styles/partials/abstract/mixins.scss          | 100 ++++++----
 styles/partials/abstract/normalize.scss       | 176 +++++++++++++++++-
 styles/partials/abstract/variables.scss       |  26 +--
 styles/partials/elements/buttons.scss         |  44 ++---
 styles/partials/typography.scss               |   6 +-
 41 files changed, 1036 insertions(+), 886 deletions(-)

diff --git a/components/content-section/content-section.js b/components/content-section/content-section.js
index 023cbcd7..ad730bee 100644
--- a/components/content-section/content-section.js
+++ b/components/content-section/content-section.js
@@ -3,58 +3,58 @@ import styles from "./content-section.scss";
 import inView from "in-view";
 
 export class ContentSectionPane extends React.Component {
-
-
-    render() {
-
-        let classes = '';
-        if('full' in this.props){
-            classes += ' content-section-pane-full';
-        }
-        if(this.props.className){
-            classes += ' ' + this.props.className;
-        }
-        return (<div className={`pane-50 pane ${this.props.layout ? this.props.layout : ""} ${classes}`}>
-            {this.props.children}
-        </div>);
+  render() {
+    let classes = "";
+    if ("full" in this.props) {
+      classes += " content-section-pane-full";
     }
+    if (this.props.className) {
+      classes += " " + this.props.className;
+    }
+    return (
+      <div
+        className={`pane-50 pane ${this.props.layout
+          ? this.props.layout
+          : ""} ${classes}`}
+      >
+        {this.props.children}
+      </div>
+    );
+  }
 }
 
 export class ContentSection extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-
-    componentDidMount() {
-        inView.offset(50);
-        inView(".inview").on("enter", el => {
-            if (!el.classList.contains("showing")) {
-                el.classList.add("showing");
-            }
-        });
-
-        inView('.inview').check();
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    inView.offset(50);
+    inView(".inview").on("enter", el => {
+      if (!el.classList.contains("showing")) {
+        el.classList.add("showing");
+      }
+    });
+
+    inView(".inview").check();
+  }
+
+  render() {
+    let classes = "";
+
+    if ("full" in this.props) {
+      classes += " content-section-full";
     }
-
-    render() {
-
-        let classes = '';
-
-        if('full' in this.props){
-            classes += ' content-section-full';
-        }
-        if(this.props.className){
-            classes += ' ' + this.props.className;
-        }
-        return (
-            <section className={"content-section " + classes}>
-                <style dangerouslySetInnerHTML={{__html: styles}}/>
-                <div className="content-section-wrapper inview">
-                    <div className="panes center-vertically">
-                        {this.props.children}
-                    </div>
-                </div>
-            </section>
-        );
+    if (this.props.className) {
+      classes += " " + this.props.className;
     }
+    return (
+      <section className={"content-section " + classes}>
+        <style dangerouslySetInnerHTML={{ __html: styles }} />
+        <div className="content-section-wrapper inview">
+          <div className="panes center-vertically">{this.props.children}</div>
+        </div>
+      </section>
+    );
+  }
 }
diff --git a/components/content-section/content-section.scss b/components/content-section/content-section.scss
index 3562c934..937e2460 100644
--- a/components/content-section/content-section.scss
+++ b/components/content-section/content-section.scss
@@ -1,6 +1,6 @@
 @import "partials/abstract/abstract";
 
-section{
+section {
   overflow: hidden;
 }
 .content-section {
@@ -30,12 +30,10 @@ section{
     }
   }
 
-  &-pane{
-
-    &-full{
+  &-pane {
+    &-full {
       width: 100% !important;
-      max-width:100%;
-
+      max-width: 100%;
     }
   }
 }
@@ -59,15 +57,14 @@ section{
   }
 
   .pane {
-
-    &.center{
+    &.center {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: center;
-      p{
-        max-width:580px;
+      p {
+        max-width: 580px;
       }
     }
     &:first-child {
@@ -113,26 +110,26 @@ section{
   }
 }
 
-video{
-  max-width:100%;
+video {
+  max-width: 100%;
 }
-.columns{
+.columns {
   display: flex;
-  max-width:100%;
-  flex-wrap:wrap;
-  @include handheld{
+  max-width: 100%;
+  flex-wrap: wrap;
+  @include handheld {
     flex-direction: column;
   }
-  .column{
+  .column {
     flex: 1;
-    max-width:100%;
-    @include tablet{
+    max-width: 100%;
+    @include tablet {
       width: 100%;
     }
-    &:not(:last-of-type){
-     @include desktop{
-       padding-right:$unit*2;
-     }
+    &:not(:last-of-type) {
+      @include desktop {
+        padding-right: $unit*2;
+      }
     }
   }
 }
diff --git a/components/download-buttons.js b/components/download-buttons.js
index 3fc9584f..b825bd28 100644
--- a/components/download-buttons.js
+++ b/components/download-buttons.js
@@ -41,13 +41,11 @@ export const DownloadFeaturette = ({ platform }: DownloadFeaturetteProps) => {
     <div className="download-featurette">
       <div className="buttons buttons-hero not-mobile">
         <style jsx>
-          {
-            `
+          {`
             a {
               text-decoration: none;
             }
-          `
-          }
+          `}
         </style>
         <a href="https://github.com/nteract/nteract/releases/latest">
           <div className="button button-primary">
@@ -68,42 +66,37 @@ export const DownloadFeaturette = ({ platform }: DownloadFeaturetteProps) => {
 
       <div className="footnote not-mobile">
         <style jsx>
-          {
-            `
-        a {
-          color: currentColor;
-          text-decoration: none;
-        }
-        a:hover {
-          color: white;
-        }
-      `
-          }
-
+          {`
+            a {
+              color: currentColor;
+              text-decoration: none;
+            }
+            a:hover {
+              color: white;
+            }
+          `}
         </style>
         <a href="https://github.com/nteract/nteract/releases/latest">
-          <div className="footnote-message">
-            Download for other platforms
-
-          </div>
+          <div className="footnote-message">Download for other platforms</div>
         </a>
 
-        {platform !== "Windows"
-          ? <a href="https://github.com/nteract/nteract/releases/latest">
-              <WindowsIcon />
-            </a>
-          : null}
-        {platform !== "macOS"
-          ? <a href="https://github.com/nteract/nteract/releases/latest">
-              {" "}<MacIcon />
-            </a>
-          : null}
-        {platform !== "Linux"
-          ? <a href="https://github.com/nteract/nteract/releases/latest">
-              {" "}<LinuxIcon />
-            </a>
-          : null}
-
+        {platform !== "Windows" ? (
+          <a href="https://github.com/nteract/nteract/releases/latest">
+            <WindowsIcon />
+          </a>
+        ) : null}
+        {platform !== "macOS" ? (
+          <a href="https://github.com/nteract/nteract/releases/latest">
+            {" "}
+            <MacIcon />
+          </a>
+        ) : null}
+        {platform !== "Linux" ? (
+          <a href="https://github.com/nteract/nteract/releases/latest">
+            {" "}
+            <LinuxIcon />
+          </a>
+        ) : null}
       </div>
     </div>
   );
diff --git a/components/footer/footer.js b/components/footer/footer.js
index e9b92a8e..e2c9d11e 100644
--- a/components/footer/footer.js
+++ b/components/footer/footer.js
@@ -1,55 +1,53 @@
-import React from 'react'
-import styles from './footer.scss'
-import NavigationLeft from '../navigation/navigation-left'
-import NavigationRight from '../navigation/navigation-right'
-import SocialButtons from '../navigation/social-buttons'
-
+import React from "react";
+import styles from "./footer.scss";
+import NavigationLeft from "../navigation/navigation-left";
+import NavigationRight from "../navigation/navigation-right";
+import SocialButtons from "../navigation/social-buttons";
 
 class Footer extends React.Component {
+  constructor(props) {
+    super(props);
+  }
 
-
-    constructor(props) {
-        super(props);
-    }
-
-    render() {
-        return (
-            <div>
-                <style dangerouslySetInnerHTML={{__html: styles}}/>
-                <footer className="footer-main">
-                    <div className="footer-main-wrapper">
-                        <div className="footer-main-section">
-                            <div className="logos">
-                                <div className="logos-wrapper">
-                                    {/*<div className="logo"><img*/}
-                                        {/*src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/plotly-marketing-pages/images/new-branding/logo/images/plotly-logo-01-stripe%402x.png"*/}
-                                        {/*alt=""/>*/}
-                                    {/*</div>*/}
-                                    {/*<div className="logo"><img*/}
-                                        {/*src="https://nteract.github.io/assets/images/sponsor-domino@3x.png"*/}
-                                        {/*alt=""/>*/}
-                                    {/*</div>*/}
-                                    {/*<div className="logo"><img src="https://nteract.github.io/assets/images/sponsor-carina.svg"*/}
-                                                               {/*alt=""/>*/}
-                                    {/*</div>*/}
-                                    <div className="logo"><img
-                                        src="https://nteract.github.io/assets/images/sponsor-numfocus.png"
-                                        alt=""/>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="footer-main-section links light">
-                            <NavigationLeft/>
-                            <NavigationRight/>
-                            <SocialButtons/>
-                        </div>
-                    </div>
-                </footer>
+  render() {
+    return (
+      <div>
+        <style dangerouslySetInnerHTML={{ __html: styles }} />
+        <footer className="footer-main">
+          <div className="footer-main-wrapper">
+            <div className="footer-main-section">
+              <div className="logos">
+                <div className="logos-wrapper">
+                  {/*<div className="logo"><img*/}
+                  {/*src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/plotly-marketing-pages/images/new-branding/logo/images/plotly-logo-01-stripe%402x.png"*/}
+                  {/*alt=""/>*/}
+                  {/*</div>*/}
+                  {/*<div className="logo"><img*/}
+                  {/*src="https://nteract.github.io/assets/images/sponsor-domino@3x.png"*/}
+                  {/*alt=""/>*/}
+                  {/*</div>*/}
+                  {/*<div className="logo"><img src="https://nteract.github.io/assets/images/sponsor-carina.svg"*/}
+                  {/*alt=""/>*/}
+                  {/*</div>*/}
+                  <div className="logo">
+                    <img
+                      src="https://nteract.github.io/assets/images/sponsor-numfocus.png"
+                      alt=""
+                    />
+                  </div>
+                </div>
+              </div>
             </div>
-        )
-    }
+            <div className="footer-main-section links light">
+              <NavigationLeft />
+              <NavigationRight />
+              <SocialButtons />
+            </div>
+          </div>
+        </footer>
+      </div>
+    );
+  }
 }
 
-
-export default Footer
\ No newline at end of file
+export default Footer;
diff --git a/components/footer/footer.scss b/components/footer/footer.scss
index c20ca903..1ecf60c2 100644
--- a/components/footer/footer.scss
+++ b/components/footer/footer.scss
@@ -6,8 +6,8 @@
   padding-bottom: $gutter*2;
   .nav {
     color: $main-color;
-    .nav-item{
-      &:hover{
+    .nav-item {
+      &:hover {
         color: $main-color;
       }
     }
@@ -22,22 +22,22 @@
       flex-direction: column;
     }
   }
-  &-section{
-    &:nth-of-type(1){
+  &-section {
+    &:nth-of-type(1) {
       display: flex;
       align-items: center;
     }
     //flex:1;
     //display: flex;
     //align-items: center;
-    &.links{
+    &.links {
       display: flex;
-      @include handheld{
+      @include handheld {
         flex-direction: column;
       }
     }
   }
-  .buttons{
+  .buttons {
     display: flex;
     //flex-direction: column;
     //justify-content: flex-end;
@@ -80,4 +80,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/components/head/head.js b/components/head/head.js
index a15d3ef6..173498f3 100644
--- a/components/head/head.js
+++ b/components/head/head.js
@@ -1,18 +1,16 @@
 // @flow
 import React from "react";
 import Head from "next/head";
-import mdi from '../../static/mdi/css/materialdesignicons.css';
+import mdi from "../../static/mdi/css/materialdesignicons.css";
 type HeadProps = {
   pageTitle: string,
   themeColor: string
 };
 
-export default (
-  {
-    pageTitle = ":  write your next code-driven story.",
-    themeColor = "#334865"
-  }: HeadProps
-) => (
+export default ({
+  pageTitle = ":  write your next code-driven story.",
+  themeColor = "#334865"
+}: HeadProps) => (
   <Head>
     <title>nteract{pageTitle}</title>
     <meta charSet="utf-8" />
@@ -23,11 +21,7 @@ export default (
     <link rel="dns-prefetch" href="//nteract.io/" />
     <link rel="dns-prefetch" href="//nteract.github.io/" />
 
-
-
-
-
-      <link
+    <link
       rel="apple-touch-icon"
       sizes="57x57"
       href="https://nteract.github.io/assets/images/icons/apple-icon-57x57.png"
@@ -161,6 +155,6 @@ export default (
     />
 
     <meta name="theme-color" content={themeColor} />
-      <style dangerouslySetInnerHTML={{__html: mdi}}/>
+    <style dangerouslySetInnerHTML={{ __html: mdi }} />
   </Head>
 );
diff --git a/components/header/header.js b/components/header/header.js
index f23725d6..6b611601 100644
--- a/components/header/header.js
+++ b/components/header/header.js
@@ -6,84 +6,92 @@ import NavigationRight from "../navigation/navigation-right";
 import SocialButtons from "../navigation/social-buttons";
 
 class Header extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            mobileMenuOpen: false
-        };
-    }
+  constructor(props) {
+    super(props);
+    this.state = {
+      mobileMenuOpen: false
+    };
+  }
 
-    handleClick(event) {
-        event.preventDefault();
-        let el = event.target;
+  handleClick(event) {
+    event.preventDefault();
+    let el = event.target;
 
-        if (this.state.mobileMenuOpen) {
-            this.setState({
-                mobileMenuOpen: false
-            });
-        } else {
-            this.setState({
-                mobileMenuOpen: true
-            });
-        }
-        console.log(this.state.mobileMenuOpen);
+    if (this.state.mobileMenuOpen) {
+      this.setState({
+        mobileMenuOpen: false
+      });
+    } else {
+      this.setState({
+        mobileMenuOpen: true
+      });
     }
+    console.log(this.state.mobileMenuOpen);
+  }
+
+  render() {
+    const headerStyleHack = {
+      color: this.props.themeColor
+    };
+    const MobileMenu = () => (
+      <div
+        className={`mobile-menu ${this.state.mobileMenuOpen
+          ? "is-active"
+          : ""}`}
+      >
+        <div className="close-button" onClick={this.handleClick.bind(this)}>
+          <svg viewBox="0 0 24 24">
+            <path
+              fill="#000000"
+              d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+            />
+          </svg>
+        </div>
+        <NavigationRight />
+        <NavigationLeft />
+        <SocialButtons />
+      </div>
+    );
 
-    render() {
-        const headerStyleHack = {
-            color: this.props.themeColor
-        };
-        const MobileMenu = () => (
-            <div className={`mobile-menu ${this.state.mobileMenuOpen? 'is-active' : ''}`}>
-                <div className="close-button" onClick={this.handleClick.bind(this)}>
-                    <svg viewBox="0 0 24 24">
-                        <path fill="#000000" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
-                    </svg>
+    return (
+      <div>
+        <style dangerouslySetInnerHTML={{ __html: styles }} />
+        <Headroom style={headerStyleHack}>
+          <header className="header-main">
+            <div className="header-main-wrapper">
+              <div className="header-main-section">
+                <div className="logo">
+                  <Link href="/" prefetch>
+                    <img
+                      src="https://nteract.github.io/assets/images/feature_nteract_logo_header_white@2x.png"
+                      alt=""
+                    />
+                  </Link>
                 </div>
-                <NavigationRight />
                 <NavigationLeft />
+              </div>
+              <div className="header-main-section right not-mobile">
+                <NavigationRight />
                 <SocialButtons />
+              </div>
+              <div
+                className="mobilemenubutton"
+                onClick={this.handleClick.bind(this)}
+              >
+                <svg viewBox="0 0 24 24">
+                  <path
+                    fill="#000000"
+                    d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"
+                  />
+                </svg>
+              </div>
             </div>
-        );
-
-        return (
-            <div>
-                <style dangerouslySetInnerHTML={{ __html: styles }}/>
-                <Headroom style={headerStyleHack}>
-                    <header className="header-main">
-                        <div className="header-main-wrapper">
-                            <div className="header-main-section">
-                                <div className="logo">
-                                    <Link href="/" prefetch>
-                                        <img
-                                            src="https://nteract.github.io/assets/images/feature_nteract_logo_header_white@2x.png"
-                                            alt=""
-                                        />
-                                    </Link>
-                                </div>
-                                <NavigationLeft />
-                            </div>
-                            <div className="header-main-section right not-mobile">
-                                <NavigationRight />
-                                <SocialButtons />
-                            </div>
-                            <div
-                                className="mobilemenubutton"
-                                onClick={this.handleClick.bind(this)}
-                            >
-                                <svg viewBox="0 0 24 24">
-                                    <path fill="#000000" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"/>
-                                </svg>
-                            </div>
-                        </div>
-                    </header>
-                    <MobileMenu />
-
-                </Headroom>
-
-            </div>
-        );
-    }
+          </header>
+          <MobileMenu />
+        </Headroom>
+      </div>
+    );
+  }
 }
 
 export default Header;
diff --git a/components/header/header.scss b/components/header/header.scss
index fb689102..367a3b8b 100644
--- a/components/header/header.scss
+++ b/components/header/header.scss
@@ -9,8 +9,8 @@
   z-index: 2000;
   color: #c8d4e5;
 
-
-  &-wrapper { // .header-main-wrapper
+  &-wrapper {
+    // .header-main-wrapper
     @include global-wrapper;
     flex: 1;
     display: flex;
@@ -18,7 +18,8 @@
     justify-content: space-between;
   }
 
-  &-section { // .header-main-section
+  &-section {
+    // .header-main-section
     flex: 1;
     display: flex;
     &.right {
@@ -30,7 +31,7 @@
   // --
   .logo {
     position: relative;
-    z-index:9999;
+    z-index: 9999;
     img {
       max-width: 100%;
     }
@@ -56,28 +57,26 @@
 
 // --
 // Headroom Styles
-// -- 
+// --
 .headroom {
   background: transparent;
   &-wrapper {
     position: absolute;
     width: 100%;
-    z-index:999;
+    z-index: 999;
   }
   &--pinned {
-
-    &:before{
+    &:before {
       position: absolute;
-      top:0;
-      left:0;
+      top: 0;
+      left: 0;
       width: 100%;
-      height:100%;
-      z-index:-1;
-      content: '';
+      height: 100%;
+      z-index: -1;
+      content: "";
       background: currentColor;
-      opacity:0.85;
+      opacity: 0.85;
     }
-
   }
   position: absolute;
 }
@@ -85,7 +84,8 @@
 .nav {
   color: #c8d4e5;
 
-  .button-icon-only, .nav-item {
+  .button-icon-only,
+  .nav-item {
     opacity: 0.75;
     transform: translateY(5px);
     &:hover {
@@ -100,10 +100,11 @@
   padding: $unit;
   text-decoration: none;
 }
-.mobilemenubutton{
-  padding-top:$unit;
+.mobilemenubutton {
+  padding-top: $unit;
 }
-.mobilemenubutton, .close-button {
+.mobilemenubutton,
+.close-button {
   display: none;
   transform: translateX(8px);
   @include handheld {
@@ -130,7 +131,7 @@
   background-image: url(https://nteract.github.io/assets/images/hero_header_bg@2x.png);
   background-position: top center;
   background-attachment: fixed;
-  background-repeat:no-repeat;
+  background-repeat: no-repeat;
   background-size: calc(#{$global-width} + 200px);
   flex-direction: column;
   align-items: flex-end;
@@ -142,10 +143,10 @@
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-    @media screen and ( max-height: 470px ){
+    @media screen and (max-height: 470px) {
       flex-direction: row;
-      a{
-        margin-left:$unit !important;
+      a {
+        margin-left: $unit !important;
       }
     }
     a {
@@ -154,15 +155,13 @@
       display: block;
       font-size: 2rem;
     }
-
   }
   .icon-buttons {
     margin-top: $gutter*2;
   }
   &.is-active {
-    @include handheld{
+    @include handheld {
       display: flex;
     }
-
   }
-}
\ No newline at end of file
+}
diff --git a/components/kernels/kernel-page.js b/components/kernels/kernel-page.js
index 8aff1960..3728eb30 100644
--- a/components/kernels/kernel-page.js
+++ b/components/kernels/kernel-page.js
@@ -17,7 +17,7 @@ export const kernels = [
   { name: "node.js", path: "/kernels/node" }
 ];
 
-export default (props: KernelPageProps, themeColor: '#444') => (
+export default (props: KernelPageProps, themeColor: "#444") => (
   <Layout pageTitle={`: kernels - ${props.language}`} themeColor={themeColor}>
     <Head>
       <link rel="stylesheet" href="/static/kernels.css" />
diff --git a/components/kernels/kernel.js b/components/kernels/kernel.js
index b4002f9e..509606a6 100644
--- a/components/kernels/kernel.js
+++ b/components/kernels/kernel.js
@@ -1,33 +1,47 @@
 // @flow
 
 export type KernelProps = {
-    displayName: string,
-    installURL: string,
-    repository: string,
-    logo: string,
-    children?: any // It's React$Element<*>, running into https://github.com/facebook/flow/issues/1964 though
+  displayName: string,
+  installURL: string,
+  repository: string,
+  logo: string,
+  children?: any // It's React$Element<*>, running into https://github.com/facebook/flow/issues/1964 though
 };
 
 export default (props: KernelProps) => (
-    <div className="kernel">
-        <div className="kernel-wrapper">
-            <div className="kernel-header">
-                <div className="kernel-header-section">
-                    <h2>
-                        <div className="lang-logo"><img src={props.logo} alt={props.displayName}/></div>
-                        {props.displayName}</h2>
-                </div>
-                <div className="kernel-header-section">
-                    <div className="kernel-header-buttons">
-                        <a className="kernel-header-button" href={props.repository} target="_blank">GitHub Repository</a> <a
-                        className="kernel-header-button" href={props.installURL}  target="_blank">Installation Docs</a></div>
-                </div>
-            </div>
-            <div className="kernel-body">
-                <div className="kernel-body-wrapper">
-                    {props.children}
-                </div>
+  <div className="kernel">
+    <div className="kernel-wrapper">
+      <div className="kernel-header">
+        <div className="kernel-header-section">
+          <h2>
+            <div className="lang-logo">
+              <img src={props.logo} alt={props.displayName} />
             </div>
+            {props.displayName}
+          </h2>
+        </div>
+        <div className="kernel-header-section">
+          <div className="kernel-header-buttons">
+            <a
+              className="kernel-header-button"
+              href={props.repository}
+              target="_blank"
+            >
+              GitHub Repository
+            </a>{" "}
+            <a
+              className="kernel-header-button"
+              href={props.installURL}
+              target="_blank"
+            >
+              Installation Docs
+            </a>
+          </div>
         </div>
+      </div>
+      <div className="kernel-body">
+        <div className="kernel-body-wrapper">{props.children}</div>
+      </div>
     </div>
+  </div>
 );
diff --git a/components/kernels/node.js b/components/kernels/node.js
index 2d446753..e684c6c5 100644
--- a/components/kernels/node.js
+++ b/components/kernels/node.js
@@ -1,34 +1,38 @@
 // @flow
 
 import Kernel from "./kernel";
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import {github} from 'react-syntax-highlighter/dist/styles';
-import {ContentSection, ContentSectionPane} from '../content-section/content-section';
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { github } from "react-syntax-highlighter/dist/styles";
+import {
+  ContentSection,
+  ContentSectionPane
+} from "../content-section/content-section";
 
 const install = `npm install -g ijavascript`;
 
-
-
 export default () => (
-    <ContentSection>
-      <ContentSectionPane full>
-        <Kernel
-            displayName="Node.JS"
-            repository="https://github.com/n-riesco/ijavascript"
-            installURL="http://n-riesco.github.io/ijavascript/doc/install.md.html"
-            logo="/static/nodejs-icon.svg"
-        >
-          <h3>Installation</h3>
-          <p>
-            Note: nteract 0.1.0 includes a bundled node.js kernel. You likely already have it!
-          </p>
-          <div className="columns">
-            <div className="column">
-              <h4>From the terminal</h4>
-              <SyntaxHighlighter language='zsh' style={github}>{install}</SyntaxHighlighter>
-            </div>
+  <ContentSection>
+    <ContentSectionPane full>
+      <Kernel
+        displayName="Node.JS"
+        repository="https://github.com/n-riesco/ijavascript"
+        installURL="http://n-riesco.github.io/ijavascript/doc/install.md.html"
+        logo="/static/nodejs-icon.svg"
+      >
+        <h3>Installation</h3>
+        <p>
+          Note: nteract 0.1.0 includes a bundled node.js kernel. You likely
+          already have it!
+        </p>
+        <div className="columns">
+          <div className="column">
+            <h4>From the terminal</h4>
+            <SyntaxHighlighter language="zsh" style={github}>
+              {install}
+            </SyntaxHighlighter>
           </div>
-        </Kernel>
-      </ContentSectionPane>
-    </ContentSection>
+        </div>
+      </Kernel>
+    </ContentSectionPane>
+  </ContentSection>
 );
diff --git a/components/kernels/page-header.js b/components/kernels/page-header.js
index 60e5181e..fb8b18ef 100644
--- a/components/kernels/page-header.js
+++ b/components/kernels/page-header.js
@@ -6,13 +6,13 @@ import {
   PageHeaderRight
 } from "../page-header/page-header";
 
-export default (themeColor) => (
+export default themeColor => (
   <PageHeader themeColor={themeColor}>
     <PageHeaderLeft>
       <PageHeaderTitle>Kernels</PageHeaderTitle>
       <p>
-        Kernels connect your favorite languages to nteract projects for an improved
-        REPL experience.
+        Kernels connect your favorite languages to nteract projects for an
+        improved REPL experience.
       </p>
     </PageHeaderLeft>
     <PageHeaderRight />
diff --git a/components/kernels/python.js b/components/kernels/python.js
index 7d46fa2b..95418f78 100644
--- a/components/kernels/python.js
+++ b/components/kernels/python.js
@@ -1,9 +1,12 @@
 // @flow
 
 import Kernel from "./kernel";
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import {github} from 'react-syntax-highlighter/dist/styles';
-import {ContentSection, ContentSectionPane} from '../content-section/content-section';
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { github } from "react-syntax-highlighter/dist/styles";
+import {
+  ContentSection,
+  ContentSectionPane
+} from "../content-section/content-section";
 
 const pipInstall = `python -m pip install ipykernel
 python -m ipykernel install --user`;
@@ -11,28 +14,31 @@ python -m ipykernel install --user`;
 const condaInstall = `conda install ipykernel
 python -m ipykernel install --user`;
 
-
 export default () => (
-    <ContentSection>
-        <ContentSectionPane full>
-            <Kernel
-                displayName="Python"
-                repository="https://github.com/ipython/ipykernel"
-                installURL="http://ipython.readthedocs.io/en/stable/install/kernel_install.html"
-                logo="/static/python.png"
-            >
-                <h3>Installation</h3>
-                <div className="columns">
-                    <div className="column">
-                        <h4>pip based</h4>
-                        <SyntaxHighlighter language='zsh' style={github}>{pipInstall}</SyntaxHighlighter>
-                    </div>
-                    <div className="column">
-                        <h4>Using conda</h4>
-                        <SyntaxHighlighter language='zsh' style={github}>{condaInstall}</SyntaxHighlighter>
-                    </div>
-                </div>
-            </Kernel>
-        </ContentSectionPane>
-    </ContentSection>
+  <ContentSection>
+    <ContentSectionPane full>
+      <Kernel
+        displayName="Python"
+        repository="https://github.com/ipython/ipykernel"
+        installURL="http://ipython.readthedocs.io/en/stable/install/kernel_install.html"
+        logo="/static/python.png"
+      >
+        <h3>Installation</h3>
+        <div className="columns">
+          <div className="column">
+            <h4>pip based</h4>
+            <SyntaxHighlighter language="zsh" style={github}>
+              {pipInstall}
+            </SyntaxHighlighter>
+          </div>
+          <div className="column">
+            <h4>Using conda</h4>
+            <SyntaxHighlighter language="zsh" style={github}>
+              {condaInstall}
+            </SyntaxHighlighter>
+          </div>
+        </div>
+      </Kernel>
+    </ContentSectionPane>
+  </ContentSection>
 );
diff --git a/components/layout/layout.js b/components/layout/layout.js
index 0adfc1ed..4c2524d9 100644
--- a/components/layout/layout.js
+++ b/components/layout/layout.js
@@ -1,24 +1,20 @@
-import React from 'react'
-import Head from '../head/head'
-import Header from '../header/header'
-import Footer from '../footer/footer'
-import styles from './layout.scss'
-
+import React from "react";
+import Head from "../head/head";
+import Header from "../header/header";
+import Footer from "../footer/footer";
+import styles from "./layout.scss";
 
 export default class Layout extends React.Component {
+  render() {
+    return (
+      <div className="layout">
+        <style dangerouslySetInnerHTML={{ __html: styles }} />
 
-    render() {
-        return (
-            <div className="layout">
-                <style dangerouslySetInnerHTML={{__html: styles}}/>
-
-                <Head pageTitle={this.props.pageTitle}/>
-                <Header themeColor={this.props.themeColor}/>
-                <div className="page">
-                    { this.props.children }
-                </div>
-                <Footer />
-            </div>
-        );
-    }
+        <Head pageTitle={this.props.pageTitle} />
+        <Header themeColor={this.props.themeColor} />
+        <div className="page">{this.props.children}</div>
+        <Footer />
+      </div>
+    );
+  }
 }
diff --git a/components/layout/layout.scss b/components/layout/layout.scss
index d3bc4240..d7b1407d 100644
--- a/components/layout/layout.scss
+++ b/components/layout/layout.scss
@@ -24,8 +24,8 @@ img {
     flex-direction: column;
   }
 }
-pre{
-  padding:$gutter !important;
+pre {
+  padding: $gutter !important;
   max-width: 100% !important;
   overflow-x: scroll;
   box-shadow: $drop-shadow-pressed;
@@ -33,32 +33,31 @@ pre{
 .kernel {
   width: 100%;
   display: flex;
-  padding:$gutter*2 0;
-  max-width:100%;
-
+  padding: $gutter*2 0;
+  max-width: 100%;
 
   &-wrapper {
     flex: 1;
-    max-width:100%;
+    max-width: 100%;
   }
   &-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
-    padding-bottom:$unit;
+    padding-bottom: $unit;
     border-bottom: 1px solid rgba($color-text-base, 0.15);
-    margin-bottom:$gutter;
-    @include handheld{
+    margin-bottom: $gutter;
+    @include handheld {
       align-items: center;
       justify-content: center;
       flex-direction: column;
     }
     h2 {
-      margin:0;
+      margin: 0;
       display: flex;
       align-items: center;
-      @include handheld{
-        margin-bottom:$gutter;
+      @include handheld {
+        margin-bottom: $gutter;
       }
       .lang-logo {
         margin-right: $unit;
@@ -76,60 +75,60 @@ pre{
       padding: $unit;
       display: block;
       transition: $transition;
-      &:hover{
+      &:hover {
         transform: translateY(-4px);
         box-shadow: $drop-shadow-l-light;
       }
       & + & {
-        margin-left:$gutter;
+        margin-left: $gutter;
       }
     }
   }
 }
 .grid-wrapper {
   display: flex;
-  flex-wrap:wrap;
+  flex-wrap: wrap;
   justify-content: center;
   align-items: flex-start;
 }
 .person {
   max-width: calc(25% - 60px);
   width: calc(25% - 60px);
-  @media screen and ( max-width: 575px ) {
-      width: 100%;
+  @media screen and (max-width: 575px) {
+    width: 100%;
   }
   min-width: 180px;
-  margin:30px;
-  padding:10px;
+  margin: 30px;
+  padding: 10px;
 }
-.person-avatar{
+.person-avatar {
   overflow: hidden;
   border-radius: 50%;
-  border: 1px solid rgba(0,0,0,0.12);
-  box-shadow: 0px 3px 18px rgba(42,42,42, 0.09);
-  img{
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 3px 18px rgba(42, 42, 42, 0.09);
+  img {
     display: block;
   }
 }
-.person-details{
+.person-details {
   text-align: center;
   padding-top: 20px;
 }
-.person-name{
+.person-name {
   font-size: 1.45rem;
 }
-.person-title{
+.person-title {
   padding-top: 8px;
-  font-style:italic;
+  font-style: italic;
 }
-.person-social{
+.person-social {
   display: flex;
   align-items: center;
   justify-content: center;
   padding-top: 10px;
 }
-.social-item{
+.social-item {
   font-size: 1.5rem;
-  padding:5px;
+  padding: 5px;
   display: block;
 }
diff --git a/components/navigation/navigation-left.js b/components/navigation/navigation-left.js
index 86ea957c..a81810e8 100644
--- a/components/navigation/navigation-left.js
+++ b/components/navigation/navigation-left.js
@@ -9,9 +9,7 @@ export default () => (
       Blog
     </a>
     <Link href="/about" as="/about">
-      <a className="nav-item">
-        About
-      </a>
+      <a className="nav-item">About</a>
     </Link>
   </div>
 );
diff --git a/components/navigation/navigation-right.js b/components/navigation/navigation-right.js
index 85f25099..32a2450b 100644
--- a/components/navigation/navigation-right.js
+++ b/components/navigation/navigation-right.js
@@ -5,14 +5,10 @@ import Link from "next/link";
 export default () => (
   <div className="nav buttons">
     <Link as="/desktop" href="/desktop" prefetch>
-      <a className="nav-item">
-        Desktop
-      </a>
+      <a className="nav-item">Desktop</a>
     </Link>
     <Link as="/atom" href="/atom" prefetch>
-      <a className="nav-item">
-        Atom
-      </a>
+      <a className="nav-item">Atom</a>
     </Link>
     <Link as="/kernels" href="/kernels" prefetch>
       <a className="nav-item">Kernels</a>
diff --git a/components/navigation/navigation.scss b/components/navigation/navigation.scss
index f88d66d0..bda25c14 100644
--- a/components/navigation/navigation.scss
+++ b/components/navigation/navigation.scss
@@ -18,7 +18,6 @@
       width: 48px;
       height: 48px;
       color: white;
-
     }
   }
 }
diff --git a/components/page-header/page-header.js b/components/page-header/page-header.js
index 7af513da..76ec448e 100644
--- a/components/page-header/page-header.js
+++ b/components/page-header/page-header.js
@@ -2,34 +2,34 @@ import React from "react";
 import styles from "./page-header.scss";
 
 export class PageHeaderTitle extends React.Component {
-    render() {
-        return <h1>{this.props.children}</h1>;
-    }
+  render() {
+    return <h1>{this.props.children}</h1>;
+  }
 }
 export class PageHeaderLeft extends React.Component {
-    render() {
-        return <div className="page-header-left">{this.props.children}</div>;
-    }
+  render() {
+    return <div className="page-header-left">{this.props.children}</div>;
+  }
 }
 
 export class PageHeaderRight extends React.Component {
-    render() {
-        return <div className="page-header-right">{this.props.children}</div>;
-    }
+  render() {
+    return <div className="page-header-right">{this.props.children}</div>;
+  }
 }
 
 export class PageHeader extends React.Component {
-
-    render() {
-        return (
-            <section className="page-header" style={{
-              backgroundColor: this.props.themeColor
-            }}>
-                <style dangerouslySetInnerHTML={{ __html: styles }} />
-                <div className="page-header-wrapper">
-                    {this.props.children}
-                </div>
-            </section>
-        );
-    }
+  render() {
+    return (
+      <section
+        className="page-header"
+        style={{
+          backgroundColor: this.props.themeColor
+        }}
+      >
+        <style dangerouslySetInnerHTML={{ __html: styles }} />
+        <div className="page-header-wrapper">{this.props.children}</div>
+      </section>
+    );
+  }
 }
diff --git a/components/page-header/page-header.scss b/components/page-header/page-header.scss
index 2c70b1e8..abf97fb4 100644
--- a/components/page-header/page-header.scss
+++ b/components/page-header/page-header.scss
@@ -1,7 +1,7 @@
 @import "partials/abstract/abstract";
 
 $timing-animation-delay: $timing-animation/2;
-*{
+* {
   outline: 0;
 }
 .page-header {
@@ -16,10 +16,10 @@ $timing-animation-delay: $timing-animation/2;
   &-wrapper {
     @include global-wrapper;
     color: rgba(white, 0.5);
-    font-weight:300;
+    font-weight: 300;
     display: flex;
     justify-content: space-between;
-    padding-top:$gutter*2;
+    padding-top: $gutter*2;
     overflow: hidden;
     h1 {
       animation-delay: $timing-animation-delay/3;
@@ -32,15 +32,15 @@ $timing-animation-delay: $timing-animation/2;
     }
 
     .download-featurette {
-      margin-bottom:$gutter*2;
+      margin-bottom: $gutter*2;
     }
 
-    .buttons{
-      .button{
-        &-secondary{
+    .buttons {
+      .button {
+        &-secondary {
           background: rgba($main-color, 0.5);
 
-          &.active{
+          &.active {
             background: $main-color;
           }
         }
@@ -55,13 +55,14 @@ $timing-animation-delay: $timing-animation/2;
     padding-right: $gutter*2;
     padding-bottom: $gutter*2;
 
-    p, .buttons, .footnote {
+    p,
+    .buttons,
+    .footnote {
       animation-delay: $timing-animation-delay/3;
       //@include animationFadeAndSlideInFromBottom-sm;
     }
 
     @include tablet-up {
-
       max-width: 550px;
     }
     @include tablet {
@@ -73,7 +74,9 @@ $timing-animation-delay: $timing-animation/2;
       padding-top: $gutter;
       align-items: flex-start;
       max-width: 100%;
-      h1, p, .buttons {
+      h1,
+      p,
+      .buttons {
         max-width: 480px;
       }
 
@@ -85,29 +88,28 @@ $timing-animation-delay: $timing-animation/2;
   }
 
   &-right {
-
     display: flex;
     align-items: flex-end;
     position: relative;
     flex: 1;
-    .cutoff-image{
+    .cutoff-image {
       position: absolute;
-      top:0;
-      z-index:4;
+      top: 0;
+      z-index: 4;
       transition: $transition;
       //width: 100%;
-      left:0;
+      left: 0;
       width: 100%;
-     @include tablet{
-       width: 120%;
-       max-width:200%;
-     }
-      @include tablet{
+      @include tablet {
+        width: 120%;
+        max-width: 200%;
+      }
+      @include tablet {
         top: 80px;
       }
-      &:hover{
+      &:hover {
         top: -40px;
-        @include tablet{
+        @include tablet {
           top: 50px;
         }
       }
@@ -122,7 +124,8 @@ $timing-animation-delay: $timing-animation/2;
         display: block !important;
       }
     }
-    video, .video-placeholder {
+    video,
+    .video-placeholder {
       margin-top: $gutter*2;
       display: block;
       max-width: 100%;
diff --git a/next.config.js b/next.config.js
index 55af02dd..62b7e489 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,36 +1,38 @@
-const path = require('path')
-const glob = require('glob')
+const path = require("path");
+const glob = require("glob");
 
 module.exports = {
-    webpack: (config, { dev }) => {
-        config.module.rules.push(
-            {
-                test: /\.(css|scss)/,
-                loader: 'emit-file-loader',
-                options: {
-                    name: 'dist/[path][name].[ext]'
-                }
+  webpack: (config, { dev }) => {
+    config.module.rules.push(
+      {
+        test: /\.(css|scss)/,
+        loader: "emit-file-loader",
+        options: {
+          name: "dist/[path][name].[ext]"
+        }
+      },
+      {
+        test: /\.css$/,
+        use: ["babel-loader", "raw-loader", "postcss-loader"]
+      },
+      {
+        test: /\.s(a|c)ss$/,
+        use: [
+          "babel-loader",
+          "raw-loader",
+          "postcss-loader",
+          {
+            loader: "sass-loader",
+            options: {
+              includePaths: ["styles", "node_modules"]
+                .map(d => path.join(__dirname, d))
+                .map(g => glob.sync(g))
+                .reduce((a, c) => a.concat(c), [])
             }
-            ,
-            {
-                test: /\.css$/,
-                use: ['babel-loader', 'raw-loader', 'postcss-loader']
-            }
-            ,
-            {
-                test: /\.s(a|c)ss$/,
-                use: ['babel-loader', 'raw-loader', 'postcss-loader',
-                    { loader: 'sass-loader',
-                        options: {
-                            includePaths: ['styles', 'node_modules']
-                                .map((d) => path.join(__dirname, d))
-                                .map((g) => glob.sync(g))
-                                .reduce((a, c) => a.concat(c), [])
-                        }
-                    }
-                ]
-            }
-        )
-        return config
-    }
-}
\ No newline at end of file
+          }
+        ]
+      }
+    );
+    return config;
+  }
+};
diff --git a/package.json b/package.json
index 8e55d3d4..3a723029 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,11 @@
     "dev": "next",
     "build": "next build",
     "flow": "flow",
-    "start": "next start"
+    "start": "next start",
+    "prettier": "prettier --write './**/*.{js,scss}'"
+  },
+  "lint-staged": {
+    "{lib,spec}/**/*.{js,scss}": ["prettier --write", "git add"]
   },
   "repository": {
     "type": "git",
@@ -41,6 +45,8 @@
   },
   "devDependencies": {
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
-    "flow-bin": "^0.41.0"
+    "flow-bin": "^0.41.0",
+    "lint-staged": "^4.2.3",
+    "prettier": "^1.7.4"
   }
 }
diff --git a/pages/_error.js b/pages/_error.js
index f3dc66ef..fb4ea3b1 100644
--- a/pages/_error.js
+++ b/pages/_error.js
@@ -23,9 +23,8 @@ export default class Error extends React.Component {
     if (this.props.statusCode === 404) {
       return (
         <p>
-          {
-            `${this.props.pathname} not on nteract.io, redirecting to nteract.github.io`
-          }
+          {`${this.props
+            .pathname} not on nteract.io, redirecting to nteract.github.io`}
         </p>
       );
     } else if (this.props.statusCode) {
diff --git a/pages/about.js b/pages/about.js
index ee1789f6..2b97055d 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -18,7 +18,8 @@ const Mission = () => (
     <ContentSectionPane>
       <h3>Mission</h3>
       <p>
-        Create fantastic interactive computing experiences that allow people to collaborate with each other with ease.
+        Create fantastic interactive computing experiences that allow people to
+        collaborate with each other with ease.
       </p>
     </ContentSectionPane>
   </ContentSection>
@@ -34,20 +35,18 @@ const ContributorsList = contributorsData.map((person, index) => {
         <img src={person.avatar_url} />
       </div>
       <div className="person-details">
-        <div className="person-name">
-          {person.name || "@" + person.login}
-        </div>
+        <div className="person-name">{person.name || "@" + person.login}</div>
       </div>
       <div className="person-social">
         <div key={index} className="social-item">
           <a href={person.html_url} target="_blank">
             <i className="mdi mdi-github-circle" />
           </a>
-          {person.blog
-            ? <a href={person.blog} target="_blank">
-                <i className="mdi mdi-web" />
-              </a>
-            : null}
+          {person.blog ? (
+            <a href={person.blog} target="_blank">
+              <i className="mdi mdi-web" />
+            </a>
+          ) : null}
         </div>
       </div>
     </div>
@@ -59,9 +58,7 @@ const Contributors = () => (
     <ContentSectionPane layout="center">
       <h3>Contributors</h3>
       <div className="grid">
-        <div className="grid-wrapper">
-          {ContributorsList}
-        </div>
+        <div className="grid-wrapper">{ContributorsList}</div>
       </div>
     </ContentSectionPane>
   </ContentSection>
@@ -75,12 +72,8 @@ export default class AboutPage extends React.Component<void, OSProps, void> {
       <Layout pageTitle=": We're people, not software!" themeColor={themeColor}>
         <PageHeader themeColor={themeColor}>
           <PageHeaderLeft>
-            <h1>
-              About nteract
-            </h1>
-            <p>
-              {`We're people, not software!`}
-            </p>
+            <h1>About nteract</h1>
+            <p>{`We're people, not software!`}</p>
           </PageHeaderLeft>
         </PageHeader>
         <Mission />
diff --git a/pages/atom.js b/pages/atom.js
index 4d8c1a02..3c362c49 100644
--- a/pages/atom.js
+++ b/pages/atom.js
@@ -1,14 +1,14 @@
 // @flow
-import Layout from '../components/layout/layout';
-import {ContentSection} from '../components/content-section/content-section';
-import React from 'react';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import {darcula} from 'react-syntax-highlighter/dist/styles';
+import Layout from "../components/layout/layout";
+import { ContentSection } from "../components/content-section/content-section";
+import React from "react";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { darcula } from "react-syntax-highlighter/dist/styles";
 import {
   PageHeader,
   PageHeaderLeft,
-  PageHeaderRight,
-} from '../components/page-header/page-header';
+  PageHeaderRight
+} from "../components/page-header/page-header";
 
 const installCode = `apm install hydrogen`;
 
@@ -18,7 +18,7 @@ const InteractiveCoding = () => (
       <div className="pane-50 pane">
         <div className="section-graphic">
           <video
-            style={{boxShadow: '0 4px 14px 0 rgba(0,0,0,.1)'}}
+            style={{ boxShadow: "0 4px 14px 0 rgba(0,0,0,.1)" }}
             autoPlay
             loop
           >
@@ -31,8 +31,8 @@ const InteractiveCoding = () => (
         <h3>Interactive computing in Atom</h3>
         <p>Choose which code to execute based on your needs.</p>
         <p>
-          Run the whole file, a single line, a selection, or let Hydrogen decide which code to run based on
-          the current cursor position.
+          Run the whole file, a single line, a selection, or let Hydrogen decide
+          which code to run based on the current cursor position.
         </p>
       </div>
     </div>
@@ -51,7 +51,7 @@ const WatchExpressions = () => (
       <div className="pane-50 pane">
         <div className="section-graphic">
           <video
-            style={{boxShadow: '0 4px 14px 0 rgba(0,0,0,.1)'}}
+            style={{ boxShadow: "0 4px 14px 0 rgba(0,0,0,.1)" }}
             autoPlay
             loop
           >
@@ -61,7 +61,6 @@ const WatchExpressions = () => (
               alt="Watch Expressions"
             />
           </video>
-
         </div>
       </div>
     </div>
@@ -74,7 +73,7 @@ const InspectCode = () => (
       <div className="pane-50 pane">
         <div className="section-graphic">
           <video
-            style={{boxShadow: '0 4px 14px 0 rgba(0,0,0,.1)'}}
+            style={{ boxShadow: "0 4px 14px 0 rgba(0,0,0,.1)" }}
             autoPlay
             loop
           >
@@ -86,12 +85,12 @@ const InspectCode = () => (
       <div className="pane-50 pane">
         <h3>Code Completion and Documentation</h3>
         <p>
-          Code completion and a inspector for displaying metadata, like documentation, are there to make your
-          coding experience seamless.
+          Code completion and a inspector for displaying metadata, like
+          documentation, are there to make your coding experience seamless.
         </p>
         <p>
-          There’s no need to leave your favorite text editor to get the information you need to fuel your
-          development process.
+          There’s no need to leave your favorite text editor to get the
+          information you need to fuel your development process.
         </p>
       </div>
     </div>
@@ -100,36 +99,32 @@ const InspectCode = () => (
 
 export default class AtomPage extends React.Component {
   render() {
-    let themeColor = '#232323';
+    let themeColor = "#232323";
 
     const h4Styles = {
-      color: 'rgba(255,255,255,0.8)',
-      marginBottom: '0',
+      color: "rgba(255,255,255,0.8)",
+      marginBottom: "0"
     };
 
     return (
       <Layout pageTitle=": Hydrogen for Atom" themeColor={themeColor}>
         <PageHeader themeColor={themeColor}>
           <PageHeaderLeft>
-            <h1>
-              Hydrogen
-            </h1>
+            <h1>Hydrogen</h1>
 
             <p>
-              Run your code with an interactive REPL session with your language of choice inside GitHub’s
-              {' '}
-              <a href="https://atom.io/">Atom</a>
-              {' '}
-              text editor.
+              Run your code with an interactive REPL session with your language
+              of choice inside GitHub’s <a href="https://atom.io/">Atom</a> text
+              editor.
             </p>
             <p>
-              All the power of Jupyter kernels, inside your favorite text editor.
+              All the power of Jupyter kernels, inside your favorite text
+              editor.
             </p>
             <h4 style={h4Styles}>Install Hydrogen now with</h4>
             <SyntaxHighlighter language="zsh" style={darcula}>
               {installCode}
             </SyntaxHighlighter>
-
           </PageHeaderLeft>
           <PageHeaderRight>
             <img
diff --git a/pages/desktop.js b/pages/desktop.js
index bf464109..fde36a61 100644
--- a/pages/desktop.js
+++ b/pages/desktop.js
@@ -45,21 +45,18 @@ export default class DesktopPage extends React.Component<void, OSProps, void> {
   }
 
   render() {
-
     let themeColor = "#244d64";
 
     return (
       <Layout pageTitle=": The nteract Desktop App" themeColor={themeColor}>
         <PageHeader themeColor={themeColor}>
           <PageHeaderLeft>
-            <h1>
-              Notebooks on your desktop
-            </h1>
+            <h1>Notebooks on your desktop</h1>
 
             <p>
-              Write code, prose, and embed interactive plots to tell powerful narratives.
-              Explore computing creatively. All the power of Jupyter notebooks,
-              wrapped in native desktop goodness.
+              Write code, prose, and embed interactive plots to tell powerful
+              narratives. Explore computing creatively. All the power of Jupyter
+              notebooks, wrapped in native desktop goodness.
             </p>
 
             <div className="mobile-only hero-mobile-message">
@@ -67,7 +64,6 @@ export default class DesktopPage extends React.Component<void, OSProps, void> {
             </div>
 
             <DownloadFeaturette platform={this.props.platform} />
-
           </PageHeaderLeft>
           <PageHeaderRight>
             <img
diff --git a/pages/index.js b/pages/index.js
index 36dcfec7..8e810950 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -16,22 +16,21 @@ import SocialButtons from "../components/navigation/social-buttons";
 
 import { DownloadFeaturette } from "../components/download-buttons";
 
-const themeColor = '#334865';
-
+const themeColor = "#334865";
 
 const HomeHeader = (props: OSProps) => (
   <PageHeader themeColor={themeColor}>
     <PageHeaderLeft>
-      <h1>nteract and create with <br/>data, words, and visuals.</h1>
+      <h1>
+        nteract and create with <br />data, words, and visuals.
+      </h1>
       <p>
-        Fire up this desktop application and develop engaging documents with prose,
-        executable
-        code in a favorite language, pictures, and more.
+        Fire up this desktop application and develop engaging documents with
+        prose, executable code in a favorite language, pictures, and more.
       </p>
       <p>
-        If you are a data scientist,
-        researcher, journalist, educator, student, or developer, use nteract to
-        write code-driven, interactive stories.
+        If you are a data scientist, researcher, journalist, educator, student,
+        or developer, use nteract to write code-driven, interactive stories.
       </p>
       <div className="mobile-only hero-mobile-message">
         <h4>Connect with us</h4>
@@ -39,7 +38,6 @@ const HomeHeader = (props: OSProps) => (
       </div>
 
       <DownloadFeaturette platform={props.platform} />
-
     </PageHeaderLeft>
     <PageHeaderRight>
       <img
@@ -75,11 +73,10 @@ const Main = () => (
         <div className="pane-50 pane">
           <h3>Interactivity Where You Need It Most</h3>
           <p>
-            nteract is a desktop-based computing environment, which means that the application
-            can take
-            advantage of all the goodies that your operating system provides, like file search
-            and click
-            to open. nteract and the desktop belong together.
+            nteract is a desktop-based computing environment, which means that
+            the application can take advantage of all the goodies that your
+            operating system provides, like file search and click to open.
+            nteract and the desktop belong together.
           </p>
         </div>
         <div className="pane-50 pane">
@@ -106,15 +103,13 @@ const Main = () => (
         <div className="pane-50 pane">
           <h3>Composability for All</h3>
           <p>
-            nteract is built on top of a rich ecosystem of packages that allow developers to
-            write
-            software built on top of the notebook document format and the code execution
-            protocol. You
-            can visit our GitHub organization to find out which packages you can start to
-            develop with.
+            nteract is built on top of a rich ecosystem of packages that allow
+            developers to write software built on top of the notebook document
+            format and the code execution protocol. You can visit our GitHub
+            organization to find out which packages you can start to develop
+            with.
           </p>
         </div>
-
       </div>
     </ContentSection>
     <ContentSection>
@@ -122,11 +117,10 @@ const Main = () => (
         <div className="pane-50 pane">
           <h3>Open to All</h3>
           <p>
-            nteract is completely open-source and licensed under the BSD 3-Clause License. We
-            love
-            getting pull requests and issues from our users, if you're interested in opening one
-            check
-            out our contributor documentation.
+            nteract is completely open-source and licensed under the BSD
+            3-Clause License. We love getting pull requests and issues from our
+            users, if you're interested in opening one check out our contributor
+            documentation.
           </p>
         </div>
         <div className="pane-50 pane">
diff --git a/pages/kernels/index.js b/pages/kernels/index.js
index 7ff63ad6..0abbf856 100644
--- a/pages/kernels/index.js
+++ b/pages/kernels/index.js
@@ -1,61 +1,53 @@
 // @flow
 import Layout from "../../components/layout/layout";
-import Link from 'next/link';
-import {ContentSection, ContentSectionPane} from "../../components/content-section/content-section";
+import Link from "next/link";
+import {
+  ContentSection,
+  ContentSectionPane
+} from "../../components/content-section/content-section";
 import React from "react";
-import Python from '../../components/kernels/python';
+import Python from "../../components/kernels/python";
 import {
-    PageHeader,
-    PageHeaderLeft,
-    PageHeaderRight
+  PageHeader,
+  PageHeaderLeft,
+  PageHeaderRight
 } from "../../components/page-header/page-header";
 
-
 export default class Kernels extends React.Component {
-    render() {
-
-        let themeColor = '#2C1F39';
-
-        return (
-            <Layout pageTitle=": connect with nteract" themeColor={themeColor}>
-                <PageHeader themeColor={themeColor}>
-                    <PageHeaderLeft>
-                        <h1>
-                            Kernels
-                        </h1>
-                        <p>
-                            Kernels connect your favorite languages to nteract projects for an improved
-                            REPL experience.
-                        </p>
-                        <div className="buttons">
-                            <Link href="/kernels/python">
-                                <a className="button button-secondary active">
-                                    Python
-                                </a>
-                            </Link>
-                            <Link href="/kernels/node">
-                                <a className="button button-secondary">
-                                    Node.js
-                                </a>
-                            </Link>
-                            <Link href="/kernels/r">
-                                <a className="button button-secondary">
-                                    R
-                                </a>
-                            </Link>
-                        </div>
+  render() {
+    let themeColor = "#2C1F39";
 
-                    </PageHeaderLeft>
-                    <PageHeaderRight>
-                        <img
-                            src="/static/kernels-terminal.png"
-                            alt="Hydrogen"
-                            className="cutoff-image"
-                        />
-                    </PageHeaderRight>
-                </PageHeader>
-                <Python />
-            </Layout>
-        );
-    }
+    return (
+      <Layout pageTitle=": connect with nteract" themeColor={themeColor}>
+        <PageHeader themeColor={themeColor}>
+          <PageHeaderLeft>
+            <h1>Kernels</h1>
+            <p>
+              Kernels connect your favorite languages to nteract projects for an
+              improved REPL experience.
+            </p>
+            <div className="buttons">
+              <Link href="/kernels/python">
+                <a className="button button-secondary active">Python</a>
+              </Link>
+              <Link href="/kernels/node">
+                <a className="button button-secondary">Node.js</a>
+              </Link>
+              <Link href="/kernels/r">
+                <a className="button button-secondary">R</a>
+              </Link>
+            </div>
+          </PageHeaderLeft>
+          <PageHeaderRight>
+            <img
+              src="/static/kernels-terminal.png"
+              alt="Hydrogen"
+              className="cutoff-image"
+            />
+          </PageHeaderRight>
+        </PageHeader>
+        <Python />
+      </Layout>
+    );
+  }
 }
diff --git a/pages/kernels/node.js b/pages/kernels/node.js
index 54ff335a..28b8d669 100644
--- a/pages/kernels/node.js
+++ b/pages/kernels/node.js
@@ -1,62 +1,53 @@
 // @flow
 import Layout from "../../components/layout/layout";
-import Link from 'next/link';
-import {ContentSection, ContentSectionPane} from "../../components/content-section/content-section";
+import Link from "next/link";
+import {
+  ContentSection,
+  ContentSectionPane
+} from "../../components/content-section/content-section";
 import React from "react";
-import Node from '../../components/kernels/node';
+import Node from "../../components/kernels/node";
 import {
-    PageHeader,
-    PageHeaderLeft,
-    PageHeaderRight
+  PageHeader,
+  PageHeaderLeft,
+  PageHeaderRight
 } from "../../components/page-header/page-header";
 
-
 export default class NodePage extends React.Component {
-    render() {
-
-        let themeColor = '#2C1F39';
-
-        return (
-            <Layout pageTitle=": connect with nteract" themeColor={themeColor}>
-                <PageHeader themeColor={themeColor}>
-                    <PageHeaderLeft>
-                        <h1>
-                            Kernels
-                        </h1>
-                        <p>
-                            Kernels connect your favorite languages to nteract projects for an improved
-                            REPL experience.
-                        </p>
-                        <div className="buttons">
-                            <Link href="/kernels/python">
-                                <a className="button button-secondary">
-                                    Python
-                                </a>
-                            </Link>
-                            <Link href="/kernels/node">
-                                <a className="button button-secondary active">
-                                    Node.js
-                                </a>
-                            </Link>
-                            <Link href="/kernels/r">
-                                <a className="button button-secondary">
-                                    R
-                                </a>
-                            </Link>
-
-                        </div>
+  render() {
+    let themeColor = "#2C1F39";
 
-                    </PageHeaderLeft>
-                    <PageHeaderRight>
-                        <img
-                            src="/static/kernels-terminal.png"
-                            alt="Hydrogen"
-                            className="cutoff-image"
-                        />
-                    </PageHeaderRight>
-                </PageHeader>
-                <Node />
-            </Layout>
-        );
-    }
+    return (
+      <Layout pageTitle=": connect with nteract" themeColor={themeColor}>
+        <PageHeader themeColor={themeColor}>
+          <PageHeaderLeft>
+            <h1>Kernels</h1>
+            <p>
+              Kernels connect your favorite languages to nteract projects for an
+              improved REPL experience.
+            </p>
+            <div className="buttons">
+              <Link href="/kernels/python">
+                <a className="button button-secondary">Python</a>
+              </Link>
+              <Link href="/kernels/node">
+                <a className="button button-secondary active">Node.js</a>
+              </Link>
+              <Link href="/kernels/r">
+                <a className="button button-secondary">R</a>
+              </Link>
+            </div>
+          </PageHeaderLeft>
+          <PageHeaderRight>
+            <img
+              src="/static/kernels-terminal.png"
+              alt="Hydrogen"
+              className="cutoff-image"
+            />
+          </PageHeaderRight>
+        </PageHeader>
+        <Node />
+      </Layout>
+    );
+  }
 }
diff --git a/pages/kernels/python.js b/pages/kernels/python.js
index 898db1d8..790f2fd0 100644
--- a/pages/kernels/python.js
+++ b/pages/kernels/python.js
@@ -1,61 +1,53 @@
 // @flow
 import Layout from "../../components/layout/layout";
-import Link from 'next/link';
-import {ContentSection, ContentSectionPane} from "../../components/content-section/content-section";
+import Link from "next/link";
+import {
+  ContentSection,
+  ContentSectionPane
+} from "../../components/content-section/content-section";
 import React from "react";
-import Python from '../../components/kernels/python';
+import Python from "../../components/kernels/python";
 import {
-    PageHeader,
-    PageHeaderLeft,
-    PageHeaderRight
+  PageHeader,
+  PageHeaderLeft,
+  PageHeaderRight
 } from "../../components/page-header/page-header";
 
-
 export default class PythonPage extends React.Component {
-    render() {
-
-        let themeColor = '#2C1F39';
-
-        return (
-            <Layout pageTitle=": connect with nteract" themeColor={themeColor}>
-                <PageHeader themeColor={themeColor}>
-                    <PageHeaderLeft>
-                        <h1>
-                            Kernels
-                        </h1>
-                        <p>
-                            Kernels connect your favorite languages to nteract projects for an improved
-                            REPL experience.
-                        </p>
-                        <div className="buttons">
-                            <Link href="/kernels/python">
-                                <a className="button button-secondary active">
-                                    Python
-                                </a>
-                            </Link>
-                            <Link href="/kernels/node">
-                                <a className="button button-secondary">
-                                    Node.js
-                                </a>
-                            </Link>
-                            <Link href="/kernels/r">
-                                <a className="button button-secondary">
-                                    R
-                                </a>
-                            </Link>
-                        </div>
+  render() {
+    let themeColor = "#2C1F39";
 
-                    </PageHeaderLeft>
-                    <PageHeaderRight>
-                        <img
-                            src="/static/kernels-terminal.png"
-                            alt="Hydrogen"
-                            className="cutoff-image"
-                        />
-                    </PageHeaderRight>
-                </PageHeader>
-                <Python />
-            </Layout>
-        );
-    }
+    return (
+      <Layout pageTitle=": connect with nteract" themeColor={themeColor}>
+        <PageHeader themeColor={themeColor}>
+          <PageHeaderLeft>
+            <h1>Kernels</h1>
+            <p>
+              Kernels connect your favorite languages to nteract projects for an
+              improved REPL experience.
+            </p>
+            <div className="buttons">
+              <Link href="/kernels/python">
+                <a className="button button-secondary active">Python</a>
+              </Link>
+              <Link href="/kernels/node">
+                <a className="button button-secondary">Node.js</a>
+              </Link>
+              <Link href="/kernels/r">
+                <a className="button button-secondary">R</a>
+              </Link>
+            </div>
+          </PageHeaderLeft>
+          <PageHeaderRight>
+            <img
+              src="/static/kernels-terminal.png"
+              alt="Hydrogen"
+              className="cutoff-image"
+            />
+          </PageHeaderRight>
+        </PageHeader>
+        <Python />
+      </Layout>
+    );
+  }
 }
diff --git a/pages/kernels/r.js b/pages/kernels/r.js
index 893ecddb..071a4561 100644
--- a/pages/kernels/r.js
+++ b/pages/kernels/r.js
@@ -1,62 +1,53 @@
 // @flow
 import Layout from "../../components/layout/layout";
-import Link from 'next/link';
-import {ContentSection, ContentSectionPane} from "../../components/content-section/content-section";
+import Link from "next/link";
+import {
+  ContentSection,
+  ContentSectionPane
+} from "../../components/content-section/content-section";
 import React from "react";
-import R from '../../components/kernels/r';
+import R from "../../components/kernels/r";
 import {
-    PageHeader,
-    PageHeaderLeft,
-    PageHeaderRight
+  PageHeader,
+  PageHeaderLeft,
+  PageHeaderRight
 } from "../../components/page-header/page-header";
 
-
 export default class RPage extends React.Component {
-    render() {
-
-        let themeColor = '#2C1F39';
-
-        return (
-            <Layout pageTitle=": connect with nteract" themeColor={themeColor}>
-                <PageHeader themeColor={themeColor}>
-                    <PageHeaderLeft>
-                        <h1>
-                            Kernels
-                        </h1>
-                        <p>
-                            Kernels connect your favorite languages to nteract projects for an improved
-                            REPL experience.
-                        </p>
-                        <div className="buttons">
-                            <Link href="/kernels/python">
-                                <a className="button button-secondary">
-                                    Python
-                                </a>
-                            </Link>
-                            <Link href="/kernels/node">
-                                <a className="button button-secondary">
-                                    Node.js
-                                </a>
-                            </Link>
-                            <Link href="/kernels/r">
-                                <a className="button button-secondary active">
-                                    R
-                                </a>
-                            </Link>
-
-                        </div>
+  render() {
+    let themeColor = "#2C1F39";
 
-                    </PageHeaderLeft>
-                    <PageHeaderRight>
-                        <img
-                            src="/static/kernels-terminal.png"
-                            alt="Hydrogen"
-                            className="cutoff-image"
-                        />
-                    </PageHeaderRight>
-                </PageHeader>
-                <R />
-            </Layout>
-        );
-    }
+    return (
+      <Layout pageTitle=": connect with nteract" themeColor={themeColor}>
+        <PageHeader themeColor={themeColor}>
+          <PageHeaderLeft>
+            <h1>Kernels</h1>
+            <p>
+              Kernels connect your favorite languages to nteract projects for an
+              improved REPL experience.
+            </p>
+            <div className="buttons">
+              <Link href="/kernels/python">
+                <a className="button button-secondary">Python</a>
+              </Link>
+              <Link href="/kernels/node">
+                <a className="button button-secondary">Node.js</a>
+              </Link>
+              <Link href="/kernels/r">
+                <a className="button button-secondary active">R</a>
+              </Link>
+            </div>
+          </PageHeaderLeft>
+          <PageHeaderRight>
+            <img
+              src="/static/kernels-terminal.png"
+              alt="Hydrogen"
+              className="cutoff-image"
+            />
+          </PageHeaderRight>
+        </PageHeader>
+        <R />
+      </Layout>
+    );
+  }
 }
diff --git a/postcss.config.js b/postcss.config.js
index 0a37008c..f8450743 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,8 @@
 module.exports = {
-    plugins: [
-        require('postcss-easy-import')({prefix: '_'}), // keep this first
-        require('autoprefixer')({ /* ...options */ }) // so imports are auto-prefixed too
-    ]
-}
\ No newline at end of file
+  plugins: [
+    require("postcss-easy-import")({ prefix: "_" }), // keep this first
+    require("autoprefixer")({
+      /* ...options */
+    }) // so imports are auto-prefixed too
+  ]
+};
diff --git a/styles/common.scss b/styles/common.scss
index fae06b6c..820f1e9c 100644
--- a/styles/common.scss
+++ b/styles/common.scss
@@ -1,14 +1,14 @@
 @import "partials/typography";
 @import "partials/elements/buttons";
 
-.not-mobile{
-  @include handheld{
+.not-mobile {
+  @include handheld {
     display: none !important;
   }
 }
-.mobile-only{
+.mobile-only {
   display: none;
-  @include handheld{
+  @include handheld {
     display: inherit;
   }
 }
@@ -17,4 +17,4 @@ svg {
   * {
     fill: currentColor;
   }
-}
\ No newline at end of file
+}
diff --git a/styles/partials/abstract/abstract.scss b/styles/partials/abstract/abstract.scss
index ea213955..da59dc90 100644
--- a/styles/partials/abstract/abstract.scss
+++ b/styles/partials/abstract/abstract.scss
@@ -1,5 +1,5 @@
 @import "normalize";
-@import 'variables';
+@import "variables";
 @import "mixins";
 @import "colors";
-@import "effects";
\ No newline at end of file
+@import "effects";
diff --git a/styles/partials/abstract/colors.scss b/styles/partials/abstract/colors.scss
index 329e1a86..80dc74fe 100644
--- a/styles/partials/abstract/colors.scss
+++ b/styles/partials/abstract/colors.scss
@@ -6,22 +6,18 @@
 // Text and Backgrounds
 // ---
 
-$main-color:                         #334865;
-
-$color-text-base:                    #313131; // Default text color
+$main-color: #334865;
 
+$color-text-base: #313131; // Default text color
 
 // ---
 // Primary
 // --
 
-
 // ---
 // Accent
 // ---
 
-
-
 //----------------------------------------------------------------------------------------------------------------------
 // Buttons
 //----------------------------------------------------------------------------------------------------------------------
@@ -49,4 +45,4 @@ $control-color-danger: #e85600;
 
 // Meta colors
 $code-color: #e06870;
-$highlight-color: #ffe9b3;
\ No newline at end of file
+$highlight-color: #ffe9b3;
diff --git a/styles/partials/abstract/effects.scss b/styles/partials/abstract/effects.scss
index eb283b6d..eff5f1ae 100644
--- a/styles/partials/abstract/effects.scss
+++ b/styles/partials/abstract/effects.scss
@@ -20,4 +20,3 @@ $text-shadow-default: 0px 1px 2px rgba(darken($main-color, 25%), 0.5);
   margin-right: auto;
   margin-left: auto;
 }
-
diff --git a/styles/partials/abstract/mixins.scss b/styles/partials/abstract/mixins.scss
index 495207ec..018e5253 100644
--- a/styles/partials/abstract/mixins.scss
+++ b/styles/partials/abstract/mixins.scss
@@ -10,8 +10,25 @@
 //----------------------------------------------------------------------------------------------------------------------
 
 @function is-direction($value) {
-  $is-keyword: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
-  $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
+  $is-keyword: index(
+    (
+      to top,
+      to top right,
+      to right top,
+      to right,
+      to bottom right,
+      to right bottom,
+      to bottom,
+      to bottom left,
+      to left bottom,
+      to left,
+      to left top,
+      to top left
+    ),
+    $value
+  );
+  $is-angle: type-of($value) == "number" and
+    index("deg" "grad" "turn" "rad", unit($value));
   @return $is-keyword or $is-angle;
 }
 
@@ -20,18 +37,18 @@
     @error "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.";
   }
   $conversion-map: (
-          to top : bottom,
-          to top right : bottom left,
-          to right top : left bottom,
-          to right : left,
-          to bottom right : top left,
-          to right bottom : left top,
-          to bottom : top,
-          to bottom left : top right,
-          to left bottom : right top,
-          to left : right,
-          to left top : right bottom,
-          to top left : bottom right
+    to top : bottom,
+    to top right : bottom left,
+    to right top : left bottom,
+    to right : left,
+    to bottom right : top left,
+    to right bottom : left top,
+    to bottom : top,
+    to bottom left : top right,
+    to left bottom : right top,
+    to left : right,
+    to left top : right bottom,
+    to top left : bottom right
   );
   @if map-has-key($conversion-map, $value) {
     @return map-get($conversion-map, $value);
@@ -46,7 +63,10 @@
     $direction: 180deg;
   }
   background: nth(nth($color-stops, 1), 1);
-  background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
+  background: -webkit-linear-gradient(
+    legacy-direction($direction),
+    $color-stops
+  );
   background: linear-gradient($direction, $color-stops);
 }
 
@@ -58,7 +78,7 @@
   position: relative;
   &::before {
     @include linear-gradient(135deg, #1d8ee8 0%, #1e427d 100%);
-    content: '';
+    content: "";
     height: 100%;
     top: 0;
     left: 0;
@@ -67,21 +87,22 @@
     position: absolute;
   }
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     height: 100%;
     width: 100%;
     z-index: -1;
     top: 0;
     left: 0;
-    background: url(https://images-hoshi.nationalmachine.co/ineffable/uploads/8e24bc29d4dcbda1aa6f2a1dcdd4c0e6/background-dots.png) repeat center center;
+    background: url(https://images-hoshi.nationalmachine.co/ineffable/uploads/8e24bc29d4dcbda1aa6f2a1dcdd4c0e6/background-dots.png)
+      repeat center center;
     background-size: 14.5px;
   }
 }
 
 @mixin colorBar($height, $color, $distance) {
   &::before {
-    content: '';
+    content: "";
     height: $height;
     transform: translateY(-$distance);
     background: $color;
@@ -160,8 +181,8 @@ $mid-sized: 1200px;
 
 @mixin global-wrapper {
   @include center-content;
-  padding-left:$gutter*2;
-  padding-right:$gutter*2;
+  padding-left: $gutter*2;
+  padding-right: $gutter*2;
   max-width: $global-width;
 
   //@include tablet{
@@ -170,22 +191,22 @@ $mid-sized: 1200px;
   //}
 }
 
-@mixin bar-highlight{
+@mixin bar-highlight {
   position: relative;
-  &:hover{
+  &:hover {
     cursor: pointer;
-    &::after{
+    &::after {
       transform: none;
     }
   }
 
-  &.active{
-    &::after{
+  &.active {
+    &::after {
       transform: none;
     }
   }
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     bottom: 0;
     height: 3px;
@@ -198,11 +219,10 @@ $mid-sized: 1200px;
   }
 }
 
-@mixin active-state-transform{
+@mixin active-state-transform {
   transform: translateY(2px);
 }
 
-
 @keyframes fadein {
   from {
     opacity: 0;
@@ -282,23 +302,28 @@ $timing-animation: $timing*2.5;
   }
   &-fade-and-slide-in-from-bottom {
     opacity: 0;
-    animation: fade-and-slide-in-from-bottom $timing-animation forwards $global-easing;
+    animation: fade-and-slide-in-from-bottom $timing-animation forwards
+      $global-easing;
   }
   &-fade-and-slide-in-from-bottom-sm {
     opacity: 0;
-    animation: fade-and-slide-in-from-bottom-sm $timing-animation forwards $global-easing;
+    animation: fade-and-slide-in-from-bottom-sm $timing-animation forwards
+      $global-easing;
   }
   &-fade-and-slide-in-from-bottom-sm-fast {
     opacity: 0;
-    animation: fade-and-slide-in-from-bottom-sm $timing-animation/2 forwards $global-easing;
+    animation: fade-and-slide-in-from-bottom-sm $timing-animation/2 forwards
+      $global-easing;
   }
   &-fade-and-slide-in-from-top {
     opacity: 0;
-    animation: fade-and-slide-in-from-top $timing-animation forwards $global-easing;
+    animation: fade-and-slide-in-from-top $timing-animation forwards
+      $global-easing;
   }
   &-fade-and-slide-in-from-top-sm {
     opacity: 0;
-    animation: fade-and-slide-in-from-top-sm $timing-animation forwards $global-easing;
+    animation: fade-and-slide-in-from-top-sm $timing-animation forwards
+      $global-easing;
   }
   &-delay {
     &-xl {
@@ -367,7 +392,6 @@ $timing-animation: $timing*2.5;
   @extend .animation-fade-and-slide-in-from-top-sm;
 }
 
-
 @mixin fullSizePosAbsolute {
   position: absolute;
   top: 0;
@@ -407,7 +431,7 @@ $timing-animation: $timing*2.5;
 }
 
 @mixin fullPseudoElement {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -421,11 +445,11 @@ $timing-animation: $timing*2.5;
 // The main reason we do this is because the app is animated in, and sometimes the whole app will be at ~0.97%
 // opacity, and you could see the background behind the app.
 // ----
-@mixin addPseudoToHTML{
+@mixin addPseudoToHTML {
   position: relative;
   &::before {
     @include fullPseudoElement;
     background: white;
     @include animationFadein;
   }
-}
\ No newline at end of file
+}
diff --git a/styles/partials/abstract/normalize.scss b/styles/partials/abstract/normalize.scss
index cb323d59..5effbb2d 100644
--- a/styles/partials/abstract/normalize.scss
+++ b/styles/partials/abstract/normalize.scss
@@ -1 +1,175 @@
-progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} figcaption, menu,article,aside,details,figure,footer,header,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0} [hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700} select,button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}/*# sourceMappingURL=normalize.min.css.map */
+progress,
+sub,
+sup {
+  vertical-align: baseline;
+}
+html {
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  margin: 0;
+}
+figcaption,
+menu,
+article,
+aside,
+details,
+figure,
+footer,
+header,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+}
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+[hidden],
+template {
+  display: none;
+}
+a {
+  background-color: transparent;
+}
+a:active,
+a:hover {
+  outline-width: 0;
+}
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+b,
+strong {
+  font-weight: bolder;
+}
+dfn {
+  font-style: italic;
+}
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+img {
+  border-style: none;
+}
+svg:not(:root) {
+  overflow: hidden;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+figure {
+  margin: 1em 40px;
+}
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  margin: 0;
+}
+optgroup {
+  font-weight: 700;
+}
+select,
+button,
+input {
+  overflow: visible;
+}
+button,
+select {
+  text-transform: none;
+}
+[type="button"],
+[type="reset"],
+[type="submit"],
+button {
+  cursor: pointer;
+}
+[disabled] {
+  cursor: default;
+}
+[type="submit"],
+[type="reset"],
+button,
+html [type="button"] {
+  -webkit-appearance: button;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+button:-moz-focusring,
+input:-moz-focusring {
+  outline: ButtonText dotted 1px;
+}
+fieldset {
+  border: 1px solid silver;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+legend {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+}
+textarea {
+  overflow: auto;
+}
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+[type="search"] {
+  -webkit-appearance: textfield;
+}
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+} /*# sourceMappingURL=normalize.min.css.map */
diff --git a/styles/partials/abstract/variables.scss b/styles/partials/abstract/variables.scss
index 697732aa..59f8c1a0 100644
--- a/styles/partials/abstract/variables.scss
+++ b/styles/partials/abstract/variables.scss
@@ -1,18 +1,15 @@
-
-
-
 // Core variables
 
 $unit: 12px;
 $gutter: $unit*2;
 $global-width: 1250px;
-$global-easing: cubic-bezier(.24, .8, 0, .97);
+$global-easing: cubic-bezier(0.24, 0.8, 0, 0.97);
 
 $header-height: 72px;
 
-// -- 
+// --
 // Animation / transitions
-// -- 
+// --
 $timing: 0.38s;
 $easing: $global-easing;
 $transition: $timing all $easing;
@@ -26,15 +23,18 @@ $body-font-size: 1.4rem;
 
 // Fonts
 // Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
-$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
+$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
+  Roboto;
 $fallback-font-family: "Helvetica Neue", sans-serif;
-$cjk-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", $fallback-font-family;
+$cjk-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB",
+  "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic",
+  $fallback-font-family;
 $body-font-family: $base-font-family, $fallback-font-family;
 
 // Sizes
 $layout-gutter: 1rem;
 $control-min-width: 18rem;
-$border-radius: .2rem;
+$border-radius: 0.2rem;
 
 @import "colors";
 
@@ -46,8 +46,8 @@ $size-lg: 960px;
 $size-xl: 1280px;
 $size-2x: 1440px;
 
-
-@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,600,600i,800,800i|Nunito:300,400,700,800,900');
+@import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,600,600i,800,800i|Nunito:300,400,700,800,900");
 $title-color: $main-color !default;
-$title-font: 'Nunito', sans-serif !default;
-$body-font: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto !default;
\ No newline at end of file
+$title-font: "Nunito", sans-serif !default;
+$body-font: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
+  Roboto !default;
diff --git a/styles/partials/elements/buttons.scss b/styles/partials/elements/buttons.scss
index 35f1637c..c94f6895 100644
--- a/styles/partials/elements/buttons.scss
+++ b/styles/partials/elements/buttons.scss
@@ -15,7 +15,6 @@
 
         &:hover {
           color: rgba($main-color, 1);
-
         }
       }
     }
@@ -26,9 +25,9 @@
   display: flex;
   align-items: center;
 
-  // -- 
+  // --
   // When there are multiple buttons in a row
-  // -- 
+  // --
   .button + .button {
     margin-left: $unit;
   }
@@ -39,7 +38,8 @@
   border-radius: 4px;
   transition: $transition;
   user-select: none;
-  box-shadow: 0 4px 8px 0 rgba(50, 72, 101, 0.1), 0 2px 2px 0 rgba(50, 72, 101, 0.1);
+  box-shadow: 0 4px 8px 0 rgba(50, 72, 101, 0.1),
+    0 2px 2px 0 rgba(50, 72, 101, 0.1);
   text-decoration: none;
   @include handheld {
     //margin-left: 0 !important;
@@ -60,8 +60,8 @@
     width: $size;
     height: $size;
     margin-right: $unit/2;
-    @include handheld{
-      margin-right:0;
+    @include handheld {
+      margin-right: 0;
     }
     svg {
       * {
@@ -71,7 +71,7 @@
   }
   // --
   // Primary Button Styles
-  // -- 
+  // --
   &-primary {
     //background: $color-button-default;
     box-shadow: $drop-shadow;
@@ -88,7 +88,6 @@
   }
 
   &-simple {
-
   }
 
   // --
@@ -112,7 +111,6 @@
       background: darken(rgba(163, 183, 213, 0.25), 10%);
       box-shadow: $drop-shadow-pressed;
     }
-
   }
 
   &-icon-only {
@@ -130,9 +128,9 @@
     }
   }
 
-  // -- 
+  // --
   // Default hover + active states
-  // -- 
+  // --
   &:hover {
     cursor: pointer;
   }
@@ -146,7 +144,7 @@
 //----------------------------------------------------------------------------------------------------------------------
 .buttons-hero {
   .button {
-    @include tablet-up{
+    @include tablet-up {
       padding: 0 $gutter;
     }
     color: white;
@@ -158,8 +156,8 @@
       width: $size;
       height: $size;
       margin-right: $unit/2;
-      @include handheld{
-        margin-right:0;
+      @include handheld {
+        margin-right: 0;
       }
       svg {
         * {
@@ -172,7 +170,12 @@
     // --
     &-primary {
       background-color: #f02563;
-      background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)), linear-gradient(#f02563, #f02563);
+      background-image: linear-gradient(
+          to bottom,
+          rgba(255, 255, 255, 0.1),
+          rgba(255, 255, 255, 0)
+        ),
+        linear-gradient(#f02563, #f02563);
 
       &:hover {
         //background: lighten($color-emerald, 5%);
@@ -189,18 +192,15 @@
       color: white;
       box-shadow: $drop-shadow;
       text-shadow: $text-shadow-default;
-      margin-right:0;
+      margin-right: 0;
 
-      &.button-icon-only{
-        opacity:0.75;
+      &.button-icon-only {
+        opacity: 0.75;
       }
-
     }
-
   }
 }
 
 .icon-buttons {
   padding-left: $unit;
-
-}
\ No newline at end of file
+}
diff --git a/styles/partials/typography.scss b/styles/partials/typography.scss
index d13039fd..af39e93f 100644
--- a/styles/partials/typography.scss
+++ b/styles/partials/typography.scss
@@ -64,7 +64,7 @@ a {
 }
 
 blockquote {
-  border-left: .2rem solid $border-color;
+  border-left: 0.2rem solid $border-color;
   margin-left: 0;
   padding: 1rem 2rem;
 
@@ -113,7 +113,7 @@ dl {
     font-weight: bold;
   }
   dd {
-    margin: .5rem 0 1.5rem 0;
+    margin: 0.5rem 0 1.5rem 0;
   }
 }
 
@@ -127,7 +127,7 @@ kbd {
 }
 
 abbr[title] {
-  border-bottom: .1rem dotted;
+  border-bottom: 0.1rem dotted;
   cursor: help;
   text-decoration: none;
 }