I get told to shut up a lot by my friend. This is the microsite that documents this in detail.
shutup.jp
postcards
microsite
HTML meta tags
+15
-13
+5
-2
index.html.tmpl
+5
-2
index.html.tmpl
···
3
3
<head>
4
4
<meta charset="utf-8">
5
5
<meta http-equiv="x-ua-compatible" content="ie=edge">
6
-
<title>Postcard demo</title>
7
-
<meta name="description" content="Demo of new postcard shape">
6
+
<title>Shut up, JP</title>
7
+
<meta name="description" content="A collection of postcards sent to me by my friend, Claire, inviting me to 'shut up' from many places and in many languages over many years.">
8
8
<meta name="viewport" content="width=device-width, initial-scale=1">
9
+
<meta name="keywords" content="postcards,art,insults,language,microsite">
10
+
<link rel="author" href="https://www.byjp.me">
11
+
<link rel="canonical" href="https://shutup.jp">
9
12
<link rel="stylesheet" href="postcard.css">
10
13
<link rel="stylesheet" href="shutup.css">
11
14
</head>
+9
-9
static/postcard.css
+9
-9
static/postcard.css
···
6
6
flex-direction: row;
7
7
align-items: center;
8
8
9
-
--p: 1000px;
9
+
--p: perspective(1000px);
10
10
--v1: calc(min(1, max(0,
11
11
cos(var(--flip)),
12
12
cos(var(--flip) + 180deg),
···
64
64
}
65
65
66
66
.postcard.book::after {
67
-
transform: perspective(var(--p)) rotateY(var(--flip));
67
+
transform: var(--p) rotateY(var(--flip));
68
68
background-image: linear-gradient(to right,
69
69
rgb(var(--v1), var(--v1), var(--v1)),
70
70
rgb(var(--v2), var(--v2), var(--v2))
71
71
), var(--postcard);
72
72
}
73
73
.postcard.book::before {
74
-
transform: perspective(var(--p)) rotateY(calc(var(--flip) + 180deg));
74
+
transform: var(--p) rotateY(calc(var(--flip) + 180deg));
75
75
background-image: linear-gradient(to right,
76
76
rgb(var(--v1), var(--v1), var(--v1)),
77
77
rgb(var(--v2), var(--v2), var(--v2))
···
79
79
}
80
80
81
81
.postcard.calendar::after {
82
-
transform: perspective(var(--p)) rotateX(var(--flip));
82
+
transform: var(--p) rotateX(var(--flip));
83
83
background-image: linear-gradient(to top,
84
84
rgb(var(--v1), var(--v1), var(--v1)),
85
85
rgb(var(--v2), var(--v2), var(--v2))
86
86
), var(--postcard);
87
87
}
88
88
.postcard.calendar::before {
89
-
transform: perspective(var(--p)) rotateX(calc(var(--flip) + 180deg));
89
+
transform: var(--p) rotateX(calc(var(--flip) + 180deg));
90
90
background-image: linear-gradient(to top,
91
91
rgb(var(--v1), var(--v1), var(--v1)),
92
92
rgb(var(--v2), var(--v2), var(--v2))
···
94
94
}
95
95
96
96
.postcard.right-hand::after {
97
-
transform: perspective(var(--p)) rotate3d(1,1,0,var(--flip));
97
+
transform: var(--p) rotate3d(1,1,0,var(--flip));
98
98
background-image: linear-gradient(to top right,
99
99
rgb(var(--v1), var(--v1), var(--v1)),
100
100
rgb(var(--v2), var(--v2), var(--v2))
101
101
), var(--postcard);
102
102
}
103
103
.postcard.right-hand::before {
104
-
transform: perspective(var(--p)) rotate3d(1,1,0,calc(var(--flip) + 180deg)) rotate(-90deg);
104
+
transform: var(--p) rotate3d(1,1,0,calc(var(--flip) + 180deg)) rotate(-90deg);
105
105
background-image: linear-gradient(to bottom right,
106
106
rgb(var(--v1), var(--v1), var(--v1)),
107
107
rgb(var(--v2), var(--v2), var(--v2))
···
109
109
}
110
110
111
111
.postcard.left-hand::after {
112
-
transform: perspective(var(--p)) rotate3d(-1,1,0,var(--flip));
112
+
transform: var(--p) rotate3d(-1,1,0,var(--flip));
113
113
background-image: linear-gradient(to bottom right,
114
114
rgb(var(--v1), var(--v1), var(--v1)),
115
115
rgb(var(--v2), var(--v2), var(--v2))
116
116
), var(--postcard);
117
117
}
118
118
.postcard.left-hand::before {
119
-
transform: perspective(var(--p)) rotate3d(-1,1,0,calc(var(--flip) + 180deg)) rotate(90deg);
119
+
transform: var(--p) rotate3d(-1,1,0,calc(var(--flip) + 180deg)) rotate(90deg);
120
120
background-image: linear-gradient(to top right,
121
121
rgb(var(--v1), var(--v1), var(--v1)),
122
122
rgb(var(--v2), var(--v2), var(--v2))
+1
static/shutup.css
+1
static/shutup.css
···
177
177
[lang="gv-IM"]::after { content: '🇮🇲' }
178
178
[lang="hr-HR"]::after { content: '🇭🇷' }
179
179
[lang="id-MY"]::after { content: '🇲🇾' }
180
+
[lang="is-IS"]::after { content: '🇮🇸' }
180
181
[lang="it-IT"]::after { content: '🇮🇹' }
181
182
[lang="ka-GE"]::after { content: '🇬🇪' }
182
183
[lang="km-KH"]::after { content: '🇰🇭' }