Fix some navigation section issues

- The main navigation bar now shows up on every page.

- For consistency the index page now has up/home links that both point to
  itself.

- The “up” link doesn't include a space that gets styled anymore.

index.org

@@ -3,10 +3,8 @@
 #+OPTIONS: toc:nil num:nil
 #+STARTUP: showall
 #+STARTUP: inlineimages
-
-#+begin_main-navigation
-[[https://ryuslash.org][home]] | [[https://code.ryuslash.org][code]] | [[https://blog.ryuslash.org][blog]]
-#+end_main-navigation
+#+html_link_up: /
+#+html_link_home: /
 
 #+begin_introduction
 #+ATTR_HTML: :id avatar :alt Angry black prinny (looking like Tux), playing on a PSP

literate-build.org

@@ -233,7 +233,12 @@ Here come the actual projects.
 
 The pages project is the main publishing project. It exports all of the =.org= files except for =README.org= and anything found in the =posts/= directory. The =README.org= is only relevant when you're looking at the source code for this website and =posts/= has its own project.
 
-It also loads the stylesheet into the HTML head, and add a link to my Mastodon account in the postamble, for verification purposes.
+It also sets:
+
+- =:html-head= :: Loads the stylesheet into the HTML head.
+- =:html-preamble-format= :: Adds a list of other sections of my website.
+- =:html-postamble-format= :: Adds a link to my Mastodon account in the postamble, for verification purposes.
+- =:html-home/up-format= :: Fixes the whitespace in the home/up links at the top of the page.
 
 #+begin_src emacs-lisp :tangle no :noweb-ref projects
 ("pages"
@@ -246,10 +251,17 @@ It also loads the stylesheet into the HTML head, and add a link to my Mastodon a
                    (and "README.org" string-end)))
  :publishing-function org-html-publish-to-html
  :html-head "<link rel=\"stylesheet\" href=\"/assets/css/main.css\" type=\"text/css\"/>"
+ :html-preamble t
+ :html-preamble-format (("en" ,(string-join (list "<ul class=\"main-navigation\">"
+                                                  "<li><a href=\"//code.ryuslash.org\">code</a></li>"
+                                                  "<li><a href=\"//laminar.ryuslash.org\">builds</a></li>"
+                                                  "<li><a href=\"//blog.ryuslash.org\">blog</a></li>"
+                                                  "</ul>"))))
  :html-postamble t
  :html-postamble-format (("en" "<p class=\"social social-mastodon\">Find me on <a href=\"https://fosstodon.org/@ryuslash\" rel=\"me\">Mastodon</a></p>
 <p class=\"date\">Date: %C</p>
-<p class=\"creator\">%c</p>")))
+<p class=\"creator\">%c</p>"))
+ :html-home/up-format "<div id=\"org-div-home-and-up\"><a accesskey=\"h\" href=\"%s\">UP</a> | <a accesskey=\"H\" href=\"%s\">HOME</a>\n</div>")
 #+end_src
 
 *** Posts

src/scss/main.scss

@@ -31,6 +31,7 @@ img.book-cover {
   font-size: 0.8rem;
   padding-right: 1rem;
   float: right;
+  text-transform: lowercase;
 }
 
 #postamble {
@@ -70,10 +71,18 @@ pre.src {
 .org-center { text-align: center; }
 
 .main-navigation {
-  text-align: center;
   margin: 0;
   line-height: 1;
   padding: 0;
+
+  li {
+    display: inline;
+    list-style: none;
+
+    &:not(:last-child)::after {
+      content: " | ";
+    }
+  }
 }
 
 .org-src-container span:target {