edpibu/nummi
1
Fork 0
Code Issues 4 Releases Activity

Add prettier pre-commit hook

Browse source
This commit is contained in:
Edgar P. Burkhart 2023-04-18 19:51:15 +02:00
parent 044a7f1c06
commit 71269377b4
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
7 changed files with 235 additions and 167 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.pre-commit-config.yaml
View file

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

72
nummi/main/static/main/css/form.css
View file

@ -1,52 +1,62 @@
form ul.errorlist { form ul.errorlist {
color: var(--red); color: var(--red);
font-weight: 550; font-weight: 550;
list-style-type: "! "; list-style-type: "! ";
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;
} }
form tbody input, form tbody input,
form tbody select, form tbody select,
form tbody textarea { form tbody textarea {
font: inherit; font: inherit;
border: none; border: none;
background: var(--bg); background: var(--bg);
width: 100%; width: 100%;
height: 100%; height: 100%;
line-height: 1.5; 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 { .buttons {
text-align: right; text-align: right;
} }
.buttons input { .buttons input {
font: inherit; font: inherit;
line-height: 1.5; line-height: 1.5;
margin-left: var(--gap); margin-left: var(--gap);
border-radius: var(--radius); border-radius: var(--radius);
padding: 0 var(--gap); padding: 0 var(--gap);
cursor: pointer; cursor: pointer;
} }
.buttons input:hover { .buttons input:hover {
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 {
color: var(--red); color: var(--red);
} }

4
nummi/main/static/main/css/index.css
View file

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

174
nummi/main/static/main/css/main.css
View file

@ -1,145 +1,159 @@
@import "https://rsms.me/inter/inter.css"; @import "https://rsms.me/inter/inter.css";
*, *::before, *::after { *,
box-sizing: border-box; *::before,
*::after {
box-sizing: border-box;
} }
:root { :root {
--theme: #66cc66; --theme: #66cc66;
--theme-0: #338033; --theme-0: #338033;
--theme-1: #99ff99; --theme-1: #99ff99;
--theme-2: var(--theme); --theme-2: var(--theme);
--theme-3: #802653; --theme-3: #802653;
--theme-4: #cc6699; --theme-4: #cc6699;
--gray: #dedede; --gray: #dedede;
--text-theme: var(--text); --text-theme: var(--text);
--bg: #ffffff; --bg: #ffffff;
--text: #000000de; --text: #000000de;
--bg-inv: var(--theme-1); --bg-inv: var(--theme-1);
--text-inv: #ffffffde; --text-inv: #ffffffde;
--bg-01: #f0f0f0; --bg-01: #f0f0f0;
--text-green: #296629; --text-green: #296629;
--text-link: var(--text-green); --text-link: var(--text-green);
--gap: 1rem; --gap: 1rem;
--red: var(--theme-3); --red: var(--theme-3);
--green: var(--theme-0); --green: var(--theme-0);
--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";
} }
body { body {
font-family: "Inter var experimental", "Inter var", "Inter", sans-serif; font-family: "Inter var experimental", "Inter var", "Inter", sans-serif;
margin: 0; margin: 0;
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
display: grid; display: grid;
grid-template-columns: max-content 1fr; grid-template-columns: max-content 1fr;
} }
p { p {
line-height: 2em; line-height: 2em;
} }
a { a {
color: var(--text-link); color: var(--text-link);
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
} }
a:hover { 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,
padding: 2rem; nav,
footer {
padding: 2rem;
} }
main { main {
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;
overflow-x: hidden; overflow-x: hidden;
} }
nav { nav {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
height: 100vh; height: 100vh;
position: sticky; position: sticky;
top: 0; top: 0;
background: var(--bg-01); background: var(--bg-01);
line-height: 2rem; line-height: 2rem;
} }
nav h1 { nav h1 {
font-size: 3rem; font-size: 3rem;
height: 1cap; height: 1cap;
line-height: 1cap; line-height: 1cap;
} }
nav h1 img { nav h1 img {
height: inherit; height: inherit;
} }
nav ul { nav ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
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 {
opacity: initial; opacity: initial;
} }
nav a.cur { nav a.cur {
font-weight: 550; font-weight: 550;
} }
nav a.cur::after { nav a.cur::after {
content: "◎"; content: "◎";
position: absolute; position: absolute;
right: 0; right: 0;
} }
nav > :first-child, nav > :first-child,
main > :first-child { main > :first-child {
margin-top: 0; margin-top: 0;
} }
footer { footer {
text-align: center; text-align: center;
grid-column: 2; grid-column: 2;
font-weight: 250; font-weight: 250;
} }
#pagination { #pagination {
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;
grid-column: 1; }
grid-row: auto; nav,
position: relative; main,
height: initial; footer {
} grid-column: 1;
grid-row: auto;
position: relative;
height: initial;
}
} }

2
nummi/main/static/main/css/page.css
View file

@ -1,3 +1,3 @@
.pagination .current { .pagination .current {
font-feature-settings: "tnum", "ss01"; font-feature-settings: "tnum", "ss01";
} }

85
nummi/main/static/main/css/plot.css
View file

@ -1,53 +1,72 @@
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;
padding: 0; padding: 0;
} }
.plot td.bar div { .plot td.bar div {
position: absolute; position: absolute;
height: .5rem; height: 0.5rem;
top: 0; top: 0;
} }
.plot td.bar div:not(.tot) { .plot td.bar div:not(.tot) {
width: 0; width: 0;
box-sizing: border-box; box-sizing: border-box;
z-index: 1; z-index: 1;
display: inline-block; display: inline-block;
} }
.plot td.bar.p div { .plot td.bar.p div {
left: 0; left: 0;
border-radius: 0 var(--radius) var(--radius) 0; border-radius: 0 var(--radius) var(--radius) 0;
} }
.plot td.bar.m div { .plot td.bar.m div {
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.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 { .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.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) { @media (width < 720px) {
.plot .bar {width: 0;overflow: hidden} .plot .bar {
width: 0;
overflow: hidden;
}
} }

59
nummi/main/static/main/css/table.css
View file

@ -1,30 +1,49 @@
.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%;
} }
thead { 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 { 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,
padding: 0 var(--gap); th {
position: relative; padding: 0 var(--gap);
white-space: nowrap; position: relative;
text-overflow: ellipsis; white-space: nowrap;
text-overflow: ellipsis;
} }
.date, .value { .date,
font-feature-settings: var(--num); .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}