|
112 | 112 | font-weight: bold; |
113 | 113 | } |
114 | 114 |
|
115 | | -.dialog, |
116 | | -#close-button { |
| 115 | +.dialog { |
117 | 116 | transition: |
118 | 117 | left 0.25s ease-out, |
119 | 118 | top 0.25s ease-out; |
120 | | -} |
121 | | - |
122 | | -.dialog { |
123 | 119 | font-size: 48px; |
124 | 120 | background-color: #4f4444; |
125 | 121 | } |
126 | | - |
127 | 122 | .landscape .dialog { |
128 | 123 | top: -1096px; |
129 | 124 | left: 0; |
|
132 | 127 | top: 0; |
133 | 128 | left: -1096px; |
134 | 129 | } |
135 | | - |
136 | 130 | .dialog.visible { |
137 | 131 | top: 0; |
138 | 132 | left: 0; |
139 | 133 | } |
| 134 | +@media (max-width: 720px) { |
| 135 | + .dialog { |
| 136 | + font-size: 72px; |
| 137 | + } |
| 138 | +} |
140 | 139 |
|
| 140 | +#close-button { |
| 141 | + transition: |
| 142 | + left 0.25s ease-out, |
| 143 | + top 0.25s ease-out, |
| 144 | + transform 0.25s ease-out; |
| 145 | +} |
141 | 146 | .landscape #close-button { |
142 | 147 | top: -124px; |
143 | 148 | left: 24px; |
|
146 | 151 | top: 24px; |
147 | 152 | left: -124px; |
148 | 153 | } |
149 | | - |
150 | 154 | #close-button.visible { |
151 | 155 | top: 24px; |
152 | 156 | left: 24px; |
| 157 | + transform: rotate(90deg); |
153 | 158 | } |
154 | 159 |
|
155 | 160 | .dialog strong { |
| 161 | + margin-bottom: 24px; |
156 | 162 | font-size: 72px; |
157 | 163 | } |
| 164 | +@media (max-width: 720px) { |
| 165 | + .dialog strong { |
| 166 | + font-size: 96px; |
| 167 | + } |
| 168 | +} |
158 | 169 |
|
159 | 170 | .dialog p { |
160 | 171 | margin: 24px 0 0 0; |
|
163 | 174 | #map-dialog { |
164 | 175 | display: flex; |
165 | 176 | flex-direction: column; |
| 177 | + flex-wrap: wrap; |
166 | 178 | justify-content: center; |
167 | 179 | align-items: center; |
168 | | - text-align: center; |
| 180 | + box-sizing: border-box; |
| 181 | +} |
| 182 | +.landscape #map-dialog { |
| 183 | + padding: 24px 72px 24px 148px; |
| 184 | +} |
| 185 | +.portrait #map-dialog { |
| 186 | + padding: 148px 24px 72px 24px; |
169 | 187 | } |
170 | 188 |
|
171 | 189 | #map-list { |
172 | 190 | display: flex; |
173 | 191 | flex-wrap: wrap; |
174 | | - justify-content: center; |
| 192 | + justify-content: space-between; |
175 | 193 | align-items: center; |
176 | 194 | } |
177 | 195 |
|
|
180 | 198 | justify-content: center; |
181 | 199 | align-items: center; |
182 | 200 | box-sizing: border-box; |
183 | | - margin: 8px; |
| 201 | + margin-top: 8px; |
184 | 202 | padding: 16px; |
185 | 203 | width: 256px; |
186 | 204 | height: 128px; |
187 | 205 | border-radius: 16px; |
| 206 | + text-align: center; |
188 | 207 | font-size: 56px; |
189 | 208 | line-height: 48px; |
190 | 209 | background-color: #fea2; |
|
206 | 225 | .created { |
207 | 226 | font-size: 32px; |
208 | 227 | } |
| 228 | +@media (max-width: 720px) { |
| 229 | + .created { |
| 230 | + font-size: 48px; |
| 231 | + } |
| 232 | +} |
209 | 233 | </style> |
210 | 234 | </head> |
211 | 235 | <body> |
|
221 | 245 | <div id="help-dialog" class="dialog"> |
222 | 246 | <strong>OSM 15 Puzzle</strong> |
223 | 247 | <p> |
224 | | - This is the classic <a href="https://en.wikipedia.org/wiki/15_puzzle">15 puzzle</a> game using standard OpenStreetMap tiles.<br> |
| 248 | + This is the classic <a href="https://en.wikipedia.org/wiki/15_puzzle">15 puzzle</a> |
| 249 | + game using standard <a href="https://www.openstreetmap.org">OpenStreetMap</a> tiles. |
225 | 250 | Solve the puzzle by sliding the pieces to create the original map image. |
226 | 251 | </p> |
227 | | - <p>Move pieces by clicking or tapping on them.<br>If you have a keyboard, you may also use the arrow keys.</p> |
| 252 | + <p> |
| 253 | + Move pieces by clicking or tapping on them. |
| 254 | + If you have a keyboard, you may also use the arrow keys.</p> |
228 | 255 | <p class="created"> |
229 | 256 | Created by <a href="https://en.osm.town/@seav">Eugene Alvin Villar</a> • |
230 | 257 | <a href="https://github.com/seav/osm-15-puzzle">Source code in GitHub</a> |
|
256 | 283 | frisco : { z0: 13, x0: 1308, y0: 3165, space: 'SE', title: 'San Francisco' }, |
257 | 284 | barcelona: { z0: 14, x0: 8289, y0: 6118, space: 'SE', title: 'Barcelona' }, |
258 | 285 | london : { z0: 14, x0: 8185, y0: 5447, space: 'SE', title: 'London' }, |
259 | | - schiphol : { z0: 14, x0: 8407, y0: 5387, space: 'SE', title: 'Schiphol [AMS]' }, |
260 | | - haneda : { z0: 15, x0: 29105, y0: 12916, space: 'SW', title: 'Haneda [HND]' }, |
| 286 | + schiphol : { z0: 14, x0: 8407, y0: 5387, space: 'SE', title: 'Schiphol [ams]' }, |
| 287 | + haneda : { z0: 15, x0: 29105, y0: 12916, space: 'SW', title: 'Haneda [hnd]' }, |
261 | 288 | paris : { z0: 15, x0: 16596, y0: 11271, space: 'NW', title: 'Paris' }, |
262 | | - pentagon : { z0: 18, x0: 74960, y0: 100305, space: 'SE', title: 'Pentagon' }, |
263 | | - moma : { z0: 18, x0: 77212, y0: 98495, space: 'SE', title: 'MoMa New York' }, |
| 289 | + pentagon : { z0: 18, x0: 74960, y0: 100305, space: 'SE', title: 'The Pentagon' }, |
| 290 | + moma : { z0: 18, x0: 77212, y0: 98495, space: 'SE', title: 'MoMA New York City' }, |
264 | 291 | shibuya : { z0: 19, x0: 465597, y0: 206491, space: 'NE', title: 'Shibuya Station' }, |
265 | 292 | stpeters : { z0: 19, x0: 280279, y0: 194814, space: 'NE', title: 'St. Peter’s Basilica' }, |
266 | 293 | }; |
|
0 commit comments