Merge pull request #249 from picturepan2/0.2.15 v0.2.15

0.2.15

1 files changed, 334 insertions, 176 deletions

diff --git a/docs/css/docs.css b/docs/css/docs.css
index 88d8162..02a6090 100644
--- a/docs/css/docs.css
+++ b/docs/css/docs.css
@@ -1,250 +1,348 @@
 /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
 /* Spectre version */
 .version::after {
-  content: "0.2.14";
+  content: "0.2.15";
 }
-/* Spectre docs style */
-.bg-gray {
-  background: #f8f9fa;
-  color: #667189;
-  padding: 1rem;
-}
-.bg-dark {
-  background: #50596c;
-  color: #fff;
-  padding: 1rem;
+/* Spectre New Docs */
+.s-container > .columns {
+  -webkit-flex-flow: nowrap;
+  -ms-flex-flow: nowrap;
+  flex-flow: nowrap;
+  min-height: 100vh;
 }
-.bg-primary {
-  background: #5764c6;
-  color: #fff;
-  padding: 1rem;
+.s-sidebar {
+  background: #f8f9fa;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding: 1.5rem 0 1.5rem 1.5rem;
+  width: 12rem;
 }
-.section-header {
-  padding: 1rem .5rem;
+.s-sidebar .s-nav {
+  bottom: 1.5rem;
+  overflow-y: auto;
   position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 200;
+  top: 5rem;
+  width: 10.5rem;
 }
-.section-hero {
-  position: relative;
-  z-index: 300;
+.s-sidebar .accordion .accordion-item {
+  margin-bottom: .75rem;
 }
-.grid-header .navbar {
-  height: 4rem;
+.s-sidebar .accordion input ~ .accordion-header {
+  color: #5b657a;
+  font-size: .6rem;
+  font-weight: 600;
+  text-transform: uppercase;
 }
-.grid-header .navbar-section {
-  padding: 0;
+.s-sidebar .accordion input:checked ~ .accordion-header {
+  color: #5b657a;
 }
-.grid-header .navbar-brand {
-  color: #50596c;
+.s-sidebar .accordion .menu .menu-item {
+  padding-left: 1rem;
 }
-.grid-header .btn-link {
-  color: #667189;
-  padding-left: .6rem;
-  padding-right: .6rem;
+.s-sidebar .accordion .menu .menu-item > a {
+  background: transparent;
+  color: #727e96;
+  display: inline-block;
 }
-.grid-header .btn-link:focus,
-.grid-header .btn-link:hover,
-.grid-header .btn-link:active {
-  color: #50596c;
-  opacity: .75;
+.s-content {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  max-width: 920px;
+  padding: 0 3rem;
+  width: calc(100vw - 12rem);
 }
-.grid-hero {
-  margin-bottom: 4rem;
-  margin-top: 10rem;
+.s-content > .container {
+  padding-bottom: 1.5rem;
 }
-.grid-hero h1 {
-  color: #50596c;
-  font-size: 3.2rem;
-  font-weight: 400;
-}
-.grid-hero h2 {
-  color: #5b657a;
-  font-size: 1.8rem;
-  font-weight: 400;
-  line-height: 3rem;
-  margin-bottom: 3rem;
+.s-content .anchor {
+  color: #626fca;
+  height: 0;
+  margin-left: -2em;
+  overflow: hidden;
+  padding: 0 1em;
+  position: absolute;
+  text-align: center;
+  width: 0;
+  z-index: 100;
 }
-.grid-hero h2 u {
-  border-bottom: .2rem solid currentColor;
-  padding-bottom: .1rem;
+.s-content .anchor:focus,
+.s-content .anchor:hover {
+  box-shadow: none;
+  height: auto;
   text-decoration: none;
+  width: 2em;
 }
-.grid-hero .card {
-  background: none;
-  border: 0;
-  color: #667189;
-  padding: 1rem;
-}
-.grid-hero .card .card-title {
-  color: #5764c6;
-  font-size: 1.8rem;
+.s-content .s-title,
+.s-content .s-subtitle {
+  line-height: 1.6rem;
   margin-bottom: 0;
+  padding-bottom: 1.5rem;
+  padding-top: 1.5rem;
+  position: static;
 }
-.grid-footer {
-  color: #acb3c2;
-  margin-bottom: 1rem;
-  margin-top: 2rem;
-}
-.grid-footer a {
-  color: #727e96;
+@supports ((position: -webkit-sticky) or (position: sticky)) {
+  .s-content .s-title,
+  .s-content .s-subtitle {
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    z-index: 200;
+  }
+  .s-content .s-title::before,
+  .s-content .s-subtitle::before {
+    background: #fff;
+    bottom: 0;
+    content: "";
+    display: block;
+    left: -10px;
+    position: absolute;
+    right: -10px;
+    top: -5px;
+    z-index: -1;
+  }
 }
-.docs-content {
-  padding-top: 0;
+.s-content .s-title:hover .anchor,
+.s-content .s-subtitle:hover .anchor {
+  height: auto;
+  width: 1em;
 }
-.docs-content .container {
-  padding: 1rem;
+.s-content .s-title + .docs-note,
+.s-content .s-subtitle + .docs-note {
+  margin-top: .4rem;
 }
-.docs-content header {
-  padding-top: 6rem;
+.s-content .docs-note {
+  margin: 1.5rem 0;
 }
-.docs-content .anchor {
-  height: 0;
-  margin-left: -1em;
-  overflow: hidden;
-  position: absolute;
-  width: 0;
+.s-content .column {
+  padding: .4rem;
 }
-.docs-content .anchor:focus,
-.docs-content .anchor:hover {
-  height: auto;
-  text-decoration: none;
-  width: auto;
+.s-content .docs-block {
+  border-radius: .1rem;
+  padding: .5rem;
 }
-.docs-content .notes {
-  margin: 4rem 0;
+.s-content .docs-block.bg-gray {
+  background: #f0f1f4;
 }
-.docs-content .docs-block {
-  border-radius: .2rem;
-  padding: 1rem .5rem;
+.s-content .docs-shape {
+  height: 4.8rem;
+  line-height: 1.2rem;
+  padding: 1.8rem 0;
+  width: 4.8rem;
 }
-.docs-content .docs-dot {
+.s-content .docs-dot {
   border-radius: 50%;
   display: inline-block;
-  height: 1rem;
+  height: .5rem;
   padding: 0;
-  width: 1rem;
-}
-.docs-content .docs-table th,
-.docs-content .docs-table td {
-  padding: 1.5rem .5rem;
-}
-.docs-content h1,
-.docs-content h2,
-.docs-content h3,
-.docs-content h4,
-.docs-content h5,
-.docs-content h6 {
-  margin-bottom: 2rem;
-  margin-top: 2rem;
+  width: .5rem;
 }
-.docs-content h1:hover .anchor,
-.docs-content h2:hover .anchor,
-.docs-content h3:hover .anchor,
-.docs-content h4:hover .anchor,
-.docs-content h5:hover .anchor,
-.docs-content h6:hover .anchor {
-  height: auto;
-  width: auto;
+.s-content .docs-table th,
+.s-content .docs-table td {
+  padding: .75rem .25rem;
 }
-.docs-content .docs-color {
-  border-radius: .2rem;
-  margin: .5rem 0;
-  padding: 1rem;
+.s-content .docs-color {
+  border-radius: .1rem;
+  margin: .25rem 0;
+  padding: .5rem;
 }
-.docs-content .docs-color .color-subtitle {
-  font-size: 1.2rem;
+.s-content .docs-color .color-subtitle {
+  font-size: .6rem;
   opacity: .75;
 }
-.docs-content .panel {
+.s-content .panel {
   height: 75vh;
 }
-.docs-content .panel .tile {
-  margin: 1.5rem 0;
+.s-content .panel .tile {
+  margin: .75rem 0;
 }
-.docs-content .code {
-  color: #667189;
+.s-content .parallax {
+  margin: 2rem auto;
+}
+.s-content .code {
+  color: #5b657a;
 }
-.docs-content .code .com {
+.s-content .code .com {
   color: #acb3c2;
 }
-.docs-content .code .tag {
+.s-content .code .tag {
   color: #5764c6;
 }
-.docs-content .code .atn {
-  color: #667189;
+.s-content .code .atn {
+  color: #5b657a;
 }
-.docs-content .code .atv {
+.s-content .code .atv {
   color: #e06870;
 }
-.docs-content .empty .icon {
-  font-size: 4rem;
+.s-content .empty .icon {
+  font-size: 2rem;
 }
-.docs-content .form-autocomplete .menu {
+.s-content .form-autocomplete .menu {
   position: static;
 }
-.docs-content .example-tile-icon {
+.s-content .example-tile-icon {
   -webkit-align-content: space-around;
   align-content: space-around;
   -webkit-align-items: center;
   align-items: center;
   background: #5764c6;
-  border-radius: .2rem;
+  border-radius: .1rem;
   color: #fff;
   display: flex;
   display: -ms-flexbox;
   display: -webkit-flex;
   -ms-flex-align: center;
   -ms-flex-line-pack: distribute;
-  font-size: 2.4rem;
-  height: 4rem;
-  width: 4rem;
+  font-size: 1.2rem;
+  height: 2rem;
+  width: 2rem;
 }
-.docs-content .example-tile-icon .icon {
+.s-content .example-tile-icon .icon {
   margin: auto;
 }
-.docs-content .comparison-slider .filter-grayscale {
+.s-content .comparison-slider {
+  height: auto;
+  padding-bottom: 56.2222%;
+}
+.s-content .comparison-slider .filter-grayscale {
   -webkit-filter: grayscale(75%);
   filter: grayscale(75%);
 }
-@media screen and (min-width: 601px) {
-  .section-header .navbar-section {
-    padding: 0 .5rem;
-  }
-  .docs-sidebar {
-    padding: 7rem 1rem 5rem 1rem;
-  }
-  .docs-sidebar .docs-nav {
-    position: relative;
-  }
-  @supports ((position: -webkit-sticky) or (position: sticky)) {
-    .docs-sidebar .docs-nav {
-      position: sticky;
-      position: -webkit-sticky;
-      top: 8rem;
-    }
-    .docs-sidebar .docs-nav .nav-item a:focus {
-      box-shadow: none;
-    }
-  }
+.s-brand {
+  color: #5764c6;
+  padding: 0 1.5rem;
+  position: fixed;
+  top: 1.3rem;
+}
+.s-brand .s-logo {
+  -webkit-align-items: center;
+  align-items: center;
+  border-radius: .1rem;
+  display: inline-flex;
+  display: -ms-inline-flexbox;
+  display: -webkit-inline-flex;
+  -ms-flex-align: center;
+  height: 2rem;
+  padding: .2rem;
+  width: auto;
+}
+.s-brand .s-logo:focus,
+.s-brand .s-logo:hover {
+  text-decoration: none;
+}
+.s-brand .s-logo img {
+  display: inline;
+  height: auto;
+  width: 1.6rem;
+}
+.s-brand .s-logo h2 {
+  display: inline;
+  font-size: .8rem;
+  margin-bottom: 0;
+  margin-left: .5rem;
+  margin-right: .5rem;
+}
+.s-brand .float-btn {
+  position: fixed;
+  right: 4.5rem;
+  top: 1.5rem;
+}
+.s-footer {
+  color: #acb3c2;
+  padding: .5rem .5rem 1.5rem .5rem;
+}
+.s-footer a {
+  color: #727e96;
+}
+/* Spectre Homepage style */
+.section-header {
+  -webkit-backdrop-filter: blur(.5rem);
+  backdrop-filter: blur(.5rem);
+  background: rgba(248, 249, 250, .9);
+  padding: 1rem .5rem;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 200;
+}
+.section-header .s-brand {
+  padding: 0;
+  position: static;
+}
+.section-hero {
+  padding: 1.5rem .5rem;
+  position: relative;
+}
+.section-hero .column {
+  padding: .4rem;
+}
+.section-updates {
+  padding: 4.5rem .5rem 3.5rem .5rem;
+}
+.section-updates .card {
+  border: 0;
+  color: #667189;
+  margin-bottom: 1rem;
+}
+.section-features {
+  padding: 4.5rem .5rem;
+}
+.section-features .column {
+  padding: .4rem;
+}
+.section-footer {
+  color: #acb3c2;
+  padding: 1.8rem .75rem 1rem .75rem;
+  position: relative;
+  z-index: 200;
+}
+.section-footer a {
+  color: #727e96;
+}
+.grid-hero {
+  margin-bottom: 2rem;
+  margin-top: 5rem;
+}
+.grid-hero h1 {
+  color: #454d5d;
+  font-size: 1.6rem;
+  margin-bottom: 1.5rem;
+}
+.grid-hero h2 {
+  color: #50596c;
+  font-size: .9rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+.grid-hero h2 u {
+  border-bottom: .1rem solid currentColor;
+  padding-bottom: .05rem;
+  text-decoration: none;
+}
+.grid-hero .card {
+  background: none;
+  border: 0;
+  color: #667189;
+  padding: .5rem;
+}
+.grid-hero .card .card-title {
+  color: #5764c6;
+  font-size: .9rem;
+  margin-bottom: 0;
 }
+.menu-btn,
 .docs-nav-clear {
   display: none;
 }
-@media screen and (max-width: 600px) {
-  .grid-hero h2 {
-    font-size: 1.8rem;
-  }
-  .grid-hero .card {
-    padding: 0;
-  }
-  .docs-sidebar {
-    background: #fff;
+@media screen and (max-width: 880px) {
+  .s-sidebar {
+    background: #f8f9fa;
     height: 100%;
     left: 0;
     overflow-y: auto;
-    padding: 6rem 3rem;
+    padding: 3rem 1.5rem;
     position: fixed;
     top: 0;
     -webkit-transform: translateX(-100%);
@@ -253,10 +351,9 @@
     transition: transform .2s ease, -webkit-transform .2s ease;
     transition: transform .2s ease;
     transition: -webkit-transform .2s ease;
-    width: 24rem;
     z-index: 400;
   }
-  .docs-sidebar:target {
+  .s-sidebar:target {
     -webkit-transform: translateX(0);
     -ms-transform: translateX(0);
     transform: translateX(0);
@@ -264,9 +361,40 @@
     transition: transform .2s ease;
     transition: -webkit-transform .2s ease;
   }
-  .docs-sidebar:target + .docs-nav-clear {
+  .s-sidebar:target + .docs-nav-clear {
     display: block;
   }
+  .s-sidebar .s-nav {
+    top: 1.5rem;
+  }
+  .s-brand {
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    background: rgba(248, 249, 250, .8);
+    height: 3.5rem;
+    left: 0;
+    padding: .75rem .5rem;
+    right: 0;
+    text-align: center;
+    top: 0;
+    z-index: 300;
+  }
+  .s-brand .s-logo h2 {
+    display: none;
+  }
+  .s-brand .menu-btn {
+    display: block;
+    left: 1rem;
+    position: fixed;
+    top: .95rem;
+  }
+  .s-brand .menu-btn .btn {
+    font-size: 1rem;
+  }
+  .s-brand .float-btn {
+    right: 1rem;
+    top: .95rem;
+  }
   .docs-nav-clear {
     background: rgba(0, 0, 0, .15);
     display: none;
@@ -278,4 +406,34 @@
     width: 100%;
     z-index: 300;
   }
+  .s-content {
+    min-width: auto;
+    padding: 3.5rem 2.5rem 0 2.5rem;
+    width: 100%;
+  }
+  .s-content .s-title,
+  .s-content .s-subtitle {
+    position: static;
+  }
+  .s-content .s-title::before,
+  .s-content .s-subtitle::before {
+    display: none;
+  }
+}
+@media screen and (max-width: 600px) {
+  .grid-hero h2 {
+    font-size: .9rem;
+  }
+  .grid-hero .card {
+    padding: 0;
+  }
+  .s-content {
+    padding: 3.5rem .5rem 0 .5rem;
+  }
+  .s-content .docs-block {
+    padding: .5rem .1rem;
+  }
+  .s-content .anchor {
+    display: none;
+  }
 }
\ No newline at end of file