@projektemacher/storymapjs 0.10.7 → 0.10.8

package/src/scss/VCO.StoryMap.Dark.scss

@@ -32,8 +32,6 @@
 @use "media/types/VCO.Media.Image" as *;
 @use "media/types/VCO.Media.Twitter" as *;
 @use "media/types/VCO.Media.Blockquote" as *;
-@use "media/types/VCO.Media.Instagram" as *;
-@use "media/types/VCO.Media.Profile" as *;
 @use "media/types/VCO.Media.IFrame" as *;
 @use "media/types/VCO.Media.Wikipedia" as *;
 @use "map/openlayers/VCO.Map.OpenLayers" as *;
@@ -51,8 +49,7 @@
     line-height: normal;
     overflow: hidden;
     position: relative;
-
-    @include user-select(none);
+    user-select: none;
 }
 
 /* Portrait
@@ -60,8 +57,7 @@
 .vco-layout-portrait {
     .vco-storyslider {
         padding-top: 10px;
-
-        @include box-shadow(0 -3px 6px rgba(0, 0, 0, 0.2));
+        box-shadow: 0 -3px 6px rgb(0 0 0 / 20%);
     }
 }
 
@@ -136,3 +132,19 @@
         }
     }
 }
+
+/* No map (map_type: "none")
+================================================== */
+.vco-layout-no-map {
+    .vco-storyslider {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        background-color: $color-background;
+
+        .vco-slider-background {
+            display: none;
+        }
+    }
+}

package/src/scss/VCO.StoryMap.scss

@@ -32,8 +32,6 @@
 @use "media/types/VCO.Media.Image" as *;
 @use "media/types/VCO.Media.Twitter" as *;
 @use "media/types/VCO.Media.Blockquote" as *;
-@use "media/types/VCO.Media.Instagram" as *;
-@use "media/types/VCO.Media.Profile" as *;
 @use "media/types/VCO.Media.IFrame" as *;
 @use "media/types/VCO.Media.Wikipedia" as *;
 @use "map/openlayers/VCO.Map.OpenLayers" as *;
@@ -51,8 +49,7 @@
     line-height: normal;
     overflow: hidden;
     position: relative;
-
-    @include user-select(none);
+    user-select: none;
 
     /* fullscreen: fill the screen and sit above everything else */
     &:fullscreen {
@@ -73,8 +70,7 @@
 .vco-layout-portrait {
     .vco-storyslider {
         padding-top: 10px;
-
-        @include box-shadow(0 -3px 6px rgba(0, 0, 0, 0.2));
+        box-shadow: 0 -3px 6px rgb(0 0 0 / 20%);
     }
 }
 
@@ -107,6 +103,27 @@
     }
 }
 
+/* No map (map_type: "none")
+   The storyslider is the whole story: it takes the full width and height
+   under the menubar, and it is opaque, because there is no map behind it for
+   the panel to fade over. Landscape normally pins the panel to the right
+   half (`.vco-layout-landscape .vco-storyslider`), so the width, left and the
+   gradient background all have to be undone here.
+================================================== */
+.vco-layout-no-map {
+    .vco-storyslider {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        background-color: $color-background;
+
+        .vco-slider-background {
+            display: none;
+        }
+    }
+}
+
 /* Map area "left" (options.map_area): the map is limited to the left,
    visible half and the slide panel is opaque — no gradient fades over the
    map, so the view center is the visible center (no offset needed)
@@ -162,3 +179,17 @@
         transform: translateX(50%);
     }
 }
+
+/* Screen-reader-only utility (aria-live slide announcements)
+================================================== */
+.vco-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+}

package/src/scss/Variables.Dark.scss

@@ -51,6 +51,7 @@ $arrow-size: 20px;
 $time-marker-border-radius: 10px;
 
 /* Animation
+   The animation curves live in src/animation/easings.ts, not here: the
+   widget animates through OpenLayers and the Web Animations API, not CSS
+   transitions. See that file.
 ================================================== */
-$animation-ease: cubic-bezier(0.77, 0, 0.175, 1);
-$animation-duration: 1000ms;

package/src/scss/Variables.scss

@@ -42,6 +42,7 @@ $base-spacing: 15px;
 $arrow-size: 20px;
 
 /* Animation
+   The animation curves live in src/animation/easings.ts, not here: the
+   widget animates through OpenLayers and the Web Animations API, not CSS
+   transitions. See that file.
 ================================================== */
-$animation-ease: cubic-bezier(0.77, 0, 0.175, 1);
-$animation-duration: 1000ms;

package/src/scss/core/Mixins.scss

