@projektemacher/storymapjs 0.10.6 → 0.10.8

package/src/scss/core/Mixins.scss

@@ -0,0 +1,54 @@
+@use "sass:color";
+@use "sass:math";
+
+/*	Mixins.scss
+	Snippets of reusable CSS to develop faster and keep code readable
+
+	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) {
+    background: rgba($cr, $cg, $cb, math.div($opacity, 100));
+}
+
+// Slide Text Shadow
+@mixin slide-text-shadow($shadow: 1px 1px 1px #000) {
+    color: #fff !important;
+    text-shadow: $shadow !important;
+}
+
+// Single side border-radius
+@mixin border-right-radius($radius) {
+    border-bottom-right-radius: $radius;
+    border-top-right-radius: $radius;
+}
+
+@mixin border-left-radius($radius) {
+    border-bottom-left-radius: $radius;
+    border-top-left-radius: $radius;
+}
+
+@mixin translucent-background($color: #fff, $alpha: 1) {
+    background-color: rgba($color, $alpha);
+}
+
+// GRADIENTS
+// --------------------------------------------------
+
+// Horizontal gradient, from left to right
+@mixin gradient-horizontal(
+    $start-color: #555,
+    $end-color: #333,
+    $start-percent: 0%,
+    $end-percent: 100%
+) {
+    background-image: linear-gradient(
+        to right,
+        $start-color $start-percent,
+        $end-color $end-percent
+    );
+}

package/src/scss/core/Reset.scss

@@ -0,0 +1,206 @@
+/*	Reset
+------------------------------------------------------------------------------------------- */
+
+.vco-storyjs {
+    /*	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,
+    h4,
+    h5,
+    h6,
+    p,
+    blockquote,
+    pre,
+    a,
+    abbr,
+    acronym,
+    address,
+    cite,
+    code,
+    del,
+    dfn,
+    em,
+    img,
+    q,
+    s,
+    samp,
+    small,
+    strike,
+    strong,
+    sub,
+    sup,
+    tt,
+    var,
+    dd,
+    dl,
+    dt,
+    li,
+    ol,
+    ul,
+    fieldset,
+    form,
+    label,
+    legend,
+    button,
+    table,
+    caption,
+    tbody,
+    tfoot,
+    thead,
+    tr,
+    th,
+    td,
+    .vco-container,
+    .content-container,
+    .media,
+    .text,
+    .vco-slider,
+    .slider,
+    .date,
+    .title,
+    .message,
+    .map,
+    .credit,
+    .caption,
+    .vco-feedback,
+    .vco-feature,
+    .toolbar,
+    .marker,
+    .dot,
+    .line,
+    .flag,
+    .time,
+    .era,
+    .major,
+    .minor,
+    .vco-navigation,
+    .start,
+    .active {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-weight: normal;
+        font-style: normal;
+        font-size: 100%;
+        line-height: 1;
+        font-family: inherit;
+        width: auto;
+        float: none;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        clear: none;
+    }
+
+    table {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+
+    ol,
+    ul {
+        list-style: none;
+    }
+
+    q::before,
+    q::after,
+    blockquote::before,
+    blockquote::after {
+        content: "";
+    }
+
+    a:focus {
+        outline: thin dotted;
+    }
+
+    a:hover,
+    a:active {
+        outline: 0;
+    }
+
+    article,
+    aside,
+    details,
+    figcaption,
+    figure,
+    footer,
+    header,
+    hgroup,
+    nav,
+    section {
+        display: block;
+    }
+
+    audio,
+    canvas,
+    video {
+        display: inline-block;
+    }
+
+    /*	Prevents modern browsers from displaying 'audio' without controls
+		Based on: http://github.com/necolas/normalize.css
+	------------------------------------------------------------------------------------------- */
+    audio:not([controls]) {
+        display: none;
+    }
+
+    div {
+        max-width: none;
+    }
+
+    /*	Prevents sub and sup affecting line-height in all browsers
+		Based on: http://github.com/necolas/normalize.css
+	------------------------------------------------------------------------------------------- */
+    sub,
+    sup {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+    }
+
+    sup {
+        top: -0.5em;
+    }
+
+    sub {
+        bottom: -0.25em;
+    }
+
+    button,
+    input {
+        line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
+    }
+
+    button,
+    input[type="button"],
+    input[type="reset"],
+    input[type="submit"] {
+        cursor: pointer; // Cursors on all buttons applied consistently
+        appearance: auto; // Style clicable inputs in iOS
+    }
+
+    input[type="search"] {
+        // Appearance in Safari/Chrome
+        appearance: textfield;
+    }
+
+    textarea {
+        overflow: auto;
+        vertical-align: top; // Readability and alignment cross-browser
+    }
+}

