make html depend on the template and tweak sidebar css

2 files changed, 35 insertions, 34 deletions

diff --git a/html/Makefile b/html/Makefile
index 06f711c0..c1cc1b99 100644
--- a/html/Makefile
+++ b/html/Makefile
@@ -1,6 +1,7 @@
 VERBOSE ?= @
 
-PANDOC_FLAGS := -f markdown -s --template=./template.html
+HTML_TEMPLATE := template.html
+PANDOC_FLAGS := -f markdown -s --template=$(HTML_TEMPLATE)
 
 # The full path to the Makefile
 MAKEFILE_PATH := $(abspath $(lastword $(MAKEFILE_LIST)))
@@ -86,7 +87,7 @@ $(1)/cards_listing.md: $(CARDS_YAML) $(GENERATE_CARD) $(MAKEFILE_LIST)
 		done; \
 	done
 
-$(1)/cards_listing.html: $(1)/cards_listing.md
+$(1)/cards_listing.html: $(1)/cards_listing.md $(HTML_TEMPLATE)
 	@echo "building		$$@"
 	@if test \( ! \( -d $$(@D) \) \) ;then mkdir -p $$(@D);fi
 	$(VERBOSE) pandoc --toc $(PANDOC_FLAGS) $$< -o $$@;
@@ -96,7 +97,7 @@ $(eval $(call generateCardsListing, $(BUILDDIR)/de,de))
 $(eval $(call generateCardsListing, $(BUILDDIR)/en,en))
 
 define generateHtml
-$(1)/%.html: %.md $(MAKEFILE_LIST) template.html
+$(1)/%.html: %.md $(MAKEFILE_LIST) $(HTML_TEMPLATE)
 	@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 39fc6877..6edfbda8 100644
--- a/html/template.html
+++ b/html/template.html
@@ -197,39 +197,39 @@ div.csl-indent {
 $endif$
 
 $if(toc)$
-    /* Hide for mobile */
-    .sidebar {
-      display: none;
-    }
-    @media screen and (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;
-        max-width: 200px;
-      }
-    }
+/* Hide for mobile */
+.sidebar {
+  display: none;
+}
+@media screen and (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;
+    max-width: 200px;
+  }
+}
 
-    @media screen and (min-width: 768px) and (max-width: 1200px){
-      .main {
-        position: absolute;
-        left: 250px;
-        max-width: 80%;
-        overflow: auto;
-      }
-    }
+@media screen and (min-width: 768px) and (max-width: 1200px) {
+  .main {
+    position: absolute;
+    left: 250px;
+    max-width: 80%;
+    overflow: auto;
+  }
+}
 
-    .sidebar ul {
-      padding-left: 7px;
-    }
+.sidebar ul {
+  padding-left: 10px;
+}
 $endif$
   </style>