Completely rewritten Docs experience

1 files changed, 60 insertions, 48 deletions

diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
index 6d55bb1..5978f3f 100644
--- a/docs/dist/spectre.css
+++ b/docs/dist/spectre.css
@@ -421,25 +421,39 @@ h6 {
   color: inherit;
   font-weight: 500;
   line-height: 1.2;
-  margin-bottom: 16px;
+  margin-bottom: 8px;
   margin-top: 0;
 }
-h1 {
-  font-size: 50px;
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-weight: 500;
 }
-h2 {
+h1,
+.h1 {
   font-size: 40px;
 }
-h3 {
-  font-size: 30px;
+h2,
+.h2 {
+  font-size: 32px;
+}
+h3,
+.h3 {
+  font-size: 28px;
 }
-h4 {
+h4,
+.h4 {
   font-size: 24px;
 }
-h5 {
+h5,
+.h5 {
   font-size: 20px;
 }
-h6 {
+h6,
+.h6 {
   font-size: 16px;
 }
 p {
@@ -463,7 +477,7 @@ kbd {
   color: #fff;
   display: inline-block;
   line-height: 1;
-  padding: 3px 4px;
+  padding: .2em .3em;
   vertical-align: baseline;
 }
 mark {
@@ -472,11 +486,11 @@ mark {
   color: #454d5d;
   display: inline-block;
   line-height: 1;
-  padding: 3px 4px;
+  padding: .2em .3em;
   vertical-align: baseline;
 }
 blockquote {
-  border-left: 2px solid #f0f1f4;
+  border-left: 2px solid #e7e9ed;
   margin-left: 0;
   padding: 8px 16px;
 }
@@ -581,9 +595,12 @@ dl dd {
 }
 .table td,
 .table th {
-  border-bottom: 1px solid #f0f1f4;
+  border-bottom: 1px solid #e7e9ed;
   padding: 12px 8px;
 }
+.table th {
+  border-bottom-width: 2px;
+}
 .btn {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -783,7 +800,7 @@ legend {
   appearance: none;
   background: #fff;
   background-image: none;
-  border: 1px solid #c4c9d3;
+  border: 1px solid #caced7;
   border-radius: 2px;
   color: #454d5d;
   display: block;
@@ -851,7 +868,7 @@ textarea.form-input {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  border: 1px solid #c4c9d3;
+  border: 1px solid #caced7;
   border-radius: 2px;
   color: inherit;
   font-size: 14px;
@@ -946,7 +963,7 @@ textarea.form-input {
 .form-checkbox .form-icon,
 .form-radio .form-icon,
 .form-switch .form-icon {
-  border: 1px solid #c4c9d3;
+  border: 1px solid #caced7;
   cursor: pointer;
   display: inline-block;
   position: absolute;
@@ -1051,7 +1068,7 @@ textarea.form-input {
 }
 .input-group .input-group-addon {
   background: #f8f9fa;
-  border: 1px solid #c4c9d3;
+  border: 1px solid #caced7;
   border-radius: 2px;
   line-height: 20px;
   padding: 5px 8px;
@@ -1205,7 +1222,7 @@ input.disabled + .form-icon {
   color: #50596c;
   display: inline-block;
   line-height: 1;
-  padding: 3px 4px;
+  padding: .2em .3em;
   vertical-align: baseline;
 }
 .label.label-primary {
@@ -1230,7 +1247,7 @@ code {
   color: #e06870;
   display: inline-block;
   line-height: 1;
-  padding: 3px 4px;
+  padding: .2em .3em;
   vertical-align: baseline;
 }
 .code {
@@ -1771,7 +1788,7 @@ code {
   text-decoration: none;
 }
 .panel {
-  border: 1px solid #f0f1f4;
+  border: 1px solid #e7e9ed;
   border-radius: 2px;
   display: flex;
   display: -ms-flexbox;
@@ -1799,9 +1816,6 @@ code {
   overflow-y: auto;
   padding: 0 15px;
 }
-.panel .panel-title {
-  font-size: 16px;
-}
 .panel .panel-subtitle {
   color: #acb3c2;
 }
@@ -1829,11 +1843,9 @@ code {
   -webkit-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
-  transition: all .2s ease;
 }
 .accordion .accordion-item input:checked ~ .accordion-body {
   max-height: 1000px;
-  transition: max-height 2s ease;
 }
 .accordion .accordion-item .accordion-header {
   display: block;
@@ -2084,7 +2096,7 @@ code {
 }
 .card {
   background: #fff;
-  border: 1px solid #f0f1f4;
+  border: 1px solid #e7e9ed;
   border-radius: 2px;
   display: block;
 }
@@ -2113,9 +2125,6 @@ code {
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
 }
-.card .card-title {
-  font-size: 20px;
-}
 .card .card-subtitle {
   color: #acb3c2;
 }
@@ -2185,6 +2194,7 @@ code {
   z-index: 100;
 }
 .menu.menu-nav {
+  background: transparent;
   box-shadow: none;
 }
 .menu .menu-item {
@@ -2576,7 +2586,7 @@ code {
   border: 2px solid #5764c6;
 }
 .step .step-item.active ~ .step-item::before {
-  background: #f0f1f4;
+  background: #e7e9ed;
 }
 .step .step-item.active ~ .step-item a::before {
   background: #e7e9ed;
@@ -2694,7 +2704,7 @@ code {
   transform: translate(-50%, 8px);
   transition: all .2s ease;
   white-space: nowrap;
-  z-index: 200;
+  z-index: 300;
 }
 .tooltip:focus::after,
 .tooltip:hover::after {
@@ -2798,13 +2808,6 @@ a.text-primary:focus,
 a.text-primary:hover {
   color: #4452c0;
 }
-.text-secondary {
-  color: #eff1fa;
-}
-a.text-secondary:focus,
-a.text-secondary:hover {
-  color: #dcdff3;
-}
 .text-gray {
   color: #acb3c2;
 }
@@ -2928,7 +2931,7 @@ a.text-error:hover {
   transform: translateY(-11px);
 }
 .divider {
-  border-top: 1px solid #f0f1f4;
+  border-top: 1px solid #e7e9ed;
   height: 1px;
   margin: 10px 0;
 }
@@ -2937,7 +2940,7 @@ a.text-error:hover {
   padding: 10px;
 }
 .divider-vert::before {
-  border-left: 1px solid #f0f1f4;
+  border-left: 1px solid #e7e9ed;
   bottom: 10px;
   content: "";
   display: block;
@@ -2959,7 +2962,7 @@ a.text-error:hover {
 }
 .loading {
   color: transparent !important;
-  min-height: 14px;
+  min-height: 16px;
   pointer-events: none;
   position: relative;
 }
@@ -2967,20 +2970,29 @@ a.text-error:hover {
   -webkit-animation: loading 500ms infinite linear;
   animation: loading 500ms infinite linear;
   border: 2px solid #5764c6;
-  border-radius: 8px;
+  border-radius: 50%;
   border-right-color: transparent;
   border-top-color: transparent;
   content: "";
   display: block;
-  height: 14px;
+  height: 16px;
   left: 50%;
-  margin-left: -7px;
-  margin-top: -7px;
+  margin-left: -8px;
+  margin-top: -8px;
   position: absolute;
   top: 50%;
-  width: 14px;
+  width: 16px;
   z-index: 1;
 }
+.loading.loading-lg {
+  min-height: 40px;
+}
+.loading.loading-lg::after {
+  height: 32px;
+  margin-left: -16px;
+  margin-top: -16px;
+  width: 32px;
+}
 .clearfix::after,
 .container::after {
   clear: both;
@@ -2993,10 +3005,10 @@ a.text-error:hover {
 .float-right {
   float: right !important;
 }
-.rel {
+.relative {
   position: relative;
 }
-.abs {
+.absolute {
   position: absolute;
 }
 .fixed {