j0.lol
Notes app :)
style changes
+28
-20
+22
-12
static/css/basic.css
+22
-12
static/css/basic.css
···
66
66
67
67
article {
68
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));
69
+
box-shadow: 3px 5px 5px light-dark(lightgray, hsl(250 15% 0% / 1));
72
70
box-sizing: border-box;
73
71
}
74
72
···
111
109
.card-head {
112
110
--rule-start: 2rem;
113
111
--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;
112
+
--line-height: calc(2.6rem + 2px);
113
+
117
114
height: 3.9rem;
118
115
padding-top: 1.3rem;
116
+
background-position: 0px -2px;
117
+
118
+
}
119
+
120
+
.ruled {
121
+
--rule-color: light-dark(#abced4, #c86363);
122
+
123
+
/* https://projects.verou.me/css3patterns/#lined-paper */
124
+
background-color: light-dark(white, black);
125
+
background-image:
126
+
linear-gradient(90deg,
127
+
transparent var(--rule-start),
128
+
var(--rule-color) var(--rule-start),
129
+
var(--rule-color) calc(var(--rule-start) + 2px),
130
+
transparent calc(var(--rule-start) + 2px)),
131
+
linear-gradient(light-dark(#eee, #333) 2px, transparent 2px);
132
+
background-size: 100% var(--line-height);
119
133
}
120
134
121
135
.card-head .headercontainer {
···
161
175
.card {
162
176
--rule-start: 2rem;
163
177
--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;
178
+
--line-height: 21px;
167
179
height: 42px;
168
180
position: relative;
169
181
}
···
209
221
.card-body {
210
222
--rule-start: 2rem;
211
223
--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);
224
+
--line-height: 100%;
214
225
background-repeat: no-repeat;
215
-
background-size: 100% 100%;
216
226
padding-top: 4px;
217
227
padding-bottom: 17px;
218
228
}
+2
-3
templates/components/task-item.html
+2
-3
templates/components/task-item.html
···
19
19
.list-item[checked] ::slotted(span),
20
20
task-item[checked] ::slotted(span) {
21
21
text-decoration: line-through;
22
+
color: light-dark(gray, lightgray);
22
23
}
23
24
24
25
.list-item[day="tomorrow"] .today,
···
41
42
var(--rule-color) var(--rule-start),
42
43
var(--rule-color) calc(var(--rule-start) + 2px),
43
44
transparent calc(var(--rule-start) + 2px)),
44
-
linear-gradient(light-dark(#eee, #333) 0.1em, transparent 0.1em);
45
+
linear-gradient(light-dark(#eee, #333) 2px, transparent 2px);
45
46
background-size: 100% var(--line-height);
46
47
background-position: 0px 17px;
47
48
···
51
52
font-family: var(--font);
52
53
position: relative;
53
54
display: block;
54
-
55
-
56
55
57
56
&:after {
58
57
content: '◦';
+4
-4
templates/list.html
+4
-4
templates/list.html
···
13
13
</style>
14
14
<article day="today" id="main">
15
15
16
-
<div class="card-head">
16
+
<div class="card-head ruled">
17
17
<div role="tablist" class="headercontainer">
18
18
<button active role="tab" class="header-today">Today</button>
19
19
<button role="tab" class="header-tomorrow">
···
22
22
</div>
23
23
</div>
24
24
25
-
<div class="card">
25
+
<div class="card ruled">
26
26
<form class="addtodo">
27
27
<input id="input-when" name="when" type="hidden" value="today" />
28
28
<label for="addtodoinput">I will...</label>
···
34
34
35
35
</div>
36
36
37
-
<div class="card-body today">
37
+
<div class="card-body today ruled">
38
38
<ul>
39
39
{% for task in today %}
40
40
{% set message = task.text %}
···
49
49
</div>
50
50
51
51
52
-
<div class="card-body tomorrow">
52
+
<div class="card-body tomorrow ruled">
53
53
<ul>
54
54
{% for task in tomorrow %}
55
55
{% set message = task.text %}
-1
templates/wrap.html
-1
templates/wrap.html