Fixes

- Grid
- Transitions .switcher
- theme-switcher.js
- Hide examples

css/pico.css

@@ -318,26 +318,21 @@ section {
  * Minimal grid system with auto-layout columns
  */
 .grid {
+  grid-column-gap: 1rem;
+  grid-row-gap: 1rem;
+  display: grid;
+  grid-template-columns: 1fr;
   margin: 0;
 }
 
 @media (min-width: 992px) {
   .grid {
-    grid-column-gap: 1rem;
-    display: grid;
     grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
   }
 }
 
 .grid > * {
   min-width: 0;
-  margin-bottom: 1rem;
-}
-
-@media (min-width: 992px) {
-  .grid > * {
-    margin-bottom: 0;
-  }
 }
 
 /**

docs/css/pico.docs.css

@@ -507,7 +507,7 @@ button.switcher i {
 
 button.switcher:hover, button.switcher:focus {
   max-width: 100%;
-  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
 button.switcher:hover::after {

docs/index.html

@@ -25,7 +25,7 @@
         <li>Documentation</li>
       </ul>
       <ul>
-        <li><a href="#" class="secondary">Examples</a></li>
+        <!--<li><a href="https://picocss.com#examples" class="secondary">Examples</a></li>-->
         <li><a href="#docs" class="secondary">Docs</a></li>
         <li>
           <a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository">

docs/js/src/theme-switcher.js

@@ -66,7 +66,6 @@
 
     // Click Listener on Switcher
     var switchers = document.querySelectorAll(switcher.selector);
-    console.log(switchers);
     for (var i = 0; i < switchers.length; i++) {
       switchers[i].addEventListener('click', function(event) {
 

docs/scss/components/_theme-switcher.scss

@@ -39,8 +39,11 @@ button.switcher {
   &:hover,
   &:focus {
     max-width: 100%;
-    transition: background-color $transition,
+    transition:
-                color $transition;
+      background-color $transition,
+      border-color $transition,
+      color $transition,
+      box-shadow $transition;
   }
 
   &:hover {

scss/layout/_grid.scss

@@ -6,25 +6,20 @@
  */
 
   .grid {
+    grid-column-gap: $spacing-gutter;
+    grid-row-gap: $spacing-gutter;
+    display: grid;
+    grid-template-columns: 1fr;
     margin: 0;
 
     @if map-get($breakpoints, "lg") {
       @media (min-width: map-get($breakpoints, "lg")) {
-        grid-column-gap: $spacing-gutter;
-        display: grid;
         grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
       }
     }
 
     & > * {
       min-width: 0; // HACK for childs in overflow
-      margin-bottom: $spacing-gutter;
-
-      @if map-get($breakpoints, "md") {
-        @media (min-width: map-get($breakpoints, "lg")) {
-          margin-bottom: 0;
-        }
-      }
     }
   }
 }