I get told to shut up a lot by my friend. This is the microsite that documents this in detail.
shutup.jp
postcards
microsite
Add background
+23
-4
+3
-1
TODO.md
+3
-1
TODO.md
···
6
6
7
7
- [ ] Safari rotates the back side of the postcard the opposite direction to _every other browser_. Which is extremely annoying. I need to figure out a workaround.
8
8
- [ ] Fix locale flags for Windows users
9
-
- [ ] In portrait mode, clicking on a postcard jumps to the previous postcard?
9
+
- [ ] In roughly square mode (portrait side), clicking on a postcard jumps to the previous postcard?
10
10
11
11
### Ideas
12
12
13
13
- [ ] Include a map, blocking off the parts of the world that I've received a postcard from. Voronoi colouring for countries with more than one?
14
14
- [ ] Add forward/back buttons (use these as spacers to vertically centre the portrait version?)
15
+
- [ ] Add shadows to the postcards
15
16
16
17
### Done ✔
17
18
18
19
- [x] Add RSS feed for postcards
20
+
- [x] Add a very subtle background, scrolling at a slower speed than the window, for parallax effect.
+8
index.html.tmpl
+8
index.html.tmpl
···
40
40
{{ end }}
41
41
42
42
<section class="explain">Shut up Claire.</section>
43
+
44
+
<script>
45
+
const storeScroll = () => {
46
+
document.documentElement.style.setProperty('--scroll', window.scrollY);
47
+
}
48
+
document.addEventListener('scroll', storeScroll, { passive: true });
49
+
storeScroll();
50
+
</script>
43
51
</body>
44
52
</html>
+1
-1
main.go
+1
-1
main.go
static/bg-dark.png
static/bg-dark.png
This is a binary file and will not be displayed.
static/bg-light.png
static/bg-light.png
This is a binary file and will not be displayed.
+1
-1
static/postcard.css
+1
-1
static/postcard.css
+9
-1
static/shutup.css
+9
-1
static/shutup.css
···
2
2
--text-color: #222;
3
3
--mute-color: #777;
4
4
--back-color: #f7f7f7;
5
+
--bg: url('bg-light.png');
5
6
6
7
@media (prefers-color-scheme: dark) {
7
8
--text-color: #ddd;
8
9
--mute-color: #777;
9
10
--back-color: #222;
11
+
--bg: url('bg-dark.png');
10
12
}
11
13
}
12
14
···
21
23
html,body {
22
24
margin: 0;
23
25
padding: 0;
24
-
font-family:Verdana, Geneva, Tahoma, sans-serif;
26
+
font-family: Verdana, Geneva, Tahoma, sans-serif;
25
27
scroll-snap-type: y mandatory;
26
28
scroll-padding: 0;
29
+
}
27
30
31
+
body {
28
32
background-color: var(--back-color);
29
33
color: var(--text-color);
34
+
background-image: var(--bg);
35
+
background-repeat: repeat;
36
+
background-attachment: fixed;
37
+
background-position-y: calc(-0.17px * var(--scroll));
30
38
}
31
39
32
40
h1 {