IMPORTANT: Increase control font sizes #271

docs/components.html

@@ -2383,7 +2383,7 @@ <h3 class="s-title"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toa
             <div class="column col-9 col-sm-12">
               <div class="toast">
                 <button class="btn btn-clear float-right"></button>
-                <h5>Toast Title</h5>
+                <h6>Toast Title</h6>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               </div>
             </div>

docs/css/docs.css

@@ -27,6 +27,7 @@
 }
 
 .s-sidebar .accordion {
+  font-size: .7rem;
   margin-bottom: .75rem;
 }
 
@@ -47,7 +48,7 @@
 
 .s-sidebar .accordion .menu .menu-item > a {
   background: transparent;
-  color: #727e96;
+  color: #667189;
   display: inline-block;
 }
 
@@ -140,7 +141,7 @@
 .s-content .docs-ad::before {
   color: #acb3c2;
   content: "AD";
-  font-size: .6rem;
+  font-size: .7rem;
   position: absolute;
   right: .4rem;
   top: .1rem;
@@ -186,7 +187,7 @@
 }
 
 .s-content .docs-color .color-subtitle {
-  font-size: .6rem;
+  font-size: .7rem;
   opacity: .75;
 }
 
@@ -313,7 +314,7 @@
 }
 
 .s-footer a {
-  color: #727e96;
+  color: #667189;
 }
 
 .btn .feather {
@@ -365,7 +366,7 @@
 }
 
 .section-footer a {
-  color: #727e96;
+  color: #667189;
 }
 
 .grid-hero {
@@ -414,7 +415,7 @@
 .s-navbar {
   height: 3.5rem;
   left: 0;
-  padding: .75rem 1.5rem;
+  padding: .85rem 1.5rem;
   position: fixed;
   text-align: center;
   z-index: 400;
@@ -428,7 +429,7 @@
 .s-navbar .float-btn {
   position: fixed;
   right: 4rem;
-  top: 1.5rem;
+  top: 1.4rem;
 }
 
 @media (max-width: 880px) {
@@ -475,7 +476,7 @@
     display: block;
     left: 2.6rem;
     position: fixed;
-    top: .95rem;
+    top: .85rem;
   }
   .s-navbar .menu-btn .btn {
     font-size: 1rem;
@@ -492,7 +493,7 @@
   }
   .s-navbar .float-btn {
     right: 2.9rem;
-    top: .95rem;
+    top: .85rem;
   }
   .docs-nav-clear {
     background: rgba(0, 0, 0, .15);
@@ -512,7 +513,7 @@
   }
   .s-content .s-title,
   .s-content .s-subtitle {
-    padding-top: 5rem;
+    padding-top: 4rem;
     position: static;
   }
   .s-content .s-title::before,

docs/dist/spectre-exp.css

@@ -15,7 +15,7 @@
   display: flex;
   display: -ms-flexbox;
   -ms-flex-align: center;
-  font-size: .8rem;
+  font-size: .9rem;
   padding: .4rem;
 }
 
@@ -41,11 +41,11 @@
   background: #f8f9fa;
   border-bottom: .05rem solid #e7e9ed;
   color: #acb3c2;
-  font-size: .6rem;
+  font-size: .7rem;
 }
 
 .calendar .calendar-body {
-  color: #727e96;
+  color: #667189;
 }
 
 .calendar .calendar-date {
@@ -60,7 +60,7 @@
   background: transparent;
   border: .05rem solid transparent;
   border-radius: 50%;
-  color: #727e96;
+  color: #667189;
   cursor: pointer;
   height: 1.4rem;
   line-height: 1rem;
@@ -199,7 +199,7 @@
   border-radius: .1rem;
   color: #5755d9;
   display: block;
-  font-size: .6rem;
+  font-size: .7rem;
   margin: .1rem auto;
   overflow: hidden;
   padding: 3px 4px;
@@ -949,7 +949,7 @@
 
 .timeline .timeline-item .timeline-icon.icon-lg {
   background: #5755d9;
-  font-size: .8rem;
+  font-size: .9rem;
   line-height: 1rem;
 }
 

docs/dist/spectre-icons.css

@@ -36,7 +36,7 @@
 .btn .icon,
 .toast .icon,
 .menu .icon {
-  vertical-align: -10%;
+  vertical-align: -15%;
 }
 
 .icon-arrow-down::before,