1 files changed, 302 insertions, 0 deletions
diff --git a/docs/src/docs.less b/docs/src/docs.less
new file mode 100644
index 0000000..15e57f8
--- /dev/null
+++ b/docs/src/docs.less
@@ -0,0 +1,302 @@
+/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
+/* Spectre version */
+.version::after {
+  content: "0.2.9";
+}
+// Core variables and mixins
+@import '../../src/variables.less';
+@import '../../src/mixins.less';
+
+/* Spectre docs style */
+.bg-gray {
+  background: @bg-color;
+  color: lighten(@body-font-color, 10%);
+  padding: 1rem;
+}
+
+.bg-dark {
+  background: @body-font-color;
+  color: @light-color;
+  padding: 1rem;
+}
+
+.bg-primary {
+  background: @primary-color;
+  color: @light-color;
+  padding: 1rem;
+}
+
+.section-header {
+  padding: 1rem .5rem;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 200;
+}
+
+.section-hero {
+  position: relative;
+  z-index: 300;
+}
+
+.grid-header {
+  .navbar {
+    height: 4rem;
+  }
+
+  .navbar-section {
+    padding: 0;
+  }
+
+  .navbar-brand {
+    color: @body-font-color;
+  }
+
+  .btn-link {
+    color: lighten(@body-font-color, 10%);
+    padding-left: .6rem;
+    padding-right: .6rem;
+
+    &:focus,
+    &:hover,
+    &:active {
+      color: @body-font-color;
+      opacity: .75;
+    }
+  }
+}
+
+.grid-hero {
+  margin-top: 10rem;
+  margin-bottom: 4rem;
+
+  h1 {
+    color: lighten(@body-font-color, 5%);
+    font-size: 3.2rem;
+    font-weight: 400;
+  }
+
+  h2 {
+    color: lighten(@body-font-color, 5%);
+    font-size: 1.8rem;
+    font-weight: 400;
+    line-height: 3rem;
+    margin-bottom: 3rem;
+
+    u {
+      border-bottom: .2rem solid lighten(@body-font-color, 5%);
+      padding-bottom: .1rem;
+      text-decoration: none;
+    }
+  }
+
+  .card {
+    background: none;
+    border: 0;
+    color: lighten(@body-font-color, 10%);
+    padding: 1rem;
+
+    .card-title {
+      color: @primary-color;
+      font-size: 1.8rem;
+      margin-bottom: 0;
+    }
+  }
+}
+
+.grid-footer {
+  color: @gray-color;
+  margin-top: 4rem;
+  margin-bottom: 3rem;
+
+  a {
+    color: @gray-color-dark;
+  }
+}
+
+.docs-content {
+  color: lighten(@body-font-color, 10%);
+  padding-top: 0;
+
+  .container {
+    padding: 1rem;
+  }
+
+  header {
+    color: @body-font-color;
+    padding-top: 6rem;
+  }
+
+  .notes {
+    margin: 4rem 0;
+  }
+
+  .docs-block {
+    border-radius: .2rem;
+    padding: 1rem .5rem;
+  }
+
+  .docs-dot {
+    border-radius: 50%;
+    display: inline-block;
+    height: 1rem;
+    padding: 0;
+    width: 1rem;
+  }
+
+  .docs-table {
+    th,
+    td {
+      padding: 1.5rem .5rem;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .docs-color {
+    border-radius: @border-radius;
+    margin: .5rem 0;
+    padding: 1rem;
+
+    .color-subtitle {
+      font-size: @font-size-sm;
+      opacity: .75;
+    }
+  }
+
+  .panel {
+    height: 75vh;
+
+    .tile {
+      margin: 1.5rem 0;
+    }
+  }
+
+  .code {
+    color: lighten(@body-font-color, 10%);
+
+    .com {
+      color: @gray-color;
+    }
+    .tag {
+      color: @primary-color;
+    }
+    .atn {
+      color: lighten(@body-font-color, 10%);
+    }
+    .atv {
+      color: #e06870;
+    }
+  }
+
+  .empty .icon {
+    font-size: 4rem;
+  }
+
+  .navbar-brand .icon {
+    font-size: 3rem;
+  }
+
+  .form-autocomplete .menu {
+    position: static;
+  }
+
+  .example-tile-icon {
+    align-content: space-around;
+    align-items: center;
+    background: @primary-color;
+    border-radius: .2rem;
+    color: @light-color;
+    display: flex;
+    font-size: 2.4rem;
+    height: 4rem;
+    width: 4rem;
+  }
+}
+
+@media screen and (min-width: 601px) {
+  .section-header {
+    .navbar-section {
+      padding: 0 .5rem;
+    }
+  }
+
+  .docs-sidebar {
+    padding: 7rem 1rem 3.5rem 1rem;
+
+      .docs-nav {
+        position: relative;
+    }
+
+    @supports (position: sticky) {
+      .docs-nav {
+        position: sticky;
+        top: 8rem;
+
+        // A position: sticky; bug casues box-shadow generates width to the elements
+        .nav-item a:focus {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+}
+
+.docs-nav-clear {
+  display: none;
+}
+
+// Spectre.css Docs Mobile experience
+@media screen and (max-width: 600px) {
+  .grid-hero {
+    h2 {
+      font-size: 1.8rem;
+    }
+    .card {
+      padding: 0;
+    }
+  }
+
+  .docs-sidebar {
+    background: bg-color-light;
+    height: 100%;
+    overflow-y: auto;
+    padding: 6rem 3rem;
+    position: fixed;
+    left: 0;
+    top: 0;
+    transform: translateX(-100%);
+    transition: transform .2s ease;
+    width: 24rem;
+    z-index: 400;
+
+    &:target {
+      transform: translateX(0);
+      transition: transform .2s ease;
+
+      & + .docs-nav-clear {
+        display: block;
+      }
+    }
+  }
+
+  .docs-nav-clear {
+    background: rgba(0, 0, 0, .15);
+    display: none;
+    height: 100%;
+    left: 0;
+    right: 0;
+    top: 0;
+    position: fixed;
+    width: 100%;
+    z-index: 300;
+  }
+}