From 71269377b414d9ef9fcecbb72fa516669f6fa8ae Mon Sep 17 00:00:00 2001
From: "Edgar P. Burkhart" <git@edgarpierre.fr>
Date: Tue, 18 Apr 2023 19:51:15 +0200
Subject: [PATCH] Add prettier pre-commit hook

---
 .pre-commit-config.yaml              |   6 +
 nummi/main/static/main/css/form.css  |  72 ++++++-----
 nummi/main/static/main/css/index.css |   4 +-
 nummi/main/static/main/css/main.css  | 174 +++++++++++++++------------
 nummi/main/static/main/css/page.css  |   2 +-
 nummi/main/static/main/css/plot.css  |  85 ++++++++-----
 nummi/main/static/main/css/table.css |  59 ++++++---
 7 files changed, 235 insertions(+), 167 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index e97183d..9c2ed33 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -13,3 +13,9 @@ repos:
     hooks:
       - id: djlint-django
         args: ["--reformat"]
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: "v3.0.0-alpha.6"
+    hooks:
+      - id: prettier
+        types_or: ["css", "javascript"]
+        exclude: "fontawesome/"
diff --git a/nummi/main/static/main/css/form.css b/nummi/main/static/main/css/form.css
index e0d81bd..f40bb62 100644
--- a/nummi/main/static/main/css/form.css
+++ b/nummi/main/static/main/css/form.css
@@ -1,52 +1,62 @@
 form ul.errorlist {
-	color: var(--red);
-	font-weight: 550;
-	list-style-type: "! ";
-	margin: 0;
+  color: var(--red);
+  font-weight: 550;
+  list-style-type: "! ";
+  margin: 0;
 }
 
