j0.lol
1@import url("fonts.css");
2
3/* Global elements */
4
5*,
6*::before,
7*::after {
8 box-sizing: border-box;
9}
10
11:root {
12 color-scheme: light dark;
13}
14
15body {
16 font-family: "Hepta Slab", serif;
17 font-optical-sizing: auto;
18 font-weight: normal;
19 font-style: normal;
20 background: light-dark(#f1f0f5, hsl(252 20% 5% / 1));
21 color: light-dark(black, white);
22}
23
24.wrapper {
25 min-height: 100vh;
26 display: grid;
27 grid-template-rows: auto 1fr auto;
28}
29
30/* Random elements */
31
32hr {
33 border-top: 3px double light-dark(black, white);
34 border-bottom: 0;
35 border-left: 0;
36 border-right: 0;
37}
38
39button {
40 cursor: pointer;
41}
42
43
44form.inline {
45 display: inline;
46}
47
48/* Semantic page layout elements */
49header details {
50 color: light-dark(black, white);
51 font-size: 0.7rem;
52
53 summary {
54 color: light-dark(black, white);
55 font-size: 1rem;
56 }
57}
58
59footer {
60 margin-top: 2rem;
61 font-style: italic;
62 color: light-dark(dimgray, rgb(202, 202, 202));
63 font-size: 0.7rem;
64}
65
66
67article {
68
69 box-sizing: border-box;
70
71 filter: drop-shadow(3px 5px 5px light-dark(lightgray, hsl(250 15% 0% / 1)));
72}
73
74.card-body {
75 mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 24px 100%;
76}
77
78.is-loading::after {
79 content: "◌";
80 animation: 4s linear 0s infinite running spinner, 0.25s ease-in 0s 1 running fade-in;
81}
82
83@keyframes fade-in {
84 from {
85 opacity: 0;
86 }
87
88 to {
89 opacity: 1;
90 }
91}
92
93@keyframes spinner {
94 from {
95 transform: rotate(0deg);
96 }
97
98 to {
99 transform: rotate(360deg);
100 }
101}
102
103task-item {
104 --font: "Shantell Sans", cursive;
105}
106
107/* Page styling */
108
109article {
110 flex-direction: column;
111 display: flex;
112}
113
114.card-head {
115 --rule-start: 2rem;
116 --text-start: .3rem;
117 --line-height: calc(2.6rem + 2px);
118
119 height: 3.9rem;
120 padding-top: 1.3rem;
121 background-position: 0px -2px;
122
123}
124
125.ruled {
126 --rule-color: light-dark(#abced4, #c86363);
127
128 /* https://projects.verou.me/css3patterns/#lined-paper */
129 background-color: light-dark(white, #141414);
130 background-image:
131 linear-gradient(90deg,
132 transparent var(--rule-start),
133 var(--rule-color) var(--rule-start),
134 var(--rule-color) calc(var(--rule-start) + 2px),
135 transparent calc(var(--rule-start) + 2px)),
136 linear-gradient(light-dark(#eee, #333) 2px, transparent 2px);
137 background-size: 100% var(--line-height);
138}
139
140.card-head .headercontainer {
141 margin-left: calc(var(--text-start) + var(--rule-start));
142 gap: .5em;
143}
144
145.card-head .headercontainer button {
146 background: 0;
147 border: 0;
148 margin: -2px 0 0;
149 padding: 0;
150 font-size: 32px;
151 line-height: 1.3;
152 text-decoration: underline;
153}
154
155.card-head .headercontainer button:before,
156.card-head .headercontainer button:after {
157 content: "";
158 width: 0;
159 height: 0;
160 display: block;
161}
162
163.card-head .headercontainer button:before {
164 margin-bottom: -.3em;
165}
166
167.card-head .headercontainer button:after {
168 margin-top: -.3em;
169}
170
171.card-head .headercontainer button:not([active]) {
172 color: gray;
173 font-style: italic;
174}
175
176.card-head .headercontainer {
177 display: inline-flex;
178}
179
180.card {
181 --rule-start: 2rem;
182 --text-start: .3rem;
183 --line-height: 21px;
184 height: 42px;
185 position: relative;
186}
187
188.card li,
189.card label,
190.card form.addtodo button {
191 margin: 2px 0 -2px;
192 font-size: 16px;
193}
194
195.card button {
196 cursor: pointer;
197}
198
199.card p,
200.card form.addtodo {
201 margin: 0;
202 margin-left: calc(var(--text-start) + var(--rule-start));
203 flex-direction: row;
204 align-items: baseline;
205 gap: .5rem;
206 margin-top: 2px;
207 display: flex;
208}
209
210.card autowidth-input {
211 min-width: 5.8ch;
212 max-width: 17ch;
213 margin: 2px 0 -2px;
214 font-size: 16px;
215}
216
217.card button,
218.card input,
219.card form:not(.addtodo) {
220 background: 0;
221 border: 0;
222 margin: 0;
223 padding: 0;
224}
225
226.card-body {
227 --rule-start: 2rem;
228 --text-start: .3rem;
229 --line-height: 100%;
230 background-repeat: no-repeat;
231 padding-top: 4px;
232 padding-bottom: 17px;
233}
234
235.card-body ul {
236 flex-direction: column;
237 margin: 0;
238 padding: 0;
239 display: flex;
240}
241
242.card-head,
243.card-head input,
244.card-head button,
245.card,
246.card input,
247.card button,
248.card-body,
249.card-body input,
250.card-body button {
251 font-optical-sizing: auto;
252 font-variation-settings: "BNCE" 0, "INFM" 0, "SPAC" 0;
253 font-synthesis: none;
254 font-family: Shantell Sans, cursive;
255 font-style: normal;
256 font-weight: 400;
257}
258
259.card-head select,
260.card-head button,
261.card select,
262.card button,
263.card-body select,
264.card-body button {
265 color: light-dark(#000, #fff);
266}