From c4514483da1ab4f49148f9c4fe4ff5b559323217 Mon Sep 17 00:00:00 2001
From: David Robillard <d@drobilla.net>
Date: Fri, 20 Mar 2020 23:26:56 +0100
Subject: Update documentation style

---
 doc/style.css | 644 ++++++++++++++++++++++++++++++----------------------------
 1 file changed, 336 insertions(+), 308 deletions(-)

(limited to 'doc/style.css')

diff --git a/doc/style.css b/doc/style.css
index 5a34855..cf32b28 100644
--- a/doc/style.css
+++ b/doc/style.css
@@ -1,99 +1,214 @@
 @import "./pygments.css";
 
-/* Specgen style */
+/* Generic page style */
+
+body {
+  background: #FFF;
+  color: #222;
+  font-family: "DejaVu Sans", "SF Pro Text", Verdana, sans-serif;
+  font-style: normal;
+  line-height: 1.6em;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 60em;
+  padding: 1em;
+}
 
-a:link, a:visited {
+h1 {
+  font-family: "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
+  font-size: 2.38em;
+  font-weight: 600;
+  line-height: 1.41em;
+  margin: 0 0 0.25em 0;
+}
+
+h2 {
+  font-family: "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
+  font-size: 1.68em;
+  font-weight: 600;
+  line-height: 1.3em;
+  margin: 1.25em 0 0.5em 0;
+}
+
+h3 {
+  font-family: "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
+  font-size: 1.41em;
+  font-weight: 600;
+  line-height: 1.19em;
+  margin: 1.25em 0 0.5em 0;
+}
+
+h4 {
+  font-family: "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
+  font-size: 1.19em;
+  font-weight: 600;
+  line-height: 1.09em;
+  margin: 1.25em 0 0.5em 0;
+}
+
+h5, h6 {
+  font-family: "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
+  font-size: 1em;
+  font-weight: 600;
+  line-height: 1em;
+  margin: 1.25em 0 0.5em 0;
+}
+
+a {
+  color: #546E00;
   text-decoration: none;
 }
+
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+  color: #222;
+}
+
 a:link {
   color: #546E00;
+  text-decoration: none;
 }
+
 a:visited {
-  color: #354500;
+  color: #546E00;
 }
+
 a:hover {
   text-decoration: underline;
 }
+
+h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link {
+  color: #222;
+}
+
+h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
+  color: #222;
+}
+
 img {
   border: 0;
 }
-h1, h2, h3, h4, h5, h6 {
-  line-height: 1.0125em;
-  font-family: "DejaVu Sans",Helvetica,Arial,sans-serif;
-  margin-top: 1em;
-  margin-bottom: 0.5em;
+
+p {
+  margin: 0.5em 0 0.5em 0;
 }
-h1 {
-  font-size: 300%;
-  font-weight: 400;
+
+blockquote {
+  border-left: 1px solid #CCC;
+  margin-left: 1em;
+  padding-left: 1em;
 }
-h1 a, h1 a:link, h1 a:visited ,
-h2 a, h2 a:link, h2 a:visited ,
-h3 a, h3 a:link, h3 a:visited ,
-h4 a, h4 a:link, h4 a:visited ,
-h5 a, h5 a:link, h5 a:visited ,
-h6 a, h6 a:link, h6 a:visited {
+
+pre, code, kbd, samp {
   color: #444;
+  font-family: "DejaVu Sans Mono", "SF Mono", Consolas, monospace;
+  margin: 1em 0;
+  white-space: pre;
 }
-h2 {
-  font-size: 200%;
-  font-weight: 400;
+
+ul, ol {
+  margin: 0 0 0.5em 0;
+  padding-top: 0;
 }
-h3 {
-  font-size: 140%;
-  font-weight: 400;
+
+dt {
+  font-weight: 600;
+  margin: 0.75em 0 0.125em 0;
+}
+
+dt::after {
+  content: ": ";
+  margin-right: 0.5em;
 }
-h4, h4 a, h4 a:link, h4 a:visited {
-  color: black;
-  font-size: 110%;
-  font-weight: 500;
+
+hr {
+  background-color: #EEE;
+  border: 0;
+  color: gray;
+  height: 1px;
+  margin-bottom: 1.5ex;
+  margin-top: 1.5ex;
 }
-h5 {
-  font-size: 100%;
-  font-weight: 600;
+
+table {
+  border-collapse: collapse;
+  border-spacing: 1em 1em;
+  border-style: hidden;
+  border: 0;
+  margin: 0;
 }
-h6 {
-  font-size: 100%;
-  font-weight: 700;
+
+th {
+  border: 1px solid #EEE;
+  padding: 0.25em 0.5em;
+  text-align: left;
 }
-#titlebox, #metabox {
-  display: inline-block;
+
+table tbody tr th {
+  text-align: left;
+}
+
+td {
+  border: 1px solid #EEE;
+  padding: 0.25em 0.5em;
+  vertical-align: top;
+}
+
+caption {
+  caption-side: bottom;
+  font-size: small;
+  font-style: italic;
+  margin: 0.75em 0;
 }
-#titlebox{
+
+footer {
+  color: #444;
+  font-size: small;
+}
+
+/* Specgen style */
+
+#titlebox {
   display: inline-block;
   max-width: 60%;
   left: 0;
   top: 0;
 }
+
 #metabox {
-  float: right;
   display: inline-block;
   font-size: x-small;
-  margin: 0 0 0.25em 0;
+  font-family: "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
+  position: absolute;
   right: 0;
-  top: 0;
+  bottom: 0.25em;
   color: #666;
   font-style: italic;
-  padding: 0 1em;
 }
+
 #meta {
   border-style: hidden;
 }
+
 #meta tr, #meta th, #meta td {
   border: 0;
   font-weight: normal;
   padding: 0 0 0.125em 0;
   background-color: transparent;
 }
+
 #meta th {
+  padding-right: 0.5em;
   text-align: right;
 }
-#meta th:after {
+
+#meta th::after {
   content: ": ";
 }
+
 #subtitle {
   font-size: small;
 }
+
 #shortdesc {
   padding: 0;
   margin: 0 0 0.5em 0;
@@ -101,15 +216,18 @@ h6 {
   color: #666;
   display: inline-block;
 }
+
 #logo {
   height: 63px;
   margin-left: 1em;
   margin-top: 10px;
   width: 100px;
 }
