@projektemacher/storymapjs 0.10.7 → 0.11.0

package/src/scss/VCO.StoryMap.scss

@@ -11,6 +11,7 @@
 
 /* Includes
 ================================================== */
+@use "sass:color";
 @use "Variables" as *; // Variables (easy way to make style changes)
 @use "core/Mixins" as *; // Less shortcuts and functions
 @use "core/Reset" as *; // CSS Reset
@@ -22,6 +23,7 @@
 //	Components
 @use "ui/VCO.MenuBar" as *;
 @use "ui/VCO.MenuBar.Button" as *;
+@use "ui/VCO.Layers" as *;
 @use "ui/VCO.Message" as *;
 @use "ui/VCO.Consent" as *;
 @use "slider/VCO.Slide" as *;
@@ -32,8 +34,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,14 +51,62 @@
     line-height: normal;
     overflow: hidden;
     position: relative;
+    user-select: none;
 
-    @include user-select(none);
+    // Theme palette (dark theme plan): every Variables.scss colour as a
+    // custom property, so a dark theme redeclares values instead of
+    // shipping a second stylesheet. Unused declarations cost nothing, and
+    // use sites keep their Sass value as the fallback, so each partial
+    // migrates independently. Includes the two runtime-themable text
+    // colors (issue #177), set inline via text_color/text_background_color.
+    --vco-color-background: #{$color-background};
+    --vco-color-foreground: #{$color-foreground};
+    --vco-color-dark: #{$color-dark};
+    --vco-color-theme: #{$color-theme};
+    --vco-color-theme-dark: #{$color-theme-dark};
+    --vco-color-text: #{$color-text};
+    --vco-color-text-muted: #{color.adjust($color-dark, $lightness: 40%)};
+    --vco-color-text-background: #{$color-background};
+    --vco-color-header-text: #{$color-header-text};
+    --vco-color-text-inverted: #{$color-text-inverted};
+    --vco-color-header-text-inverted: #{$color-header-text-inverted};
+    --vco-color-ui-background: #{$ui-background-color};
+
+    // Derived tones. Each is computed from the light palette here so the
+    // default render is unchanged; the dark block redefines them from its
+    // own palette. One property per distinct derivation, shared by every
+    // use site with the same arguments.
+    --vco-color-border: #{color.adjust($color-background, $lightness: -10%)};
+    --vco-color-hover: #{color.adjust($color-background, $lightness: -5%)};
+    --vco-color-nav-border: #{color.adjust($color-background, $lightness: -30%)};
+    --vco-color-theme-faint: #{color.adjust($color-theme, $lightness: 90%)};
+    --vco-color-theme-deep: #{color.adjust($color-theme, $lightness: -20%)};
+    --vco-color-theme-bright: #{color.adjust($color-theme, $lightness: 15%)};
+    --vco-color-link: #{color.adjust($color-dark, $lightness: 20%)};
+    --vco-color-ui-fade: #{fadeout($ui-background-color, 10%)};
+    --vco-color-ui-faint: #{fadeout($ui-background-color, 33%)};
+
+    /* Skip link: first tab stop inside the widget, off-screen until
+       focused, so keyboard visitors can jump past the chrome. */
+    .vco-skip-link {
+        position: absolute;
+        top: -999px;
+        left: 8px;
+        z-index: 100;
+        padding: 8px 12px;
+        background-color: var(--vco-color-background, #{$color-background});
+        color: var(--vco-color-text, #{$color-text});
+
+        &:focus-visible {
+            top: 8px;
+        }
+    }
 
     /* fullscreen: fill the screen and sit above everything else */
     &:fullscreen {
         width: 100%;
         height: 100%;
-        background-color: $color-background;
+        background-color: var(--vco-color-background, #{$color-background});
     }
 
     *,
@@ -68,13 +116,58 @@
     }
 }
 
+/* Dark theme (dark theme plan): the same property names redeclared from
+   the dark palette. Values below were carried over from
+   `src/scss/Variables.Dark.scss` (now deleted), except `$color-theme`
+   (`#c34528` is 3.18:1 on `#222`) and `$color-text` (`#808080` is 4.03:1),
+   which are lightened to `#dd735a` (5.06:1) and `#949494` (5.24:1) so
+   every text pair clears AA. Hover tints go brighter in dark mode rather
+   than darker, so they stay visible on dark surfaces.
+   Selected with `data-vco-theme="dark"`, or (when unset) the OS
+   `prefers-color-scheme`; explicit `"light"` pins the light palette. */
+@mixin vco-dark-palette {
+    --vco-color-background: #222;
+    --vco-color-foreground: #ccc;
+    --vco-color-dark: #fff;
+    --vco-color-theme: #dd735a;
+    --vco-color-theme-dark: #c24628;
+    --vco-color-text: #949494;
+    --vco-color-text-muted: #999;
+    --vco-color-text-background: #222;
+    --vco-color-header-text: #fff;
+    --vco-color-text-inverted: #bfbfbf;
+    --vco-color-header-text-inverted: #fff;
+    --vco-color-ui-background: #4d4d4d;
+    --vco-color-border: #080808;
+    --vco-color-hover: #151515;
+    --vco-color-nav-border: #000;
+    --vco-color-theme-faint: #fff;
+
+    // the three link colours share #eaa999 on purpose: in dark mode links,
+    // hovers and deep accents are one tone (5.06:1 on #222)
+    --vco-color-theme-deep: #eaa999;
+    --vco-color-theme-bright: #eaa999;
+    --vco-color-link: #eaa999;
+    --vco-color-ui-fade: #{fadeout(#4d4d4d, 10%)};
+    --vco-color-ui-faint: #{fadeout(#4d4d4d, 33%)};
+}
+
+.vco-storymap[data-vco-theme="dark"] {
+    @include vco-dark-palette;
+}
+
+@media (prefers-color-scheme: dark) {
+    .vco-storymap:not([data-vco-theme="light"]) {
+        @include vco-dark-palette;
+    }
+}
+
 /* Portrait
 ================================================== */
 .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%);
     }
 }
 
