Merge pull request #139 from picturepan2/feature/new-doc-page

Feature/new doc page

1 files changed, 254 insertions, 0 deletions

diff --git a/docs/css/docs.less b/docs/css/docs.less
new file mode 100644
index 0000000..2101f12
--- /dev/null
+++ b/docs/css/docs.less
@@ -0,0 +1,254 @@
+/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
+/* Spectre version */
+.version::after {
+  content: "0.2.1";
+}
+
+/* Spectre docs style */
+.grid-hero {
+  margin-top: 10rem;
+  margin-bottom: 4rem;
+
+  h1 {
+    color: #555;
+    font-weight: 400;
+    font-size: 3.2rem;
+  }
+  h2 {
+    color: #666;
+    font-size: 1.8rem;
+    font-weight: 400;
+    line-height: 3rem;
+    margin-bottom: 5rem;
+
+    u {
+      border-bottom: .2rem solid #666;
+      padding-bottom: .1rem;
+      text-decoration: none;
+    }
+  }
+
+  .card {
+    background: none;
+    border: 0;
+    color: #666;
+    padding: 1rem;
+
+    .card-title {
+      color: #5764c6;
+      font-size: 1.8rem;
+      margin-bottom: 0;
+    }
+  }
+}
+
+.bg-grey {
+  background-color: #f6f6f6;
+  padding: 1rem .5rem;
+  border-radius: .2rem;
+}
+
+.bg-dark {
+  background: #2d3354;
+  color: #fff;
+  padding: 1rem .5rem;
+}
+
+.bg-primary {
+  background: #5764c6;
+  color: #fff;
+  padding: 1rem .5rem;
+}
+
+.navbar-brand {
+  .icon {
+    font-size: 1.3333em;
+    line-height: .8em;
+    vertical-align: -20%;
+  }
+}
+
+.grid-header {
+  .btn {
+    color: #666;
+    &:hover,
+    &:focus,
+    &:active {
+      color: #444;
+      opacity: .75;
+    }
+  }
+  .navbar-brand {
+    color: #444;
+  }
+}
+
+.grid-footer {
+  color: #888;
+  margin-top: 4rem;
+  margin-bottom: 3rem;
+
+  a {
+    color: #666;
+  }
+}
+
+.empty .icon {
+  font-size: 4rem;
+}
+
+.code {
+  color: #666;
+
+  .com {
+    color: #adadad;
+  }
+  .tag {
+    color: #4452c0;
+  }
+  .atn {
+    color: #666;
+  }
+  .atv {
+    color: #e06870;
+  }
+}
+
+.docs-content {
+  .container {
+    padding: 2rem 1rem;
+  }
+
+  header {
+    padding-top: 2rem;
+  }
+
+  pre {
+    margin-bottom: 2rem;
+    margin-top: 2rem;
+  }
+
+  .notes {
+    margin: 4rem 0;
+    color: #666;
+  }
+
+  h3,
+  h4,
+  h5 {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+}
+
+.example-tile-icon {
+  align-content: space-around;
+  align-items: center;
+  background: #5764c6;
+  border-radius: .2rem;
+  color: #fff;
+  display: flex;
+  font-size: 2.4rem;
+  height: 4rem;
+  width: 4rem;
+}
+
+@media screen and (min-width: 481px) {
+  .docs-sidebar {
+    padding: 6rem 0;
+
+    .docs-nav {
+      position: relative;
+    }
+
+    @supports (position: sticky) {
+      .docs-nav {
+        position: sticky;
+        top: 6rem;
+
+        // A position: sticky; bug casues box-shadow generates width to the elements
+        .nav-item a:focus {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+}
+
+.docs-nav-clear {
+  display: none;
+}
+.show-xs {
+  display: none !important;
+}
+
+
+// Spectre.css Docs Mobile experience
+
+@media screen and (max-width: 480px) {
+  .show-xs {
+    display: block !important;
+  }
+
+  .grid-hero {
+    h2 {
+      font-size: 1.8rem;
+    }
+    .card {
+      padding: 0;
+    }
+  }
+
+  .section-header {
+    padding: 0 .5rem;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 299;
+
+    .btn-link {
+      padding-left: .6rem;
+      padding-right: .6rem;
+    }
+  }
+
+  .docs-sidebar {
+    background: #fff;
+    height: 100%;
+    overflow-y: auto;
+    padding-left: 3rem;
+    position: fixed;
+    right: 0;
+    top: 0;
+    transform: translateX(100%);
+    transition: transform .216s ease;
+    width: 24rem;
+    z-index: 999;
+
+    &:target {
+      transform: translateX(0);
+
+      & + .docs-nav-clear {
+        display: block;
+      }
+    }
+  }
+
+  .docs-content {
+    header {
+      padding-top: 6rem;
+    }
+  }
+
+  .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: 499;
+  }
+}