Style fixups for scrollbars.

2 files changed, 50 insertions, 19 deletions

diff --git a/_includes/footer-manpage.html b/_includes/footer-manpage.html
index 833d9ea3..061b7658 100644
--- a/_includes/footer-manpage.html
+++ b/_includes/footer-manpage.html
@@ -1,8 +1,8 @@
 <footer class="nn-footer">
-        <div class="nn-footer-inner nn-tan">
-                <div style="display: flex; flex-direction: row">
+        <div class="nn-footer-inner">
+                <div style="display: flex; flex-direction: row;align-items:center">
                         <div>NNG Reference Manual {{ page.version }}</div>
-                        <div style="margin-left: auto">
+                        <div style="margin-left: auto" class="nn-tan">
                                 <small>
                                         &copy; 2020 <a href="mailto:garrett@damore.org">Staysail Systems,
                                                 Inc.</a>
@@ -19,4 +19,4 @@
                 </div>
         </div>
 
-</footer>
\ No newline at end of file
+</footer>
diff --git a/nn.css b/nn.css
index 1ae98ce5..e8eb3181 100644
--- a/nn.css
+++ b/nn.css
@@ -55,6 +55,16 @@ a.nn-nav-link {
         background: #e0e0e0;
 }
 
+.nn-header {
+	position: fixed;
+	top: 0;
+	left: 0;
+}
+
+.nn-footer {
+	clear: both;
+}
+
 .nn-footer-inner {
         text-align: right;
         font-family: 'Roboto', 'Trebuchet MS', sans-serif;
@@ -64,15 +74,12 @@ a.nn-nav-link {
 }
 
 .nn-header-inner, .nn-footer-inner {
-        max-width: 62.5em;
-        padding: 1em;
-        width: 100%;
+	padding: 0em 4em 0em 2em;
 }
 
 .nn-header-inner {
         display: flex;
         align-items: center;
-        margin: auto;
 }
 
 .nn-nav-menu {
@@ -448,22 +455,34 @@ video {
 
 /* table of Contents sidebar */
 
-.toc2 .toc2 {
-        top: 6em;
-        left: 0;
+.toc2 {
         padding: 1.25em 1em;
-        position: fixed;
         display: flex;
         flex-direction: column;
+	bottom: 0;
+}
+
+nav.toc2 {
+	overflow-y: auto;
+	display:inline-block;
+	vertical-align:top;
+	z-index:10;
+	position:fixed;
+	top:5em;
+	bottom:6em;
 }
 
 @media screen and (maxwidth: 768px) {
-        .toc2 {
-                visibility: hidden;
-        }
-        #toc.toc2 ul {
+        nav.toc2 {
                 visibility: hidden;
+		overflow: hidden;
         }
+	nav.toc2::-webkit-scrollbar {
+		display: none;
+	}
+	nav.toc2 {
+		-ms-overflow-style: none;
+	}
 }
 
 #toc.toc2 ul {
@@ -484,11 +503,23 @@ video {
 
 /* only show the table of contents on screens wide enough to have room */
 
-@media all and (max-width: 92em) {
+main {
+	padding-left: 20em;
+	display:inline-block;
+	max-width:62.5em;
+	overflow-y:auto
+}
+
+@media all and (max-width: 90em) {
         #toctitle {
-                visibility: hidden;
+		display: none;
+		overflow: visible;
         }
         #toc.toc2 ul {
-                visibility: hidden;
+		display: none;
+		overflow: visible;
         }
+	main {
+		padding-left: 2em;
+	}
 }