From c9ce70169682852ab6fb521af6f692ebf5ed7836 Mon Sep 17 00:00:00 2001
From: Arthur Lu <root@tronnet.net>
Date: Thu, 6 Apr 2023 19:47:40 +0000
Subject: [PATCH] improve some styling

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
---
 config.html       |  2 +-
 css/style.css     | 36 +++++++++++++++++-------------------
 scripts/config.js |  2 +-
 3 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/config.html b/config.html
index 66de269..1ea6380 100644
--- a/config.html
+++ b/config.html
@@ -21,7 +21,7 @@
 			</nav>
 		</header>
 		<main>
-			<h2 id="name">Instances / %{vmname}</h2><hr>
+			<h2 id="name"><a href="index.html">Instances</a> / %{vmname}</h2><hr>
 			<form style="margin-left: auto; margin-right: auto;">
 				<fieldset>
 					<legend>Resources</legend>
diff --git a/css/style.css b/css/style.css
index d67ce86..53f12f7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,8 +1,10 @@
 :root {
-    --accent-bkg-color: black;
+	--accent-bkg-color: black;
 	--accent-txt-color: white;
+	--accent-lnk-color: white;
 	--content-bkg-color: white;
 	--content-txt-color: black;
+	--content-lnk-color: #6666FF;
 	--form-disabled-color: #606060;
 	--button-accept: #0F0;
 	--success-color: #0F0;
@@ -53,30 +55,26 @@ nav {
 }
 
 nav a {
-	color: var(--accent-txt-color);
-	font-size: x-large;
-	text-decoration: none;
-	position: relative;
+	background-color: var(--accent-bkg-color);
+	color: var(--accent-lnk-color);
+	font-size: xx-large;
+	text-decoration: underline 0.1em var(--accent-bkg-color);
+	transition: text-decoration-color 250ms;
 }
 
-nav a:before {
-	position: absolute;
-    width: 0px;
-    height: 100%;
-    left: 0px;
-    top: 0px;
-    content: '';
-    background: var(--accent-txt-color);
-    opacity: 0.3;
-    transition: all 0.3s;
+nav a:hover, nav a[aria-current="true"] {
+	text-decoration: underline 0.1em var(--accent-lnk-color);
 }
 
-nav a[aria-current="true"]:before {
-	width: 10px;
+main a {
+	font-size: inherit;
+	color: var(--content-lnk-color);
+	text-decoration: underline 0.1em var(--content-bkg-color);
+	transition: text-decoration-color 250ms;
 }
 
-nav a:hover:before {
-    width: 100%;
+main a:hover {
+	text-decoration: underline 0.1em var(--content-lnk-color);
 }
 
 h1 {
diff --git a/scripts/config.js b/scripts/config.js
index 4f857e1..0760373 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -35,7 +35,7 @@ async function getConfig () {
 
 function populateResources () {
 	let name = type === "qemu" ? "name" : "hostname";
-	document.querySelector("#name").innerText = document.querySelector("#name").innerText.replace("%{vmname}", config.data[name]);
+	document.querySelector("#name").innerHTML = document.querySelector("#name").innerHTML.replace("%{vmname}", config.data[name]);
 	addResourceLine("resources", "images/resources/cpu.svg", "Cores", {type: "number", value: config.data.cores, min: 1, max: 8192}, "Threads"); // TODO add max from quota API
 	addResourceLine("resources", "images/resources/ram.svg", "Memory", {type: "number", value: config.data.memory, min: 16, step: 1}, "MiB"); // TODO add max from quota API