@@ -3,22 +3,12 @@
 
 /*	Mixins.scss
 	Snippets of reusable CSS to develop faster and keep code readable
- * ----------------------------------------------------------------- */
-
-// Cubic Bezier
-@mixin animation-timing-cubic-bezier {
-    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-}
 
-// Property Animation
-@mixin property-animation($prop: height, $time: 1000ms, $ease: cubic-bezier(0.77, 0, 0.175, 1)) {
-    transition: $prop $time $ease;
-}
-
-// Opacity
-@mixin opacity($opacity: 100) {
-    opacity: math.div($opacity, 100);
-}
+	Kept deliberately small: a mixin that only wraps one declaration costs a
+	reader more than the declaration does, and four of the previous mixins had
+	zero call sites. Reach for `display: flow-root` over a clearfix, and for a
+	variable over a hard-coded easing.
+ * ----------------------------------------------------------------- */
 
 // Background Color Opacity
 @mixin background-color-opacity($cr: 0, $cg: 0, $cb: 0, $opacity: 100) {
@@ -31,11 +21,6 @@
     text-shadow: $shadow !important;
 }
 
-// Border Radius
-@mixin border-radius($radius: 5px) {
-    border-radius: $radius;
-}
-
 // Single side border-radius
 @mixin border-right-radius($radius) {
     border-bottom-right-radius: $radius;
@@ -47,35 +32,6 @@
     border-top-left-radius: $radius;
 }
 
-// Box Shadow
-@mixin box-shadow($shadow: 1px 1px 7px rgba(0, 0, 0, 0.3)) {
-    box-shadow: $shadow;
-}
-
-// Transform
-@mixin transform($transform) {
-    transform: $transform;
-}
-
-// User select
-// For selecting text on the page
-@mixin user-select($select) {
-    user-select: $select;
-}
-
-// Clear Fix
-@mixin clearfix {
-    &::before,
-    &::after {
-        display: table;
-        content: "";
-    }
-
-    &::after {
-        clear: both;
-    }
-}
-
 @mixin translucent-background($color: #fff, $alpha: 1) {
     background-color: rgba($color, $alpha);
 }
@@ -96,17 +52,3 @@
         $end-color $end-percent
     );
 }
-
-@mixin gradient-horizontal-three-colors(
-    $start-color: #00b3ee,
-    $mid-color: #7a43b6,
-    $color-stop: 50%,
-    $end-color: #c3325f
-) {
-    background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
-    background-repeat: no-repeat;
-}
-
-@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
-    background-image: radial-gradient(circle, $inner-color, $outer-color);
-}

package/src/scss/fonts/font.amatic-andika.scss

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

package/src/scss/fonts/font.bitter-raleway.scss

@@ -11,6 +11,9 @@
     $subsets: (
         latin,
         latin-ext,
+        cyrillic,
+        cyrillic-ext,
+        vietnamese,
     ),
     $formats: woff2
 );
@@ -22,6 +25,9 @@
     $subsets: (
         latin,
         latin-ext,
+        cyrillic,
+        cyrillic-ext,
+        vietnamese,
     ),
     $formats: woff2
 );

package/src/scss/fonts/font.cairo.scss

@@ -0,0 +1,79 @@
+@use "pkg:@fontsource-utils/scss" as fontsource;
+@use "pkg:@fontsource/cairo/scss" as cairo;
+@use "../Variables" as *;
+@use "font.base" as base;
+@include fontsource.faces(
+    $metadata: cairo.$metadata,
+    $weights: all,
+    $styles: all,
+    $subsets: (
+        latin,
+        latin-ext,
+        arabic,
+    ),
+    $formats: woff2
+);
+
+/*	Font Cairo (latin + arabic coverage)
+https://fonts.google.com/specimen/Cairo
+----------------------------------------------------- */
+
+// Font Import
+
+// Font Variables
+$font-main: "Cairo", "Helvetica Neue", helvetica, arial, "MS Trebuchet", sans-serif;
+$font-secondary: "Cairo", "Helvetica Neue", helvetica, arial, "MS Trebuchet", sans-serif;
+$font-navigation: $font-secondary;
+$font-marker: $font-secondary;
+$font-headline-date: $font-navigation;
+$base-font-size: 17px;
+$base-font-weight: 300;
+
+// Blockquote
+$font-blockquote: $font-main;
+$font-blockquote-weight: 300;
+$font-blockquote-style: italic;
+
+// Headings
+$font-size-headings: 40px;
+$font-headings-lineheight: $font-size-headings;
+$font-headings-text-transform: none;
+$font-size-headings-small: 24px;
+$font-headings-weight: 500;
+$font-size-headline-title: 58px;
+
+// Marker
+$font-marker-text-transform: $font-headings-text-transform;
+
+// Navigation
+$font-navigation-text-transform: none;
+
+@include base.font-base(
+    (
+        font-main: $font-main,
+        font-secondary: $font-secondary,
+        font-navigation: $font-navigation,
+        font-marker: $font-marker,
+        font-headline-date: $font-headline-date,
+        base-font-size: $base-font-size,
+        base-font-weight: $base-font-weight,
+        font-blockquote: $font-blockquote,
+        font-blockquote-weight: $font-blockquote-weight,
+        font-blockquote-style: $font-blockquote-style,
+        font-size-headings: $font-size-headings,
+        font-headings-lineheight: $font-headings-lineheight,
+        font-headings-text-transform: $font-headings-text-transform,
+        font-headings-weight: $font-headings-weight,
+        font-size-headings-small: $font-size-headings-small,
+        font-size-headline-title: $font-size-headline-title,
+        font-navigation-text-transform: $font-navigation-text-transform,
+        font-marker-text-transform: $font-marker-text-transform,
+    )
+);
+
+.vco-timeline {
+    .vco-headline-date,
+    h3.vco-headline-date {
+        margin-bottom: 5px !important;
+    }
+}

