I get told to shut up a lot by my friend. This is the microsite that documents this in detail.
shutup.jp
postcards
microsite
It works!
+13
-10
+13
-10
shutup.css
+13
-10
shutup.css
···
1
1
:root {
2
2
--front: #222;
3
3
--muted: #000;
4
-
--back: #eee;
4
+
--back: #f7f7f7;
5
5
6
6
@media (prefers-color-scheme: dark) {
7
7
--front: #ddd;
···
9
9
--back: #222;
10
10
}
11
11
12
-
--row-height: 50;
12
+
--row-padding: 8;
13
+
--row-height: calc(50 - var(--row-padding));
13
14
}
14
15
15
16
a {
···
25
26
padding: 0;
26
27
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
27
28
scroll-snap-type: y mandatory;
28
-
scroll-padding: calc(50vh - var(--row-height) * 1vh);
29
+
scroll-padding: calc(var(--row-padding) * 1vh);
29
30
30
31
background-color: var(--back);
31
32
color: var(--front);
···
37
38
margin: 2rem;
38
39
padding: 0;
39
40
}
41
+
p {
42
+
min-width: 350px;
43
+
width: 45vw;
44
+
}
40
45
section, figure {
41
-
height: calc(1vh*var(--row-height));
46
+
height: calc(var(--row-height) * 1vh);
42
47
display: flex;
43
48
align-items: center;
44
49
justify-content: center;
45
50
margin: 0;
46
-
/* scroll-snap-align: start; */
51
+
scroll-snap-align: start;
47
52
padding: 0 10vh;
48
53
}
49
54
figcaption {
···
59
64
text-align:justify;
60
65
}
61
66
.postcard {
62
-
height: 95%;
67
+
height: 90%;
63
68
aspect-ratio:1/1;
64
69
--flip: calc(
65
70
(
66
-
(var(--scroll) - var(--yPos)) * (var(--row-height) / 50)/var(--viewportY)
67
-
/* - (50 - (var(--row-height)) / 50) */
71
+
(var(--scroll) - var(--yPos)) * 50/(var(--viewportY) * var(--row-height))
72
+
+ (var(--row-padding) / (2 * var(--row-height)))
68
73
+ 0.75
69
74
) * 360deg);
70
75
}
71
-
72
-
/* 500 - 750 / 1000 = 0.25 */