nav: tweak sections in tutorial nav

- The bootstrap nav side bar isn't prepared for two-level lists. Instead, use one single-level list where non-link items are given class nav-section, so they can function as section dividers and the nav links are rendered the same as other nav links. - Reduce padding for tutorials side nav to fit more of it on the screen. Signed-off-by: Gerwin Klein <[email protected]>
seL4 · Jul 31, 2024 · ce0ef6d · ce0ef6d
1 parent fc11969
commit ce0ef6d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 27 deletions.
diff --git a/_includes/nav-sidebar.html b/_includes/nav-sidebar.html
@@ -54,16 +54,13 @@
     </ul>
 {% endif %}
 
-{% if page_url[1] == "tutorials" %}
+{% if page_url[1] == "Tutorials" %}
   {% assign url = "" %}
-  <ul class="nav nav-sidebar">
-    <li>Getting started</li>
-    <ul>
+  <ul class="nav nav-sidebar tutorial-sidebar">
+    <li class="nav-section">Getting started</li>
       <li><a href="{{url}}/tutorials/">Overview of tutorials</a></li>
       <li><a href="{{url}}/tutorials/pathways">Tutorial pathways</a></li>
-    </ul>
-    <li>seL4</li>
-    <ul>
+    <li class="nav-section">seL4</li>
       <li><a href="{{url}}/tutorials/sel4-overview">Overview</a></li>
       <li><a href="{{url}}/tutorials/setting-up">Setting up your machine</a></li>
       <li><a href="{{url}}/tutorials/get-the-tutorials">Getting the tutorials</a></li>
@@ -77,39 +74,28 @@
       <li><a href="{{url}}/tutorials/interrupts">Interrupts</a></li>
       <li><a href="{{url}}/tutorials/fault-handlers">Fault Handling</a></li>
       <li><a href="{{url}}/tutorials/mcs">MCS Extensions</a></li>
-    </ul>
-    <li>Dynamic libraries</li>
-    <ul>
-      <li><a href="{{url}}/tutorials/libraries-1">Initialisation & threading</a></li>
-      <li><a href="{{url}}/tutorials/libraries-2">IPC</a></li>
-      <li><a href="{{url}}/tutorials/libraries-3">Processes & Elf loading</a></li>
-      <li><a href="{{url}}/tutorials/libraries-4">Timer</a></li>
-    </ul>
-    <li>Microkit</li>
-    <ul>
+    <li class="nav-section">Dynamic libraries</li>
+      <li><a href="{{url}}/tutorials/dynamic-1">Initialisation &amp; threading</a></li>
+      <li><a href="{{url}}/tutorials/dynamic-2">IPC</a></li>
+      <li><a href="{{url}}/tutorials/dynamic-3">Processes &amp; Elf loading</a></li>
+      <li><a href="{{url}}/tutorials/dynamic-4">Timer</a></li>
+    <li class="nav-section">Microkit</li>
       <li><a href="https://trustworthy.systems/projects/microkit/tutorial/">Tutorial</a></li>
-    </ul>
-    <li>CAmkES</li>
-    <ul>
+    <li class="nav-section">CAmkES</li>
       <li><a href="{{url}}/tutorials/hello-camkes-0">Hello CAmkES</a></li>
       <li><a href="{{url}}/tutorials/hello-camkes-1">CAmkES 1: Introduction to CAmkES</a></li>
       <li><a href="{{url}}/tutorials/hello-camkes-2">CAmkES 2: Events</a></li>
       <li><a href="{{url}}/tutorials/hello-camkes-timer">CAmkES 3: Timer</a></li>
       <li><a href="{{url}}/tutorials/camkes-vm-linux">CAmkES VM</a></li>
       <li><a href="{{url}}/tutorials/camkes-vm-crossvm">CAmkES Cross VM Connectors</a></li>
-    </ul>
-    <li>Rust</li>
-    <ul>
+    <li class="nav-section">Rust</li>
       <li><a href= "https://github.com/seL4/rust-sel4">GitHub</a></li>
-    </ul>
-    <li>Resources</li>
-    <ul>
+    <li class="nav-section">Resources</li>
       <li><a href="https://sel4.systems/Info/Docs/seL4-manual-latest.pdf">seL4 Manual</a></li>
       <li><a href= "/projects/sel4/api-doc.html">API references</a></li>
       <li><a href="{{url}}/tutorials/how-to"><em>How to:</em> A quick solutions guide</a></li>
       <li><a href="../projects/sel4-tutorials/debugging-guide">Debugging guide</a></li>
       <li><a href="../Resources#contact">Contact</a></li>
-    </ul>
   </ul>
 {% endif %}
 </div>
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -252,6 +252,20 @@ h2 a,
   background-color: #428bca;
 }
 
+.tutorial-sidebar li {
+  padding-bottom: 0;
+  padding-top: 0;
+}
+.tutorial-sidebar li > a {
+  padding-bottom: 0.5ex;
+  padding-top: 0.5ex;
+}
+
+li.nav-section {
+  padding-top: 1ex;
+  font-weight: bold;
+}
+
 /* This adds a unicode character corresponding to .fa-external-link-alt from fontawesome
    to every external link */
 a[href*="//"]:not([href*="{{site.url}}"],.skip-icon):after {