@projektemacher/storymapjs 0.10.6 → 0.10.7

package/src/scss/fonts/font.rufina-sintony.scss

@@ -0,0 +1,73 @@
+@use "pkg:@fontsource-utils/scss" as fontsource;
+@use "pkg:@fontsource/rufina/scss" as rufina;
+@use "../Variables" as *;
+@use "font.base" as base;
+@include fontsource.faces(
+    $metadata: rufina.$metadata,
+    $weights: all,
+    $styles: all,
+    $subsets: (
+        latin,
+        latin-ext,
+    ),
+    $formats: woff2
+);
+
+/*	Font Rufina & Sintony
+
+https: //fonts.google.com/specimen/Rufina
+https: //fonts.google.com/specimen/Sintony
+----------------------------------------------------- */
+
+// Font Import
+
+// Font Variables
+$font-main: "Sintony", sans-serif;
+$font-secondary: "Rufina", serif;
+$font-navigation: $font-main;
+$font-marker: $font-main;
+$font-headline-date: $font-navigation;
+$base-font-size: 15px;
+$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.ubuntu.scss

@@ -0,0 +1,78 @@
+@use "pkg:@fontsource-utils/scss" as fontsource;
+@use "pkg:@fontsource/ubuntu/scss" as ubuntu;
+@use "../Variables" as *;
+@use "font.base" as base;
+@include fontsource.faces(
+    $metadata: ubuntu.$metadata,
+    $weights: all,
+    $styles: all,
+    $subsets: (
+        latin,
+        latin-ext,
+    ),
+    $formats: woff2
+);
+
+/*	Font Ubuntu
+https://fonts.google.com/specimen/Ubuntu
+----------------------------------------------------- */
+
+// Font Import
+
+// Font Variables
+$font-main: "Ubuntu", "Helvetica Neue", helvetica, arial, "MS Trebuchet", sans-serif;
+$font-secondary: "Ubuntu", "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.unicaone-vollkorn.scss

@@ -0,0 +1,85 @@
+@use "pkg:@fontsource-utils/scss" as fontsource;
+@use "pkg:@fontsource/unica-one/scss" as unica_one;
+@use "pkg:@fontsource-variable/vollkorn/scss" as vollkorn;
+@use "../Variables" as *;
+@use "font.base" as base;
+@include fontsource.faces(
+    $metadata: unica_one.$metadata,
+    $weights: all,
+    $styles: all,
+    $subsets: (
+        latin,
+        latin-ext,
+    ),
+    $formats: woff2
+);
+@include fontsource.faces(
+    $metadata: vollkorn.$metadata,
+    $family: "Vollkorn",
+    $weights: all,
+    $styles: all,
+    $subsets: (
+        latin,
+        latin-ext,
+    ),
+    $formats: woff2
+);
+
+/*	Font Unica One & Vollkorn
+
+https://fonts.google.com/specimen/Vollkorn
+https://fonts.google.com/specimen/Unica+One
+----------------------------------------------------- */
+
+// Font Import
+
+// Font Variables
+$font-main: "Vollkorn", georgia, serif;
+$font-secondary: "Unica One", "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: 400;
+
+// Blockquote
+$font-blockquote: $font-secondary;
+$font-blockquote-weight: 400;
+$font-blockquote-style: italic;
+
+// Headings
+$font-size-headings: 46px;
+$font-headings-lineheight: $font-size-headings;
+$font-headings-text-transform: uppercase;
+$font-size-headings-small: 24px;
+$font-headings-weight: 400;
+$font-size-headline-title: 58px;
+
+// Marker
+$font-marker-text-transform: $font-headings-text-transform;
+
+// Navigation
+$font-navigation-text-transform: uppercase;
+
+@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/icons/Icons.scss

