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 shadows!
+36
-11
+1
-1
TODO.md
+1
-1
TODO.md
···
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
16
15
17
16
### Done ✔
18
17
19
18
- [x] Add RSS feed for postcards
20
19
- [x] Add a very subtle background, scrolling at a slower speed than the window, for parallax effect.
20
+
- [x] Add shadows to the postcards
+1
-1
index.html.tmpl
+1
-1
index.html.tmpl
···
28
28
<label for="{{.Name}}">
29
29
<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 }}">
30
30
<img src="{{ .Name }}.webp" loading="lazy" alt="{{ .Front.Description }}" width="500px">
31
-
<div></div>
31
+
<div class="shadow"></div>
32
32
</div>
33
33
</label>
34
34
static/bg-dark.png
static/bg-dark.png
This is a binary file and will not be displayed.
+28
-8
static/postcard.css
+28
-8
static/postcard.css
···
19
19
tan(45deg - var(--flip)/2),
20
20
tan(135deg - var(--flip)/2)
21
21
)) * 192 + 64);
22
+
--offset: translate(0px, 0px);
23
+
}
24
+
25
+
.postcard .shadow {
26
+
width: 90%;
27
+
margin: 5%;
28
+
aspect-ratio: var(--aspect-ratio);
29
+
position: absolute;
30
+
z-index: 0;
31
+
transform-style: preserve-3d;
32
+
background: rgb(0, 0, 0, 0.1) !important;
33
+
box-shadow: 0px 0px 45px 45px rgb(0, 0, 0, 0.1);
34
+
--offset: translate(40px, 40px);
35
+
}
36
+
37
+
.postcard.portrait .shadow {
38
+
width:auto;
39
+
height:90%;
40
+
margin: 5%;
22
41
}
23
42
24
43
.postcard.portrait {
···
38
57
-webkit-backface-visibility: hidden;
39
58
transform-style: preserve-3d;
40
59
background-blend-mode: multiply;
60
+
z-index: 2;
41
61
}
42
62
43
63
.postcard.portrait::before,.postcard.portrait::after {
···
63
83
aspect-ratio: 1/1;
64
84
}
65
85
66
-
.postcard.book::after {
67
-
transform: var(--p) rotateY(var(--flip));
86
+
.postcard.book::after,.postcard.book .shadow {
87
+
transform: var(--p) var(--offset) rotateY(var(--flip));
68
88
background-image: linear-gradient(to right,
69
89
rgb(var(--v1), var(--v1), var(--v1)),
70
90
rgb(var(--v2), var(--v2), var(--v2))
···
78
98
), var(--postcard);
79
99
}
80
100
81
-
.postcard.calendar::after {
82
-
transform: var(--p) rotateX(var(--flip));
101
+
.postcard.calendar::after,.postcard.calendar .shadow {
102
+
transform: var(--p) var(--offset) rotateX(var(--flip));
83
103
background-image: linear-gradient(to top,
84
104
rgb(var(--v1), var(--v1), var(--v1)),
85
105
rgb(var(--v2), var(--v2), var(--v2))
···
93
113
), var(--postcard);
94
114
}
95
115
96
-
.postcard.right-hand::after {
97
-
transform: var(--p) rotate3d(1,1,0,var(--flip));
116
+
.postcard.right-hand::after,.postcard.right-hand .shadow {
117
+
transform: var(--p) var(--offset) rotate3d(1,1,0,var(--flip));
98
118
background-image: linear-gradient(to top right,
99
119
rgb(var(--v1), var(--v1), var(--v1)),
100
120
rgb(var(--v2), var(--v2), var(--v2))
···
108
128
), var(--postcard);
109
129
}
110
130
111
-
.postcard.left-hand::after {
112
-
transform: var(--p) rotate3d(-1,1,0,var(--flip));
131
+
.postcard.left-hand::after,.postcard.left-hand .shadow {
132
+
transform: var(--p) var(--offset) rotate3d(-1,1,0,var(--flip));
113
133
background-image: linear-gradient(to bottom right,
114
134
rgb(var(--v1), var(--v1), var(--v1)),
115
135
rgb(var(--v2), var(--v2), var(--v2))
+6
-1
static/shutup.css
+6
-1
static/shutup.css
···
9
9
--mute-color: #777;
10
10
--back-color: #222;
11
11
--bg: url('bg-dark.png');
12
+
13
+
.postcard .shadow {
14
+
background: rgb(0, 0, 0, 0.4) !important;
15
+
box-shadow: 0px 0px 45px 45px rgb(0, 0, 0, 0.4);
16
+
}
12
17
}
13
18
}
14
19
···
167
172
transition-delay: 0s;
168
173
}
169
174
170
-
.postcard::before,.postcard::after {
175
+
.postcard::before,.postcard::after,.postcard .shadow {
171
176
transition: transform 1s ease-in-out;
172
177
}
173
178