A little app to serve my photography from my personal website
mobile version of show page
Waiting for spindle ...
+31
-13
+1
-1
assets/app.js
+1
-1
assets/app.js
+5
-8
assets/photos/index.css
+5
-8
assets/photos/index.css
···
65
65
cursor: pointer;
66
66
}
67
67
68
-
.mobile-only {
69
-
display: none;
70
-
}
71
-
72
68
.photos__nav {
73
69
flex-basis: max-content;
74
70
min-width: 200px;
75
71
}
76
72
77
73
.photos__nav .close {
74
+
display: none;
78
75
position: fixed;
79
76
top: 30px;
80
77
right: 30px;
···
133
130
}
134
131
135
132
.photos__mobile-nav {
136
-
display: flex;
133
+
display: none;
137
134
justify-content: space-between;
138
135
align-items: center;
139
136
}
···
169
166
background: white;
170
167
}
171
168
172
-
.photos__nav.open {
169
+
.photos__nav .close {
173
170
display: block;
174
171
}
175
172
176
-
.mobile-only {
177
-
display: initial;
173
+
.photos__nav.open {
174
+
display: block;
178
175
}
179
176
180
177
.photos__mobile-nav {
+23
-2
assets/photos/show.css
+23
-2
assets/photos/show.css
···
10
10
11
11
.photo__image img {
12
12
max-width: 100%;
13
-
max-height: 90vh;
13
+
max-height: 85vh;
14
14
}
15
15
16
16
.photo__sidebar {
17
17
flex-basis: max-content;
18
-
max-width: 350px;
18
+
/*max-width: 350px;*/
19
19
}
20
20
21
21
.photo__sidebar h2 {
···
45
45
border-bottom: solid black 1px;
46
46
}
47
47
48
+
48
49
.photo__metadata li > *:first-child {
49
50
font-size: 10pt;
50
51
text-transform: uppercase;
51
52
font-weight: bold;
52
53
}
53
54
55
+
.photo__metadata li > *:last-child {
56
+
text-wrap: nowrap;
57
+
}
58
+
54
59
.photo__tags {
55
60
margin-top: 10px;
56
61
}
···
82
87
color: black;
83
88
text-decoration: none;
84
89
}
90
+
91
+
@media (max-width: 1024px) {
92
+
.photo__container {
93
+
flex-direction: column;
94
+
}
95
+
96
+
.photo__sidebar {
97
+
width: fit-content;
98
+
}
99
+
}
100
+
101
+
@media (max-width: 500px) {
102
+
.photo__sidebar {
103
+
width: 100%;
104
+
}
105
+
}
+2
-2
templates/photos/index.jinja
+2
-2
templates/photos/index.jinja
···
3
3
{% block head %}<link rel="stylesheet" href="/assets/photos/index.css" />{% endblock %}
4
4
{% block body %}
5
5
<div class="photos__layout">
6
-
<div class="photos__mobile-nav mobile-only">
6
+
<div class="photos__mobile-nav">
7
7
<button type="button" class="mobile-nav-toggle">Filter</button>
8
8
<a href="/?{{ sort_link }}" class="sort">
9
9
Sort {% if sort_dir == "asc" -%}↑{% else -%}↓{% endif %}
···
80
80
{% if sort_dir == "asc" -%}↑{% else -%}↓{% endif %}
81
81
</a>
82
82
</p>
83
-
<button type="button" class="close mobile-only mobile-nav-toggle">
83
+
<button type="button" class="close mobile-nav-toggle">
84
84
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
85
85
<use xlink:href="#close-icon" />
86
86
</svg>