From 321c2995b7ff0e3a0f9195eadd63f428a6e5ffc5 Mon Sep 17 00:00:00 2001
From: Kenneth Auchenberg <kenneth@auchenberg.dk>
Date: Wed, 10 Jan 2018 16:57:48 -0800
Subject: [PATCH] Make navigation sticky using position: sticky

---
 _includes/topnav.html       |  2 +-
 _layouts/implementors.html  |  5 ++---
 _layouts/specification.html | 44 ++++++++++++++++++-------------------
 css/main.scss               | 37 ++++++++++++++++++++++++++-----
 4 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/_includes/topnav.html b/_includes/topnav.html
index 6c9ab1e..df594d4 100644
--- a/_includes/topnav.html
+++ b/_includes/topnav.html
@@ -1,4 +1,4 @@
-<header class="navbar navbar-expand-lg navbar-dark bg-primary">
+<header class="navbar navbar-expand-lg navbar-dark bg-primary lsp-navbar">
     <div class="container navbar-container">
         <a class="navbar-brand" href="{{ site.baseurl }}/">
             {% if page.sectionid != nil %}
diff --git a/_layouts/implementors.html b/_layouts/implementors.html
index 92d2ab4..61beb22 100644
--- a/_layouts/implementors.html
+++ b/_layouts/implementors.html
@@ -4,9 +4,8 @@ layout: default
 
 <div class="container">
     <div class="row single-page">
-        <div class="col-lg-3 col-xl-2 d-none d-lg-block">
-            <div class="card sticky-top" style="top: 40px">
-
+        <div class="col-lg-3 col-xl-2 d-none d-lg-block lsp-sidebar">
+            <div class="card">
                 <ul class="nav flex-column list-unstyled">
                     {% assign sorted = site.implementors | sort: 'index' %}
                     {% for post in sorted %}
diff --git a/_layouts/specification.html b/_layouts/specification.html
index 0266b8c..5a2c4c3 100644
--- a/_layouts/specification.html
+++ b/_layouts/specification.html
@@ -11,33 +11,31 @@ layout: default
             <div id="markdown-content-container">{{ content }}</div>
         </div>
 
-        <div class="col-lg-3 col-xl-2 d-none d-lg-block">
-            <div class="sticky-top" style="top: 40px">
-                {% for toc-l1 in site.data.specification-toc %}
-                <div class="card">
-                    <div id="outlineAccordion" data-children=".item">
-                        {% for toc-l2 in toc-l1.children %}
-                        <div class="item">
-                            <a class="nav-link" data-toggle="collapse" data-parent="#outlineAccordion" href="#{{ toc-l2.anchor }}" aria-expanded="true" aria-controls="exampleAccordion1">
-                                {{ toc-l2.title }}
-                            </a>
-                            <div id="{{ toc-l2.anchor }}" class="collapse {% if toc-l2.anchor=='general' %}show{% endif%}" role="tabpanel">
-                                <ul class="nav toc flex-column" style="padding-left: 0.5rem">
-                                    {% for toc-l3 in toc-l2.children %}
-                                    <li class="nav-item">
-                                        <a class="nav-link toc-link" href="#{{ toc-l3.anchor }}">
-                                            {{ toc-l3.title }}
-                                        </a>
-                                    </li>
-                                    {% endfor %}
-                                </ul>
-                            </div>
+        <div class="col-lg-3 col-xl-2 d-none d-lg-block lsp-sidebar">
+            {% for toc-l1 in site.data.specification-toc %}
+            <div class="card">
+                <div id="outlineAccordion" data-children=".item">
+                    {% for toc-l2 in toc-l1.children %}
+                    <div class="item">
+                        <a class="nav-link" data-toggle="collapse" data-parent="#outlineAccordion" href="#{{ toc-l2.anchor }}" aria-expanded="true" aria-controls="exampleAccordion1">
+                            {{ toc-l2.title }}
+                        </a>
+                        <div id="{{ toc-l2.anchor }}" class="collapse {% if toc-l2.anchor=='general' %}show{% endif%}" role="tabpanel">
+                            <ul class="nav toc flex-column" style="padding-left: 0.5rem">
+                                {% for toc-l3 in toc-l2.children %}
+                                <li class="nav-item">
+                                    <a class="nav-link toc-link" href="#{{ toc-l3.anchor }}">
+                                        {{ toc-l3.title }}
+                                    </a>
+                                </li>
+                                {% endfor %}
+                            </ul>
                         </div>
-                        {% endfor %}
                     </div>
+                    {% endfor %}
                 </div>
-                {% endfor %}
             </div>
+            {% endfor %}
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index e3d280e..6e018ed 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -18,10 +18,11 @@ body {
 }
 
 .header-container {
-  // background: url('../protocol.jpg');
-
   color: #fff;
-  margin-bottom: 80px;
+
+  @media (min-width: 576px) {
+  	margin-bottom: 80px;
+  }
 
   h1 {
 	margin-top: 15px;
@@ -347,13 +348,20 @@ pre[class=highlight] {
 }
 
 .footer {
-	padding: 50px 0;
+	padding: 15px 0;
 	color: #000;
 	background: #e9ecef;
 
+	@media (min-width: 576px) {
+		padding: 50px 0;
+	}
+
 	img {
 		width: 100px;
-		float: right;
+
+		@media (min-width: 576px) {
+			float: right;
+		}		
 	}
 
 	ul {
@@ -378,7 +386,7 @@ pre[class=highlight] {
 			padding-bottom: 10px;
 			
 			@media (min-width: 576px) {
-			display: inline-block;
+				display: inline-block;
 				padding: 0;
 			}
 		}
@@ -390,6 +398,23 @@ pre[class=highlight] {
 	}
 }
 
+@media (min-width: 768px) {
+	.lsp-navbar {
+		position: -webkit-sticky;
+		position: sticky;
+		top: 0;
+		z-index: 1071;
+	}
+
+	.lsp-sidebar {
+		position: -webkit-sticky;
+		position: sticky;
+		top: 100px;
+		z-index: 1000;
+		height: calc(100vh - 100px);
+	}
+}
+
 .navbar-brand h1 {
     font-size: 18px;
     font-weight: bold;