@projektemacher/storymapjs 0.10.7 → 0.11.0

package/src/scss/fonts/font.ubuntu.scss

@@ -9,6 +9,10 @@
     $subsets: (
         latin,
         latin-ext,
+        cyrillic,
+        cyrillic-ext,
+        greek,
+        greek-ext,
     ),
     $formats: woff2
 );

package/src/scss/fonts/font.unicaone-vollkorn.scss

@@ -10,6 +10,7 @@
     $subsets: (
         latin,
         latin-ext,
+        vietnamese,
     ),
     $formats: woff2
 );
@@ -21,6 +22,10 @@
     $subsets: (
         latin,
         latin-ext,
+        cyrillic,
+        cyrillic-ext,
+        greek,
+        vietnamese,
     ),
     $formats: woff2
 );

package/src/scss/map/VCO.Map.scss

@@ -6,7 +6,7 @@
     height: 100%;
     overflow: hidden;
     top: 0;
-    background-color: $color-foreground;
+    background-color: var(--vco-color-foreground, #{$color-foreground});
 
     .vco-map-mask {
         width: 100%;

package/src/scss/map/VCO.MapMarker.scss

@@ -46,7 +46,18 @@ $map-icon-width: 38px;
     }
 
     .vco-mapmarker-active {
-        color: $color-theme;
+        color: var(--vco-color-theme, #{$color-theme});
+    }
+
+    // pins are keyboard-focusable (tabindex + role=button): every marker
+    // shape gets the same visible ring
+    .vco-mapmarker:focus-visible,
+    .vco-mapmarker-active:focus-visible,
+    .vco-mapmarker-custom:focus-visible,
+    .vco-mapmarker-image-icon:focus-visible,
+    .vco-mapmarker-image-icon-active:focus-visible {
+        outline: 2px solid var(--vco-color-dark, #{$color-dark});
+        outline-offset: 2px;
     }
 
     // Custom icon markers render only their image (no vco-mapmarker class,
@@ -72,7 +83,7 @@ $map-icon-width: 38px;
     }
 
     .vco-mapmarker-image-icon-active {
-        border: 4px solid $color-theme;
+        border: 4px solid var(--vco-color-theme, #{$color-theme});
         filter: grayscale(0);
     }
 
@@ -89,9 +100,9 @@ $map-icon-width: 38px;
         font-family: $font-sanserif;
         font-size: 12px;
         font-weight: bold;
-        color: $color-text;
-        background-color: $color-background;
-        border: 1px solid $color-theme;
+        color: var(--vco-color-text, #{$color-text});
+        background-color: var(--vco-color-background, #{$color-background});
+        border: 1px solid var(--vco-color-theme, #{$color-theme});
         border-radius: 4px;
         box-shadow: 2px 2px 2px rgb(0 0 0 / 30%);
         pointer-events: none;
@@ -115,12 +126,11 @@ $map-icon-width: 38px;
         // top:4px;
         top: 8px;
         left: 0;
-
-        @include opacity(75);
+        opacity: 0.75;
     }
 
     .vco-mapmarker-active.vco-mapmarker-icon::after {
-        @include opacity(100);
+        opacity: 1;
     }
 
     .vco-mapmarker-icon.vco-icon-youtube::after {
@@ -145,3 +155,99 @@ $map-icon-width: 38px;
         // top: 6px;
     }
 }
+
+/*  Marker popup and audio badge
+================================================== */
+// A card anchored to the marker element: it is a DOM child, so it travels
+// with the pin and needs no positioning maths. 44px tap targets and a
+// visible focus ring, like the rest of the map furniture.
+.vco-mapmarker-popup-open {
+    z-index: 1100; // above the active pin's 1000
+}
+
+.vco-marker-popup {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+    width: max-content;
+    max-width: min(260px, calc(100vw - 32px));
+    padding: 10px 12px;
+    border: 1px solid rgb(0 0 0 / 20%);
+    border-radius: 4px;
+    background: #fff;
+    color: #222;
+    font-size: 13px;
+    line-height: 1.4;
+    text-align: left;
+    box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
+    cursor: default;
+    pointer-events: auto; // the pin's overlay sets stopEvent: false
+
+    .vco-marker-popup-close {
+        flex: 0 0 auto;
+        min-width: 44px;
+        min-height: 44px;
+        margin: -4px -4px 0 0;
+        padding: 0;
+        border: 0;
+        background: none;
+        color: inherit;
+        font-size: 18px;
+        line-height: 1;
+        cursor: pointer;
+
+        &:focus-visible {
+            outline: 2px solid #1a6fb5;
+            outline-offset: 1px;
+        }
+    }
+
+    .vco-marker-popup-thumb {
+        flex: 0 0 auto;
+        width: 48px;
+        height: 48px;
+        border-radius: 2px;
+        object-fit: cover;
+    }
+
+    .vco-marker-popup-body {
+        min-width: 0;
+    }
+
+    .vco-marker-popup-headline {
+        margin: 0 0 4px;
+        font-size: 14px;
+        font-weight: 600;
+    }
+
+    .vco-marker-popup-excerpt {
+        margin: 0;
+    }
+
+    // a long card is capped and scrolls rather than growing off-screen
+    p,
+    .vco-marker-popup-excerpt {
+        max-height: 8em;
+        overflow-y: auto;
+    }
+}
+
+// A slide with narration or audio media: a small dot on the pin, so a tour's
+// audible stops are visible without reading the card.
+.vco-mapmarker-has-audio {
+    &::after {
+        content: "";
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        width: 8px;
+        height: 8px;
+        border: 1px solid #fff;
+        border-radius: 50%;
+        background: #d24d4d;
+    }
+}

package/src/scss/map/openlayers/VCO.Map.OpenLayers.scss

@@ -33,13 +33,13 @@
         position: absolute;
         bottom: 0;
         right: 0;
-        background-color: rgb(255 255 255 / 75%);
+        background-color: rgb(255 255 255 / 90%);
         font-size: 10px;
         padding: 1px 4px;
         z-index: 1000;
 
         a {
-            color: #666;
+            color: #333;
             text-decoration: none;
         }
 
@@ -64,14 +64,17 @@
             }
 
             span {
-                color: $color-theme;
+                color: var(--vco-color-theme, #{$color-theme});
                 display: inline-block;
                 transform: rotate(45deg);
             }
 
             &:hover {
                 text-decoration: none;
-                color: color.adjust($color-theme, $lightness: 15%);
+                color: var(
+                    --vco-color-theme-bright,
+                    #{color.adjust($color-theme, $lightness: 15%)}
+                );
             }
         }
     }

package/src/scss/media/VCO.Media.scss

@@ -24,15 +24,14 @@
     .vco-media-content-container {
         .vco-media-content {
             position: relative;
-
-            @include clearfix;
+            display: flow-root;
 
             .vco-media-loaderror {
                 p {
-                    color: $ui-background-color;
+                    color: var(--vco-color-text, #{$color-text});
 
                     span {
-                        color: $ui-background-color;
+                        color: var(--vco-color-text, #{$color-text});
                     }
 
                     text-align: center;
@@ -61,7 +60,7 @@
     z-index: 1;
 
     // background:$color-background;
-    @include box-shadow(1px 1px 7px rgba(0, 0, 0, 0.5));
+    box-shadow: 1px 1px 7px rgb(0 0 0 / 50%);
 }
 
 /*
@@ -75,11 +74,11 @@
 	top: 80%;
 	max-width:300px;
 	background: #333;
-	@include box-shadow(0 15px 10px #666);
-	@include transform(rotate(-2deg));
+	box-shadow: 0 15px 10px #666;
+	transform: rotate(-2deg);
 }
 .vco-media-shadow::after {
-	@include transform(rotate(2deg));
+	transform: rotate(2deg);
 	right: 10px;
 	left: auto;
 }
@@ -90,8 +89,7 @@
 .vcard {
     // float:right;
 
-    @include clearfix;
-
+    display: flow-root;
     margin-bottom: $base-spacing;
     margin-top: 10px;
 
@@ -107,14 +105,14 @@
     }
 
     a {
-        color: color.adjust($color-dark, $lightness: 20%);
+        color: var(--vco-color-link, #{color.adjust($color-dark, $lightness: 20%)});
         text-decoration: none;
     }
 
     a:hover {
         .fn,
         .nickname {
-            color: $color-theme;
+            color: var(--vco-color-theme, #{$color-theme});
 
             // text-decoration: underline;
         }
@@ -132,7 +130,7 @@
 
     .nickname {
         margin-top: 1px;
-        color: color.adjust($color-dark, $lightness: 40%);
+        color: var(--vco-color-text-muted, #{color.adjust($color-dark, $lightness: 40%)});
     }
 
     .avatar {
@@ -152,14 +150,14 @@
     .vcard a {
         @include slide-text-shadow;
 
-        color: color.adjust($color-theme, $lightness: 90%);
+        color: var(--vco-color-theme-faint, #{color.adjust($color-theme, $lightness: 90%)});
     }
 }
 
 /* Credit
 ================================================== */
 .vco-credit {
-    color: #999;
+    color: var(--vco-color-text, #{$color-text});
     text-align: right;
     display: block;
     margin: 0 auto;
@@ -188,8 +186,7 @@
     .vco-media-shadow::before,
     .vco-media-shadow::after {
         background: none;
-
-        @include box-shadow(0 0 0 #000);
+        box-shadow: 0 0 0 #000;
     }
 }
 

package/src/scss/media/types/VCO.Media.Blockquote.scss

@@ -19,7 +19,7 @@
             cite {
                 font-size: $base-font-size;
                 line-height: math.floor($base-font-size * $base-line-height);
-                color: $color-foreground;
+                color: var(--vco-color-foreground, #{$color-foreground});
                 text-align: right;
             }
         }

package/src/scss/media/types/VCO.Media.Text.scss

@@ -35,13 +35,13 @@
         line-height: $base-font-size;
         font-weight: normal;
         margin: 0 0 2px;
-        color: color.adjust($color-text, $lightness: 25%);
+        color: var(--vco-color-text, #{$color-text});
 
         small {
             font-size: $base-font-size;
             line-height: $base-font-size;
             font-weight: normal;
-            color: color.adjust($color-text, $lightness: 25%);
+            color: var(--vco-color-text, #{$color-text});
         }
     }
 
@@ -56,6 +56,14 @@
             // font-weight:normal;
         }
     }
+
+    // Inline images embedded in slide text HTML (e.g. sketches, maps):
+    // constrain to the text column, keep aspect ratio with explicit
+    // width/height attributes
+    img {
+        max-width: 100%;
+        height: auto;
+    }
 }
 
 // When the background is an image
@@ -63,15 +71,15 @@
 .vco-full-color-background {
     .vco-text,
     .vco-text p {
-        color: $color-text-inverted !important;
+        color: var(--vco-color-text-inverted, #{$color-text-inverted}) !important;
         text-shadow: 1px 1px 2px #000;
 
         .vco-headline-date,
         h3.vco-headline-date {
-            color: $color-text-inverted !important;
+            color: var(--vco-color-text-inverted, #{$color-text-inverted}) !important;
 
             small {
-                color: $color-text-inverted !important;
+                color: var(--vco-color-text-inverted, #{$color-text-inverted}) !important;
             }
         }
     }

package/src/scss/media/types/VCO.Media.Twitter.scss

@@ -15,12 +15,12 @@
             margin-right: $base-spacing;
             font-size: $base-font-size;
             line-height: math.floor($base-font-size * $base-line-height);
-            color: $color-foreground;
+            color: var(--vco-color-foreground, #{$color-foreground});
 
             p {
                 font-size: $base-font-size-xlarge;
                 line-height: math.floor($base-font-size-xlarge * 1.1);
-                color: $color-dark;
+                color: var(--vco-color-dark, #{$color-dark});
             }
         }
 
@@ -36,11 +36,11 @@
             a:hover,
             a.vco-date:hover {
                 text-decoration: none;
-                color: #55acee;
+                color: #1a7ab5;
 
                 .fn,
                 .nickname {
-                    color: #55acee;
+                    color: #1a7ab5;
                 }
             }
         }

package/src/scss/media/types/VCO.Media.Wikipedia.scss

@@ -19,21 +19,8 @@
             font-style: italic;
         }
 
-        h4 {
-            margin-top: 0;
-
-            // border-bottom: 1px solid @color-line;
-            margin-bottom: 0;
-        }
-
-        h4 a {
-            color: $color-dark; // $color-theme;
-            text-decoration: none;
-        }
-
-        h4 a:hover {
-            text-decoration: underline;
-        }
+        // no h4 rules: the sanitizer strips the tag, so these were dead
+        // (issue #385 wave; see docs/plans/css-followups.md)
     }
 }
 
@@ -44,11 +31,8 @@
             padding: 20px;
 
             @include background-color-opacity(0, 0, 0, 60);
-            @include border-radius(7px);
 
-            h4 a {
-                @include slide-text-shadow;
-            }
+            border-radius: 7px;
         }
     }
 }