Issue 326 documentation

docs/doc_chapters.css

@@ -10,9 +10,12 @@ body.simple{
 
 .tei_front{
     flex: 0 1 30vw;
-
     font-size:0.95em;
-
+    @media only screen and (max-width: 768px) {
+        order: 3;
+        width: 100%;
+        flex: auto;
+    }
 }
 
 .tei_front > div {
@@ -22,22 +25,41 @@ body.simple{
     overflow-y:auto;
     margin:0 2rem;
     padding-right:1rem;
+    @media only screen and (max-width: 768px) {
+        height: auto;
+        margin: 0;
+        padding-right: 0;
+        position: static;
+    }
 }
 
 
 
 div.tei_body{
     max-width:45vw;
     margin:0 2rem;
+    @media only screen and (max-width: 768px) {
+        max-width: 96vw;
+        width: 96vw;
+        margin: 0;
+        order: 1;
+    }
+}
+div.notes{
+    order: 2;
 }
 
 div.tei_front > div > ul.toc{
         padding-left:0;
 }
 
 div.tei_body[data-section='schemaSpec']{
-
     max-width:60vw;
+    @media only screen and (max-width: 768px) {
+        max-width: 96vw;
+        width: 96vw;
+        margin: 0;
+    }
 }
 
 div[data-section] > h1 + ul {
@@ -83,7 +105,17 @@ h3{
     margin-left:0;
 }
 
-
+/* Fix width of examples for small-format devices. */
+@media only screen and (max-width: 768px) {
+    pre, div.pre, div.pre_eg, pre.eg, div.eg {
+        max-width: 85vw;
+    }
+    td{
+        pre, div.pre, div.pre_eg, pre.eg, div.eg {
+            max-width: 55vw
+        }
+    }
+}
 
 
 div.notes,

docs/documentation.css

@@ -137,7 +137,6 @@ table.attList{
 }
 td.odd_label{
     vertical-align: top;
-    width: 15em;
     font-weight: bold;
 }
 td.odd_value{
@@ -149,7 +148,6 @@ table.attDef{
     width: 100%;
 }
 table.attDef td.odd_label{
-    min-width: 10%;
     vertical-align: top;
     font-weight: normal;
 }
@@ -192,6 +190,49 @@ td p{
     margin-bottom: 2pt;
 }
 
+
+/* Messing with tables because they're too squashed. */
+td.odd_value{
+    width: 100%;
+}
+
+table.attList{
+    width: 100%;
+}
+
+ul.attList, ul.attList ul{
+    padding-left: 1em;
+
+}
+
+table.attList>tbody>tr, table.attDef>tbody>tr{
+    display: list;
+    list-style-type: none;
+    padding-left: 0;
+    ul, ol{
+        padding-left: 0.25em;
+    }
+    >td{
+        display: list-item;
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        border: none;
+        div.pre, pre{
+            max-width: 90%;
+        }
+    }
+    table.attDef td+td{
+        margin-left: 0.5em;
+    }
+}
+
+table.wovenodd div.pre, table.wovenodd pre{
+    max-width: 90%;
+}
+
+
+
 div.cdata{
     white-space: pre;
     clear: both;
@@ -352,11 +393,15 @@ span.moduleSpecHead{
     font-style: italic;
 }
 ul.specList{
-    position: relative;
-    left: -2em;
+    margin-left: -2em;
     padding: 0.5em;
     background-color: #e0e0e0;
     width: calc(100% + 2em);
+    @media only screen and (max-width: 768px) {
+        margin-left: 0;
+        margin-right: 0.25em;
+        width: auto;
+    }
 }
 ul.specList li{
     list-style: none;
@@ -475,7 +520,7 @@ span.specChildModule{
 div.specChild{
     margin-bottom: 4pt;
     margin-left: 25px;
-    text-indent: -30px;
+    text-indent: -20px;
 }
 span.emptySlash::after{
     content: "/";
@@ -688,6 +733,9 @@ h2{
     background-color: white;
     padding: 0.5em;
     border: solid 1pt gray;
+    @media only screen and (max-width: 768px) {
+        margin-left: 0;
+    }
 }
 
 h3{
@@ -699,6 +747,13 @@ h3{
     background-color: white;
     padding: 0.25em;
     border: solid 1pt gray;
+    @media only screen and (max-width: 768px) {
+        margin-left: 0;
+    }
+}
+
+.teidiv2 h3{
+    font-size: 1em;
 }
 
 h1.maintitle{
@@ -856,6 +911,7 @@ div.eg{
     white-space: pre;
     background-color: silver;
     max-width: 35em;
+    text-wrap: wrap;
 }
 
 div.pre{
@@ -878,6 +934,9 @@ div.egXML_invalid{
 /* table of contents */
 ul.toc{
     list-style: none;
+    @media only screen and (max-width: 768px) {
+        padding-left: 1em;
+    }
 }
 li.toc{
     list-style: none;
@@ -1133,6 +1192,9 @@ tr.label td{
 
 span.label{
     font-weight: bold;
+    @media only screen and (max-width: 768px) {
+        font-size: 0.8rem;
+    }
 }
 
 h5{
@@ -1606,18 +1668,30 @@ table.border{
     color: orange;
 }
 
-/* Updates 2022 to make our documentation more readable. */
+/* Updates 2022-2024 to make our documentation more readable. */
 body{
     font-family: georgia, sans-serif;
 }
 
+div.tei_front{
+    padding: 0.25rem 1rem;
+}
+
 div.tei_body{
-    border-right: solid 1pt black;
-    border-left: solid 1pt black;
+    border: solid 1pt black;
     padding: 1em;
     background-color: #f9f9f9;
 }
 
+div.tei_back{
+    @media only screen and (max-width: 768px) {
+        max-width: 92vw;
+        padding: 0.2em 1vw;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
 div.tei_body>nav{
     max-width: 43vw;
 }
@@ -1628,6 +1702,37 @@ a:link, a:visited, a.anchorlink{
 
 table{
     border-collapse: collapse;
-    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
     margin-top: 0.25em;
-}
+}
+
+li.item div.table{
+    @media only screen and (max-width: 768px) {
+        tr{
+            display: list;
+            border-bottom: solid 1pt gray;
+            td{
+                display: list-item;
+                list-style-type: none;
+            }
+        }
+    }
+}
+
+/* section[id] div.table table>tbody>tr{
+    @media only screen and (max-width: 768px) {
+        display: list;
+        list-style-type: none;
+        border-style: solid;
+        border-color: gray;
+        border-width: 1pt 0;
+        td:first-child{
+            padding-top: 0.25em;
+            margin-top: 0.25em;
+            font-weight: bold;
+            text-decoration: underline;
+        }
+        td{
+            display: list-item;
+        }
+    }
+} */