CSS improvements.

web/show.css

@@ -3,18 +3,6 @@ styleguide {
     font-family: Helvetica, Arial, Geneva, sans-serif;
 }
 
-styleguide chapter p,
-styleguide chapter h1, styleguide chapter h2, styleguide chapter h3, styleguide chapter h4,
-styleguide chapter ol, styleguide chapter ul,
-styleguide chapter {
-    margin-left: 0.7em;
-}
-
-styleguide chapter {
-    padding: 0px;
-    margin: 0px;
-}
-
 /* the following rules are copied from standard html rules */
 
 styleguide p {
@@ -94,21 +82,19 @@ styleguide div.table-cell, styleguide div[class*="cell"] {
 }
 
 
-/* categories */
 
-styleguide category, styleguide subcategory {
-    /*margin-top:1em;*/
-    /*margin-bottom:1em;*/
+styleguide chapter,
+styleguide category,
+styleguide subcategory {
     margin-left:1em;
     display: block;
+    transition-property: all;
+    transition-duration: .3s;
+    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+    overflow-y: hidden;
+    max-height: 10000px;
 }
 
-/*
-styleguide p {
-    margin-top:1em;
-}
-*/
-
 styleguide b {
   font-weight: bold;
 }
@@ -123,19 +109,12 @@ styleguide u {
 
 styleguide name {
     display: inline-block;
-    /*margin-bottom:0.5em;*/
     font-size: 1.5em;
     font-weight: bold;
 }
 styleguide description {
-    /*margin-left:1em;*/
     display: block;
 }
-/*
-styleguide description p {
-  margin-top: 0;
-}
-*/
 
 styleguide overall-impression:before {
   content: "Overall Impression: ";
@@ -320,33 +299,22 @@ styleguide nav {
     background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 320 512%27%3E%3Cpath fill=%27%23003f57%27 d=%27M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z%27/%3E%3C/svg%3E");
 }
 
-styleguide *.closed > nav, styleguide *[class*="closed"] > nav {
-    -webkit-transform: rotate(-90deg);
-    transform: rotate(-90deg);
-}
-
-
 styleguide *.open > nav, styleguide *[class*="open"] > nav {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
 }
 
-/*
-styleguide chapter.closed,
-styleguide category.closed,
-styleguide subcategory.closed {
-    overflow: hidden;
+styleguide *.closed > nav, styleguide *[class*="closed"] > nav {
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
 }
-*/
 
-styleguide *.closed div.table, styleguide *[class*="closed"] div[class*="table"],
-styleguide *.closed *, styleguide *[class*="closed"] * {
-    display:none;
+styleguide *.closed * > nav, styleguide *[class*="closed"] * > nav {
+    display: none;
 }
-styleguide *.closed nav, styleguide *[class*="closed"] nav,
-styleguide *.closed h2, styleguide *[class*="closed"] h2,
-styleguide *.closed name, styleguide *[class*="closed"] name {
-    display:block;
+
+styleguide *.closed, styleguide *[class*="closed"] {
+    max-height: 1.8em;
 }
 
 styleguide category > *:nth-child(3),