From 2eb355ac5eea4224a0a37cb2b0c9941d233772d3 Mon Sep 17 00:00:00 2001
From: ef3d0c3e <ef3d0c3e@pundalik.org>
Date: Thu, 31 Oct 2024 00:10:28 +0100
Subject: [PATCH] Better style

---
 docs/blocks/blockquote.nml |  2 +-
 docs/blocks/code.nml       |  4 +--
 docs/template.nml          |  4 +--
 src/compiler/navigation.rs | 33 ++++++++++++++++++++---
 style.css                  | 55 ++++++++++++++++++++++++++++----------
 5 files changed, 75 insertions(+), 23 deletions(-)

diff --git a/docs/blocks/blockquote.nml b/docs/blocks/blockquote.nml
index ae65de0..e37d1bb 100644
--- a/docs/blocks/blockquote.nml
+++ b/docs/blocks/blockquote.nml
@@ -24,7 +24,7 @@
 > This issue is getting a bit too heated, locking right now
 
 ```Markdown, Given by the following
-> Nest quotes can be nested
+> Quotes can be nested
 >> Here's a subquote
 >>>[author=With author, cite=With cite]
 >>> Here's another subquote
diff --git a/docs/blocks/code.nml b/docs/blocks/code.nml
index 9b3c132..87ca016 100644
--- a/docs/blocks/code.nml
+++ b/docs/blocks/code.nml
@@ -1,6 +1,6 @@
 @import ../template.nml
-@nav.previous = Code
-%<make_doc({"Code"}, "Code", "Code")>%
+@nav.previous = Blockquote
+%<make_doc({"Blocks"}, "Code", "Code")>%
 
 # Blockquotes
 
diff --git a/docs/template.nml b/docs/template.nml
index 7c541ec..a837b59 100644
--- a/docs/template.nml
+++ b/docs/template.nml
@@ -27,8 +27,8 @@ end
 >@
 
 @@style.section = {
-	"link_pos": "Before",
-	"link": ["", "🔗 ", " "]
+	"link_pos": "After",
+	"link": [" ", "🔗 ", " "]
 }
 
 #+TABLE_OF_CONTENT Table of Content
diff --git a/src/compiler/navigation.rs b/src/compiler/navigation.rs
index fc06d55..395022e 100644
--- a/src/compiler/navigation.rs
+++ b/src/compiler/navigation.rs
@@ -40,6 +40,7 @@ impl NavEntries {
 
 				fn process(
 					target: Target,
+					doc_path: &String,
 					categories: &Vec<&str>,
 					did_match: bool,
 					result: &mut String,
@@ -48,9 +49,15 @@ impl NavEntries {
 				) {
 					// Orphans = Links
 					for entry in &entry.entries {
+						let style = if doc_path == &entry.path {
+							" class=\"navbar-entry-current\""
+						} else {
+							" class=\"navbar-entry\""
+						}
+						.to_string();
 						result.push_str(
 							format!(
-								r#"<li><a href="{}">{}</a></li>"#,
+								r#"<li {style}><a href="{}">{}</a></li>"#,
 								Compiler::sanitize(target, entry.path.as_str()),
 								Compiler::sanitize(target, entry.title.as_str())
 							)
@@ -68,19 +75,37 @@ impl NavEntries {
 						result.push_str("<li>");
 						result.push_str(
 							format!(
-								"<details{}><summary>{}</summary>",
+								"<details{}><summary class=\"navbar-category\">{}</summary>",
 								["", " open"][is_match as usize],
 								Compiler::sanitize(target, name)
 							)
 							.as_str(),
 						);
 						result.push_str("<ul>");
-						process(target, categories, is_match, result, ent, depth + 1);
+						process(
+							target,
+							doc_path,
+							categories,
+							is_match,
+							result,
+							ent,
+							depth + 1,
+						);
 						result.push_str("</ul></details></li>");
 					}
 				}
 
-				process(target, &categories, true, &mut result, self, 0);
+				process(
+					target,
+					doc_borrow
+						.get_variable("compiler.output")
+						.unwrap_or(&String::new()),
+					&categories,
+					true,
+					&mut result,
+					self,
+					0,
+				);
 
 				result += r#"</ul></div>"#;
 			}
diff --git a/style.css b/style.css
index fdf1f23..f18933e 100644
--- a/style.css
+++ b/style.css
@@ -48,6 +48,10 @@ em {
 	background-color: #191f26;
 }
 
+a {
+	color: #55c3df;
+}
+
 a.inline-code {
 	padding-left: .1em;
 	padding-right: .1em;
@@ -63,7 +67,7 @@ a.inline-code {
 	left: 0;
 	top: 0;
 	bottom: 0;
-	width: max(calc((100vw - 99ch) / 2 - 15vw), 24ch);
+	width: max(calc((100vw - 99ch) / 2 - 12vw), 24ch);
 	height: 100vh;
 	position: fixed;
 	margin-right: 1em;
@@ -72,10 +76,9 @@ a.inline-code {
 	box-sizing: border-box;
 	overscroll-behavior-y: contain;
 
-	background-color: #161a26;
-	color: #aaa;
+	background-color: #242526;
+	color: #d0d0d0;
 
-	font-size: 0.9em;
 	font-weight: bold;
 }
 
@@ -88,23 +91,47 @@ a.inline-code {
 	}
 }
 
-.navbar a {
-	color: #ffb454;
+.navbar li {
+	display: block;
+	position: relative;
+	padding-left: .25em;
+	margin-left: 5%;
+	width: 90%;
+	margin-top: 0.066em;
+	margin-bottom: 0.066em;
+}
+
+li.navbar-entry:hover, summary.navbar-category:hover
+{
+	background-color: #2f3031;
+	border-radius: 5px;
+}
+
+li.navbar-entry-current
+{
+	background-color: #2f3031;
+	border-radius: 5px;
+}
+
+
+li.navbar-entry a {
+	color: #d0d0d0;
 
 	text-decoration: none;
 	font-weight: normal;
 }
 
-.navbar li {
-	display: block;
-	position: relative;
-	padding-left: 1em;
-	margin-left: 0em;
+li.navbar-entry-current a {
+	color: #55ffb4;
+
+	text-decoration: none;
+	font-weight: normal;
 }
 
 .navbar ul {
 	margin-left: 0em;
 	padding-left: 0;
+	line-height: 1.66em;
 }
 
 .navbar summary{
@@ -125,15 +152,15 @@ a.inline-code {
 	outline: 1px dotted #000;
 }
 
-.navbar summary:before {
+.navbar summary:after {
 	content: "+";
-	color: #ffb454;
+	color: #55ffb4;
 	float: left;
 	text-align: center;
 	width: 1em;
 }
 
-.navbar details[open] > summary:before {
+.navbar details[open] > summary:after {
 	content: "–";
 }