I get told to shut up a lot by my friend. This is the microsite that documents this in detail.
shutup.jp
postcards
microsite
CSS-only flip
Uses checkboxes to toggle flipped state
+17
-15
+8
-13
index.html.tmpl
+8
-13
index.html.tmpl
···
20
20
21
21
{{ range . }}
22
22
<figure>
23
-
<div class="postcard {{ .Flip }} {{ if gt .FrontDimensions.PxHeight .FrontDimensions.PxWidth }}portrait{{ else }}landscape{{ end }}" style="--postcard: url('{{ .Name }}.webp'); --aspect-ratio: {{ .FrontDimensions.PxWidth }} / {{ .FrontDimensions.PxHeight }}">
24
-
<img src="{{ .Name }}.webp" loading="lazy" alt="{{ .Front.Description }}" width="500px">
25
-
<div></div>
26
-
</div>
23
+
<input type="checkbox" id="flip-{{.Name}}">
24
+
<label for="flip-{{.Name}}">
25
+
<div class="postcard {{ .Flip }} {{ if gt .FrontDimensions.PxHeight .FrontDimensions.PxWidth }}portrait{{ else }}landscape{{ end }}" style="--postcard: url('{{ .Name }}.webp'); --aspect-ratio: {{ .FrontDimensions.PxWidth }} / {{ .FrontDimensions.PxHeight }}">
26
+
<img src="{{ .Name }}.webp" loading="lazy" alt="{{ .Front.Description }}" width="500px">
27
+
<div></div>
28
+
</div>
29
+
</label>
30
+
27
31
<!--<figcaption style="--map: url(seattle.svg)">-->
28
32
<figcaption>
29
33
{{- .Back.Transcription | safeHTML -}}
···
33
37
{{ end }}
34
38
35
39
<section class="explain">How fun is this??</section>
36
-
37
-
<script>
38
-
window.addEventListener('DOMContentLoaded', () => {
39
-
for (const pc of document.getElementsByClassName('postcard')) {
40
-
pc.classList.add('clickable');
41
-
pc.addEventListener('click', () => pc.classList.toggle('flipped'));
42
-
}
43
-
});
44
-
</script>
45
40
</body>
46
41
</html>
+9
-2
static/shutup.css
+9
-2
static/shutup.css
···
79
79
aspect-ratio:1/1;
80
80
--flip: 0deg;
81
81
}
82
-
.postcard.clickable {
82
+
83
+
label {
84
+
display:block;
85
+
width: 100%;
83
86
cursor: pointer;
84
87
}
85
88
86
-
.postcard.clickable.flipped,.postcard:not(.clickable):hover {
89
+
input {
90
+
display:none;
91
+
}
92
+
93
+
input:checked ~ label .postcard {
87
94
--flip: 180deg;
88
95
}
89
96