From b3a06e129830050a377c1a7b0409cc34e1979d6b Mon Sep 17 00:00:00 2001
From: Florian Fischer <florian.fl.fischer@fau.de>
Date: Thu, 25 Mar 2021 14:29:27 +0100
Subject: fix sidebar overlapping with main content and remove white space

---
 html/Makefile      |  2 +-
 html/template.html | 85 ++++++++++++++++++++++++------------------------------
 2 files changed, 39 insertions(+), 48 deletions(-)

diff --git a/html/Makefile b/html/Makefile
index d8996e41..29149997 100644
--- a/html/Makefile
+++ b/html/Makefile
@@ -52,7 +52,7 @@ maps:
 	$(VERBOSE) make -C $(MAPS_ROOT)
 
 define generateHtml
-$(1)/%.html: %.md $(MAKEFILE_LIST)
+$(1)/%.html: %.md $(MAKEFILE_LIST) template.html
 	@echo "building		$$@"
 	@if test \( ! \( -d $$(@D) \) \) ;then mkdir -p $$(@D);fi
 	$(VERBOSE) if [[ $$$$(cat $$< | wc -l) -gt 80 ]]; \
diff --git a/html/template.html b/html/template.html
index 9d27c27c..a9392911 100644
--- a/html/template.html
+++ b/html/template.html
@@ -196,49 +196,38 @@ div.csl-indent {
 }
 $endif$
 
-$if(toc)$                                                                       
-    /* Hide for mobile, show later */                                           
-    .sidebar {                                                                  
-      display: none;                                                            
-    }                                                                           
-    @media (min-width: 768px) {                                                 
-      .sidebar {                                                                
-        position: fixed;                                                        
-        top: 51px;                                                              
-        bottom: 0;                                                              
-        left: 0;                                                                
-        z-index: 1000;                                                          
-        display: block;                                                         
-        padding: 20px;                                                          
-        overflow-x: hidden;                                                     
+$if(toc)$
+    /* Hide for mobile */
+    .sidebar {
+      display: none;
+    }
+    @media (min-width: 768px) {
+      .sidebar {
+        position: fixed;
+        top: 51px;
+        bottom: 0;
+        left: 0;
+        z-index: 1000;
+        display: block;
+        padding: 20px;
+        overflow-x: hidden;
         overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
-        background-color: #f5f5f5;                                              
-        border-right: 1px solid #eee;                                           
-      }                                                                         
-    }                                                                           
-                                                                                
-    .sidebar ul {                                                               
-      padding-left: 10px;                                                       
-    }                                                                           
-                                                                                
-    /* Sidebar navigation */                                                    
-    .nav-sidebar {                                                              
-      margin-right: -21px; /* 20px padding + 1px border */                      
-      margin-bottom: 20px;                                                      
-      margin-left: -20px;                                                       
-    }                                                                           
-    .nav-sidebar > li > a {                                                     
-      padding-right: 20px;                                                      
-      padding-left: 20px;                                                       
-    }                                                                           
-    .nav-sidebar > .active > a,                                                 
-    .nav-sidebar > .active > a:hover,                                           
-    .nav-sidebar > .active > a:focus {                                          
-      color: #fff;                                                              
-      background-color: #428bca;                                                
-    }                                                                           
-$endif$    
-  </style>                                                                    
+        background-color: #f5f5f5;
+        border-right: 1px solid #eee;
+      }
+    }
+
+    .sidebar ul {
+      padding-left: 10px;
+    }
+    .main {
+      position: relative;
+      left: 25%;
+      max-width: 70%;
+      overflow: auto;
+    }
+$endif$
+  </style>
 
 $for(css)$
   <link rel="stylesheet" href="$css$" />
@@ -272,14 +261,16 @@ $if(date)$
 $endif$
 </header>
 $endif$
-$if(toc)$                                                                       
-<div id="sidebar" class="sidebar">                                      
-$toc$                                                                 
-</div>                                                                  
+$if(toc)$
+<div id="sidebar" class="sidebar">
+$toc$
+</div>   <!-- sidebar -->
 $endif$
-$body$                                                                          
+<div id="main" class="main">
+$body$
 $for(include-after)$
 $include-after$
 $endfor$
+</div> <!-- main -->
 </body>
 </html>
-- 
cgit v1.2.3