-form>table>tbody>tr>th {
-	background: var(--bg-01);
-	background-clip: padding-box;
+form > table > tbody > tr > th {
+  background: var(--bg-01);
+  background-clip: padding-box;
 }
 form tbody input,
 form tbody select,
 form tbody textarea {
-	font: inherit;
-	border: none;
-	background: var(--bg);
-	width: 100%;
-	height: 100%;
-	line-height: 1.5;
+  font: inherit;
+  border: none;
+  background: var(--bg);
+  width: 100%;
+  height: 100%;
+  line-height: 1.5;
+}
+form input[type="checkbox"] {
+  width: initial;
+}
+table.file-input tr {
+  border: none;
+}
+table.file-input th {
+  text-align: left;
+}
+table.file-input tr :first-child {
+  padding-left: 0;
+}
+table.file-input tr :last-child {
+  padding-right: 0;
 }
-form input[type="checkbox"] {width: initial}
-table.file-input tr {border: none}
-table.file-input th {text-align: left}
-table.file-input tr :first-child {padding-left: 0}
-table.file-input tr :last-child {padding-right: 0}
 
 .buttons {
-	text-align: right;
+  text-align: right;
 }
 .buttons input {
-	font: inherit;
-	line-height: 1.5;
-	margin-left: var(--gap);
-	border-radius: var(--radius);
-	padding: 0 var(--gap);
-	cursor: pointer;
+  font: inherit;
+  line-height: 1.5;
+  margin-left: var(--gap);
+  border-radius: var(--radius);
+  padding: 0 var(--gap);
+  cursor: pointer;
 }
 .buttons input:hover {
-	text-decoration: underline;
+  text-decoration: underline;
 }
 .buttons input[type="submit"] {
-	border: .1rem solid var(--green);
-	background: var(--green-1);
+  border: 0.1rem solid var(--green);
+  background: var(--green-1);
 }
 .buttons input[type="reset"] {
-	border: .1rem solid var(--red);
-	background: var(--red-1);
+  border: 0.1rem solid var(--red);
+  background: var(--red-1);
 }
 .buttons a.del {
-	color: var(--red);
+  color: var(--red);
 }
diff --git a/nummi/main/static/main/css/index.css b/nummi/main/static/main/css/index.css
index 1694153..4df25da 100644
--- a/nummi/main/static/main/css/index.css
+++ b/nummi/main/static/main/css/index.css
@@ -1,6 +1,6 @@
 a.big-link {
-	margin-right: 1em;
+  margin-right: 1em;
 }
 a.big-link > i {
-	margin-right: .5rem;
+  margin-right: 0.5rem;
 }
diff --git a/nummi/main/static/main/css/main.css b/nummi/main/static/main/css/main.css
index 35ebf2c..dd3f9bd 100644
--- a/nummi/main/static/main/css/main.css
+++ b/nummi/main/static/main/css/main.css
@@ -1,145 +1,159 @@
 @import "https://rsms.me/inter/inter.css";
 
-*, *::before, *::after {
-	box-sizing: border-box;
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
 }
 
 :root {
-	--theme: #66cc66;
-	--theme-0: #338033;
-	--theme-1: #99ff99;
-	--theme-2: var(--theme);
-	--theme-3: #802653;
-	--theme-4: #cc6699;
-	--gray: #dedede;
+  --theme: #66cc66;
+  --theme-0: #338033;
+  --theme-1: #99ff99;
+  --theme-2: var(--theme);
+  --theme-3: #802653;
+  --theme-4: #cc6699;
+  --gray: #dedede;
 
-	--text-theme: var(--text);
+  --text-theme: var(--text);
 
-	--bg: #ffffff;
-	--text: #000000de;
+  --bg: #ffffff;
+  --text: #000000de;
 
-	--bg-inv: var(--theme-1);
-	--text-inv: #ffffffde;
+  --bg-inv: var(--theme-1);
+  --text-inv: #ffffffde;
 
-	--bg-01: #f0f0f0;
+  --bg-01: #f0f0f0;
 
-	--text-green: #296629;
-	--text-link: var(--text-green);
+  --text-green: #296629;
+  --text-link: var(--text-green);
 
-	--gap: 1rem;
+  --gap: 1rem;
 
-	--red: var(--theme-3);
-	--green: var(--theme-0);
+  --red: var(--theme-3);
+  --green: var(--theme-0);
 
-	--red-1: var(--theme-4);
-	--green-1: var(--theme);
+  --red-1: var(--theme-4);
+  --green-1: var(--theme);
 
-	--border: .5em;
-	--radius: .25em;
+  --border: 0.5em;
+  --radius: 0.25em;
 
-	--num: "tnum", "ss01", "ss02", "case";
+  --num: "tnum", "ss01", "ss02", "case";
 }
 
 body {
-	font-family: "Inter var experimental", "Inter var", "Inter", sans-serif;
-	margin: 0;
+  font-family: "Inter var experimental", "Inter var", "Inter", sans-serif;
+  margin: 0;
 
-	background: var(--bg);
-	color: var(--text);
+  background: var(--bg);
+  color: var(--text);
 
-	display: grid;
-	grid-template-columns: max-content 1fr;
+  display: grid;
+  grid-template-columns: max-content 1fr;
 }
 
 p {
-	line-height: 2em;
+  line-height: 2em;
 }
 a {
-	color: var(--text-link);
-	text-decoration: none;
-	display: inline-block;
+  color: var(--text-link);
+  text-decoration: none;
+  display: inline-block;
 }
 a:hover {
-	text-decoration: underline;
+  text-decoration: underline;
 }
 
-.red {color: var(--red)}
-.green {color: var(--text-green)}
+.red {
+  color: var(--red);
+}
+.green {
+  color: var(--text-green);
+}
 
-main, nav, footer {
-	padding: 2rem;
+main,
+nav,
+footer {
+  padding: 2rem;
 }
 main {
-	grid-column: 2;
-	grid-row: 1;
-	overflow-x: hidden;
+  grid-column: 2;
+  grid-row: 1;
+  overflow-x: hidden;
 }
 nav {
-	grid-column: 1;
-	grid-row: 1;
+  grid-column: 1;
+  grid-row: 1;
 
-	height: 100vh;
-	position: sticky;
-	top: 0;
+  height: 100vh;
+  position: sticky;
+  top: 0;
 
-	background: var(--bg-01);
-	line-height: 2rem;
+  background: var(--bg-01);
+  line-height: 2rem;
 }
 nav h1 {
-	font-size: 3rem;
-	height: 1cap;
-	line-height: 1cap;
+  font-size: 3rem;
+  height: 1cap;
+  line-height: 1cap;
 }
 nav h1 img {
-	height: inherit;
+  height: inherit;
 }
 nav ul {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	position: relative;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  position: relative;
 }
 nav .skip-link {
-	opacity: .1;
+  opacity: 0.1;
 }
 nav .skip-link:active,
 nav .skip-link:focus {
-	opacity: initial;
+  opacity: initial;
 }
 nav a.cur {
-	font-weight: 550;
+  font-weight: 550;
 }
 nav a.cur::after {
-	content: "◎";
-	position: absolute;
-	right: 0;
+  content: "◎";
+  position: absolute;
+  right: 0;
 }
 nav > :first-child,
 main > :first-child {
-	margin-top: 0;
+  margin-top: 0;
 }
 footer {
-	text-align: center;
-	grid-column: 2;
-	font-weight: 250;
+  text-align: center;
+  grid-column: 2;
+  font-weight: 250;
 }
 
 #pagination {
-	text-align: center;
-	font-feature-settings: var(--num);
+  text-align: center;
+  font-feature-settings: var(--num);
+}
+#pagination a {
+  width: 2rem;
 }
