From 95f1aceb1f20f76bd483b8a43a6e615267cc5257 Mon Sep 17 00:00:00 2001
From: Arthur Lu <learthurgo@gmail.com>
Date: Thu, 29 Jun 2023 22:39:21 +0000
Subject: [PATCH] add css linting, fix css linting issues

---
 .stylelintrc.json |  6 ++++++
 css/form.css      |  4 ++--
 css/nav.css       | 17 +++++++++--------
 css/style.css     |  6 +++---
 package.json      | 30 ++++++++++++++++--------------
 5 files changed, 36 insertions(+), 27 deletions(-)
 create mode 100644 .stylelintrc.json

diff --git a/.stylelintrc.json b/.stylelintrc.json
new file mode 100644
index 0000000..752db07
--- /dev/null
+++ b/.stylelintrc.json
@@ -0,0 +1,6 @@
+{
+	"extends": [
+		"stylelint-config-standard"
+	],
+	"rules": {}
+}
\ No newline at end of file
diff --git a/css/form.css b/css/form.css
index f8358b6..a0de5e0 100644
--- a/css/form.css
+++ b/css/form.css
@@ -6,8 +6,8 @@
 }
 
 .input-grid * {
-	margin-top: 0px;
-	margin-bottom: 0px;
+	margin-top: 0;
+	margin-bottom: 0;
 }
 
 .input-grid .last-item {
diff --git a/css/nav.css b/css/nav.css
index 75c4095..eb92fbb 100644
--- a/css/nav.css
+++ b/css/nav.css
@@ -29,7 +29,7 @@ header {
 
 header h1 {
 	font-size: 18px;
-	margin: 0px;
+	margin: 0;
 	background-color: var(--nav-header-bg-color);
 	color: var(--nav-header-text-color);
 }
@@ -50,8 +50,8 @@ label[for="navtoggle"], #navtoggle {
 	display: none;
 }
 
-@media screen and (min-width: 600px){
-	nav a:hover, nav a[aria-current="true"], nav:hover a[aria-current="true"]:hover {
+@media screen and (width >= 600px){
+	nav a:hover, nav a[aria-current="true"] {
 		color: var(--nav-link-active-text-color);
 		background-color: var(--nav-link-active-bg-color);
 	}
@@ -61,17 +61,18 @@ label[for="navtoggle"], #navtoggle {
 		background-color: var(--nav-bg-color);
 	}
 
+	nav:hover a[aria-current="true"]:hover {
+		color: var(--nav-link-active-text-color);
+		background-color: var(--nav-link-active-bg-color);
+	}
+
 	nav {
 		display: flex;
 		align-items: center;
 	}
-
-	nav {
-		display: flex;
-	}
 }
 
-@media screen and (max-width: 600px){
+@media screen and (width <= 600px){
 	header {
 		display: grid;
 		grid-template-columns: 1fr auto;
diff --git a/css/style.css b/css/style.css
index c232c8d..f37c21b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -5,7 +5,7 @@
 	--main-bg-color: #404040;
 	--main-text-color: white;
 	--main-card-bg-color: #202020;
-	--main-card-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.8), 0 2px 10px 0 rgba(0,0,0,0.8);
+	--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%);
 	--main-table-header-bg-color: black;
 	--main-input-bg-color: #404040;
 }
@@ -15,7 +15,7 @@
 		--main-bg-color: white;
 		--main-text-color: black;
 		--main-card-bg-color: white;
-		--main-card-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0,0,0,0.2);
+		--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%);
 		--main-table-header-bg-color: #808080;
 		--main-input-bg-color: white;
 	}
@@ -25,7 +25,7 @@ html {
 	box-sizing: border-box;
 }
 
-h1, h2, h3, h3, h4, h5, h6, p, a, label, button, input, select, td {
+h1, h2, h3, h4, h5, h6, p, a, label, button, input, select, td {
 	font-family: monospace;
 }
 
diff --git a/package.json b/package.json
index 3725374..5a8fbc6 100644
--- a/package.json
+++ b/package.json
@@ -1,16 +1,18 @@
 {
-  "name": "proxmoxaas-client",
-  "version": "0.0.1",
-  "description": "Front-end for ProxmoxAAS",
-  "type": "module",
-  "scripts": {
-    "lint": "eslint --fix ."
-  },
-  "devDependencies": {
-    "eslint": "^8.43.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-n": "^16.0.1",
-    "eslint-plugin-promise": "^6.1.1"
-  }
+	"name": "proxmoxaas-client",
+	"version": "0.0.1",
+	"description": "Front-end for ProxmoxAAS",
+	"type": "module",
+	"scripts": {
+		"lint": "stylelint --fix **/*.css; eslint --fix .;"
+	},
+	"devDependencies": {
+		"eslint": "^8.43.0",
+		"eslint-config-standard": "^17.1.0",
+		"eslint-plugin-import": "^2.27.5",
+		"eslint-plugin-n": "^16.0.1",
+		"eslint-plugin-promise": "^6.1.1",
+		"stylelint": "^15.9.0",
+		"stylelint-config-standard": "^33.0.0"
+	}
 }