Add prettier pre-commit hook

.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/"

nummi/main/static/main/css/form.css

@@ -19,11 +19,21 @@ form tbody textarea {
   height: 100%;
   line-height: 1.5;
 }
-form input[type="checkbox"] {width: initial}
+form input[type="checkbox"] {
-table.file-input tr {border: none}
+  width: initial;
-table.file-input th {text-align: left}
+}
-table.file-input tr :first-child {padding-left: 0}
+table.file-input tr {
-table.file-input tr :last-child {padding-right: 0}
+  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;
@@ -40,11 +50,11 @@ table.file-input tr :last-child {padding-right: 0}
   text-decoration: underline;
 }
 .buttons input[type="submit"] {
-	border: .1rem solid var(--green);
+  border: 0.1rem solid var(--green);
   background: var(--green-1);
 }
 .buttons input[type="reset"] {
-	border: .1rem solid var(--red);
+  border: 0.1rem solid var(--red);
   background: var(--red-1);
 }
 .buttons a.del {

nummi/main/static/main/css/index.css

@@ -2,5 +2,5 @@ a.big-link {
   margin-right: 1em;
 }
 a.big-link > i {
-	margin-right: .5rem;
+  margin-right: 0.5rem;
 }

nummi/main/static/main/css/main.css

@@ -1,6 +1,8 @@
 @import "https://rsms.me/inter/inter.css";
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -34,8 +36,8 @@
   --red-1: var(--theme-4);
   --green-1: var(--theme);
 
-	--border: .5em;
+  --border: 0.5em;
-	--radius: .25em;
+  --radius: 0.25em;
 
   --num: "tnum", "ss01", "ss02", "case";
 }
@@ -63,10 +65,16 @@ a:hover {
   text-decoration: underline;
 }
 
-.red {color: var(--red)}
+.red {
-.green {color: var(--text-green)}
+  color: var(--red);
+}
+.green {
+  color: var(--text-green);
+}
 
-main, nav, footer {
+main,
+nav,
+footer {
   padding: 2rem;
 }
 main {
@@ -100,7 +108,7 @@ nav ul {
   position: relative;
 }
 nav .skip-link {
-	opacity: .1;
+  opacity: 0.1;
 }
 nav .skip-link:active,
 nav .skip-link:focus {
@@ -128,15 +136,21 @@ footer {
   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;
 }
 
 @media (width < 1024px) {
-	body {grid-template-columns: 1fr}
+  body {
-	nav, main, footer {
+    grid-template-columns: 1fr;
+  }
+  nav,
+  main,
+  footer {
     grid-column: 1;
     grid-row: auto;
     position: relative;

nummi/main/static/main/css/plot.css

@@ -1,5 +1,9 @@
-table.full-width col.bar {width: auto}
+table.full-width col.bar {
-.plot {overflow-x: auto}
+  width: auto;
+}
+.plot {
+  overflow-x: auto;
+}
 
 .plot td.bar {
   position: relative;
@@ -7,7 +11,7 @@ table.full-width col.bar {width: auto}
 }
 .plot td.bar div {
   position: absolute;
-	height: .5rem;
+  height: 0.5rem;
   top: 0;
 }
 
@@ -25,29 +29,44 @@ table.full-width col.bar {width: auto}
   right: 0;
   border-radius: var(--radius) 0 0 var(--radius);
 }
-.plot td.bar.m div {background: var(--red-1)}
+.plot td.bar.m div {
-.plot td.bar.p div {background: var(--green-1)}
+  background: var(--red-1);
+}
+.plot td.bar.p div {
+  background: var(--green-1);
+}
 
 .plot td.bar div.tot {
   z-index: 10;
-	height: .5rem;
+  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;
+  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.p div.tot span {
-.plot td.bar.m div.tot span {right: 0}
+  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;
+  }
 }

nummi/main/static/main/css/table.css

@@ -1,7 +1,12 @@
-.table, form {overflow-x: auto}
+.table,
-table {border-collapse: collapse}
+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%;
@@ -9,22 +14,36 @@ table.full-width {
 thead {
   background: var(--bg-01);
 }
-table.full-width col {width: 8rem}
+table.full-width col {
-table col.icon {width: 1ch}
+  width: 8rem;
+}
+table col.icon {
+  width: 1ch;
+}
 tr {
-	border: .1rem solid var(--gray);
+  border: 0.1rem solid var(--gray);
   height: 2rem;
   line-height: 2rem;
 }
-td, th {
+td,
+th {
   padding: 0 var(--gap);
   position: relative;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.date, .value {
+.date,
+.value {
   font-feature-settings: var(--num);
 }
-.l {text-align: left}
+.l {
-.r, .value {text-align: right}
+  text-align: left;
-.c, .date {text-align: center}
+}
+.r,
+.value {
+  text-align: right;
+}
+.c,
+.date {
+  text-align: center;
+}