-#pagination a {width: 2rem}
 #pagination a.cur {
-	font-weight: 650;
-	text-decoration: underline dotted;
+  font-weight: 650;
+  text-decoration: underline dotted;
 }
 
 @media (width < 1024px) {
-	body {grid-template-columns: 1fr}
-	nav, main, footer {
-		grid-column: 1;
-		grid-row: auto;
-		position: relative;
-		height: initial;
-	}
+  body {
+    grid-template-columns: 1fr;
+  }
+  nav,
+  main,
+  footer {
+    grid-column: 1;
+    grid-row: auto;
+    position: relative;
+    height: initial;
+  }
 }
diff --git a/nummi/main/static/main/css/page.css b/nummi/main/static/main/css/page.css
index a1fd720..188aa6d 100644
--- a/nummi/main/static/main/css/page.css
+++ b/nummi/main/static/main/css/page.css
@@ -1,3 +1,3 @@
 .pagination .current {
-	font-feature-settings: "tnum", "ss01";
+  font-feature-settings: "tnum", "ss01";
 }
diff --git a/nummi/main/static/main/css/plot.css b/nummi/main/static/main/css/plot.css
index 0748511..d38d575 100644
--- a/nummi/main/static/main/css/plot.css
+++ b/nummi/main/static/main/css/plot.css
@@ -1,53 +1,72 @@
-table.full-width col.bar {width: auto}
-.plot {overflow-x: auto}
+table.full-width col.bar {
+  width: auto;
+}
+.plot {
+  overflow-x: auto;
+}
 
 .plot td.bar {
-	position: relative;
-	padding: 0;
+  position: relative;
+  padding: 0;
 }
 .plot td.bar div {
-	position: absolute;
-	height: .5rem;
-	top: 0;
+  position: absolute;
+  height: 0.5rem;
+  top: 0;
 }
 
 .plot td.bar div:not(.tot) {
-	width: 0;
-	box-sizing: border-box;
-	z-index: 1;
-	display: inline-block;
+  width: 0;
+  box-sizing: border-box;
+  z-index: 1;
+  display: inline-block;
 }
 .plot td.bar.p div {
-	left: 0;
-	border-radius: 0 var(--radius) var(--radius) 0;
+  left: 0;
+  border-radius: 0 var(--radius) var(--radius) 0;
 }
 .plot td.bar.m div {
-	right: 0;
-	border-radius: var(--radius) 0 0 var(--radius);
+  right: 0;
+  border-radius: var(--radius) 0 0 var(--radius);
+}
+.plot td.bar.m div {
+  background: var(--red-1);
+}
+.plot td.bar.p div {
+  background: var(--green-1);
 }
