Add prettier pre-commit hook
This commit is contained in:
parent
044a7f1c06
commit
71269377b4
7 changed files with 235 additions and 167 deletions
|
@ -13,3 +13,9 @@ repos:
|
||||||
hooks:
|
hooks:
|
||||||
- id: djlint-django
|
- id: djlint-django
|
||||||
args: ["--reformat"]
|
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/"
|
||||||
|
|
|
@ -5,7 +5,7 @@ form ul.errorlist {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
form>table>tbody>tr>th {
|
form > table > tbody > tr > th {
|
||||||
background: var(--bg-01);
|
background: var(--bg-01);
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
}
|
}
|
||||||
|
@ -19,11 +19,21 @@ form tbody textarea {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
line-height: 1.5;
|
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 {
|
.buttons {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
@ -40,11 +50,11 @@ table.file-input tr :last-child {padding-right: 0}
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
.buttons input[type="submit"] {
|
.buttons input[type="submit"] {
|
||||||
border: .1rem solid var(--green);
|
border: 0.1rem solid var(--green);
|
||||||
background: var(--green-1);
|
background: var(--green-1);
|
||||||
}
|
}
|
||||||
.buttons input[type="reset"] {
|
.buttons input[type="reset"] {
|
||||||
border: .1rem solid var(--red);
|
border: 0.1rem solid var(--red);
|
||||||
background: var(--red-1);
|
background: var(--red-1);
|
||||||
}
|
}
|
||||||
.buttons a.del {
|
.buttons a.del {
|
||||||
|
|
|
@ -2,5 +2,5 @@ a.big-link {
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
}
|
}
|
||||||
a.big-link > i {
|
a.big-link > i {
|
||||||
margin-right: .5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
@import "https://rsms.me/inter/inter.css";
|
@import "https://rsms.me/inter/inter.css";
|
||||||
|
|
||||||
*, *::before, *::after {
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -34,8 +36,8 @@
|
||||||
--red-1: var(--theme-4);
|
--red-1: var(--theme-4);
|
||||||
--green-1: var(--theme);
|
--green-1: var(--theme);
|
||||||
|
|
||||||
--border: .5em;
|
--border: 0.5em;
|
||||||
--radius: .25em;
|
--radius: 0.25em;
|
||||||
|
|
||||||
--num: "tnum", "ss01", "ss02", "case";
|
--num: "tnum", "ss01", "ss02", "case";
|
||||||
}
|
}
|
||||||
|
@ -63,10 +65,16 @@ a:hover {
|
||||||
text-decoration: underline;
|
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;
|
padding: 2rem;
|
||||||
}
|
}
|
||||||
main {
|
main {
|
||||||
|
@ -100,7 +108,7 @@ nav ul {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
nav .skip-link {
|
nav .skip-link {
|
||||||
opacity: .1;
|
opacity: 0.1;
|
||||||
}
|
}
|
||||||
nav .skip-link:active,
|
nav .skip-link:active,
|
||||||
nav .skip-link:focus {
|
nav .skip-link:focus {
|
||||||
|
@ -128,15 +136,21 @@ footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-feature-settings: var(--num);
|
font-feature-settings: var(--num);
|
||||||
}
|
}
|
||||||
#pagination a {width: 2rem}
|
#pagination a {
|
||||||
|
width: 2rem;
|
||||||
|
}
|
||||||
#pagination a.cur {
|
#pagination a.cur {
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
text-decoration: underline dotted;
|
text-decoration: underline dotted;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (width < 1024px) {
|
@media (width < 1024px) {
|
||||||
body {grid-template-columns: 1fr}
|
body {
|
||||||
nav, main, footer {
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
nav,
|
||||||
|
main,
|
||||||
|
footer {
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
grid-row: auto;
|
grid-row: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
@ -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 {
|
.plot td.bar {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -7,7 +11,7 @@ table.full-width col.bar {width: auto}
|
||||||
}
|
}
|
||||||
.plot td.bar div {
|
.plot td.bar div {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: .5rem;
|
height: 0.5rem;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -25,29 +29,44 @@ table.full-width col.bar {width: auto}
|
||||||
right: 0;
|
right: 0;
|
||||||
border-radius: var(--radius) 0 0 var(--radius);
|
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 {
|
.plot td.bar div.tot {
|
||||||
z-index: 10;
|
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 {
|
.plot td.bar div.tot span {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin: 0 var(--gap);
|
margin: 0 var(--gap);
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
top: .5rem;
|
top: 0.5rem;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
font-feature-settings: var(--num);
|
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) {
|
@media (width < 720px) {
|
||||||
.plot .bar {width: 0;overflow: hidden}
|
.plot .bar {
|
||||||
|
width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
table.more tbody:last-child tr:last-child {
|
||||||
border-bottom: .1rem dashed var(--gray);
|
border-bottom: 0.1rem dashed var(--gray);
|
||||||
}
|
}
|
||||||
table.full-width {
|
table.full-width {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -9,22 +14,36 @@ table.full-width {
|
||||||
thead {
|
thead {
|
||||||
background: var(--bg-01);
|
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 {
|
tr {
|
||||||
border: .1rem solid var(--gray);
|
border: 0.1rem solid var(--gray);
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
line-height: 2rem;
|
line-height: 2rem;
|
||||||
}
|
}
|
||||||
td, th {
|
td,
|
||||||
|
th {
|
||||||
padding: 0 var(--gap);
|
padding: 0 var(--gap);
|
||||||
position: relative;
|
position: relative;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.date, .value {
|
.date,
|
||||||
|
.value {
|
||||||
font-feature-settings: var(--num);
|
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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue