byjp.me
I get told to shut up a lot by my friend. This is the microsite that documents this in detail.
shutup.jp
postcards
microsite
1:root {
2 --text-color: #222;
3 --mute-color: #777;
4 --back-color: #f7f7f7;
5 --bg: url('bg-light.png');
6
7 @media (prefers-color-scheme: dark) {
8 --text-color: #ddd;
9 --mute-color: #777;
10 --back-color: #222;
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 }
17 }
18}
19
20a {
21 color: var(--mute-color);
22}
23
24a:hover {
25 color: var(--text-color);
26}
27
28html {
29 margin: 0;
30 padding: 0;
31 font-family: Verdana, Geneva, Tahoma, sans-serif;
32 width: 100%;
33 max-width: 100%;
34 scroll-snap-type: y mandatory;
35 scroll-padding: 0;
36 overflow-x: hidden;
37 /* -webkit-overflow-scrolling: touch; */
38}
39
40body {
41 margin: 0;
42 padding: 0;
43 width: 100%;
44 max-width: 100%;
45 background-color: var(--back-color);
46 color: var(--text-color);
47 background-image: var(--bg);
48 background-repeat: repeat;
49 background-attachment: fixed;
50 overflow-x: hidden;
51 /* -webkit-overflow-scrolling: touch; */
52}
53
54h1 {
55 font-size: 2.5rem;
56 text-align: center;
57 margin: 2rem;
58 padding: 0;
59}
60section, figure {
61 height: calc(100vh - 2em);
62 padding: 1em;
63 margin: 0;
64 display: flex;
65 align-items: center;
66 justify-content: center;
67 scroll-snap-align: start;
68 flex-direction: row;
69}
70
71figcaption {
72 min-width: 25vw;
73 position: relative;
74 text-align: right;
75 margin: 1em;
76 position: relative;
77 height: 50vh;
78 text-wrap: balance;
79}
80
81figcaption > * {
82 width: 100%;
83 transition: opacity 500ms ease-in-out 0ms;
84 position: absolute;
85 right: 0;
86 top: 50%;
87 transform: translateY(-50%);
88}
89
90figcaption .title {
91 transition-delay: 500ms;
92 font-size: 1.5em;
93 font-weight: bold;
94}
95
96.title time {
97 font-style: italic;
98 font-size: 0.65em;
99 font-weight: normal;
100}
101
102.title * {
103 display: block;
104 margin-bottom: 0.5em;
105}
106
107figcaption .transcription {
108 opacity: 0;
109 white-space: pre;
110 text-wrap: balance;
111 font-size: 1.2em;
112}
113
114@media (orientation: portrait) {
115 figure {
116 flex-direction: column;
117 }
118
119 figcaption {
120 min-height: 25vh;
121 text-align: center;
122 width: 50vw;
123 margin: 2em 0;
124 }
125
126 figcaption > * {
127 top: 0;
128 transform: none;
129 }
130}
131
132section.explain {
133 display: grid;
134 place-content: center;
135 padding-inline: calc(max((100vw - 500px)/2, 2em));
136}
137
138p {
139 text-align:justify;
140}
141cite {
142 text-align: right;
143}
144cite::before {
145 content: '–';
146 margin-right: 0.25em;
147}
148
149.postcard {
150 max-width: 90vw;
151 max-height: 75vh;
152 aspect-ratio:1/1;
153 --flip: 0deg;
154 margin-inline: auto;
155}
156
157label {
158 display:block;
159 width: 100%;
160 cursor: pointer;
161}
162
163input {
164 display: inline;
165 width: 0;
166 height: 0;
167 overflow:hidden;
168 visibility: hidden;
169}
170
171input:checked ~ label .postcard {
172 --flip: 180deg;
173}
174
175input:checked ~ figcaption .transcription {
176 opacity: 1;
177 transition-delay: 500ms;
178}
179
180input:checked ~ figcaption .title {
181 opacity: 0;
182 transition-delay: 0s;
183}
184
185.postcard::before,.postcard::after,.postcard .shadow {
186 transition: transform 1s ease-in-out;
187}
188
189#worldmap {
190 width: 85%;
191 --collected: rgb(24, 227, 85);
192
193 g {
194 path {
195 stroke: #777;
196 stroke-width: 1px;
197 fill: currentColor;
198 fill-opacity: 10%;
199
200 }
201
202 &:hover path {
203 fill-opacity: 50%;
204 }
205
206 &.collected {
207 path {
208 fill: var(--collected);
209 fill-opacity: 40%;
210 filter: drop-shadow(0px 0px 10px var(--collected));
211 }
212
213 &:hover path {
214 fill-opacity: 100%;
215 }
216 }
217 }
218
219 circle {
220 fill: #777;
221 }
222}
223
224[lang]::after { margin-left: 0.5em }
225[lang="ar-AE"]::after { content: '🇦🇪' }
226[lang="ar-MA"]::after { content: '🇲🇦' }
227[lang="cy-GB"]::after { content: '🏴' }
228[lang="de-DE"]::after { content: '🇩🇪' }
229[lang="el-GR"]::after { content: '🇬🇷' }
230[lang="en-CA"]::after { content: '🇨🇦' }
231[lang="en-GB"]::after { content: '🇬🇧' }
232[lang="en-SG"]::after { content: '🇸🇬/🇬🇧' }
233[lang="en-US"]::after { content: '🇺🇸' }
234[lang="es-ES"]::after { content: '🇪🇸' }
235[lang="es-GT"]::after { content: '🇬🇹' }
236[lang="fr-FR"]::after { content: '🇫🇷' }
237[lang="fr-IM"]::after { content: '🇮🇲/🇫🇷' }
238[lang="gd-GB"]::after { content: '🏴' }
239[lang="gv-IM"]::after { content: '🇮🇲' }
240[lang="hr-HR"]::after { content: '🇭🇷' }
241[lang="id-MY"]::after { content: '🇲🇾' }
242[lang="is-IS"]::after { content: '🇮🇸' }
243[lang="it-IT"]::after { content: '🇮🇹' }
244[lang="ja-JA"]::after { content: '🇯🇵' }
245[lang="ka-GE"]::after { content: '🇬🇪' }
246[lang="km-KH"]::after { content: '🇰🇭' }
247[lang="ko-KR"]::after { content: '🇰🇷' }
248[lang="mi-NZ"]::after { content: '🇳🇿' }
249[lang="ms-SG"]::after { content: '🇸🇬/🇲🇾' }
250[lang="pt-PT"]::after { content: '🇵🇹' }
251[lang="se-SE"]::after { content: '🇸🇪' }
252[lang="ta-LK"]::after { content: '🇱🇰' }
253[lang="ta-SG"]::after { content: '🇸🇬/🇮🇳' }
254[lang="th-TH"]::after { content: '🇹🇭' }
255[lang="vi-VN"]::after { content: '🇻🇳' }
256[lang="zh-CN"]::after { content: '🇨🇳' }
257[lang="zh-SG"]::after { content: '🇸🇬/🇨🇳' }
258[lang="zh-TW"]::after { content: '🇹🇼' }
259
260a,span {
261 img[src$=".svg"] {
262 height: 1em;
263 }
264}