@@ -0,0 +1,239 @@
+/* Icons
+================================================== */
+
+/* Icon font binaries live in public/css/icons/ (copied to dist/css/icons/ at
+build time). The source uses the absolute public path so `vite dev` serves
+them directly; buildLibraryCss() in vite.config.ts rewrites these to relative
+./icons/... for dist/css/storymap.css so subpath, bundler and Electron
+consumers keep resolving them. */
+@font-face {
+    font-family: vco-icons;
+    src:
+        url("/css/icons/vco-icons.woff2") format("woff2"),
+        url("/css/icons/vco-icons.woff") format("woff"),
+        url("/css/icons/vco-icons.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="vco-icon-"],
+[class*=" vco-icon-"] {
+    /* icon font only: a generic fallback would render glyph codepoints as tofu */
+    font-family: vco-icons; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+    speak: none;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+}
+
+.vco-icon-wikipedia::after {
+    content: "\e64e";
+}
+
+.vco-icon-chevron-right::after {
+    content: "\e64f";
+}
+
+.vco-icon-chevron-left::after {
+    content: "\e650";
+}
+
+.vco-icon-youtube-logo::after {
+    content: "\e651";
+}
+
+.vco-icon-foursquare::after {
+    content: "\e652";
+}
+
+.vco-icon-camera-retro::after {
+    content: "\e653";
+}
+
+.vco-icon-doc::after {
+    content: "\e654";
+}
+
+.vco-icon-weibo::after {
+    content: "\e655";
+}
+
+.vco-icon-resize-horizontal::after {
+    content: "\e656";
+}
+
+.vco-icon-resize-vertical::after {
+    content: "\e657";
+}
+
+.vco-icon-resize-full::after {
+    content: "\e658";
+}
+
+.vco-icon-resize-small::after {
+    content: "\e659";
+}
+
+.vco-icon-twitter::after {
+    content: "\e62b";
+}
+
+.vco-icon-google-plus::after {
+    content: "\e62c";
+}
+
+.vco-icon-video::after {
+    content: "\e62d";
+}
+
+.vco-icon-plaintext::after {
+    content: "\e62e";
+}
+
+.vco-icon-image-v2::after {
+    content: "\e62f";
+}
+
+.vco-icon-quote-v2::after {
+    content: "\e630";
+}
+
+.vco-icon-zoom-in::after {
+    content: "\e631";
+}
+
+.vco-icon-zoom-out::after {
+    content: "\e632";
+}
+
+.vco-icon-list::after {
+    content: "\e633";
+}
+
+.vco-icon-music::after {
+    content: "\e634";
+}
+
+.vco-icon-location::after {
+    content: "\e635";
+}
+
+.vco-icon-web::after {
+    content: "\e636";
+}
+
+.vco-icon-share-v2::after {
+    content: "\e637";
+}
+
+.vco-icon-soundcloud::after {
+    content: "\e639";
+}
+
+.vco-icon-video-v2::after {
+    content: "\e63a";
+}
+
+.vco-icon-youtube::after {
+    content: "\e63a";
+}
+
+.vco-icon-tumblr::after {
+    content: "\e63b";
+}
+
+.vco-icon-lastfm::after {
+    content: "\e63c";
+}
+
+.vco-icon-github::after {
+    content: "\e63d";
+}
+
+.vco-icon-goback::after {
+    content: "\e63e";
+}
+
+.vco-icon-doc-v2::after {
+    content: "\e63f";
+}
+
+.vco-icon-googledrive::after {
+    content: "\e640";
+}
+
+.vco-icon-facebook::after {
+    content: "\e641";
+}
+
+.vco-icon-flickr::after {
+    content: "\e642";
+}
+
+.vco-icon-dribbble::after {
+    content: "\e643";
+}
+
+.vco-icon-image::after {
+    content: "\e605";
+}
+
+.vco-icon-vimeo::after {
+    content: "\e606";
+}
+
+.vco-icon-instagram::after {
+    content: "\e644";
+}
+
+.vco-icon-pinterest::after {
+    content: "\e645";
+}
+
+.vco-icon-arrow-left::after {
+    content: "\e646";
+}
+
+.vco-icon-arrow-down::after {
+    content: "\e647";
+}
+
+.vco-icon-arrow-up::after {
+    content: "\e648";
+}
+
+.vco-icon-arrow-right::after {
+    content: "\e649";
+}
+
+.vco-icon-share::after {
+    content: "\e64a";
+}
+
+.vco-icon-blockquote::after {
+    content: "\e64b";
+}
+
+.vco-icon-evernote::after {
+    content: "\e64c";
+}
+
+.vco-icon-mappin::after {
+    content: "\e600";
+}
+
+.vco-icon-swipe-right::after {
+    content: "\e601";
+}
+
+.vco-icon-swipe-left::after {
+    content: "\e602";
+}
+
+.vco-icon-touch-spread::after {
+    content: "\e603";
+}
+
+.vco-icon-touch-pinch::after {
+    content: "\e604";
+}

package/src/scss/map/VCO.ImageMarker.scss

@@ -0,0 +1,23 @@
+/* Requires Variables.less
+================================================== */
+$leaflet-offset: 6px;
+$map-icon-size: 44px; // 52
+$map-icon-width: 32px; // 38
+$map-icon-size: 52px;
+$map-icon-width: 38px;
+
+.vco-map {
+    .vco-mapimage-display:hover {
+        .vco-mapmarker,
+        .vco-mapmarker-active {
+            display: block;
+        }
+    }
+
+    .vco-mapimage-display {
+        .vco-mapmarker,
+        .vco-mapmarker-active {
+            display: none;
+        }
+    }
+}

package/src/scss/map/VCO.Map.scss

@@ -0,0 +1,21 @@
+@use "../Variables" as *;
+
+/* Requires Variables.less
+================================================== */
+.vco-map {
+    height: 100%;
+    overflow: hidden;
+    top: 0;
+    background-color: $color-foreground;
+
+    .vco-map-mask {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+
+        .vco-map-display {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}

package/src/scss/map/VCO.MapMarker.scss

@@ -0,0 +1,147 @@
+@use "../Variables" as *;
+@use "../core/Mixins" as *;
+
+/* Requires Variables.less
+================================================== */
+$map-icon-size: 44px; // 52
+$map-icon-width: 32px; // 38
+$map-icon-size: 52px;
+$map-icon-width: 38px;
+
+.vco-map {
+    .vco-mapmarker,
+    .vco-mapmarker-active {
+        font-family: vco-icons, sans-serif;
+        speak: none;
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        line-height: 1;
+        width: $map-icon-width !important;
+        height: $map-icon-size !important;
+
+        // NB: the pin alignment is handled by the overlay positioning
+        // (bottom-center + offset, see MapMarker.OpenLayers._addTo) —
+        // OL's inline styles would override any CSS top/left here anyway.
+    }
+
+    // Map Pin
+    .vco-mapmarker::before,
+    .vco-mapmarker-active::before {
+        content: "\e600";
+        font-size: $map-icon-size;
+        text-shadow: rgb(0 0 0 / 66%) 0 2px 5px;
+    }
+
+    .vco-mapmarker,
+    .vco-mapmarker-active {
+        // enlarged invisible tap target (issue #434); the negative margins
+        // keep the pin glyph exactly where it was
+        padding: 4px;
+        margin: -4px;
+    }
+
+    .vco-mapmarker {
+        color: #a5a5a5;
+    }
+
+    .vco-mapmarker-active {
+        color: $color-theme;
+    }
+
+    // Custom icon markers render only their image (no vco-mapmarker class,
+    // so none of the pin rules above apply): belt and braces against the
+    // default pin glyph, and the pointer cursor that pins get elsewhere.
+    .vco-mapmarker-custom {
+        cursor: pointer;
+    }
+
+    .vco-mapmarker-custom::before {
+        content: none;
+    }
+
+    .vco-mapmarker-image-icon,
+    .vco-mapmarker-image-icon-active {
+        border: 2px solid #a5a5a5;
+        box-shadow: 2px 2px 2px #000;
+        opacity: 1;
+    }
+
+    .vco-mapmarker-image-icon {
+        filter: grayscale(100%);
+    }
+
+    .vco-mapmarker-image-icon-active {
+        border: 4px solid $color-theme;
+        filter: grayscale(0);
+    }
+
+    /* Place-name label on the active marker (issue #243)
+	================================================== */
+    .vco-marker-label {
+        position: absolute;
+        left: 50%;
+        bottom: 100%;
+        transform: translateX(-50%);
+        margin-bottom: 6px;
+        padding: 3px 8px;
+        white-space: nowrap;
+        font-family: $font-sanserif;
+        font-size: 12px;
+        font-weight: bold;
+        color: $color-text;
+        background-color: $color-background;
+        border: 1px solid $color-theme;
+        border-radius: 4px;
+        box-shadow: 2px 2px 2px rgb(0 0 0 / 30%);
+        pointer-events: none;
+    }
+
+    /* Marker Media Icons
+	================================================== */
+    .vco-mapmarker-icon::after {
+        // font-size:20px;
+        font-size: 24px;
+        color: #fff;
+        text-align: center;
+        width: $map-icon-width;
+        height: 24px;
+        overflow: hidden;
+
+        // content:'';
+        display: block;
+        position: absolute;
+
+        // top:4px;
+        top: 8px;
+        left: 0;
+
+        @include opacity(75);
+    }
+
+    .vco-mapmarker-active.vco-mapmarker-icon::after {
+        @include opacity(100);
+    }
+
+    .vco-mapmarker-icon.vco-icon-youtube::after {
+        // content: "\e63a";
+        // font-size:22px;
+    }
+
+    .vco-icon-wikipedia::after {
+        // font-size:14px;
+        font-size: 16px;
+
+        // top:10px;
+        top: 12px;
+    }
+
+    .vco-icon-image::after {
+        top: 6px;
+    }
+
+    .vco-icon-vimeo::after,
+    .vco-icon-twitter::after {
+        // top: 6px;
+    }
+}