+
 #titlesep {
-  color: #DDD;
+  color: #EEE;
 }
+
 #content-body {
   border-bottom: 0;
   display: block;
@@ -123,136 +241,100 @@ h6 {
   width: 93.900002%;
   z-index: 0;
 }
-#body-main {
-  font-size: 100%;
-  line-height: 1.4em;
-  margin-left: 19em;
-  padding: 0 .55em 40px 0;
-}
-#left-hand-navigation {
-  left: 1ex;
-  position: absolute;
-  top: 100px;
-  z-index: 1;
-}
+
 #menu {
   font-size: 75%;
   margin-bottom: 5px;
   padding: 0;
   width: 16em;
 }
+
 #menu ul {
   border: 0;
   list-style: none;
   margin: 0;
   padding: 0;
 }
+
+#menu a {
+  text-decoration: none;
+}
+
 #menu ul.level-one a {
-  background-color: #f5f5f5;
-  border: 1px solid #dadada;
-  color: #4b5a6a;
+  background-color: #F5F5F5;
+  border: 1px solid #DADADA;
+  color: #4B5A6A;
   display: block;
   margin: 0 0 4px 1.4em;
   padding: 2px 2px 2px 4px;
   text-transform: uppercase;
-  width: 13.4em!important;
-}
-#menu ul.level-one a.selected {
-  background-color: #FFF;
-  border-left: 3px solid #ffdb4c;
-  color: #000;
-}
-#menu ul.level-two li:first-child a {
-  border-top: 0;
+  width: 13.4em !important;
 }
+
 #menu ul.level-two a {
   background: none;
   background-color: transparent;
   border: 0;
-  border-top: 1px solid #ddd;
-  color: #3c4b7b;
+  border-top: 1px solid #DDD;
+  color: #3C4B7B;
   display: block;
   margin: 0 3em 0 1.5em;
-  padding: .1em;
+  padding: 0.1em;
   text-transform: none;
-  width: 11em!important;
+  width: 11em !important;
 }
+
+#menu ul.level-three a {
+  border: 0;
+  color: #5E72A5;
+  display: block;
+  font-size: 95%;
+  margin: 0 3em 0 1.8em;
+  padding: 0.1em 0.1em 0.1em 1em;
+  width: 10em !important;
+}
+
+#menu ul.level-one a:hover,
+#menu ul.level-two a:hover,
+#menu ul.level-three a:hover {
+  color: #000;
+  text-decoration: underline;
+}
+
+#menu ul.level-one a.selected {
+  background-color: #FFF;
+  border-left: 3px solid #FFDB4C;
+  color: #000;
+}
+
 #menu ul.level-two a:visited {
-  color: #4c3b5b;
+  color: #4C3B5B;
 }