-.plot td.bar.m div {background: var(--red-1)}
-.plot td.bar.p div {background: var(--green-1)}
 
 .plot td.bar div.tot {
-	z-index: 10;
-	height: .5rem;
+  z-index: 10;
+  height: 0.5rem;
+}
+.plot td.bar.m div.tot {
+  background: var(--red);
+}
+.plot td.bar.p div.tot {
+  background: var(--green);
 }
-.plot td.bar.m div.tot {background: var(--red)}
-.plot td.bar.p div.tot {background: var(--green)}
 .plot td.bar div.tot span {
-	position: absolute;
-	display: inline-block;
-	white-space: nowrap;
-	margin: 0 var(--gap);
-	font-weight: 650;
-	top: .5rem;
-	line-height: 1.5rem;
-	height: 1.5rem;
-	font-feature-settings: var(--num);
+  position: absolute;
+  display: inline-block;
+  white-space: nowrap;
+  margin: 0 var(--gap);
+  font-weight: 650;
+  top: 0.5rem;
+  line-height: 1.5rem;
+  height: 1.5rem;
+  font-feature-settings: var(--num);
+}
+.plot td.bar.p div.tot span {
+  left: 0;
+}
+.plot td.bar.m div.tot span {
+  right: 0;
 }
-.plot td.bar.p div.tot span {left: 0}
-.plot td.bar.m div.tot span {right: 0}
 
 @media (width < 720px) {
-	.plot .bar {width: 0;overflow: hidden}
+  .plot .bar {
+    width: 0;
+    overflow: hidden;
+  }
 }
diff --git a/nummi/main/static/main/css/table.css b/nummi/main/static/main/css/table.css
index 10b94cd..1fd4076 100644
--- a/nummi/main/static/main/css/table.css
+++ b/nummi/main/static/main/css/table.css
@@ -1,30 +1,49 @@
-.table, form {overflow-x: auto}
-table {border-collapse: collapse}
+.table,
+form {
+  overflow-x: auto;
+}
+table {
+  border-collapse: collapse;
+}
 table.more tbody:last-child tr:last-child {
-	border-bottom: .1rem dashed var(--gray);
+  border-bottom: 0.1rem dashed var(--gray);
 }
 table.full-width {
-	width: 100%;
+  width: 100%;
 }
 thead {
-	background: var(--bg-01);
+  background: var(--bg-01);
+}
+table.full-width col {
+  width: 8rem;
+}
+table col.icon {
+  width: 1ch;
 }
-table.full-width col {width: 8rem}
-table col.icon {width: 1ch}
 tr {
-	border: .1rem solid var(--gray);
-	height: 2rem;
-	line-height: 2rem;
+  border: 0.1rem solid var(--gray);
+  height: 2rem;
+  line-height: 2rem;
 }
-td, th {
-	padding: 0 var(--gap);
-	position: relative;
-	white-space: nowrap;
-	text-overflow: ellipsis;
+td,
+th {
+  padding: 0 var(--gap);
+  position: relative;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
-.date, .value {
-	font-feature-settings: var(--num);
+.date,
+.value {
+  font-feature-settings: var(--num);
+}
+.l {
+  text-align: left;
+}
+.r,
+.value {
+  text-align: right;
+}
+.c,
+.date {
+  text-align: center;
 }
-.l {text-align: left}
-.r, .value {text-align: right}
-.c, .date {text-align: center}
