From d51263ded29667e97cf0b1e14d52a5f29497c942 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Sat, 14 May 2022 21:11:12 +0800
Subject: [PATCH] CSS, nav: Better styled navigation bar

- Use <ul>
- Get rid of the ugly border-bottom
- Instead, decrease the left/right margin so it spans across the width
  of the screen
- Align site index link on the left, and the other nav items on the
  right
- Adjust behaviour of hover
- Reflect currently selected page in the nav bar
---
 assets/main.css              | 95 ++++++++++++++++++++++++++++--------
 config.toml                  | 11 +++--
 layouts/partials/header.html | 13 +++--
 3 files changed, 90 insertions(+), 29 deletions(-)

diff --git a/assets/main.css b/assets/main.css
index ba2f8c5..fb20272 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -60,27 +60,87 @@
 	}
 }
 
+body {
+	background-color: var(--bg);
+	color: var(--text);
+    /* Some users don't even bother to make their default sans-serif readable
+     * in their browser settings, so I help them.
+     * But... that's barely an excuse for me to use a big font-stack, I know */
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+	font-size: var(--base-fontsize);
+	line-height: var(--line-height);
+
+	/* WTH? Who needs text-shadow? */
+	text-shadow: 0 1px 0 var(--shadow-color);
+	margin: auto;
+}
+
+main {
+	padding: 0 5%;
+}
+footer, .after-content {
+    margin: 0 5%;
+}
+
+
+/* Homepage stuff */
+#pfp {
+    /* The dot slash pic */
+    max-width: 20%;
+    border: 5px solid var(--border);
+    border-radius: 25%;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    margin-top: 4rem;
+}
+
 nav {
+	margin-right: 5%;
+	margin-left: 5%;
 	padding: 1rem 0.3rem;
 	padding-bottom: 4px;
 	padding-top: 1.5rem;
-	font-weight: 400;
-	border-bottom: 1px solid var(--accent-light);
+	font-weight: 500;
 }
 
+/* Differentiating between normal content links and meta content links */
 nav a, .meta a, .post-meta a, footer a, .after-content a {
 	color: var(--accent-light);
-	/* border-color: var(--accent-bg); */
-	/* border-radius: 5px; */
-	/* border-style: solid; */
-	/* border-bottom: 1px; */
 	border-bottom: 0;
 }
 
 nav a {
-	margin-right: 1rem;
+	margin-right: 1.5rem;
+	padding-bottom: .3rem;
 }
 
+nav .right {
+    float: right;
+}
+
+nav .selected {
+    border-bottom: 2.5px solid;
+}
+
+/********************************************************************
+ * Idea from seirdy.one to have unstyled unordered-list nav
+ * Step 1 to making the single-line nav: remove the bullet padding. */
+nav ul {
+	padding: 0
+}
+/* Step 2: remove bullets and make elements inline.
+ * Also: bump up the line-height and margins to increase space between
+ * tap-targets (SC 2.5.5). Google a11y guidelines require 8 CSS pixels
+ * between tap targets. */
+nav ul li {
+	display: inline-block;
+	margin-right: .375em;
+}
+/* END borrowed code from seirdy.one
+ ********************************************************************/
+
+
 blockquote {
 	margin-left: 0;
 	padding-left: 1rem;
@@ -190,29 +250,22 @@ pre code {
 /* 	color: #000; */
 /* } */
 
-body {
-	margin: auto;
-	background-color: var(--bg);
-	padding: 0 5%;
-	/* margin-top: 2rem; */
-	color: var(--text);
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-	font-size: var(--base-fontsize);
-	line-height: var(--line-height);
-	text-shadow: 0 1px 0 var(--shadow-color);
-	max-width: 47rem; /* lol idk */
-}
-
 .post-date {
 	margin-right: 1.5rem;
 }
 
 .posts {text-align: left;}
 a {border-bottom: 1px solid var(--accent); color: var(--accent); text-decoration: none;}
-a:hover {
+a:hover:not(nav) {
 	border-bottom: 0;
 	background-color: var(--accent-bg);
 }
+
+nav a:hover {
+	background-color: var(--accent-bg);
+	border-bottom: 2.5px solid;
+}
+
 header {top: 1px;}
 
 fieldset {
diff --git a/config.toml b/config.toml
index be4debf..ad5546b 100644
--- a/config.toml
+++ b/config.toml
@@ -30,13 +30,14 @@ posts = "/posts/:slug"
 [menu]
   [[menu.main]]
       identifier = "posts"
-	  name = "posts"
+	  name = "Posts"
 	  title = "posts"
 	  url = "posts/"
 	  weight = 10
+	  pre = "<span class=\"right\">"
   [[menu.main]]
       identifier = "about"
-	  name = "about"
+	  name = "About"
 	  title = "about"
 	  url = "about/"
 	  weight = 20
@@ -48,10 +49,12 @@ posts = "/posts/:slug"
 #	  weight = 30
   [[menu.main]]
       identifier = "rss"
-	  name = "rss"
+	  name = "RSS"
 	  title = "rss"
 	  url = "posts/index.xml"
-	  weight = 30
+	  weight = 100
+	  # pre = "<span class=\"right\">"
+	  post="</span>"
 
 [markup.goldmark.renderer]
 # Allows HTML in Markdown
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 309a12a..caada32 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,6 +1,11 @@
-<nav>
-	<a rel="home" href="{{ .Site.BaseURL  }}">home</a>
+<nav><ul>
+    <li><a rel="home" href="{{ .Site.BaseURL  }}">{{ .Site.Params.shortTitle }}</a></li>
+    {{- $currentPage := . }}
 	{{- range .Site.Menus.main.ByWeight }}
-	{{ .Pre  }}<a href="{{ $.Site.BaseURL }}{{ .URL  }}" title="{{ .Title  }}">{{- .Name -}}</a>{{ .Post  }}
+    {{- $url := printf "%s%s" $.Site.BaseURL .URL }}
+
+    {{ .Pre  }}<li><a href="{{ $url }}"
+        {{- if hasPrefix $currentPage.Permalink $url }}class="selected"{{ end -}}
+        title="{{ .Title  }}">{{- .Name -}}</a></li>{{ .Post  }}
 	{{- end }}
-</nav>
+</ul></nav>