Add prettier pre-commit hook
This commit is contained in:
parent
044a7f1c06
commit
71269377b4
GPG key ID:
9833D3C5A25BD227
7 changed files with 235 additions and 167 deletions
|
|
@ -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/"
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
a.big-link {
|
||||
margin-right: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
a.big-link > i {
|
||||
margin-right: .5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.pagination .current {
|
||||
font-feature-settings: "tnum", "ss01";
|
||||
font-feature-settings: "tnum", "ss01";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in a new issue