+
+#menu ul.level-two li:first-child a {
+  border-top: 0;
+}
+
 #menu ul.level-one ul.level-two a.selected {
   background-color: #FFF;
   border-left: 0;
   color: #000;
   font-weight: 700;
 }
+
 #menu li ul {
   margin-bottom: 7px;
 }
-#menu a {
-  text-decoration: none;
-}
-#menu ul.level-three a {
-  border: 0;
-  color: #5e72a5;
-  display: block;
-  font-size: 95%;
-  margin: 0 3em 0 1.8em;
-  padding: .1em .1em .1em 1em;
-  width: 10em!important;
-}
+
 #menu ul.level-three li.selected a.selected {
   color: #000;
   font-weight: 400;
 }
+
 #menu ul.level-three {
   margin-top: 5px;
 }
-#left-hand-navigation h4 {
-  color: #4c5b6b;
-  font-size: 77%;
-  margin: .2em 0 .3em;
-  padding: .4em 0 0 1.5em;
-}
-#left-hand-navigation h4 a {
-  color: #4c5b6b;
-  font-weight: 700;
-  text-decoration: none;
-}
-#body-main ul, #body-main li {
-  margin-left: 1em;
-  padding-left: 0;
-}
-#utility-menu {
-  font-size: 88%;
-  height: 85px;
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  right: 4%;
-  top: 0;
-  width: 400px;
-  z-index: 1;
-}
-#utility-menu a {
-  color: #436a85;
-  padding: 0 .5em;
-  text-decoration: none;
-}
-#utility-menu a:hover {
-  text-decoration: underline;
-}
-#utility-menu #screen-switcher {
-  bottom: 0;
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  right: 0;
-}
-#screen-switcher dl {
-  margin: 0;
-  padding: 0;
-}
+
 #searchbox {
   font-weight: 700;
   position: absolute;
@@ -263,92 +345,83 @@ h6 {
   white-space: nowrap;
   width: 28.1em;
 }
+
 #search {
-  color: #a38e60;
+  color: #A38E60;
   padding: 5px 5px 0 0;
 }
+
 #search .input-text {
   background-color: #FFF;
-  border: 1px solid #c4cccc;
+  border: 1px solid #C4CCCC;
   font-size: 116%;
   font-weight: 400;
   margin-top: 3px;
   vertical-align: top;
   width: 11em;
 }
+
 #search .input-button {
-  background-color: #f8f7f7;
-  border-bottom: 1px solid #6f7777;
-  border-left: 1px solid #c4cccc;
-  border-right: 1px solid #6f7777;
-  border-top: 1px solid #c4cccc;
+  background-color: #F8F7F7;
+  border-bottom: 1px solid #6F7777;
+  border-left: 1px solid #C4CCCC;
+  border-right: 1px solid #6F7777;
+  border-top: 1px solid #C4CCCC;
   color: #234;
   font-weight: 700;
-  margin: 3px .4em 0;
-  padding: 0 .2em;
+  margin: 3px 0.4em 0;
+  padding: 0 0.2em;
   vertical-align: text-top;
 }
+
 input.formbutton {
-  background-color: #f8f7f7;
-  border-bottom: 1px solid #6f7777;
-  border-left: 1px solid #c4cccc;
-  border-right: 1px solid #6f7777;
-  border-top: 1px solid #c4cccc;
+  background-color: #F8F7F7;
+  border-bottom: 1px solid #6F7777;
+  border-left: 1px solid #C4CCCC;
+  border-right: 1px solid #6F7777;
+  border-top: 1px solid #C4CCCC;
   color: #234;
   font-weight: 700;
   vertical-align: text-top;
 }
+
 .formtextinput {
   background-color: #FFF;
-  border: 1px solid #c4cccc;
+  border: 1px solid #C4CCCC;
   font-size: 116%;
   font-weight: 400;
   vertical-align: top;
 }
+
 #content table {
   clear: right;
 }
-#body-main h1.pageheading {
-  margin: 40px 0 10px;
-}
+
 .content-section {
   margin-top: 15px;
 }
+
 .content-section h1 {
   margin: 0 0 10px;
 }
+
 .content-section p {
   margin: 0 0 5px;
   padding-left: 12px;
 }
+
 .content-section .pubdate {
   color: #696969;
   margin: 0 0 8px;
   padding: 0 0 0 12px;
 }
+
 blockquote {
-  border-left: 1px solid #ccc;
+  border-left: 1px solid #CCC;
   margin-left: 1em;
   padding-left: 1em;
 }
-#utility-menu dl {
-  font-size: 80%;
-  font-weight: 700;
-  text-align: right;
-}
-#utility-menu dd {
-  display: inline;
-  font-weight: 400;
-  padding: 0 0 0 8px;
-}
-#utility-menu dd a {
-  color: #888;
-  margin: 0;
-  padding: 0;
-}
-#utility-menu dt {
-  margin: 0;
-}
+
 #footer {
   bottom: 0;
   clear: both;
@@ -367,41 +440,12 @@ blockquote {
   text-decoration: none;
   top: 2.9em;
 }
-#body-main .success p {
-  margin: 4px 8px;
-}
-body {
-  background: #FFF;
-  color: #222;
-  font-style: normal;
-  line-height: 1.6em;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 1em;
-  max-width: 60em;
-  font-family: "DejaVu Serif",Palatino,serif;
-  text-rendering: optimizeLegibility;
-}
-:link {
-  background: transparent;
-  color: #00C;
-}
-:visited {
-  background: transparent;
-  color: #609;
-}
-.sec {
-  margin: 0.5em 0 0.5em 0;
-  padding: 1ex 0 0.5ex 0;
-}
-ul, ol {
-  margin-top: 0;
-  padding-top: 0;
-  margin: 0 0 0.5ex 0;
-}
+
 #topbar {
   line-height: 1em;
+  border-bottom: 1px solid #EEE;
 }
+
 @media print {
   #topbar {
     color: #000;
@@ -410,19 +454,20 @@ ul, ol {
     max-width: 60em;
     position: relative;
   }
+
   #contentsbox {
     display: none;
   }
-  #topbar a, #topbar a:visited {
-    color: #000
-  }
-  #title a, #title a:visited {
+
+  #topbar a, #title a, #topbar a:visited, #title a:visited {
     color: #000;
   }
+
   #contents {
     display: none;
   }
 }
+
 @media screen {
   #topbar {
     margin: 0.25em auto 0.25em auto;
@@ -430,33 +475,27 @@ ul, ol {
     max-width: 60em;
     position: relative;
   }
+
   #contentsbox {
     color: #546E00;
     font-size: small;
-    font-family: "DejaVu Sans",Helvetica,Arial,sans-serif;
-    margin: 0.5em 0 0.5em 0;
+    margin: 0 0 1.5em 0;
   }
+
   #contents {
     display: inline;
     padding: 0;
   }
+
   #contents li {
     display: inline;
     list-style-type: none;
     margin-left: 0;
     margin-right: 0.5em;
-    padding: 0.25ex;
+    padding: 0.25ex 0.25ex 0.25ex 0;
   }
-  hr.contentssep {
-    line-height: 0.5;
-    margin: 0 0 1em 0;
-    padding: 0;
-  }
-}
-#title {
-  margin-top: 0;
-  margin-bottom: 0.25em;
 }
+
 #content {
   clear: both;
   padding: 0;
@@ -464,9 +503,12 @@ ul, ol {
   margin-left: auto;
   margin-right: auto;
 }
+
 .section {
-  padding: 0;
+  clear: right;
+  padding: 0 0 1.5em 0;
 }
