Marginal improvements to the table of contents

xremming · Dec 11, 2023 · b7099b0 · b7099b0
1 parent b0d6fb8
commit b7099b0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/public/style.css b/public/style.css
@@ -80,6 +80,11 @@ hr {
   margin: 1px;
 }
 
+.number {
+  font-family: var(--font-family-monospace);
+  font-size: 80%;
+}
+
 .container {
   display: flex;
   background-color: var(--color-background-secondary);
@@ -125,22 +130,23 @@ hr {
 .toc-element {
   display: flex;
   flex-direction: row;
+  align-items: baseline;
 }
 
-.toc-number {
-  padding-right: 0.2rem;
+.toc-name {
+  padding-left: 0.2rem;
 }
 
 .toc-part {
   margin-top: 0.5rem;
 }
 
 .toc-chapter {
-  padding-left: 1rem;
+  margin-left: 1rem;
 }
 
 .toc-rule {
-  padding-left: 2rem;
+  margin-left: 2rem;
 }
 
 /* --- MAIN CONTENT --- */

diff --git a/template/index.html b/template/index.html
@@ -61,7 +61,7 @@
 
         {{ $class := printf "toc-%s" (lower .Type) }}
         <div class="toc-element {{ $class }}">
-          <div class="toc-number">{{ .Number }}</div>
+          <div class="toc-number number">{{ .Number }}</div>
           <div class="toc-name"><a href="#{{ .ID }}">{{ index .Body 0 }}</a></div>
         </div>
       {{ end }}

diff --git a/template/rule.html b/template/rule.html
@@ -3,17 +3,17 @@
 
 {{ if eq .Type "Part" }}
   <a id="{{ .ID }}" class="{{ $anchorClass }}"></a>
-  <h3 class="{{ $class }}">{{ .Number }} {{ index .Body 0 }}</h3>
+  <h3 class="{{ $class }}"><span class="number">{{ .Number }}</span> {{ index .Body 0 }}</h3>
 {{ else if eq .Type "Chapter" }}
   <a id="{{ .ID }}" class="{{ $anchorClass }}"></a>
-  <h4 class="{{ $class }}">{{ .Number }} {{ index .Body 0 }}</h4>
+  <h4 class="{{ $class }}"><span class="number">{{ .Number }}</span> {{ index .Body 0 }}</h4>
 {{ else }}
   {{ $first := true }}
   {{ range .Body }}
     {{ if $first }}
       {{ $first = false }}
       <a id="{{ $.ID }}" class="{{ $anchorClass }}"></a>
-      <p class="{{ $class }}"><a href="#{{ $.ID }}">{{ $.Number }}</a> {{ . | linkify | ruleLinks | replaceSymbols }}</p>
+      <p class="{{ $class }}"><a href="#{{ $.ID }}" class="number">{{ $.Number }}</a> {{ . | linkify | ruleLinks | replaceSymbols }}</p>
     {{ else }}
       <p>{{ . | replaceSymbols | ruleLinks }}</p>
     {{ end }}