package/src/scss/fonts/font.clicker-garamond.scss

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

package/src/scss/fonts/font.dancing-ledger.scss

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

package/src/scss/fonts/font.knightlab.scss

@@ -12,6 +12,9 @@
     $subsets: (
         latin,
         latin-ext,
+        cyrillic,
+        cyrillic-ext,
+        vietnamese,
     ),
     $formats: woff2
 );
@@ -23,6 +26,11 @@
     $subsets: (
         latin,
         latin-ext,
+        cyrillic,
+        cyrillic-ext,
+        greek,
+        greek-ext,
+        vietnamese,
     ),
     $formats: woff2
 );
@@ -34,6 +42,12 @@
     $subsets: (
         latin,
         latin-ext,
+        cyrillic,
+        cyrillic-ext,
+        greek,
+        greek-ext,
+        hebrew,
+        vietnamese,
     ),
     $formats: woff2
 );

package/src/scss/fonts/font.oldstandard.scss

@@ -12,6 +12,9 @@
     $subsets: (
         latin,
         latin-ext,
+        cyrillic,
+        cyrillic-ext,
+        vietnamese,
     ),
     $formats: woff2
 );
@@ -26,6 +29,9 @@
     $subsets: (
         latin,
         latin-ext,
+        cyrillic,
+        cyrillic-ext,
+        vietnamese,
     ),
     $formats: woff2
 );

package/src/scss/fonts/font.opensans-gentiumbook.scss

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

package/src/scss/fonts/font.playfair-faunaone.scss

@@ -21,6 +21,8 @@
     $subsets: (
         latin,
         latin-ext,
+        cyrillic,
+        vietnamese,
     ),
     $formats: woff2
 );

package/src/scss/fonts/font.playfair.scss

@@ -10,6 +10,8 @@
     $subsets: (
         latin,
         latin-ext,
+        cyrillic,
+        vietnamese,
     ),
     $formats: woff2
 );
@@ -21,6 +23,8 @@
     $subsets: (
         latin,
         latin-ext,
+        cyrillic,
+        vietnamese,
     ),
     $formats: woff2
 );

package/src/scss/fonts/font.pt.scss

@@ -11,6 +11,8 @@
     $subsets: (
         latin,
         latin-ext,
+        cyrillic,
+        cyrillic-ext,
     ),
     $formats: woff2
 );
@@ -21,6 +23,8 @@
     $subsets: (
         latin,
         latin-ext,
+        cyrillic,
+        cyrillic-ext,
     ),
     $formats: woff2
 );
@@ -31,6 +35,8 @@
     $subsets: (
         latin,
         latin-ext,
+        cyrillic,
+        cyrillic-ext,
     ),
     $formats: woff2
 );

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.MapMarker.scss

@@ -115,12 +115,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 +144,99 @@ $map-icon-width: 38px;
         // top: 6px;
     }
 }
+
+/*  Marker popup and audio badge (docs/plans/iiif-media-tours.md §2)
+================================================== */
+// 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: 260px;
+    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: 28px;
+        min-height: 28px;
+        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/media/VCO.Media.scss

@@ -24,8 +24,7 @@
     .vco-media-content-container {
         .vco-media-content {
             position: relative;
-
-            @include clearfix;
+            display: flow-root;
 
             .vco-media-loaderror {
                 p {
@@ -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;
 
@@ -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;
     }
 }