package/src/scss/fonts/_font.base.scss

@@ -0,0 +1,113 @@
+@use "sass:map";
+@use "../Variables" as *;
+
+/*	Font Base
+----------------------------------------------------- */
+
+@mixin font-base($theme: ()) {
+    $theme: map.merge(
+        (
+            font-main: $font-main,
+            font-secondary: $font-secondary,
+            font-navigation: $font-main,
+            font-marker: $font-secondary,
+            font-headline-date: $font-main,
+            base-font-size: $base-font-size,
+            base-font-weight: normal,
+            font-blockquote: $font-main,
+            font-blockquote-weight: normal,
+            font-blockquote-style: italic,
+            font-size-headings: 46px,
+            font-headings-lineheight: 1.3em,
+            font-headings-text-transform: none,
+            font-headings-weight: bold,
+            font-size-headings-small: 24px,
+            font-size-headline-title: 58px,
+            font-navigation-text-transform: none,
+            font-marker-text-transform: none,
+        ),
+        $theme
+    );
+
+    .vco-storymap {
+        font-family: map.get($theme, font-main);
+        font-weight: map.get($theme, base-font-weight);
+        font-size: map.get($theme, base-font-size);
+        line-height: 1.3em;
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            font-family: map.get($theme, font-secondary);
+            text-transform: map.get($theme, font-headings-text-transform);
+            font-weight: map.get($theme, font-headings-weight);
+            font-size: map.get($theme, font-size-headings);
+            line-height: map.get($theme, font-headings-lineheight);
+
+            // margin-bottom:0;
+        }
+
+        h2.vco-headline-title {
+            font-size: map.get($theme, font-size-headline-title);
+            line-height: map.get($theme, font-size-headline-title);
+        }
+
+        p {
+            font-family: map.get($theme, font-main);
+            font-size: map.get($theme, base-font-size);
+            line-height: 1.3em;
+
+            // margin-top:0;
+        }
+
+        .vco-media .vco-media-wikipedia h4 a {
+            font-size: map.get($theme, font-size-headings-small);
+            line-height: map.get($theme, font-size-headings-small);
+        }
+
+        .vcard {
+            font-family: map.get($theme, font-navigation) !important;
+            font-weight: normal !important;
+        }
+
+        .vco-slidenav-next,
+        .vco-slidenav-previous,
+        .vco-message,
+        .vco-slide-calltoaction-button-text {
+            font-family: map.get($theme, font-navigation);
+            text-transform: map.get($theme, font-navigation-text-transform);
+
+            .vco-slidenav-title {
+                line-height: 1.3em !important;
+            }
+        }
+
+        .vco-headline-date,
+        h3.vco-headline-date {
+            font-family: map.get($theme, font-headline-date) !important;
+            text-transform: map.get($theme, font-headings-text-transform) !important;
+
+            small {
+                font-weight: normal !important;
+            }
+        }
+
+        blockquote,
+        blockquote p {
+            font-style: map.get($theme, font-blockquote-style);
+            font-weight: map.get($theme, font-blockquote-weight);
+            line-height: 1.3;
+        }
+    }
+
+    input[type="text"].editor-headline {
+        font-family: map.get($theme, font-secondary);
+        text-transform: map.get($theme, font-headings-text-transform);
+        font-weight: map.get($theme, font-headings-weight);
+        font-size: map.get($theme, font-size-headings);
+        line-height: map.get($theme, font-size-headings);
+    }
+}

package/src/scss/fonts/font.abril-droidsans.scss

