A little app to serve my photography from my personal website
parameterized colors
Waiting for spindle ...
+37
-21
+6
src/views/blog/index/template.jinja
+6
src/views/blog/index/template.jinja
···
5
5
{% block body %}
6
6
Tags:
7
7
<ul>
8
+
{% if tag %}
9
+
<li>
10
+
{{ tag }} <a href="/blog">X</a>
11
+
</li>
12
+
{% endif %}
8
13
{% for t in tags %}
9
14
{% if t[0] != tag %}
10
15
<li>
···
20
25
{% for t in post.tags %}
21
26
<a href="/blog?tag={{ url_escape(t) }}">{{ t }}</a>
22
27
{% endfor %}
28
+
<time datetime="{{ post.published_at }}">{{ post.published_at }}</time>
23
29
</li>
24
30
{% endfor %}
25
31
</ul>
+5
-5
src/views/blog/show/style.css
+5
-5
src/views/blog/show/style.css
···
10
10
}
11
11
12
12
.blog__header {
13
-
border-bottom: solid black 3px;
13
+
border-bottom: solid var(--foreground) 3px;
14
14
}
15
15
16
16
.blog__toc {
···
20
20
}
21
21
22
22
.blog__toc a {
23
-
color: rgba(0, 0, 0, 0.5);
23
+
color: var(--half);
24
24
text-decoration: none;
25
25
}
26
26
27
27
.blog__toc a.active, .blog__toc a:hover {
28
-
color: rgb(0, 0, 0);
28
+
color: var(--foreground);
29
29
text-decoration: none;
30
30
}
31
31
···
54
54
}
55
55
56
56
.blog__body code {
57
-
background-color: rgba(0, 0, 0, 0.08);
57
+
background-color: var(--light);
58
58
padding: 0.2em 0.4em;
59
59
border-radius: 6px;
60
60
white-space: break-spaces;
···
73
73
top: 50%;
74
74
left: 0;
75
75
transform: translateX(calc(-100% - 5px)) translateY(-50%);
76
-
color: black;
76
+
color: var(--foreground);
77
77
text-decoration: none;
78
78
opacity: 0;
79
79
transition: opacity 0.3s;
+7
-7
src/views/photos/index/style.css
+7
-7
src/views/photos/index/style.css
···
44
44
45
45
.pagination .arrow {
46
46
text-decoration: none;
47
-
color: black;
47
+
color: var(--foreground);
48
48
font-size: 22pt;
49
49
}
50
50
···
92
92
93
93
.photos__nav a {
94
94
text-decoration: none;
95
-
color: black;
95
+
color: var(--foreground);
96
96
}
97
97
98
98
.photos__nav a:visited {
99
-
color: black;
99
+
color: var(--foreground);
100
100
}
101
101
102
102
.photos__nav ul {
···
118
118
width: fit-content;
119
119
gap: 10px;
120
120
border-radius: 5px;
121
-
background-color: #e4e4e4;
121
+
background-color: var(--light);
122
122
}
123
123
124
124
.photos__nav li.selected a {
···
138
138
}
139
139
140
140
.photos__mobile-nav button {
141
-
border: solid black 1px;
141
+
border: solid var(--foreground) 1px;
142
142
border-radius: 5px;
143
143
padding: 5px 10px;
144
144
background: none;
···
148
148
149
149
.photos__mobile-nav .sort {
150
150
text-decoration: none;
151
-
color: black;
151
+
color: var(--foreground);
152
152
font-size: 14pt;
153
153
}
154
154
···
166
166
right: 0;
167
167
bottom: 0;
168
168
padding: 30px;
169
-
background: white;
169
+
background: var(--background);
170
170
}
171
171
172
172
.photos__nav .close {
+4
-4
src/views/photos/show/style.css
+4
-4
src/views/photos/show/style.css
···
22
22
23
23
.photo__sidebar h2 {
24
24
font-size: 10pt;
25
-
border-bottom: solid black 2px;
25
+
border-bottom: solid var(--foreground) 2px;
26
26
margin: 0;
27
27
padding: 0;
28
28
text-transform: uppercase;
···
44
44
align-items: flex-end;
45
45
gap: 30px;
46
46
font-size: 15pt;
47
-
border-bottom: solid black 1px;
47
+
border-bottom: solid var(--foreground) 1px;
48
48
}
49
49
50
50
···
85
85
.photo__tag a {
86
86
border-radius: 5px;
87
87
padding: 3px 7px;
88
-
background-color: #e4e4e4;
89
-
color: black;
88
+
background-color: var(--light);
89
+
color: var(--foreground);
90
90
text-decoration: none;
91
91
}
92
92
+15
-5
templates/layout.jinja
+15
-5
templates/layout.jinja
···
23
23
}
24
24
</style>
25
25
<style type="text/css">
26
+
:root {
27
+
--foreground: black;
28
+
--background: white;
29
+
--half: color-mix(in srgb, var(--foreground) 50%, transparent);
30
+
--light: color-mix(in srgb, var(--foreground) 10%, transparent);
31
+
}
32
+
26
33
* {
27
34
box-sizing: border-box;
28
35
}
···
32
39
min-height: 100%;
33
40
margin: 0;
34
41
padding: 0;
42
+
color: var(--foreground);
43
+
background-color: var(--background);
35
44
}
36
45
37
46
body {
···
50
59
display: flex;
51
60
font-size: 16pt;
52
61
width: 100%;
53
-
border-bottom: solid black 3px;
62
+
border-bottom: solid var(--foreground) 3px;
54
63
}
55
64
56
65
header h1 {
66
+
color: var(--foreground);
57
67
text-transform: uppercase;
58
68
font-weight: 900;
59
69
margin: 0;
60
70
letter-spacing: 3px;
61
71
padding: 10px 30px;
62
-
border-right: solid black 3px;
72
+
border-right: solid var(--foreground) 3px;
63
73
}
64
74
65
75
header nav ul {
···
75
85
align-items: center;
76
86
height: 100%;
77
87
text-decoration: none;
78
-
color: black;
88
+
color: var(--foreground);
79
89
padding: 0 30px;
80
90
}
81
91
82
92
header nav ul a.active, header nav ul a:hover {
83
-
background-color: black;
84
-
color: white;
93
+
background-color: var(--foreground);
94
+
color: var(--background);
85
95
}
86
96
87
97
@media (max-width: 850px) {