Added css and templates for new docs

KyleAMathews · Jun 30, 2017 · 5c43f9e · 5c43f9e
1 parent e5534d6
commit 5c43f9e
Show file tree

Hide file tree

Showing 32 changed files with 2,258 additions and 0 deletions.
diff --git a/docs/.ruby-version b/docs/.ruby-version
@@ -0,0 +1 @@
+2.3.0
diff --git a/www/src/css/_article.scss b/www/src/css/_article.scss
@@ -0,0 +1,139 @@
+.article {
+  display: flex;
+  margin-left: -40px;
+}
+
+.article__main {
+  width: calc((4.5/ 6 * 100%) + (0.5 / 6 * 100%));
+  padding-left: 40px;
+}
+
+.article__inner {
+  // TODO -- calc the logic of this this magic number...
+  padding-right: calc(8.93% + 40px);
+}
+
+.article__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.article__title {
+  @include f-article_title;
+  color: $c-dark;
+  letter-spacing: -0.02em;
+  padding-top: 80px;
+}
+
+.article__edit_link {
+  @include f-body;
+  color: $c-subtle;
+  border-color: $c-divider;
+  transition: all 0.2s ease;
+  transition-propery: color, border-color;
+
+  &::after {
+    top: -5px;
+  }
+
+  &:hover {
+    color: $c-text;
+    border-color: $c-text;
+  }
+}
+
+.article__sub {
+  @include f-article_sub;
+  color: $c-subtle;
+  padding-top: 45px;
+}
+
+.article__body {
+  padding-top: 65px;
+  padding-bottom: 120px;
+  // padding-right: 40px;
+
+  p {
+    @include f-panel;
+    max-width: 590px;
+
+    &:not(:first-child) {
+      padding-top: 30px;
+    }
+  }
+
+  h2 {
+    @include f-h2;
+    padding-top: 45px;
+  }
+}
+
+.article__editor {
+  padding-top: 40px;
+  margin-left: -35px;
+
+  .alt-design & {
+    margin-right: -35px;
+  }
+
+  + p {
+    padding-top: 35px;
+  }
+}
+
+.article__note {
+  max-width: 650px;
+  padding-top: 40px;
+  margin-left: -25px;
+}
+
+.article__traverse_nav {
+  padding-right: 40px;
+  margin-left: -999em;
+  padding-left: 999em;
+  background: $c-dark;
+  color: #fff;
+  border-color: rgba(#fff, 0.3);
+  padding-top: 50px;
+  padding-bottom: 50px;
+
+
+  .alt-design & {
+    margin-right: -999em;
+    padding-right: 999em;
+    position: relative;
+    z-index: 1;
+  }
+}
+
+.article__nav {
+  // Deduct the margin-left value from width
+  width: calc((1.5 / 6 * 100%));
+  // width: calc((2 / 6 * 100%) - ((0.5 / 6 * 100%) + 20px));
+  // margin-left: calc((0.5 / 6 * 100%) + 20px);
+  padding-left: calc((0.5 / 6 * 100%) - 20px);
+  background-color: $c-darker;
+  color: #fff;
+  display: flex;
+  align-items: stretch;
+
+  .alt-design & {
+    color: inherit;
+    background-color: transparent;
+  }
+}
+
+.article__nav_mid {
+  background-color: inherit;
+  color: inherit;
+  margin-right: -999em;
+  padding-right: 999em;
+  display: flex;
+  align-items: stretch;
+}
+
+.article__nav_inner {
+  padding-top: 120px;
+  min-height: 100vh;
+}
diff --git a/www/src/css/_article_nav.scss b/www/src/css/_article_nav.scss
@@ -0,0 +1,37 @@
+.article_nav {
+  position: fixed;
+}
+
+.article_nav__category_title {
+  @include f-note;
+
+  & + & {
+    padding-top: 30px;
+  }
+}
+
+.article_nav__category_title:not(.is-current) {
+  a {
+    color: rgba(#fff, 0.5);
+    transition: color 0.2s ease;
+    &:hover {
+      color: #fff;
+    }
+
+    .alt-design & {
+      color: rgba(#1a1a1a, 0.6);
+
+      &:hover {
+        color: #1a1a1a;
+      }
+    }
+  }
+}
+
+.article_nav__list {
+  padding-top: 20px;
+
+  + .article_nav__category_title {
+    padding-top: 35px;
+  }
+}
diff --git a/www/src/css/_aux_list.scss b/www/src/css/_aux_list.scss
@@ -0,0 +1,18 @@
+.aux_list {
+  display: flex;
+  margin-left: -20px;
+}
+
+.aux_list__item {
+  padding-left: 20px;
+}
+
+.aux_list__link {
+  @include f-aux;
+  padding: 5px 10px;
+}
+
+.aux_list__btn {
+  border-radius: 15px;
+  background: rgba(#fff, 0.1);
+}
diff --git a/www/src/css/_below_nav.scss b/www/src/css/_below_nav.scss
@@ -0,0 +1,11 @@
+.below_nav {
+  padding-top: 40px;
+
+  @include breakpoint("medium-to-xlarge") {
+    padding-top: 50px;
+  }
+
+  @include breakpoint("xxlarge") {
+    padding-top: 60px;
+  }
+}
diff --git a/www/src/css/_codemirror_theme.scss b/www/src/css/_codemirror_theme.scss
@@ -0,0 +1,94 @@
+.CodeMirror { height: auto !important; padding: 0 0 0 10px; }
+
+.cm-s-react.CodeMirror { background: #ffffff; color: #777777; }
+.cm-s-react div.CodeMirror-selected { background: #e0e0e0; }
+.cm-s-react .CodeMirror-line::selection, .cm-s-react .CodeMirror-line > span::selection, .cm-s-react .CodeMirror-line > span > span::selection { background: #e0e0e0; }
+.cm-s-react .CodeMirror-line::-moz-selection, .cm-s-react .CodeMirror-line > span::-moz-selection, .cm-s-react .CodeMirror-line > span > span::-moz-selection { background: #e0e0e0; }
+.cm-s-react .CodeMirror-gutters { background: transparent; border-right: 0px; }
+.cm-s-react .CodeMirror-guttermarker { color: #777777; }
+.cm-s-react .CodeMirror-guttermarker-subtle { color: #767676; }
+.cm-s-react .CodeMirror-linenumber { color: #767676; margin-left: -10px; }
+.cm-s-react .CodeMirror-cursor { border-left: 1px solid #505050; }
+
+.cm-s-react span.cm-comment { color: #8f5536; }
+.cm-s-react span.cm-atom { color: #aa759f; }
+.cm-s-react span.cm-number { color: #aa759f; }
+
+.cm-s-react span.cm-attribute {  }
+.cm-s-react span.cm-property { color: #007db8; }
+.cm-s-react span.cm-keyword { color: #777777; }
+.cm-s-react span.cm-string { color: #777777; }
+
+.cm-s-react span.cm-variable { color: #d14355; }
+.cm-s-react span.cm-variable-2 { color: #6a9fb5; }
+.cm-s-react span.cm-def { color: #d14356; }
+.cm-s-react span.cm-bracket { color: #518400; }
+.cm-s-react span.cm-tag { color: #518400; }
+.cm-s-react span.cm-link { color: #aa759f; }
+.cm-s-react span.cm-error { background: #777777; color: #505050; }
+
+.cm-s-react .CodeMirror-activeline-background { background: #DDDCDC; }
+.cm-s-react .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }
+
+
+.article .CodeMirror { height: auto !important; padding: 10px 10px 10px 0; font-size: 18px; line-height: 25px; }
+
+// .article {
+
+  .cm-s-react.CodeMirror { background: #fff; color: inherit; }
+  [data-readonly] .CodeMirror-linenumber { visibility: hidden; }
+
+  .alt-design {
+    .article .CodeMirror { padding-top: 25px; padding-bottom: 25px; }
+
+    .CodeMirror::before {
+      @include f-note;
+      content: 'Code';
+      display: block;
+      background: $c-darker;
+      color: #fff;
+      padding: 8px 25px 7px;
+      margin-left: -15px;
+      position: relative;
+      margin-right: -30px;
+    }
+
+    .article .CodeMirror::before {
+      top: -25px;
+    }
+
+
+
+    .cm-s-react.CodeMirror { background: $c-dark; border-radius: 10px; color: #fff; -webkit-font-smoothing: antialiased; }
+
+    .CodeMirror-linenumber { color: #999; }
+    .cm-s-react div.CodeMirror-selected { background: $c-darker; }
+    .cm-s-react .CodeMirror-line::selection, .cm-s-react .CodeMirror-line > span::selection, .cm-s-react .CodeMirror-line > span > span::selection { background: $c-darker; }
+    .cm-s-react .CodeMirror-line::-moz-selection, .cm-s-react .CodeMirror-line > span::-moz-selection, .cm-s-react .CodeMirror-line > span > span::-moz-selection { background: $c-darker; }
+    .cm-s-react .CodeMirror-cursor { border-left: 4px solid $c-brand; }
+      [data-readonly] > .CodeMirror .CodeMirror-cursor { display: none; }
+
+    // .cm-s-react span.cm-comment { color: #8f5536; }
+    // .cm-s-react span.cm-atom { color: purple; }
+    // .cm-s-react span.cm-number { color: #aa759f; }
+
+    .cm-s-react span.cm-attribute {  }
+    .cm-s-react span.cm-property { color: lighten($c-brand, 20); }
+    .cm-s-react span.cm-keyword { color: #999; }
+    .cm-s-react span.cm-string { color: #999; }
+
+    .cm-s-react span.cm-variable { color: darken($c-brand, 20); }
+    .cm-s-react span.cm-variable-2 { color: #6a9fb5; }
+    .cm-s-react span.cm-def { color: $c-brand; }
+    .cm-s-react span.cm-bracket { color: #518400; }
+    .cm-s-react span.cm-tag { color: #99c27c; }
+    .cm-s-react span.cm-link { color: #aa759f; }
+    .cm-s-react span.cm-error { background: #777777; color: #505050; }
+
+  }
+// }
+
+
+.home {
+
+}
diff --git a/www/src/css/_cta_group.scss b/www/src/css/_cta_group.scss
@@ -0,0 +1,21 @@
+.cta_group {
+  display: flex;
+  margin-left: -20px;
+
+  @include breakpoint("xlarge+") {
+    margin-left: -40px;
+  }
+}
+
+.cta_group__item {
+  width: 50%;
+  padding-left: 20px;
+
+  @include breakpoint("xlarge+") {
+    padding-left: 40px;
+  }
+
+  &:first-child {
+    text-align: right;
+  }
+}
diff --git a/www/src/css/_cta_link.scss b/www/src/css/_cta_link.scss
@@ -0,0 +1,16 @@
+.cta_link {
+  @include f-btn;
+  display: inline-block !important;
+  color: $c-brand;
+  padding-top: 10px;
+  transition: color 0.2s ease-out;
+
+  img {
+    margin-left: 4px;
+    vertical-align: -1px;
+  }
+
+  &:hover {
+    color: #fff;
+  }
+}