/* ========================================================= QGIS2WEB INTERACTIVE MAPS (file: css/pp-qgis2web.css) Enqueued from functions.php (handle "pp-qgis2web", version = filemtime, so every edit busts the cache). WHAT THIS IS FOR Maps made in QGIS with the qgis2web plugin (Leaflet export, pinalpost template), uploaded to /maps// on this site, and embedded in an article with an iframe. Nothing here touches the map itself -- the Leaflet page in the iframe has its own CSS. This file only sizes and places the box the iframe sits in, and styles the caption. Companion to the PHOTOJOURNALISM SECTIONS in style.css: same three widths, same breakout geometry, so a map and a photo in one article line up. A map differs from a photo in one way: an iframe has no natural height, so each size sets an aspect-ratio and the iframe fills the box. Height follows width. HOW TO USE (per map, in the editor): 1. Add a core "Custom HTML" block (not a PostX block). 2. Paste:

Interactive map of ... (Map: Pinal Post) · Open the map full-screen

3. Change SLUG in BOTH places; write the title and caption. No inline style attributes on the div or iframe -- an inline height would fight the aspect-ratio below. 4. Optionally swap the class on the div for a bigger size. THE THREE SIZES (class on the div): pp-map -> article width (default) 3:2 pp-map-wide -> wider than text, like pp-photo-wide 16:10 pp-map-full -> full-bleed, like pp-photo 21:9 band All three switch to a portrait 4:5 box on phones; wide and full go edge to edge there. No toolbar alignment step -- the class alone does it. Scroll-wheel zoom inside the article is handled in the map's own index.html, not here. SECTIONS 1. Shared box 5. Phones 2. Article width 6. Caption (+ dark-template override) 3. Wide 7. Let the breakout escape PostX wrappers 4. Full-bleed ========================================================= */ /* --------------------------------------------------------- 1. SHARED BOX (all three sizes) The wrapper is the sized box; the iframe only fills it. --------------------------------------------------------- */ .pp-map, .pp-map-wide, .pp-map-full { position: relative; display: block; box-sizing: border-box; width: 100%; max-height: 85vh; /* never taller than one screen */ min-height: 360px; /* fallback if aspect-ratio is unsupported */ margin-top: clamp(1.5rem, 3vw, 3rem); margin-bottom: 0; /* the caption supplies the space below */ overflow: hidden; background: #e9e5dc; /* shows while the map loads */ } .pp-map iframe, .pp-map-wide iframe, .pp-map-full iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* --------------------------------------------------------- 2. ARTICLE WIDTH (class: pp-map) -- the default Sits inside the text column. 3:2 gives roughly the 520px the first map ran at in the 68% column. --------------------------------------------------------- */ .pp-map { aspect-ratio: 3 / 2; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); } /* --------------------------------------------------------- 3. WIDE MAP (class: pp-map-wide) Same geometry as pp-photo-wide: ~120px past the text column on each side, never to the screen edge. Uses a `left` offset instead of negative margins so the theme's constrained-layout `margin: auto !important` cannot undo it. z-index keeps the map above the sidebar: the Leaflet layer list sits on the map's right edge, exactly where the sidebar would otherwise paint over it and block clicks. --------------------------------------------------------- */ .pp-map-wide { aspect-ratio: 16 / 10; width: calc(100% + 240px) !important; max-width: 100vw !important; left: -120px !important; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); z-index: 2; } /* On narrow screens, don't push past the edge -- go full (same 900px breakpoint as pp-photo-wide). */ @media (max-width: 900px) { .pp-map-wide { width: 100vw !important; max-width: 100vw !important; left: calc(50% - 50vw) !important; border-radius: 0; } } /* --------------------------------------------------------- 4. FULL-BLEED MAP (class: pp-map-full) Same offset as pp-photo: the 68% column sits at the left edge of the centered 1140px row, so above 1139px the shift to viewport-left is 570px - 50vw. A 21:9 band rather than 16:10 -- at full screen width a 16:10 map would be taller than the screen and the 85vh cap would kick in anyway. --------------------------------------------------------- */ .pp-map-full { aspect-ratio: 21 / 9; width: 100vw !important; max-width: 100vw !important; left: calc(570px - 50vw) !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; transform: none !important; border-radius: 0; z-index: 2; } /* Below 1140 the column is effectively centered, so the standard breakout is correct (same as pp-photo). */ @media (max-width: 1139px) { .pp-map-full { left: calc(50% - 50vw) !important; } } /* --------------------------------------------------------- 5. PHONES (max 650px, matches the header/duo breakpoint) Portrait box: more map per screen, and the Leaflet layer list is collapsed to its toggle at this width anyway. The default pp-map stays in the column (the gutter is only ~16px); wide and full are already edge to edge. --------------------------------------------------------- */ @media (max-width: 650px) { .pp-map, .pp-map-wide, .pp-map-full { aspect-ratio: 4 / 5; max-height: 70vh; min-height: 320px; border-radius: 0; } } /* --------------------------------------------------------- 6. CAPTION (class: pp-map-caption on the

under the map) Same look as the site's standard inline caption div: PostX body font, 13px, #333, italic, left-aligned. Italic comes from font-style, so no wrapper is needed. margin-top is +8px, not the caption div's -10px: that negative margin compensates for an Image block's gap, and the map box has none. --------------------------------------------------------- */ .pp-map-caption { /* !important throughout: PostX styles every

