MLS-navbar-left.css

/*
 * CSS for left navigation bar.
 * Developed from LaTeXML-navbar-left.css as starting point.
 */

body {
  margin: 0px;
  background: #F6F6F6;
}

nav > div.ltx_TOC {
  margin-left: 1em;
}

.ltx_page_navbar {
  display: block!important;
  position: fixed;
  z-index: 2;
  top: 0px;
  margin: 0px;
  padding: 0px;
  font: 90% sans-serif;
  color: black;
  border-style: solid;
  border-color: #707A85; /* "Bouncing ball trace gray" */
  border-width: 0px;
  border-right-width: 8px;
  background: #F6F6F6;
  height: 100%; /* Provide fixed height for .ltx_TOC to refer to. */
}

.ltx_page_navbar:before {
  position: fixed;
  z-index: 4;
  left: 2px;
  top: 0px;
  margin: 0px;
  padding: 0px;
  font: 16px sans-serif;
  color: #DE1D31; /* "Bouncing ball red" */
  height: 30px;
  width: 16px;
  background: #F6F6F6;
  content: "☰"; /* Chinese character that looks like hamburger. */
}

.ltx_page_navbar a[rel=start] {
  display: none; /* Hiding the sidebar title, as it is too long to look good, and seem to lack structure for adequate layout. */
  margin: 1em;
  font-weight: bold;
}

.ltx_TOC {
  padding-right: 1em;
  overflow-y: auto;
}

.ltx_TOC > ul.ltx_toclist {
  padding: 0em;
}

.ltx_toclist ul {
  padding-left: 1em; /* Indentation of each table of contents level below the top. */
}

/* How to deal with the long section titles in the table of contents (overriding styling from LaTeXML.css).
 * The right boundary for these titles is the .ltx_page_navbar padding-right.
 */
.ltx_page_navbar li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ltx_ref_title .ltx_tag_ref {
  font-size: 75%; /* Compress navbar even more by shrinking the numbering. */
}

.ltx_page_main {
  position: absolute;
  z-index: 1;
  margin-top: 0px;
  margin-bottom: 0px;
  border-width: 0px;
  max-width: 80em;
  padding: 0px;
}

.ltx_page_header {
  position: fixed;
  z-index: 3;
  top: 0px;
  height: 3em;
  padding: 0.5em 1em;
  background: #F6F6F6; /* Same as body. */
  color: black; /* Same as side bar. */
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ltx_page_content {
  padding: 1em;
  margin-top: 3em; /* Header height plus padding below, minus a little bit. */
  background: white;
}

.ltx_page_footer {
  padding: 1em;
  background: white;
}

/* Layout for wide screens, with navbar always expanded.
 * The threshold for being considered wide is set so that it should be possible to get a collapsable
 * navbar at the same time as extending .ltx_page_main to its max-width (currently 80em).
 * This max-width is added to the .ltx_page_main margin-left in the collapsable layout, currently
 * resulting in 1306px if 1em is converted to 16px:
 *   80em * 16px/em + 2px + 16px + 8px = 1306px
 * Add 4px of slack, and the threshold becomes 1310.
 */
@media screen and (min-width: 1310px) {
  .ltx_page_main {
    margin-left: 350px;
  }
  .ltx_page_navbar {
    left: 0px;
    width: calc(350px - 8px); /* Width of .ltx_page_main, minus .ltx_page_navbar border-right-width. */
  }
  .ltx_TOC {
    height: 100%;
  }
  .ltx_page_header {
    width: calc(100% - 350px - 2em); /* Subtract 2em for the total horizontal padding on this element. */
  }
  .ltx_page_navbar:before {
    display: none;
  }
}

/* Layout for smaller screens or other media where navbar is only expanded when hovered.
 */
@media screen and (max-width: 1310px) {
  .ltx_page_main {
    /* Leave just enough space to fit the hamburger plus the right border of the .ltx_page_navbar.
     * Don't define this in em units, since the em is not the same below in .ltx_page_navbar.
     */
    margin-left: calc(2px + 16px + 8px); /* left + width + border */
  }
  .ltx_page_navbar {
    width: 500px;
    left: calc(26px - (500px + 8px)); /* Position right extent where .lts_page_main starts, taking .ltx_page_navbar border-right-width into account. */
    transition: 0.3s;
  }
  .ltx_TOC {
    margin-top: 20px; /* Reserve space for hamburger. */
    height: calc(100% - 20px);
  }
  .ltx_page_header {
    width: calc(100% - 26px - 2em); /* Subtract 2em for the total horizontal padding on this element. */
  }
  .ltx_page_navbar:hover {
    left: 0px;
  }
  .ltx_page_navbar:before {
    display: block;
  }
}