diff --git a/static/dist/index.html b/static/dist/index.html
index b623811f..29bfa1e5 100644
--- a/static/dist/index.html
+++ b/static/dist/index.html
@@ -25,7 +25,7 @@
/* Full viewport. */
width: 100%;
- height: 100%;
+ height: 50%;
/* Remove default (native-like) border. */
border: none;
@@ -45,13 +45,44 @@
contain-intrinsic-size: 304px 154px;
}
- /* Ensure inline layer content is hidden if custom/built-in elements isn't
- supported, or if javascript is disabled. This needs to be defined separately
- from the above, because the `:not(:defined)` selector invalidates the entire
- declaration in browsers that do not support it. */
- layer- {
- display: none;
- }
+ /* Specifying the `:defined` selector is recommended to style the map
+ element, such that styles don't apply when fallback content is in use
+ (e.g. when scripting is disabled or when custom/built-in elements isn't
+ supported in the browser). */
+ map[is="web-map"]:defined {
+ /* Responsive map. */
+ max-width: 100%;
+
+ /* Full viewport. */
+ width: 100%;
+ height: 50%;
+
+ /* Remove default (native-like) border. */
+ border: none;
+
+ vertical-align: middle;
+ }
+
+ /* Pre-style to avoid Layout Shift. */
+ map[is="web-map"]:not(:defined) {
+ display: inline-block;
+ contain: size;
+ contain-intrinsic-size: 304px 154px;
+ }
+
+ /* Pre-style to avoid FOUC of inline layer- and fallback content. */
+ map[is="web-map"]:not(:defined) + img[usemap],
+ map[is="web-map"]:not(:defined) > :not(area):not(.mapml-web-map) {
+ display: none;
+ }
+
+ /* Ensure inline layer content is hidden if custom/built-in elements isn't
+ supported, or if javascript is disabled. This needs to be defined separately
+ from the above, because the `:not(:defined)` selector invalidates the entire
+ declaration in browsers that do not support it. */
+ layer- {
+ display: none;
+ }
@@ -84,20 +128,46 @@
-
-
-
- All cuisines
- African
- Asian
- Cajun
- Indian
- Italian
- Mexican
-
-
-
-
+
+
+
+ All cuisines
+ African
+ Asian
+ Cajun
+ Indian
+ Italian
+ Mexican
+
+
+
+
+