@projektemacher/storymapjs 0.10.8 → 0.11.0

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

@@ -28,10 +28,10 @@
 
             .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;
@@ -105,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;
         }
@@ -130,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 {
@@ -150,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;

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});
         }
     }
 
@@ -71,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)
     }
 }
 
@@ -46,10 +33,6 @@
             @include background-color-opacity(0, 0, 0, 60);
 
             border-radius: 7px;
-
-            h4 a {
-                @include slide-text-shadow;
-            }
         }
     }
 }

package/src/scss/site/site.scss

@@ -25,6 +25,8 @@ $sm-color-green: #24a549; // button-secondary
 $sm-color-green-border: #1f9040;
 $sm-color-border: #b8b8b8;
 $sm-color-border-light: #d4d4d4;
+$sm-color-page: #fff;
+$sm-color-muted: #9c9c9c;
 $sm-font-serif: georgia, "Times New Roman", times, serif;
 $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-serif;
 
@@ -36,8 +38,8 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
     font-family: $sm-font-serif;
     font-size: 18px;
     line-height: 1.618;
-    color: $sm-color-text;
-    background-color: #fff;
+    color: var(--sm-color-text, #{$sm-color-text});
+    background-color: var(--sm-color-page, #fff);
 
     *,
     *::before,
@@ -57,7 +59,7 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
     pre {
         font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
         font-size: 0.85em;
-        background-color: $sm-color-light;
+        background-color: var(--sm-color-light, #{$sm-color-light});
         border-radius: 3px;
     }
 
@@ -105,7 +107,7 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
         font-style: italic;
         font-weight: normal;
         font-size: 3.82rem;
-        color: $sm-color-text;
+        color: var(--sm-color-text, #{$sm-color-text});
         margin: 0;
 
         @media (width <= 767px) {
@@ -152,10 +154,10 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
         position: relative;
         overflow: hidden;
         padding: 0.89rem 1.78rem 0.94rem;
-        border: 1px solid $sm-color-border-light;
+        border: 1px solid var(--sm-color-border-light, #{$sm-color-border-light});
         border-radius: 4px;
         background-color: transparent;
-        color: $sm-color-grey;
+        color: var(--sm-color-grey, #{$sm-color-grey});
         font-family: $sm-font-sans;
         font-size: 0.89rem;
         text-align: center;
@@ -171,7 +173,7 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
         &:hover {
             background-color: #fdfdfd;
             border-color: #d7d7d7;
-            color: $sm-color-grey;
+            color: var(--sm-color-grey, #{$sm-color-grey});
             text-decoration: none;
         }
 
@@ -287,11 +289,11 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
         }
 
         .button-active {
-            background-color: $sm-color-border-light;
-            color: $sm-color-text;
+            background-color: var(--sm-color-border-light, #{$sm-color-border-light});
+            color: var(--sm-color-text, #{$sm-color-text});
 
             &:hover {
-                background-color: $sm-color-border-light;
+                background-color: var(--sm-color-border-light, #{$sm-color-border-light});
             }
         }
     }
@@ -313,8 +315,8 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
     .header-product {
         padding: 2rem 2rem 0;
         margin-bottom: 0;
-        border-bottom: 1px solid $sm-color-border;
-        background-color: $sm-color-light;
+        border-bottom: 1px solid var(--sm-color-border, #{$sm-color-border});
+        background-color: var(--sm-color-light, #{$sm-color-light});
         text-align: center;
 
         .product-tagline {
@@ -334,7 +336,7 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
 
     .navbar-subnav {
         margin-top: 1rem;
-        background-color: $sm-color-light;
+        background-color: var(--sm-color-light, #{$sm-color-light});
 
         // the original hides the subnav on phones entirely
         @media (width <= 767px) {
@@ -342,12 +344,12 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
         }
 
         .button {
-            border-color: $sm-color-border-light;
+            border-color: var(--sm-color-border-light, #{$sm-color-border-light});
             box-shadow: none;
-            color: $sm-color-grey;
+            color: var(--sm-color-grey, #{$sm-color-grey});
 
             &:hover {
-                color: $sm-color-text;
+                color: var(--sm-color-text, #{$sm-color-text});
                 background-color: rgb(255 255 255 / 60%);
             }
         }
@@ -402,13 +404,13 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
     }
 
     .fill-color-grey {
-        background-color: $sm-color-light;
+        background-color: var(--sm-color-light, #{$sm-color-light});
     }
 
     .note {
-        background-color: $sm-color-light;
+        background-color: var(--sm-color-light, #{$sm-color-light});
         border-radius: 8px;
-        color: #9c9c9c;
+        color: var(--sm-color-muted, #{$sm-color-muted});
         font-family: $sm-font-sans;
         font-size: 0.9em;
         font-style: italic;
@@ -428,7 +430,7 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
         display: block;
         width: 100%;
         border: 0;
-        background-color: $sm-color-light;
+        background-color: var(--sm-color-light, #{$sm-color-light});
     }
 
     // ---------------------------------------------------------------------
@@ -457,7 +459,7 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
 
         .card {
             padding: 0;
-            border: 1px solid $sm-color-border-light;
+            border: 1px solid var(--sm-color-border-light, #{$sm-color-border-light});
             border-radius: 4px;
             background-color: #fff;
             overflow: hidden;
@@ -482,7 +484,7 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
                 height: 100%;
                 background-position: center;
                 background-size: cover;
-                background-color: $sm-color-grey;
+                background-color: var(--sm-color-grey, #{$sm-color-grey});
                 transition: filter 0.3s ease;
 
                 &.bw {
@@ -496,7 +498,7 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
                 h3 {
                     font-size: 1rem;
                     margin: 0;
-                    color: $sm-color-text;
+                    color: var(--sm-color-text, #{$sm-color-text});
                 }
             }
 
@@ -505,11 +507,11 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
                 padding: 0.6rem 1rem 0.8rem;
                 font-family: $sm-font-sans;
                 font-size: 0.75em;
-                color: #9c9c9c;
+                color: var(--sm-color-muted, #{$sm-color-muted});
             }
 
             &:hover {
-                border-color: $sm-color-text;
+                border-color: var(--sm-color-text, #{$sm-color-text});
 
                 .header-image-background.bw {
                     filter: grayscale(0%);
@@ -532,15 +534,15 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
             position: relative;
             padding: 0.5rem;
             margin-bottom: 0.5rem;
-            background-color: $sm-color-lighter;
-            border: 1px solid $sm-color-border-light;
+            background-color: var(--sm-color-lighter, #{$sm-color-lighter});
+            border: 1px solid var(--sm-color-border-light, #{$sm-color-border-light});
             border-radius: 8px;
 
             &:hover {
                 border-color: $sm-color-navbar;
 
                 h3 {
-                    color: $sm-color-text;
+                    color: var(--sm-color-text, #{$sm-color-text});
                 }
             }
 
@@ -584,7 +586,7 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
                 font-size: 1.2rem;
                 font-weight: 700;
                 margin: 0.4rem 1.5rem 0.4rem 0.6rem;
-                color: $sm-color-text;
+                color: var(--sm-color-text, #{$sm-color-text});
             }
 
             .accordion-content {
@@ -647,13 +649,13 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
             th,
             td {
                 padding: 0.5rem 0.75rem;
-                border: 1px solid $sm-color-border-light;
+                border: 1px solid var(--sm-color-border-light, #{$sm-color-border-light});
                 text-align: left;
                 vertical-align: top;
             }
 
             th {
-                background-color: $sm-color-light;
+                background-color: var(--sm-color-light, #{$sm-color-light});
             }
 
             code {
@@ -665,8 +667,8 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
         blockquote {
             margin: 1rem 0;
             padding: 0.25rem 1rem;
-            border-left: 4px solid $sm-color-border-light;
-            color: $sm-color-grey;
+            border-left: 4px solid var(--sm-color-border-light, #{$sm-color-border-light});
+            color: var(--sm-color-grey, #{$sm-color-grey});
         }
 
         img {
@@ -686,8 +688,8 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
         padding: 60px 80px 30px;
         font-family: $sm-font-sans;
         font-size: 0.85em;
-        background-color: $sm-color-light;
-        border-top: 1px solid $sm-color-border;
+        background-color: var(--sm-color-light, #{$sm-color-light});
+        border-top: 1px solid var(--sm-color-border, #{$sm-color-border});
 
         .footer-grid {
             display: flex;
@@ -735,7 +737,7 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
             list-style: none;
 
             a {
-                color: $sm-color-grey;
+                color: var(--sm-color-grey, #{$sm-color-grey});
                 font-size: 1.1em;
                 font-weight: 700;
 
@@ -746,3 +748,20 @@ $sm-font-sans: "Helvetica Neue", helvetica, arial, "Segoe UI", system-ui, sans-s
         }
     }
 }
+
+/* Dark landing (dark theme plan): the surfaces above redeclared. Brand
+   accents (badge, green, navbar, orange links) keep their light values —
+   they read on both. Follows the OS setting; the widget additionally
+   honours an explicit `theme` option. */
+@media (prefers-color-scheme: dark) {
+    .sm-site {
+        --sm-color-page: #1a1a1a;
+        --sm-color-text: #e0e0e0;
+        --sm-color-grey: #a8a8a8;
+        --sm-color-light: #262626;
+        --sm-color-lighter: #2e2e2e;
+        --sm-color-border: #555;
+        --sm-color-border-light: #444;
+        --sm-color-muted: #b0b0b0;
+    }
+}

package/src/scss/slider/VCO.Slide.scss

@@ -11,6 +11,10 @@
     padding: 0;
     margin: 0;
 
+    // authored inline styles (trusted tour content) cannot reorder above
+    // viewer chrome: a stacking context without any layout effect
+    isolation: isolate;
+
     // display:table;
     // table-layout: fixed;
     overflow: hidden auto;
@@ -18,7 +22,7 @@
     // Visible, app-styled vertical scrollbar whenever the slide content
     // overflows (desktop); touch devices get a wider one
     scrollbar-width: thin;
-    scrollbar-color: $color-theme transparent;
+    scrollbar-color: var(--vco-color-theme, #{$color-theme}) transparent;
 
     //	overflow-y:auto;
     // z-index:26;
@@ -30,10 +34,20 @@
         margin-bottom: 10px;
         padding-bottom: 10px;
 
+        // real <button>: strip the UA chrome, the classes carry the look
+        // (issue #385 wave). No `font` shorthand: it would reset the
+        // font-weight above.
+        appearance: none;
+        background: none;
+        border: 0;
+        font-family: inherit;
+        font-size: inherit;
+        text-align: inherit;
+
         .vco-slide-calltoaction-button-text {
             display: inline-block;
-            background-color: $color-theme;
-            color: $color-background;
+            background-color: var(--vco-color-theme, #{$color-theme});
+            color: var(--vco-color-background, #{$color-background});
 
             // padding:10px;
             padding: 10px 15px;
@@ -42,8 +56,8 @@
 
         &:hover {
             .vco-slide-calltoaction-button-text {
-                background-color: $color-theme-dark;
-                color: $color-background;
+                background-color: var(--vco-color-theme-dark, #{$color-theme-dark});
+                color: var(--vco-color-background, #{$color-background});
             }
         }
     }
@@ -68,6 +82,7 @@
         display: table;
         table-layout: fixed;
         height: 100%;
+        position: relative;
         z-index: 1;
     }
 
@@ -81,8 +96,8 @@
             // width:100%;
             // display:table;
             vertical-align: middle;
-            padding-left: 100px;
-            padding-right: 100px;
+            padding-left: clamp(10px, 5vw, 100px);
+            padding-right: clamp(10px, 5vw, 100px);
             position: relative;
             max-width: 100%;
 
@@ -111,7 +126,7 @@
             .vco-text {
                 width: 50%;
                 max-width: 50%;
-                min-width: 120px;
+                min-width: 0;
 
                 // height:100%;
                 // overflow-y:auto;
@@ -127,6 +142,23 @@
             }
         }
     }
+
+    // Second visible media slot (#358): every rule below is gated behind
+    // .vco-slide-media-multiple, so single-media slides render unchanged.
+    // stack drops the float (items pile vertically, the panel scrolls);
+    // row seats exactly two items side by side (D4).
+    &.vco-slide-media-multiple[data-layout="stack"] {
+        .vco-slide-content .vco-media {
+            float: none;
+        }
+    }
+
+    &.vco-slide-media-multiple[data-layout="row"] {
+        .vco-slide-content .vco-media {
+            width: 50%;
+            min-width: 0;
+        }
+    }
 }
 
 // touch devices (the container carries .vco-mobile on Browser.touch):
@@ -135,7 +167,7 @@
 // keep their system overlay scrollbars)
 .vco-mobile .vco-slide {
     scrollbar-width: auto;
-    scrollbar-color: $color-theme-dark rgb(0 0 0 / 12%);
+    scrollbar-color: var(--vco-color-theme-dark, #{$color-theme-dark}) rgb(0 0 0 / 12%);
 }
 
 /* Scroll hint: a bouncing downward arrow when the slide content overflows
@@ -171,6 +203,12 @@
     cursor: pointer;
     animation: vco-scroll-hint-bounce 1.2s ease-in-out infinite;
 
+    // real <button>: strip the UA chrome (issue #385 wave)
+    appearance: none;
+    border: 0;
+    padding: 0;
+    font: inherit;
+
     @media (prefers-reduced-motion: reduce) {
         animation: none;
         transform: translate(-50%, 0);
@@ -267,7 +305,7 @@
     blockquote p {
         @include slide-text-shadow;
 
-        color: color.adjust($color-theme, $lightness: 90%);
+        color: var(--vco-color-theme-faint, #{color.adjust($color-theme, $lightness: 90%)});
     }
 
     .vco-caption,
@@ -352,7 +390,7 @@
 .vco-text-content {
     iframe {
         width: 100%;
-        min-height: 280px;
+        min-height: min(280px, 50vh);
         border: 0;
     }
 }

package/src/scss/slider/VCO.SlideNav.scss

@@ -60,10 +60,10 @@
         .vco-slidenav-icon,
         .vco-slidenav-title,
         .vco-slidenav-description {
-            text-shadow: 1px 1px 1px $color-background;
+            text-shadow: 1px 1px 1px var(--vco-color-background, #{$color-background});
 
             // color: $color-foreground;
-            color: $color-background;
+            color: var(--vco-color-background, #{$color-background});
         }
 
         &.vco-slidenav-inverted {
@@ -71,8 +71,8 @@
             .vco-slidenav-title,
             .vco-slidenav-description {
                 // color:$color-background;
-                color: $color-foreground;
-                text-shadow: 1px 1px 1px $color-foreground;
+                color: var(--vco-color-foreground, #{$color-foreground});
+                text-shadow: 1px 1px 1px var(--vco-color-foreground, #{$color-foreground});
             }
         }
     }
@@ -95,6 +95,18 @@
             opacity: 1;
         }
     }
+
+    // keyboard parity with the hover reveal, plus a visible ring: the
+    // container is a focusable div acting as a button
+    &:focus-visible {
+        outline: 2px solid var(--vco-color-theme, #{$color-theme});
+        outline-offset: 2px;
+
+        .vco-slidenav-title,
+        .vco-slidenav-description {
+            opacity: 1;
+        }
+    }
 }
 
 .vco-slidenav-next {
@@ -178,7 +190,7 @@
                 .vco-slidenav-icon,
                 .vco-slidenav-title,
                 .vco-slidenav-description {
-                    color: $color-background;
+                    color: var(--vco-color-background, #{$color-background});
 
                     // color: $color-foreground;
                 }
@@ -274,12 +286,16 @@
             .vco-slidenav-icon {
                 &::before {
                     // background-color:$color-background;
-                    background-color: $color-foreground;
+                    background-color: var(--vco-color-foreground, #{$color-foreground});
 
                     // .translucent-background($color-background, .85);
                     // .box-shadow(1px 1px 7px rgba(0,0,0,.30));
                     padding: 20px;
-                    border: 1px solid color.adjust($color-background, $lightness: -30%);
+                    border: 1px solid
+                        var(
+                            --vco-color-nav-border,
+                            #{color.adjust($color-background, $lightness: -30%)}
+                        );
                 }
             }