From 253db19f5e2ee8c87c74d992c69d4f936eaa7db9 Mon Sep 17 00:00:00 2001
From: Karissa McKelvey <karissa@users.noreply.github.com>
Date: Fri, 12 Aug 2016 15:55:50 +0200
Subject: 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
---
 assets/styles.scss | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 assets/styles.scss

(limited to 'assets/styles.scss')

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;
+      }
+    }
+  }
+}
-- 
cgit v1.2.3