Merge pull request #2861 from HansOlsson/HTMLStyling

Html styling

css/MLS-navbar-left.css

@@ -62,6 +62,38 @@ nav > div.ltx_TOC {
   display: none; /* Don't show link to previous chapter. */
 }
 
+.ltx_page_footer a[rel=bibliography] {
+  display: none; /* Don't show link to bibliography. */
+}
+
+.ltx_page_footer a[rel=index]:before {
+  display: inline-block;
+  content: "";
+  height: 1.5rem; /* Same as .ltx_page_header. */
+  width: 1.5rem;
+  padding: 0.5rem; /* Same as y-direction in .ltx_page_header. */
+  margin: 0px;
+  border-style: solid;
+  border-color: #707A85; /* "Bouncing ball trace gray" */
+  border-width: 0px;
+  border-left-width: 8px;
+  background-image: url("Magnifying_glass_icon.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 25px 25px;
+}
+
+.ltx_page_footer a[rel=index] {
+  position: fixed;
+  z-index: 4;
+  top: 0px;
+  right: 0px;
+}
+
+.ltx_page_footer a[rel=index] span {
+  display: none; /* Don't display the "Index" text; we have added a magnifying glass instead. */
+}
+
 .ltx_TOC {
   padding-right: 1em;
   overflow-y: auto;
@@ -107,16 +139,35 @@ nav > div.ltx_TOC {
   z-index: 3;
   top: 0px;
   height: 1.5rem;
-  padding: 0.5rem 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0rem;
+  /* Add right padding corresponding to part being covered by magnifying glass.
+   */
+  padding-right: calc(1.5rem + 2 * 0.5rem + 8px);
   background: #F6F6F6; /* Same as body. */
   color: black; /* Same as side bar. */
+  border-bottom-color: #DE1D31; /* "Bouncing ball red" */
+  border-bottom-width: 2px;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
+/* Make current jump target appear below the page header instead of behind it.
+ */
+:target:before {
+  visibility: hidden;
+  content: "X"; /* Hidden, but needs to be non-empty to work in Chrome. */
+  display: block;
+  position: relative;
+  top: calc(-(2.5rem + 2px)); /* Offset by total height of .ltx_page_header. */
+}
+
 .ltx_page_content {
-  padding: 1rem;
-  margin-top: 1.5rem; /* Header height plus padding below, minus a little bit. */
+  padding-top: 2rem;
+  padding-bottom: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
   background: white;
 }
 
@@ -145,7 +196,7 @@ nav > div.ltx_TOC {
     height: 100%;
   }
   .ltx_page_header {
-    width: calc(100% - 350px - 2em); /* Subtract 2em for the total horizontal padding on this element. */
+    width: calc(100% - 350px - (1.5rem + 2 * 0.5rem + 8px)); /* Subtract total horizontal padding on this element. */
   }
   .ltx_page_navbar:before {
     display: none;
@@ -172,8 +223,8 @@ nav > div.ltx_TOC {
     height: calc(100% - 20px);
   }
   .ltx_page_header {
-    padding-left: 4rem;
-    width: calc(100% - (4rem + 1rem)); /* Subtract horizontal padding on this element. */
+    padding-left: 3rem;
+    width: calc(100% - 3rem - (1.5rem + 2 * 0.5rem + 8px)); /* Subtract horizontal padding on this element. */
   }
   .ltx_page_navbar:hover {
     left: 0px;

css/MLS.css

@@ -15,9 +15,8 @@ body {
 a       { text-decoration: none; color: inherit; }
 a:hover { text-decoration: underline; }
 
-.ltx_page_header {
-  border-bottom-color: #DE1D31; /* "Bouncing ball red" */
-  border-bottom-width: 2px;
+.ltx_titlepage {
+  padding-top: 2rem; /* The big Modelica Language logo doesn't look good too close to page header. */
 }
 
 .ltx_tocentry_subsection { display: none; }