add dat-design and sass capability (#16)

* add dat-design and sass capability

* add watch:css rule

* add nodemon

* fix typo

* update watch css command (it watched and built the css before, but styles still didn't update in the browser. there's probably a more performant way to do this.)

* override minidocs default styles with custom dat styles

* clean up scss

6 files changed, 85 insertions, 15 deletions

diff --git a/.gitignore b/.gitignore
index 03dfe09..1a5272c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 dist
+*.css
 .DS_Store
 repos.txt
 node_modules
diff --git a/README.md b/README.md
index 07459c1..afe55ba 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@ This documentation uses [minidocs](https://www.npmjs.com/package/minidocs).
 1. Clone Repository
 2. `npm install`
 3. `npm run build:local` to build the docs for local viewing
-4. `npm runs start` to view the docs in browser
+4. `npm run start` to view the docs in browser
 
 ### Updating & Deploying Docs
 
diff --git a/assets/styles.css b/assets/styles.css
deleted file mode 100644
index a6888f6..0000000
--- a/assets/styles.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.minidocs-logo {
-  max-height: 100px;
-  width: inherit !important;
-  margin: 0 auto;
-  display: block;
-}
-
-.minidocs-content {
-  padding-bottom: 50px;
-}
\ No newline at end of file
diff --git a/assets/styles.scss b/assets/styles.scss
new file mode 100644
index 0000000..58a6113
--- /dev/null
+++ b/assets/styles.scss
@@ -0,0 +1,74 @@
+@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);
+
+// ugly selector needed to overwrite default styles
+body #choo-root.minidocs {
+  @import '~dat-design/scss/variables/colors.scss';
+  @import '~dat-design/scss/variables/transitions.scss';
+  @import '~dat-design/scss/base/links.scss';
+
+  font-family: 'Source Sans Pro', 'Helvetica Neue', 'Lucida Grande', Arial, sans-serif;
+  line-height: 1.5;
+  color: $color-neutral;
+
+  // transitions on interactive elements
+  a,
+  button,
+  input,
+  select,
+  textarea {
+    transition-property: background-color, color;
+    transition-duration: $transition-duration;
+    transition-timing-function: $transition-timing-function;
+  }
+
+  .minidocs-header {
+    margin: 0;
+  }
+
+  .minidocs-logo {
+    max-height: 100px;
+    width: inherit;
+    display: block;
+  }
+
+  .minidocs-content {
+    padding-bottom: 50px;
+    max-width: 48em; // sets a max-width to avoid endless lines on wide screens
+  }
+
+  .minidocs-sidebar {
+    background-color: $color-neutral--10;
+  }
+
+  .minidocs-menu {
+    // overwrite the "#" default style
+    .h1::before {
+      display: none;
+    }
+    .h1, .h2, .h3 {
+      font-weight: 400;
+    }
+    .h1, .h2 {
+      margin-bottom: 8px;
+    }
+    .h2 {
+      font-size: 1.4em;
+    }
+    .content-link {
+      transition-property: background-color, color, border-color, padding-left;
+      color: $color-neutral--80;
+      padding-left: 0;
+      &:hover, &:focus {
+        color: $color-neutral;
+        border-left-color: transparent;
+        padding-left: .65rem;
+        background-color: rgba(0,0,0,.05);
+      }
+      &.active {
+        padding-left: .65rem;
+        border-left-color: $color-green--hover;
+        background-color: #FFF;
+      }
+    }
+  }
+}
diff --git a/build.js b/build.js
index 33d1afe..62e06f8 100644
--- a/build.js
+++ b/build.js
@@ -3,4 +3,4 @@ var ndjson = require('ndjson')
 
 process.stdin.pipe(ndjson.parse()).on('data', function (obj) {
   fs.writeFileSync('docs/' + obj.name + '.md', obj.readme)
-})
\ No newline at end of file
+})
diff --git a/package.json b/package.json
index d889e21..d8e1b01 100644
--- a/package.json
+++ b/package.json
@@ -7,9 +7,11 @@
     "update": "npm run update:list && npm run update:docs",
     "update:list": "curl -Ssl https://raw.githubusercontent.com/clkao/awesome-dat/master/readme.md | grep '📔' | egrep -o 'github.com/[a-zA-Z0-9_-]+/[a-zA-Z0-9_-]+' | cut -f 2- -d / | uniq > repos.txt",
     "update:build": "cat repos.txt | ecosystem-docs sync && cat repos.txt | ecosystem-docs read | node build.js",
-    "build:local": "minidocs docs -c docs/contents.json -i welcome -o dist  -l ./node_modules/dat-design/downloads/dat-data-logo.png -t 'Dat Data' -s assets/styles.css --pushstate",
-    "build:deploy": "minidocs docs -c docs/contents.json -i welcome -o dist -l ./node_modules/dat-design/downloads/dat-data-logo.png -t 'Dat Data' -s assets/styles.css --full-html",
+    "build:local": "npm run build:css && minidocs docs -c docs/contents.json -i welcome -o dist  -l ./node_modules/dat-design/downloads/dat-data-logo.png -t 'Dat Data' -s assets/styles.css --pushstate",
+    "build:deploy": "npm run build:css && minidocs docs -c docs/contents.json -i welcome -o dist -l ./node_modules/dat-design/downloads/dat-data-logo.png -t 'Dat Data' -s assets/styles.css --full-html",
+    "build:css": "node-sass --importer node_modules/node-sass-magic-importer assets/styles.scss assets/styles.css",
     "deploy": "npm run build:deploy && echo docs.dat-data.com > dist/CNAME && gh-pages -d dist",
+    "watch:css": "nodemon -e scss -x \"npm run build:local\"",
     "start": "budo --dir dist --pushstate",
     "paper": "pandoc --variable author=\"Maxwell Ogden, Karissa McKelvey, Mathias Buus\" --variable title=\"Dat - Distributed Dataset Synchronization And Versioning\" --variable date=\"Version 1.0.0, May 2016\" --variable classoption=twocolumn --variable papersize=a4paper -s dat-paper.md -o dat-paper.pdf"
   },
@@ -32,6 +34,9 @@
   "devDependencies": {
     "budo": "^8.3.0",
     "ecosystem-docs": "^1.1.1",
-    "ndjson": "^1.4.3"
+    "ndjson": "^1.4.3",
+    "node-sass": "^3.8.0",
+    "node-sass-magic-importer": "^0.1.4",
+    "nodemon": "^1.10.0"
   }
 }