+
 .category {
   font-size: small;
   color: #AAA;
@@ -476,200 +518,186 @@ ul, ol {
   margin: 0;
   padding-right: 0.25em;
 }
+
 .label {
   font-style: italic;
   margin-top: 0.25em;
   color: #666;
 }
+
 table.index {
-  border-collapse: initial;
-  border-radius: 6px;
-  border-spacing: 0;
   border: 0;
-  font-family: "DejaVu Sans",Helvetica,Arial,sans-serif;
-  font-size: small;
   line-height: 1.5em;
-  width: 100%;
-}
-table thead th {
-  border: 0;
-  border-bottom: 1px solid #DDD;
-}
-table thead tr:first-child th {
-  border: 0;
-}
-table td {
-  border: 0;
-}
-table td:first-child {
-  border: 0;
-}
-.index td {
-  vertical-align: top;
+  margin-top: 2em;
 }
+
 .index ul {
   padding-left: 1.25em;
   margin-left: 0;
   list-style-type: circle;
 }
-.index ul li
-{
+
+.index ul li {
   padding-left: 0;
   color: #888;
 }
+
 .prop {
   margin: 0;
   padding: 0;
 }
+
 .description {
   margin-top: 0;
   margin-bottom: 0.75em;
 }
+
 .blankdesc, .blankdef {
-  margin: 0;
-  padding: 0;
   border-spacing: 0;
+  margin: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
+
 .blankdesc tbody tr td, .blankdef {
-  border: 0!important;
+  border: 0 !important;
 }
+
 .blankdesc td {
   padding-right: 0.5em;
 }
+
 .blankdesc tbody tr td:first-child {
   border-left: 1px solid #BBB;
   text-align: right;
 }
+
 .terminfo, .restriction {
-  border-collapse: initial;
+  border-collapse: collapse;
   border-spacing: 0;
   font-size: small;
   color: #666;
   border-radius: 0;
   border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 6px;
 }
+
+
 table.terminfo {
   border-top: 0;
-  margin: 0;
-  margin-left: 1.5em;
-  margin-bottom: 1.5em;
-  padding: 0;
+  border-collapse: collapse;
+  margin: -1px 0 2em 2em;
+  padding: 0.25em 0 0.25em 0;
   float: right;
   border-bottom: 1px solid #EEE;
+  border-left: 1px solid #EEE;
+  border-bottom-left-radius: 6px;
   max-width: 50%;
+  line-height: 1.4em;
+  min-width: 25%;
 }
-table.terminfo tbody tr:last-child td:first-child,
-table.terminfo tbody tr:last-child th:first-child {
-  border-bottom-left-radius: 6px;
-  border-left: 1px solid #BBB;
+
+table.terminfo td {
+  padding: 0 0.5em;
 }
+
 .restriction {
   border-style: hidden;
-}
-.terminfo th {
-  text-align: right;
-  padding-right: 0;
-  font-size: 100%;
-}
-.restriction {
   margin: 0 0 0.5ex 0;
   padding: 0;
   vertical-align: text-top;
 }
+
 .restriction td {
   vertical-align: text-top;
 }
+
 .terminfo th {
-  padding: 0.125em 0.25em 0.125em 0.5em;
-  border-left: 1px solid #EEE!important;
+  padding: 0 0.5em;
+  text-align: right;
   vertical-align: top;
 }
+
 .specterm {
   border: 0;
-  margin: 1em 0 3em 0;
-  padding: 0;
+  margin: 0;
+  padding: 1em 0;
   clear: both;
 }
-.specterm h4 {
-  margin-bottom: 0;
-  display: inline;
+
+.specterm h3 {
+  display: inline-block;
+  margin-bottom: 0.25em;
+  width: 80%;
+}
+
+.spectermtype {
+  color: #888;
+  display: inline-block;
+  font-size: small;
+  font-style: italic;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 0.25em 0 0;
+  text-align: right;
+  vertical-align: bottom;
+  width: 20%;
 }
+
 .spectermbody {
   border-top: 1px solid #EEE;
   padding: 0;
 }
+
+.spectermbody .description .comment > p:first-child {
+  color: #444;
+  font-style: italic;
+  margin-bottom: 0.75em;
+}
+
 dl {
   margin: 0;
   padding: 0;
 }
-dt {
-  margin-top: .5em;
-  font-family: "DejaVu Sans",Helvetica,Arial,sans-serif;
-}
+
 hr {
-  background-color: #DDD;
+  background-color: #EEE;
   border: 0;
   color: gray;
   height: 1px;
   margin-bottom: 1.5ex;
   margin-top: 1.5ex;
 }
+
 div.head {
   margin-bottom: 1em;
 }
+
 div.head h1 {
   clear: both;
   margin-top: 2em;
 }
+
 div.head table {
   margin-left: 2em;
   margin-top: 2em;
 }
-table {
-  border-collapse: initial;
-  border-spacing: 1.0em 0;
-  margin: 0;
-  border: 0;
-}
-th {
-  font-size: 115%;
-  font-weight: 500;
-  text-align: left;
-  padding-bottom: 0.5em;
-}
-
-p {
-  font-family: inherit;
-  margin-bottom: 1em;
-}
 
-pre {
-  margin: 1em 1em 1em 4em;
-  padding: 0;
-  color: #444;
-  font-family: fixed,monospace;
-}
-code {
-  color: #444;
-  font-family: fixed,monospace;
-}
-#menu li, #searchbox form, #iconbar li, #body-main .success p a {
+#menu li {
   display: inline;
 }
-#menu ul.level-one a:hover, #menu ul.level-two a:hover, #menu ul.level-three a:hover, #left-hand-navigation h4 a:hover {
-  color: #000;
-  text-decoration: underline;
-}
-h1, h2, h3, h4, h5, h6, th {
-  text-align: left;
-}
+
 .error {
-  color: #DC322F;
+  color: #990A1B;
 }
+
 .warning {
-  color: #B58900;
+  color: #7B6000;
 }
+
 .success {
-  color: #859900;
+  color: #546E00;
+}
+
+.highlight, .codehilite {
+  margin-left: 2em;
 }
-- 
cgit v1.2.1