Reorganization of Sass files

docs/css/pico.docs.css

@@ -32,22 +32,8 @@
 }
 
 /**
- * Docs: Global layout
+ * Docs: Main (Grid)
  */
-section > hgroup {
-  margin-bottom: 3rem;
-}
-
-section > hgroup p {
-  color: var(--muted-text);
-  font-size: 1.125rem;
-}
-
-a[role=button] {
-  margin-right: 0.25rem;
-  margin-bottom: 1.5rem;
-}
-
 body > main {
   padding-top: 4.5rem;
 }
@@ -118,6 +104,9 @@ a[name]:not([href])::before {
   }
 }
 
+/**
+ * Docs: Aside
+ */
 main > aside nav {
   width: 100%;
   margin-bottom: 2rem;
@@ -147,6 +136,14 @@ main > aside li, main > aside summary {
   font-size: 16px;
 }
 
+main > aside li a {
+  padding: 0.375rem 0.5rem;
+}
+
+main > aside li a svg {
+  vertical-align: middle;
+}
+
 main > aside a:focus,
 main > aside a.secondary:focus {
   background-color: transparent;
@@ -173,6 +170,9 @@ main > aside details summary::after {
   line-height: 1;
 }
 
+/**
+ * Docs: Documentation
+ */
 #customization figure {
   display: grid;
   grid-template-columns: repeat(9, 1fr);
@@ -248,6 +248,29 @@ main > aside details summary::after {
   text-align: center;
 }
 
+/**
+ * Docs: Typography
+ */
+section > hgroup {
+  margin-bottom: 3rem;
+}
+
+section > hgroup p {
+  color: var(--muted-text);
+  font-size: 1.125rem;
+}
+
+a[role=button] {
+  margin-right: 0.25rem;
+  margin-bottom: 1.5rem;
+}
+
+[role=document] section > h1,
+[role=document] section > h2,
+[role=document] section > h3 {
+  line-height: 1;
+}
+
 /**
  * Docs: Code
  */
@@ -424,7 +447,6 @@ button.switcher {
   right: 0.5rem;
   bottom: 1rem;
   width: auto;
-  max-width: 3rem;
   margin-bottom: 0;
   padding: .75rem;
   border-radius: 2rem;
@@ -457,7 +479,7 @@ button.switcher i {
 
 button.switcher:hover, button.switcher:focus {
   max-width: 100%;
-  transition: max-width 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 button.switcher:hover::after {