@projektemacher/storymapjs 0.10.7 → 0.11.0

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});
             }
         }
     }
@@ -61,14 +75,14 @@
         z-index: -1;
         overflow: hidden;
         display: none;
-
-        @include opacity(50);
+        opacity: 0.5;
     }
 
     .vco-slide-scrollable-container {
         display: table;
         table-layout: fixed;
         height: 100%;
+        position: relative;
         z-index: 1;
     }
 
@@ -82,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%;
 
@@ -112,7 +126,7 @@
             .vco-text {
                 width: 50%;
                 max-width: 50%;
-                min-width: 120px;
+                min-width: 0;
 
                 // height:100%;
                 // overflow-y:auto;
@@ -128,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):
@@ -136,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
@@ -172,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);
@@ -268,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,
@@ -348,6 +385,16 @@
     text-align: right;
 }
 
+/* Extra iframe media in slide text (issue #358)
+================================================== */
+.vco-text-content {
+    iframe {
+        width: 100%;
+        min-height: min(280px, 50vh);
+        border: 0;
+    }
+}
+
 /* Text Background 
 ================================================== */
 .vco-slide.vco-text-background {
@@ -356,7 +403,8 @@
             padding: 20px;
 
             @include background-color-opacity(0, 0, 0, 60);
-            @include border-radius(7px);
+
+            border-radius: 7px;
 
             h2 {
                 margin-top: 5px;

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

@@ -29,8 +29,7 @@
         word-break: break-all;
         overflow-wrap: anywhere;
         hyphens: auto;
-
-        @include opacity(15);
+        opacity: 0.15;
     }
 
     .vco-slidenav-title {
@@ -61,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 {
@@ -72,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});
             }
         }
     }
@@ -93,7 +92,19 @@
     &:hover {
         .vco-slidenav-title,
         .vco-slidenav-description {
-            @include opacity(100);
+            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;
         }
     }
 }
@@ -149,8 +160,7 @@
         &:hover {
             .vco-slidenav-icon {
                 margin-left: 32 - 20px;
-
-                @include opacity(100);
+                opacity: 1;
             }
         }
     }
@@ -159,8 +169,7 @@
         &:hover {
             .vco-slidenav-icon {
                 margin-left: -4px;
-
-                @include opacity(100);
+                opacity: 1;
             }
         }
     }
@@ -181,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;
                 }
@@ -194,7 +203,7 @@
         }
 
         .vco-slidenav-icon {
-            @include opacity(33);
+            opacity: 0.33;
         }
     }
 }
@@ -208,16 +217,14 @@
 
             .vco-slidenav-icon {
                 margin-left: 32 - 24px;
-
-                @include opacity(100);
+                opacity: 1;
             }
         }
 
         &:active {
             .vco-slidenav-icon {
                 margin-left: 0;
-
-                @include opacity(100);
+                opacity: 1;
             }
         }
     }
@@ -227,14 +234,13 @@
             .vco-slidenav-icon {
                 // margin-left: 0px;
                 margin-left: 100 - 20px;
-
-                @include opacity(100);
+                opacity: 1;
             }
         }
 
         &:active {
             .vco-slidenav-icon {
-                @include opacity(100);
+                opacity: 1;
             }
         }
     }
@@ -247,13 +253,13 @@
     .vco-slidenav-previous {
         &:hover {
             .vco-slidenav-icon {
-                @include opacity(33);
+                opacity: 0.33;
             }
         }
 
         &:active {
             .vco-slidenav-icon {
-                @include opacity(100);
+                opacity: 1;
             }
         }
     }
@@ -280,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%)}
+                        );
                 }
             }
 

package/src/scss/slider/VCO.StorySlider.scss

@@ -1,4 +1,5 @@
 @use "../core/Mixins" as *;
+@use "../Variables" as *;
 
 /* StorySlider
 ================================================== */
@@ -10,8 +11,16 @@
     height: 100%;
     overflow: hidden;
 
-    @include user-select(none);
+    // the container itself is in the tab order: keyboard focus gets a ring
+    &:focus-visible {
+        outline: 2px solid var(--vco-color-dark, #{$color-dark});
+        outline-offset: -2px;
+    }
 
+    // horizontal drags belong to the slider; vertical panning passes
+    // through to the page (mobile navigation, #288)
+    touch-action: pan-y;
+    user-select: none;
     position: relative;
 
     img,
@@ -34,6 +43,9 @@
     }
 
     .vco-slider-touch-mask {
+        width: 100%;
+        height: 100%;
+        position: absolute;
         z-index: 25;
         top: 0;
         left: 0;
@@ -41,8 +53,11 @@
 
     .vco-slider-container-mask {
         text-align: center;
+        width: 100%;
+        height: 100%;
 
         // overflow: scroll;
+        position: relative;
         z-index: 5;
 
         .vco-slider-container {
@@ -61,4 +76,41 @@
             }
         }
     }
+
+    /* Static reading mode (mode: "static"): all slides stacked in a
+       scrollable list instead of a translating strip; the scroll-spy in
+       StorySlider follows the reading position. The container chain gets
+       definite heights so the slides' percentage min-height resolves and
+       the list actually overflows into a scroll. Specificity is raised via
+       .vco-storymap because this block compiles before the entry-file
+       landscape/base rules it must beat. Standard mode is untouched.
+    ================================================== */
+    @at-root .vco-storymap &.vco-static {
+        overflow-y: auto;
+
+        .vco-slider-container-mask {
+            overflow: visible;
+            height: 100%;
+        }
+
+        .vco-slider-container {
+            position: relative;
+            height: 100%;
+        }
+
+        .vco-slider-item-container {
+            position: relative;
+            display: block;
+            height: 100%;
+        }
+
+        .vco-slide {
+            position: relative;
+            left: auto !important;
+            top: auto !important;
+            height: auto;
+            min-height: 60%;
+            margin-bottom: 24px;
+        }
+    }
 }