nav#TOC max-width bug?

[notinaboat]

It looks like applying max-width: var(--main-width); to nav#TOC on line 881 might be an error.

It overwrites the calculated max-width from line 820.

With line 881, I have problems with the contents pane interfering with image placement in the main document. When I delete line 881 the problems go away.

https://github.com/jez/pandoc-markdown-css-theme/blob/4b925249f8ec0623f20f1aad7d1e22207b86d68b/docs/css/theme.css#L879-L885

https://github.com/jez/pandoc-markdown-css-theme/blob/4b925249f8ec0623f20f1aad7d1e22207b86d68b/docs/css/theme.css#L795-L823

[jez]

Thanks for the report. Can you provide an HTML file and screen shot so that I can reproduce? (I'm unlikely to make or accept changes to this until I can reproduce the bug.)

[notinaboat]

Hi @jez, I'm working on client-confidential documentation so I can't send files and screenshots and I won't have time in the next week to try to reproduce the problem with a dummy document.

What I can tell you is:

• I had a large (1500px wide x 2200 px high) diagram near the top of the page.
• I have a lot of entries in the TOC pane, some with long-ish names.
• The TOC pane was interfering with the large image and causing it to move down, leaving a huge white-space between the image and the text above it.
• I have modified the width variables like this:

    --main-width: 900px;
    --main-width-narrow: 745px;

... and I have tweaked places where you noted that the variables are not in scope like this:

diff --git a/docs/css/theme.css b/docs/css/theme.css
index 26b4858..d815d7e 100644
--- a/docs/css/theme.css
+++ b/docs/css/theme.css
@@ -222,7 +222,7 @@ label.sidenote-number {
 /* Unfortunately, variables aren't in scope here.
  * See calculations in Horizontal layouting.
  */
-@media screen and (max-width: calc(26px + 550px + 26px + 169px + 26px - 1px)) {
+@media screen and (max-width: calc(26px + 745px + 26px + 169px + 26px - 1px)) {
   .margin-toggle:checked + .sidenote,
   .margin-toggle:checked + .marginnote {
     margin-top: var(--side-note-line-height);
@@ -794,7 +794,7 @@ nav#TOC > input:checked + ul {
  * 52px = 2 * --line-height
  * 206px = side note min width
  */
-@media screen and (min-width: calc(745px + 2 * (52px + 206px + 52px) - 1px)) {
+@media screen and (min-width: calc(900px + 2 * (52px + 206px + 52px) - 1px)) {
   header {
     margin-bottom: var(--line-height);
   }
@@ -878,9 +878,8 @@ nav#TOC > input:checked + ul {
  * 52px = 2 * --line-height
  * 206px = side note min width
  */
-@media screen and (min-width: calc(745px + 2 * (52px + 206px + 52px))) {
+@media screen and (min-width: calc(900px + 2 * (52px + 206px + 52px))) {
   header,
-  nav#TOC,
   main,
   footer {
     max-width: var(--main-width);
@@ -935,7 +934,7 @@ nav#TOC > input:checked + ul {
  * 52px = 2 * --line-height
  * 206px = side note min width
  */
-@media screen and (min-width: calc(52px + 745px + 52px + 206px + 52px)) and (max-width: calc(745px + 2 * (52px + 206px + 52px) - 1px)) {
+@media screen and (min-width: calc(52px + 900px + 52px + 206px + 52px)) and (max-width: calc(900px + 2 * (52px + 206px + 52px) - 1px)) {
   header,
   nav#TOC,
   main,
@@ -998,7 +997,7 @@ nav#TOC > input:checked + ul {
  * 26px = --line-height
  * 169px = side note min width narrow
  */
-@media screen and (min-width: calc(26px + 550px + 26px + 169px + 26px)) and (max-width: calc(52px + 745px + 52px + 206px + 52px - 1px)) {
+@media screen and (min-width: calc(26px + 745px + 26px + 169px + 26px)) and (max-width: calc(52px + 900px + 52px + 206px + 52px - 1px)) {
   header,
   nav#TOC,
   main,
@@ -1044,7 +1043,7 @@ nav#TOC > input:checked + ul {
 /* Unfortunately, variables aren't in scope here.
  * See calculations above.
  */
-@media screen and (max-width: calc(26px + 550px + 26px + 169px + 26px - 1px)) {
+@media screen and (max-width: calc(26px + 745px + 26px + 169px + 26px - 1px)) {
   header,
   nav#TOC,
   main,