diff --git a/doc/Makefile b/doc/Makefile
index d8145fdd..249095a9 100644
--- a/doc/Makefile
+++ b/doc/Makefile
@@ -28,13 +28,14 @@ synopsis.txt: MkSynopsis.hs MkExxTable.hs $(INCLUDES) $(EXAMPLES_OUT) $(SRC_FILE
 	runghc -i.. MkSynopsis.hs
 
 TMP=tmp.html
-synopsis.html: synopsis.txt
-	txt2tags --target=html --no-headers --quiet --toc --outfile=$@ --infile=$^
+synopsis.html: synopsis.txt _template.html
+	txt2tags --target=html --no-headers --quiet --toc --outfile=$@ --infile=$<
 	pandoc \
 		--from=html \
 		--to=html5 \
 		--standalone \
 		--template=_template.html \
+		--css=synopsis.css \
 		--metadata='title:"GF Resource Grammar Library: Synopsis"' \
 		--variable='rel-root:../..' \
 		--output=$(TMP) \
diff --git a/doc/MkSynopsis.hs b/doc/MkSynopsis.hs
index a843f5a2..e07dec14 100644
--- a/doc/MkSynopsis.hs
+++ b/doc/MkSynopsis.hs
@@ -49,8 +49,6 @@ main = do
   append "%!postproc(html): '(SRC=\"categories.png\")'  '\\1 USEMAP=\"#categories\"'"
   append "%!postproc(html): '#LParadigms'  '<a name=\"RParadigms\"></a>'"
   append "%!postproc(tex): '#LParadigms' ''"
-  append "%!postproc(html): '#quicklinks' '<script src=\"quicklinks.js\"></script>'"
-  append "%!postproc(tex): '#quicklinks' ''"
   delimit $ addToolTips cs
   include "synopsis-intro.txt" -- TODO dynamic language list
   title "Categories"
@@ -101,8 +99,6 @@ main = do
   space
   append "%%toc"
   space
-  append "#quicklinks"
-  space
 
 addToolTips :: Cats -> [String]
 addToolTips = map f
diff --git a/doc/_template.html b/doc/_template.html
index f94ac841..49c58d28 100644
--- a/doc/_template.html
+++ b/doc/_template.html
@@ -2,8 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="$lang$" xml:lang="$lang$"$if(dir)$ dir="$dir$"$endif$>
 <head>
   <meta charset="utf-8" />
-  <meta name="generator" content="pandoc" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 $for(author-meta)$
   <meta name="author" content="$author-meta$" />
 $endfor$
@@ -29,32 +28,41 @@ $for(header-includes)$
 $endfor$
 </head>
 <body>
-<div class="container my-5">
+<div class="container-fluid my-4">
+<div class="row">
 
+  <nav class="col-md-3 col-xl-2 d-none d-md-block sidebar" id="quicklinks">
+    <h5>Quick links</h5>
+    <!-- filled dynamically via quicklinks.js -->
+  </nav>
+
+  <main role="main" class="col-md-9 col-xl-10 offset-md-3 offset-xl-2">
 $if(title)$
-<header id="title-block-header">
-<a href="$rel-root$" title="Home">
-  <img src="$rel-root$/doc/Logos/gf1.svg" height="200px" class="float-md-right mb-3 bg-white" alt="GF Logo">
-</a>
-<h1 class="title">$title$</h1>
+    <header id="title-block-header">
+      <a href="$rel-root$" title="Home">
+        <img src="$rel-root$/doc/Logos/gf1.svg" height="200px" class="float-md-right mb-3 bg-white" alt="GF Logo">
+      </a>
+      <h1 class="title">$title$</h1>
 $if(subtitle)$
-<p class="subtitle">$subtitle$</p>
+      <p class="subtitle">$subtitle$</p>
 $endif$
 $for(author)$
-<p class="author">$author$</p>
+      <p class="author">$author$</p>
 $endfor$
 $if(date)$
-<p class="date">$date$</p>
+      <p class="date">$date$</p>
 $endif$
-</header>
+    </header>
 $endif$
 $if(toc)$
-<nav id="$idprefix$TOC">
-$table-of-contents$
-</nav>
+    <nav id="$idprefix$TOC">
+      $table-of-contents$
+    </nav>
 $endif$
-$body$
-</div><!-- .container -->
+    $body$
+  </main>
+</div><!-- .row -->
+</div><!-- .container-fluid -->
 
 <footer class="bg-light mt-5 py-5">
   <div class="container">
@@ -103,6 +111,8 @@ $body$
   <div>
 </footer>
 
+<script src="quicklinks.js"></script>
+
 <script type="text/javascript">
 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
diff --git a/doc/quicklinks.js b/doc/quicklinks.js
index 4bb41d43..fdc0e8e0 100644
--- a/doc/quicklinks.js
+++ b/doc/quicklinks.js
@@ -1,109 +1,118 @@
-
 // Find an element with a certain tag containing a certain text.
-function findElement(tagname,text) {
-    var els=document.body.getElementsByTagName(tagname)
-    for(var i=0;i<els.length;i++)
-	if(els[i].innerText==text) return els[i]
-    return null
+function findElement (tagname, text) {
+  var els = document.body.getElementsByTagName(tagname)
+  for (var i = 0; i < els.length; i++) {
+    if (els[i].innerText === text) return els[i]
+  }
+  return null
 }
 
-function text(s) { return document.createTextNode(s); }
-
-function appendChildren(n,ds) {
-    if(Array.isArray(ds)) for(var i in ds) n.appendChild(ds[i]);
-    else if(typeof ds=="string")
-        n.appendChild(text(ds))
-    else
-	n.appendChild(ds)
+function text (s) {
+  return document.createTextNode(s)
 }
 
-function node(tag,cls,ds) {
-    var n=document.createElement(tag)
-    if(cls) n.className=cls
-    if(ds) appendChildren(n,ds)
-    return n
+function appendChildren (n, ds) {
+  if (Array.isArray(ds)) for (var i in ds) n.appendChild(ds[i])
+  else if (typeof ds === 'string') n.appendChild(text(ds))
+  else n.appendChild(ds)
 }
 
-function a(href,txt) {
-    var a=node("a","",txt)
-    a.href=href
-    return a
+function node (tag, cls, ds) {
+  var n = document.createElement(tag)
+  if (cls) n.className = cls
+  if (ds) appendChildren(n, ds)
+  return n
 }
 
-function tr(ds) { return node("tr","",ds) }
-function th(d) { return node("th","",d) }
-function td(d) { return node("td","",d) }
+function a (href, txt) {
+  var a = node('a', '', txt)
+  a.href = href
+  return a
+}
 
-function forAllLinks(list,f) {
-    for(var i=0;i<list.length;i++) {
-	var c=list[i].firstElementChild
-	if(c && c.tagName=="A" && c.href) f(c)
-    }
+function forAllLinks (list, f) {
+  for (var i = 0; i < list.length; i++) {
+    var c = list[i].firstElementChild
+    if (c && c.tagName === 'A' && c.href) f(c)
+  }
 }
 
 /* -------------------------------------------------------------------------- */
 
 // Extract links to the syntax rules
-function listrules(ul) {
-    var rules=[]
-    if(ul.tagName!="UL") return []
-    forAllLinks(ul.children,function(c) {
-	rules.push({href:c.href,text:c.innerText.split(" -")[0],
-		    full:c.innerText})
+function listrules (ul) {
+  var rules = []
+  if (ul.tagName !== 'UL') return []
+  forAllLinks(ul.children, function (c) {
+    rules.push({
+      href: c.href,
+      text: c.innerText.split(' -')[0],
+      full: c.innerText
     })
-    return rules
+  })
+  return rules
 }
 
 // Extract the links to the paradigm sections for all the languages
-function listlangs(ul) {
-    var langs=[]
-    if(ul.tagName!="UL") return []
-    forAllLinks(ul.children,function(c) {
-	if(/^Paradigms for /.test(c.innerText))
-	    langs.push({href:c.href,text:c.innerText.substr(14),
-			full:c.innerText})
-    })
-    return langs
-}
-
-function linklist(links) {
-    var d=node("td","quicklinks")
-    for(var i=0;i<links.length;i++) {
-	var l=a(links[i].href,links[i].text)
-	l.title=links[i].full
-	d.appendChild(l)
+function listlangs (ul) {
+  var langs = []
+  if (ul.tagName !== 'UL') return []
+  forAllLinks(ul.children, function (c) {
+    if (/^Paradigms for /.test(c.innerText)) {
+      langs.push({
+        href: c.href,
+        text: c.innerText.substr(14),
+        full: c.innerText
+      })
     }
-    return d
+  })
+  return langs
 }
 
-function quicklinks() {
-    // Find the detailed table of contents
-    var h1toc=findElement("h1","Table of Contents")
-    var ultoc=h1toc.nextElementSibling
-    while(ultoc && ultoc.tagName!="UL") ultoc=ultoc.nextElementSibling
+function linklist (links) {
+  var d = node('div')
+  for (var i = 0; i < links.length; i++) {
+    var l = a(links[i].href, links[i].text)
+    l.title = links[i].full
+    d.appendChild(l)
+    d.appendChild(text(' '))
+  }
+  return d
+}
 
-    var lis=ultoc.children
-    
-    var syntaxrules=[],langs=[]
+function quicklinks () {
+  // Find the detailed table of contents
+  var h1toc = findElement('h1', 'Table of Contents')
+  var ultoc = h1toc.nextElementSibling
+  while (ultoc && ultoc.tagName !== 'UL') {
+    ultoc = ultoc.nextElementSibling
+  }
 
-    // Find the Syntax Rules and Lexical Paradigms sections in the toc
-    for(var i=0;i<lis.length;i++) {
-	var li=lis[i],c=li.firstElementChild
-	if(c.tagName=="A") {
-	    if(/^Syntax Rules /.test(c.innerText))
-		syntaxrules=listrules(c.nextElementSibling)
-	    else if(c.innerText=="Lexical Paradigms")
-		langs=listlangs(c.nextElementSibling)
-	}
+  var lis = ultoc.children
+
+  var syntaxrules = []
+  var langs = []
+
+  // Find the Syntax Rules and Lexical Paradigms sections in the toc
+  for (var i = 0; i < lis.length; i++) {
+    var li = lis[i]
+    var c = li.firstElementChild
+    if (c.tagName === 'A') {
+      if (/^Syntax Rules /.test(c.innerText)) {
+        syntaxrules = listrules(c.nextElementSibling)
+      } else if (c.innerText === 'Lexical Paradigms') {
+        langs = listlangs(c.nextElementSibling)
+      }
     }
+  }
 
-    var table=node("table","quicklinks",
-	       [tr([th("Syntax"),th("Morphology")]),
-		tr([linklist(syntaxrules),linklist(langs)])])
-
-    return node("div","quicklinks",
-		[text("Quick links"),
-		 node("div","expand",table)])
+  return node(
+    'div',
+    'row',
+    [ node('div', 'col-5', [ node('h6', '', 'Syntax'), linklist(syntaxrules) ]),
+      node('div', 'col-7', [ node('h6', '', 'Morphology'), linklist(langs) ])
+    ]
+  )
 }
 
-document.body.appendChild(quicklinks())
+document.getElementById('quicklinks').appendChild(quicklinks())
diff --git a/doc/synopsis.css b/doc/synopsis.css
new file mode 100644
index 00000000..1babbfef
--- /dev/null
+++ b/doc/synopsis.css
@@ -0,0 +1,13 @@
+#quicklinks {
+  line-height: 130%;
+}
+
+#quicklinks.sidebar {
+  overflow-y: scroll;
+  height: 100%;
+  position: fixed;
+}
+
+#quicklinks a {
+  display: block;
+}