@@ -0,0 +1,75 @@
+@use "pkg:@fontsource-utils/scss" as fontsource;
+@use "pkg:@fontsource/abril-fatface/scss" as abril_fatface;
+@use "../Variables" as *;
+@use "font.base" as base;
+@include fontsource.faces(
+    $metadata: abril_fatface.$metadata,
+    $weights: all,
+    $styles: all,
+    $subsets: (
+        latin,
+        latin-ext,
+    ),
+    $formats: woff2
+);
+
+/*	Font Abril Fatface & Noto Sans (formerly Droid Sans)
+
+https://fonts.google.com/specimen/Abril+Fatface
+https://fonts.google.com/noto/specimen/Noto+Sans
+// ----------------------------------------------------- */
+
+// Font Import
+// as of 2022, Droid Sans was replaced with Noto Sans
+// https: //github.com/google/fonts/issues/4469
+
+// Font Variables
+$font-main: "Noto Sans", sans-serif;
+$font-secondary: "Abril Fatface", cursive;
+$font-navigation: $font-main;
+$font-marker: $font-main;
+$font-headline-date: $font-navigation;
+$base-font-size: 16px;
+$base-font-weight: 400;
+
+// Blockquote
+$font-blockquote: $font-main;
+$font-blockquote-weight: 400;
+$font-blockquote-style: normal;
+
+// Headings
+$font-size-headings: 46px;
+$font-headings-lineheight: $font-size-headings;
+$font-headings-text-transform: none;
+$font-size-headings-small: 24px;
+$font-headings-weight: 700;
+$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,
+    )
+);

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

@@ -0,0 +1,76 @@
+@use "pkg:@fontsource-utils/scss" as fontsource;
+@use "pkg:@fontsource/amatic-sc/scss" as amatic_sc;
+@use "../Variables" as *;
+@use "font.base" as base;
+@include fontsource.faces(
+    $metadata: amatic_sc.$metadata,
+    $weights: all,
+    $styles: all,
+    $subsets: (
+        latin,
+        latin-ext,
+        cyrillic,
+        hebrew,
+        vietnamese,
+    ),
+    $formats: woff2
+);
+
+/*	Font Amatic & Andika
+
+https://fonts.google.com/specimen/Amatic+SC
+https://fonts.google.com/specimen/Andika
+// ----------------------------------------------------- */
+
+// Font Import
+
+// Font Variables
+$font-main: "Andika", sans-serif;
+$font-secondary: "Amatic SC", cursive;
+$font-navigation: $font-main;
+$font-marker: $font-main;
+$font-headline-date: $font-navigation;
+$base-font-size: 16px;
+$base-font-weight: 400;
+
+// Blockquote
+$font-blockquote: $font-secondary;
+$font-blockquote-weight: 400;
+$font-blockquote-style: normal;
+
+// Headings
+$font-size-headings: 64px;
+$font-headings-lineheight: $font-size-headings;
+$font-headings-text-transform: none;
+$font-size-headings-small: 24px;
+$font-headings-weight: 700;
+$font-size-headline-title: 86px;
+
+// 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,
+    )
+);

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

@@ -0,0 +1,92 @@
+@use "pkg:@fontsource-utils/scss" as fontsource;
+@use "pkg:@fontsource-variable/bitter/scss" as bitter;
+@use "pkg:@fontsource-variable/raleway/scss" as raleway;
+@use "../Variables" as *;
+@use "font.base" as base;
+@include fontsource.faces(
+    $metadata: bitter.$metadata,
+    $family: "Bitter",
+    $weights: all,
+    $styles: all,
+    $subsets: (
+        latin,
+        latin-ext,
+        cyrillic,
+        cyrillic-ext,
+        vietnamese,
+    ),
+    $formats: woff2
+);
+@include fontsource.faces(
+    $metadata: raleway.$metadata,
+    $family: "Raleway",
+    $weights: all,
+    $styles: all,
+    $subsets: (
+        latin,
+        latin-ext,
+        cyrillic,
+        cyrillic-ext,
+        vietnamese,
+    ),
+    $formats: woff2
+);
+
+/*	Font Bitter & Raleway
+
+https://fonts.google.com/specimen/Bitter
+https://fonts.google.com/specimen/Raleway
+----------------------------------------------------- */
+
+// Font Import
+
+// Font Variables
+$font-main: "Raleway", sans-serif;
+$font-secondary: "Bitter", serif;
+$font-navigation: "Helvetica Neue", helvetica, arial, "MS Trebuchet", sans-serif;
+$font-marker: $font-secondary;
+$font-headline-date: $font-navigation;
+$base-font-size: 16px;
+$base-font-weight: 300;
+
+// Blockquote
+$font-blockquote: $font-main;
+$font-blockquote-weight: 200;
+$font-blockquote-style: italic;
+
+// Headings
+$font-size-headings: 46px;
+$font-headings-lineheight: $font-size-headings;
+$font-headings-text-transform: none;
+$font-size-headings-small: 24px;
+$font-headings-weight: 700;
+$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,
+    )
+);

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;
+    }
+}