On Sun, Sep 04, 2016 at 08:31:33AM -0400, Aaron Schrab wrote:
> On my browser this is leaving a large blank area to the left of the TOC.
> The narrowness of the space allocated for the TOC leaves a lot of items
> being wrapped. Also, since that space to the left isn't considered to
> be part of the TOC using my scroll wheel in there causes the main body
> to scroll, when visually I'd expect it to scroll the TOC.
Those are valid points, thank you.
The TOC now tries to make more use of the left area. That also fixes
the scrolling issue, although the result isn't perfectly centred now.
diff -r 7a53de8c9251 doc/mutt.css
--- a/doc/mutt.css Fri Sep 02 19:33:35 2016 -0700
+++ b/doc/mutt.css Sun Sep 04 21:01:32 2016 +0300
@@ -1,4 +1,55 @@
-body { margin-left:2%; margin-right:2%; font-family:serif; }
+@media (min-width: 781px) {
+ body {
+ width: 780px;
+ margin: 0 auto;
+ }
+}
+
+@media (min-width: 1200px) {
+ body {
+ width: 100%;
+ margin: 0;
+ }
+
+ .book {
+ margin-left: 30%;
+ padding-left: 2em;
+ max-width: 780px;
+ }
+
+ .book > .toc {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 30%;
+
+ overflow: scroll;
+ height: 100%;
+
+ padding: 0 0.5em 0;
+ }
+
+ .book > .toc > .toc {
+ margin: 0;
+ padding: 0 1em;
+ position: absolute;
+ max-width: 30em;
+ right: 0;
+ }
+
+ .book > .toc > .toc::before {
+ content: "Table of Contents";
+ display: block;
+ font-size: large;
+ font-weight: bold;
+ margin: 1.5em 0;
+ }
+
+ .book > .toc > p {
+ display: none;
+ }
+}
+body { font-family:serif; }
.toc, .list-of-tables, .list-of-examples { font-family:sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family:sans-serif; }
p { text-align:justify; }
diff -r 7a53de8c9251 doc/mutt.xsl
--- a/doc/mutt.xsl Fri Sep 02 19:33:35 2016 -0700
+++ b/doc/mutt.xsl Sun Sep 04 21:01:32 2016 +0300
@@ -7,7 +7,9 @@
<xsl:template name="user.head.content">
<xsl:element name="style">
<xsl:attribute name="type">text/css</xsl:attribute>
- &css;
+ <xsl:text disable-output-escaping="yes">
+ &css;
+ </xsl:text>
</xsl:element>
</xsl:template>
<xsl:param name="admon.style"/>