@@ -93,12 +186,14 @@
             width: 120%;
             overflow: hidden;
 
-            @include gradient-horizontal(
-                rgba(255, 255, 255, 0.0001),
-                rgba(255, 255, 255, 0.85),
-                0%,
-                15%
+            // map-to-panel fade in the panel color so it stays seamless in
+            // both themes (the old white gradient washed dark slides)
+            background-image: linear-gradient(
+                to right,
+                transparent 0%,
+                var(--vco-color-background, #fff) 15%
             );
+            background-repeat: repeat-x;
         }
 
         .vco-slider-container-mask {
@@ -107,13 +202,34 @@
     }
 }
 
+/* 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: var(--vco-color-background, #{$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)
 ================================================== */
 .vco-map-area-left {
     .vco-storyslider {
-        background-color: $color-background;
+        background-color: var(--vco-color-background, #{$color-background});
     }
 
     .vco-slider-background {
@@ -162,3 +278,83 @@
         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;
+}
+
+/* Slide panel dock + size (textmode/textsize): right is the long-standing
+   landscape layout; left mirrors it; bottom docks the panel below the map
+   (the component split is computed in StoryMap._updateDisplay). Unset means
+   right at 50/50, so existing stories render unchanged.
+================================================== */
+.vco-layout-landscape {
+    .vco-storyslider {
+        width: var(--vco-panel-size, 50%);
+        left: calc(100% - var(--vco-panel-size, 50%));
+    }
+
+    &.vco-textmode-left {
+        .vco-storyslider {
+            left: 0;
+
+            .vco-slider-background {
+                margin-left: 0;
+                width: 120%;
+                background-image: linear-gradient(
+                    to left,
+                    transparent 0%,
+                    var(--vco-color-background, #fff) 15%
+                );
+                background-repeat: repeat-x;
+            }
+        }
+    }
+
+    &.vco-textmode-bottom {
+        .vco-storyslider {
+            left: 0;
+            width: 100%;
+
+            .vco-slider-background {
+                margin-left: 0;
+                width: 100%;
+                background-image: linear-gradient(
+                    to top,
+                    transparent 0%,
+                    var(--vco-color-background, #fff) 15%
+                );
+                background-repeat: repeat-x;
+            }
+        }
+    }
+}
+
+/* Headline visibility (show_headings: false hides slide headlines) */
+.vco-no-headings {
+    .vco-headline {
+        display: none;
+    }
+}
+
+/* Scrollbar visibility (show_scrollbars: false hides the panel scrollbars;
+   content still scrolls) */
+.vco-no-scrollbars {
+    .vco-slide {
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+}

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/core/Reset.scss

@@ -1,16 +1,13 @@
 /*	Reset
 ------------------------------------------------------------------------------------------- */
+@use "../Variables" as *;
 
-.vco-storyjs {
+.vco-storymap {
     /*	Reset tags and common classes
 		Display in IE6-9 and FF3
 		Based on: http://github.com/necolas/normalize.css
 	------------------------------------------------------------------------------------------- */
 
-    div * {
-        box-sizing: content-box;
-    }
-
     h1,
     h2,
     h3,
@@ -91,7 +88,6 @@
         font-weight: normal;
         font-style: normal;
         font-size: 100%;
-        line-height: 1;
         font-family: inherit;
         width: auto;
         float: none;
@@ -111,11 +107,6 @@
         border-spacing: 0;
     }
 
-    ol,
-    ul {
-        list-style: none;
-    }
-
     q::before,
     q::after,
     blockquote::before,
@@ -123,13 +114,9 @@
         content: "";
     }
 
-    a:focus {
-        outline: thin dotted;
-    }
-
-    a:hover,
-    a:active {
-        outline: 0;
+    a:focus-visible {
+        outline: 2px solid var(--vco-color-dark, #{$color-dark});
+        outline-offset: 2px;
     }
 
     article,

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
 );