Add Responsive Visibility and new examples

1 files changed, 21 insertions, 12 deletions

diff --git a/docs/css/docs.css b/docs/css/docs.css
index ef9088e..a54dec1 100644
--- a/docs/css/docs.css
+++ b/docs/css/docs.css
@@ -5,20 +5,19 @@
 }
 /* Spectre docs style */
 .bg-gray {
-  background-color: #f6f6f6;
-  border-radius: .2rem;
+  background: #f6f6f6;
   color: #666;
-  padding: 1rem .5rem;
+  padding: 1rem;
 }
 .bg-dark {
-  background: #2d3354;
+  background: #333;
   color: #fff;
-  padding: 1rem .5rem;
+  padding: 1rem;
 }
 .bg-primary {
   background: #5764c6;
   color: #fff;
-  padding: 1rem .5rem;
+  padding: 1rem;
 }
 .grid-header .navbar-brand {
   color: #444;
@@ -97,6 +96,22 @@
   color: #666;
   margin: 4rem 0;
 }
+.docs-content .docs-block {
+  border-radius: .2rem;
+  padding: 1rem .5rem;
+}
+.docs-content .docs-dot {
+  border-radius: 50%;
+  display: block;
+  height: 1rem;
+  margin: auto;
+  padding: 0;
+  width: 1rem;
+}
+.docs-content .docs-table th,
+.docs-content .docs-table td {
+  padding: 1rem .5rem;
+}
 .docs-content h1,
 .docs-content h2,
 .docs-content h3,
@@ -160,13 +175,7 @@
 .docs-nav-clear {
   display: none;
 }
-.show-xs {
-  display: none !important;
-}
 @media screen and (max-width: 480px) {
-  .show-xs {
-    display: block !important;
-  }
   .grid-hero h2 {
     font-size: 1.8rem;
   }