in the article body at higher specificity, and without it the caption renders as an ordinary paragraph (full body size, upright). */ font-family: var(--postx_preset_Body_and_Others_typo_font_family, sans-serif) !important; font-weight: var(--postx_preset_Body_and_Others_typo_font_weight, 400) !important; font-style: italic !important; text-transform: var(--postx_preset_Body_and_Others_typo_text_transform, none) !important; text-decoration: var(--postx_preset_Body_and_Others_typo_text_decoration, none) !important; font-size: 13px !important; line-height: 1.4 !important; color: #333 !important; margin: 8px 0 0 !important; padding: 0 0 20px !important; text-align: left !important; position: relative; box-sizing: border-box; } .pp-map-caption a { white-space: nowrap; /* "Open the map full-screen" never breaks mid-link */ } /* Under a WIDE map the caption follows the map's left edge (same offset as the box, section 3) so it reads like a photo caption under a wide photo instead of being indented. */ .pp-map-wide + .pp-map-caption { width: calc(100% + 240px) !important; max-width: 100vw !important; left: -120px !important; } @media (max-width: 900px) { .pp-map-wide + .pp-map-caption { width: 100vw !important; left: calc(50% - 50vw) !important; padding-left: 16px !important; padding-right: 16px !important; } } /* Under a FULL-BLEED map the caption spans the screen with the same offset as the box (section 4) and a comfortable inset, like the credit line under pp-photo. */ .pp-map-full + .pp-map-caption { width: 100vw !important; max-width: 100vw !important; left: calc(570px - 50vw) !important; padding-left: clamp(16px, 4vw, 64px) !important; padding-right: clamp(16px, 4vw, 64px) !important; } @media (max-width: 1139px) { .pp-map-full + .pp-map-caption { left: calc(50% - 50vw) !important; } } /* --- 6b. DARK PHOTOJOURNALISM TEMPLATE ONLY --------------- Photojournalism posts (tag "photojournalism", which body-class-tags.php exposes as body.tag-photojournalism) use a dark brown template. On that background the #333 caption above is unreadable and the theme's default link colour (#111) is invisible -- the same problem the comment form rules in style.css fix. These rules fire ONLY on posts with that tag: lighter caption text, white links, and a dark loading background with no shadow on the map box. On every other article they do nothing. Safe to delete if a map never goes into a photojournalism piece. --------------------------------------------------------- */ body.tag-photojournalism .pp-map-caption { color: #b9b2aa !important; } body.tag-photojournalism .pp-map-caption a { color: #ffffff !important; } body.tag-photojournalism .pp-map, body.tag-photojournalism .pp-map-wide, body.tag-photojournalism .pp-map-full { background: #2a1f16; box-shadow: none; } /* --------------------------------------------------------- 7. LET THE BREAKOUT ESCAPE Same as the photo rule: PostX wrappers clip overflow, so any wrapper that contains a wide/full map must not. Scoped with :has() so it only fires on posts that use them. A parallel rule rather than an edit to the photo one, so the two sections stay independent. html/body already have overflow-x: clip from the photo section, which guards against a horizontal scrollbar from the 100vw box. --------------------------------------------------------- */ :is(.ultp-builder-container, .ultp-builder-wrap, .ultp-builder-content, .ultp-block-wrapper, .ultp-column-wrapper, .ultp-row-content, .ultp-row-wrapper, [class*="wp-block-ultimate-post-column"], [class*="wp-block-ultimate-post-row"], [class*="wp-block-ultimate-post-post-content"]):has(.pp-map-wide, .pp-map-full, .pp-map-caption) { overflow: visible !important; }