Add Panels and update Navbar

1 files changed, 58 insertions, 10 deletions

diff --git a/docs/css/spectre.css b/docs/css/spectre.css
index 27546fa..2bf154e 100644
--- a/docs/css/spectre.css
+++ b/docs/css/spectre.css
@@ -1646,18 +1646,15 @@ code {
   }
 }
 .navbar {
-  -webkit-align-items: center;
-  align-items: center;
+  -webkit-align-items: stretch;
+  align-items: stretch;
   display: flex;
   display: -ms-flexbox;
   display: -webkit-flex;
-  -ms-flex-align: center;
-  -ms-flex-pack: justify;
+  -ms-flex-align: stretch;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
 }
 .navbar .navbar-section {
   -webkit-align-items: center;
@@ -1665,15 +1662,66 @@ code {
   display: flex;
   display: -ms-flexbox;
   display: -webkit-flex;
+  -webkit-flex: 1 0 0;
+  -ms-flex: 1 0 0;
+  flex: 1 0 0;
+  -ms-flex-align: center;
+}
+.navbar .navbar-section:last-of-type {
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+.navbar .navbar-primary {
+  -webkit-align-items: center;
+  align-items: center;
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
   -ms-flex-align: center;
-  padding: 1rem 0;
 }
 .navbar .navbar-brand {
   font-size: 1.6rem;
   font-weight: 500;
-  margin-right: 2rem;
   text-decoration: none;
-  vertical-align: middle;
+}
+.panel {
+  border: .1rem solid #efefef;
+  border-radius: .2rem;
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+.panel .panel-header,
+.panel .panel-footer {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding: 1.5rem;
+}
+.panel .panel-nav {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+}
+.panel .panel-body {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  overflow-y: auto;
+}
+.panel .panel-body {
+  padding: 0 1.5rem;
+}
+.panel .panel-title {
+  font-size: 2rem;
+  line-height: 1.4;
 }
 .empty {
   background: #f8f8f8;
@@ -2342,7 +2390,7 @@ code {
   display: -webkit-flex;
   -ms-flex-align: start;
   -ms-flex-line-pack: justify;
-  margin: 0;
+  margin: .5rem 0;
   padding: .5rem 0;
 }
 .tile .tile-icon,