Fixes

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

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,
-                color $transition;
+    transition:
+      background-color $transition,
+      border-color $transition,
+      color $transition,
+      box-shadow $transition;
   }
 
   &:hover {