Add table of contents.

Closes #58.
RubenVerborgh · Feb 6, 2019 · a186561 · a186561
1 parent 2820081
commit a186561
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 0 deletions.
diff --git a/_shared/styles/web-fundamentals.css b/_shared/styles/web-fundamentals.css
@@ -1,3 +1,7 @@
+.shower {
+  --accent: #3a2d72;
+}
+
 /* Title and title slide */
 body {
   padding-top: 30px !important;
@@ -55,6 +59,52 @@ body {
   line-height: 1.5;
 }
 
+/* Navigation sidebar */
+
+.shower.full nav {
+  display: none;
+}
+
+nav {
+  font-size: 80%;
+  line-height: 1.66;
+
+  position: fixed;
+  z-index: 10;
+  right: 0;
+  top: 50%;
+  transform: translate(0, -50%);
+  transition: .5s transform;
+
+  padding: 1em;
+
+  color: white;
+  background: var(--accent);
+
+  cursor: pointer;
+}
+
+nav:not(:hover) {
+  transform: translate(calc(100% - 1.8em), -50%);
+  transition: .5s .5s transform;
+}
+
+nav h2 {
+  letter-spacing: .1em;
+  font-weight: bold;
+  margin-bottom: .33em;
+}
+
+nav ol {
+  counter-reset: topic;
+
+  margin-left: 1em;
+}
+nav ol li:before {
+  counter-increment: topic;
+  content: counter(topic) '. '; */
+}
+
 /* General */
 .slide h3 {
   margin-bottom: 0;

diff --git a/architecture/index.html b/architecture/index.html
@@ -24,6 +24,17 @@ <h1>
     </ul>
   </header>
 
+  <nav>
+    <h2><a href="../">Overview</a></h2>
+    <ol>
+      <li><a href="../birds-eye-view/">A Bird’s-Eye View of the Web</a></li>
+      <li><a href="../architecture/">Web Architecture &amp; Technologies</a></li>
+      <li><a href="../web-apis/">Web APIs</a></li>
+      <li><a href="../semantic-web/">The Semantic Web &amp; Linked Data</a></li>
+      <li><a href="../linked-data-publishing/">Linked Data Publishing</a></li>
+    </ol>
+  </nav>
+
   <div class="title slide" id="title">
     <h2>
       <a class="series" href="../">Web Fundamentals</a><br>

diff --git a/birds-eye-view/index.html b/birds-eye-view/index.html
@@ -24,6 +24,17 @@ <h1>
     </ul>
   </header>
 
+  <nav>
+    <h2><a href="../">Overview</a></h2>
+    <ol>
+      <li><a href="../birds-eye-view/">A Bird’s-Eye View of the Web</a></li>
+      <li><a href="../architecture/">Web Architecture &amp; Technologies</a></li>
+      <li><a href="../web-apis/">Web APIs</a></li>
+      <li><a href="../semantic-web/">The Semantic Web &amp; Linked Data</a></li>
+      <li><a href="../linked-data-publishing/">Linked Data Publishing</a></li>
+    </ol>
+  </nav>
+
   <div class="title slide" id="title">
     <h2>
       <a class="series" href="../">Web Fundamentals</a><br>

diff --git a/index.html b/index.html
@@ -23,6 +23,17 @@ <h1>
     </ul>
   </header>
 
+  <nav>
+    <h2><a href="./">Overview</a></h2>
+    <ol>
+      <li><a href="./birds-eye-view/">A Bird’s-Eye View of the Web</a></li>
+      <li><a href="./architecture/">Web Architecture &amp; Technologies</a></li>
+      <li><a href="./web-apis/">Web APIs</a></li>
+      <li><a href="./semantic-web/">The Semantic Web &amp; Linked Data</a></li>
+      <li><a href="./linked-data-publishing/">Linked Data Publishing</a></li>
+    </ol>
+  </nav>
+
   <div class="title slide" id="title">
     <h2>
       <a class="series" href="#title">Web Fundamentals</a><br>

diff --git a/linked-data-publishing/index.html b/linked-data-publishing/index.html
@@ -23,6 +23,17 @@ <h1>
     </ul>
   </header>
 
+  <nav>
+    <h2><a href="../">Overview</a></h2>
+    <ol>
+      <li><a href="../birds-eye-view/">A Bird’s-Eye View of the Web</a></li>
+      <li><a href="../architecture/">Web Architecture &amp; Technologies</a></li>
+      <li><a href="../web-apis/">Web APIs</a></li>
+      <li><a href="../semantic-web/">The Semantic Web &amp; Linked Data</a></li>
+      <li><a href="../linked-data-publishing/">Linked Data Publishing</a></li>
+    </ol>
+  </nav>
+
   <div class="title slide" id="title">
     <h2>
       <a class="series" href="../">Web Fundamentals</a><br>

diff --git a/semantic-web/index.html b/semantic-web/index.html
@@ -24,6 +24,17 @@ <h1>
     </ul>
   </header>
 
+  <nav>
+    <h2><a href="../">Overview</a></h2>
+    <ol>
+      <li><a href="../birds-eye-view/">A Bird’s-Eye View of the Web</a></li>
+      <li><a href="../architecture/">Web Architecture &amp; Technologies</a></li>
+      <li><a href="../web-apis/">Web APIs</a></li>
+      <li><a href="../semantic-web/">The Semantic Web &amp; Linked Data</a></li>
+      <li><a href="../linked-data-publishing/">Linked Data Publishing</a></li>
+    </ol>
+  </nav>
+
   <div class="title slide" id="title">
     <h2>
       <a class="series" href="../">Web Fundamentals</a><br>

diff --git a/web-apis/index.html b/web-apis/index.html
@@ -24,6 +24,17 @@ <h1>
     </ul>
   </header>
 
+  <nav>
+    <h2><a href="../">Overview</a></h2>
+    <ol>
+      <li><a href="../birds-eye-view/">A Bird’s-Eye View of the Web</a></li>
+      <li><a href="../architecture/">Web Architecture &amp; Technologies</a></li>
+      <li><a href="../web-apis/">Web APIs</a></li>
+      <li><a href="../semantic-web/">The Semantic Web &amp; Linked Data</a></li>
+      <li><a href="../linked-data-publishing/">Linked Data Publishing</a></li>
+    </ol>
+  </nav>
+
   <div class="title slide" id="title">
     <h2>
       <a class="series" href="../">Web Fundamentals</a><br>