j0.lol
+14
-24
Cargo.toml
+14
-24
Cargo.toml
···
4
edition = "2024"
5
6
[dependencies]
7
-
axum = { version = "0.8.4", features = ["form", "json", "macros"] }
8
-
minijinja = { version = "2.10.2", features = ["loader"] }
9
-
serde = { version = "1.0.219", features = ["derive"] }
10
-
tokio = { version = "1.45.1", features = ["full"] }
11
-
tower-http = { version = "0.6.6", features = ["fs", "compression-gzip"] }
12
-
deadpool-sqlite = { version = "0.11.0", features = ["bundled", "modern-full"] }
13
-
chrono = { version = "0.4.41", features = ["now"] }
14
-
random_word = { version = "0.5.0", features = ["en"] }
15
-
chrono-tz = { version = "0.10.3", features = ["serde"] }
16
-
rand = "0.9.1"
17
-
axum-cookie = "0.2.3"
18
-
ammonia = "4.1.0"
19
-
serde_json = "1.0.140"
20
-
tower = "0.5.2"
21
-
22
-
[package.metadata.turf]
23
-
minify = false
24
-
load_paths = ["./static/css"]
25
-
26
-
[package.metadata.turf.class_names]
27
-
template = "<original_name>"
28
-
29
-
[package.metadata.turf.file_output]
30
-
global_css_file_path = "./static/css/out.css"
···
4
edition = "2024"
5
6
[dependencies]
7
+
axum = { version = "0.8", features = ["form", "json", "macros"] }
8
+
minijinja = { version = "2", features = ["loader"] }
9
+
serde = { version = "1", features = ["derive"] }
10
+
tokio = { version = "1", features = ["full"] }
11
+
tower-http = { version = "0.6", features = ["fs", "compression-gzip"] }
12
+
deadpool-sqlite = { version = "0.11", features = ["bundled", "modern-full"] }
13
+
chrono = { version = "0.4", features = ["now"] }
14
+
random_word = { version = "0.5", features = ["en"] }
15
+
chrono-tz = { version = "0.10", features = ["serde"] }
16
+
rand = "0.9"
17
+
axum-cookie = "0.2"
18
+
ammonia = "4"
19
+
serde_json = "1"
20
+
tower = "0.5"
+28
-13
static/css/basic.css
+28
-13
static/css/basic.css
···
65
66
67
article {
68
-
border: 2px solid light-dark(#eee, #333);
69
-
border-top: none;
70
-
border-bottom: none;
71
-
box-shadow: 3px 5px 5px light-dark(lightgray, rgb(59, 59, 59));
72
box-sizing: border-box;
73
}
74
75
.is-loading::after {
···
111
.card-head {
112
--rule-start: 2rem;
113
--text-start: .3rem;
114
-
background-color: light-dark(#fff, #000);
115
-
background-image: linear-gradient(90deg, transparent var(--rule-start), light-dark(#abced4, #c86363) var(--rule-start), light-dark(#abced4, #c86363) calc(var(--rule-start) + 2px), transparent calc(var(--rule-start) + 2px)), linear-gradient(light-dark(#eee, #333) .1em, transparent .1em);
116
-
background-size: 100% 2.6rem;
117
height: 3.9rem;
118
padding-top: 1.3rem;
119
}
120
121
.card-head .headercontainer {
···
161
.card {
162
--rule-start: 2rem;
163
--text-start: .3rem;
164
-
background-color: light-dark(#fff, #000);
165
-
background-image: linear-gradient(90deg, transparent var(--rule-start), light-dark(#abced4, #c86363) var(--rule-start), light-dark(#abced4, #c86363) calc(var(--rule-start) + 2px), transparent calc(var(--rule-start) + 2px)), linear-gradient(light-dark(#eee, #333) .1em, transparent .1em);
166
-
background-size: 100% 21px;
167
height: 42px;
168
position: relative;
169
}
···
209
.card-body {
210
--rule-start: 2rem;
211
--text-start: .3rem;
212
-
background-color: light-dark(#fff, #000);
213
-
background-image: linear-gradient(90deg, transparent var(--rule-start), light-dark(#abced4, #c86363) var(--rule-start), light-dark(#abced4, #c86363) calc(var(--rule-start) + 2px), transparent calc(var(--rule-start) + 2px)), linear-gradient(light-dark(#eee, #333) .1em, transparent .1em);
214
background-repeat: no-repeat;
215
-
background-size: 100% 100%;
216
padding-top: 4px;
217
padding-bottom: 17px;
218
}
···
65
66
67
article {
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 {
···
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 {
···
180
.card {
181
--rule-start: 2rem;
182
--text-start: .3rem;
183
+
--line-height: 21px;
184
height: 42px;
185
position: relative;
186
}
···
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
}
+3
-4
templates/components/task-item.html
+3
-4
templates/components/task-item.html
···
19
.list-item[checked] ::slotted(span),
20
task-item[checked] ::slotted(span) {
21
text-decoration: line-through;
22
}
23
24
.list-item[day="tomorrow"] .today,
···
34
--line-height: 21px;
35
36
/* https://projects.verou.me/css3patterns/#lined-paper */
37
-
background-color: light-dark(white, black);
38
background-image:
39
linear-gradient(90deg,
40
transparent var(--rule-start),
41
var(--rule-color) var(--rule-start),
42
var(--rule-color) calc(var(--rule-start) + 2px),
43
transparent calc(var(--rule-start) + 2px)),
44
-
linear-gradient(light-dark(#eee, #333) 0.1em, transparent 0.1em);
45
background-size: 100% var(--line-height);
46
background-position: 0px 17px;
47
···
51
font-family: var(--font);
52
position: relative;
53
display: block;
54
-
55
-
56
57
&:after {
58
content: '◦';
···
19
.list-item[checked] ::slotted(span),
20
task-item[checked] ::slotted(span) {
21
text-decoration: line-through;
22
+
color: light-dark(gray, lightgray);
23
}
24
25
.list-item[day="tomorrow"] .today,
···
35
--line-height: 21px;
36
37
/* https://projects.verou.me/css3patterns/#lined-paper */
38
+
background-color: light-dark(white, #141414);
39
background-image:
40
linear-gradient(90deg,
41
transparent var(--rule-start),
42
var(--rule-color) var(--rule-start),
43
var(--rule-color) calc(var(--rule-start) + 2px),
44
transparent calc(var(--rule-start) + 2px)),
45
+
linear-gradient(light-dark(#eee, #333) 2px, transparent 2px);
46
background-size: 100% var(--line-height);
47
background-position: 0px 17px;
48
···
52
font-family: var(--font);
53
position: relative;
54
display: block;
55
56
&:after {
57
content: '◦';
+4
-4
templates/list.html
+4
-4
templates/list.html
···
13
</style>
14
<article day="today" id="main">
15
16
-
<div class="card-head">
17
<div role="tablist" class="headercontainer">
18
<button active role="tab" class="header-today">Today</button>
19
<button role="tab" class="header-tomorrow">
···
22
</div>
23
</div>
24
25
-
<div class="card">
26
<form class="addtodo">
27
<input id="input-when" name="when" type="hidden" value="today" />
28
<label for="addtodoinput">I will...</label>
···
34
35
</div>
36
37
-
<div class="card-body today">
38
<ul>
39
{% for task in today %}
40
{% set message = task.text %}
···
49
</div>
50
51
52
-
<div class="card-body tomorrow">
53
<ul>
54
{% for task in tomorrow %}
55
{% set message = task.text %}
···
13
</style>
14
<article day="today" id="main">
15
16
+
<div class="card-head ruled">
17
<div role="tablist" class="headercontainer">
18
<button active role="tab" class="header-today">Today</button>
19
<button role="tab" class="header-tomorrow">
···
22
</div>
23
</div>
24
25
+
<div class="card ruled">
26
<form class="addtodo">
27
<input id="input-when" name="when" type="hidden" value="today" />
28
<label for="addtodoinput">I will...</label>
···
34
35
</div>
36
37
+
<div class="card-body today ruled">
38
<ul>
39
{% for task in today %}
40
{% set message = task.text %}
···
49
</div>
50
51
52
+
<div class="card-body tomorrow ruled">
53
<ul>
54
{% for task in tomorrow %}
55
{% set message = task.text %}
-1
templates/wrap.html
-1
templates/wrap.html