@projektemacher/storymapjs 0.10.5 → 0.10.7

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

@@ -0,0 +1,126 @@
+@use "sass:color";
+@use "../../Variables" as *;
+
+/* Requires Variables
+================================================= */
+.vco-map {
+    .ol-viewport {
+        /* markers live in overlays */
+    }
+
+    // keep the marker overlays above the layer canvases: during pan/zoom
+    // animations the canvas containers get promoted to compositor layers,
+    // which can transiently paint over the (non-promoted) overlay DOM —
+    // the icons flicker
+    .ol-overlaycontainer {
+        z-index: 1;
+    }
+
+    .vco-mapmarker,
+    .vco-mapmarker-active,
+    .vco-mapmarker-custom,
+    .vco-mapmarker-image-icon,
+    .vco-mapmarker-image-icon-active {
+        cursor: pointer;
+    }
+
+    .ol-overlaycontainer-stopevent {
+        z-index: auto;
+    }
+
+    /* Attribution */
+    .vco-map-attribution {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background-color: rgb(255 255 255 / 75%);
+        font-size: 10px;
+        padding: 1px 4px;
+        z-index: 1000;
+
+        a {
+            color: #666;
+            text-decoration: none;
+        }
+
+        .vco-knightlab-brand,
+        a.vco-knightlab-brand {
+            margin-right: 5px;
+            text-shadow:
+                0 0 1px #fff,
+                0 0 1px #fff,
+                0 0 5px #fff;
+            font-size: 14px;
+            font-weight: bold;
+
+            // branding of the original authors (Knight Lab / Northwestern
+            // University): de-emphasized, and any logo images grayscale
+            filter: grayscale(1);
+            opacity: 0.5;
+
+            img {
+                filter: grayscale(1);
+                opacity: 0.5;
+            }
+
+            span {
+                color: $color-theme;
+                display: inline-block;
+                transform: rotate(45deg);
+            }
+
+            &:hover {
+                text-decoration: none;
+                color: color.adjust($color-theme, $lightness: 15%);
+            }
+        }
+    }
+
+    /* Overview map (mini map) */
+    .ol-overviewmap {
+        left: 8px;
+        top: 40px;
+        bottom: auto;
+
+        .ol-overviewmap-map {
+            border: none;
+
+            // the original mini map dimensions
+            width: 150px;
+            height: 100px;
+        }
+
+        button {
+            background-color: rgb(0 0 0 / 40%);
+        }
+    }
+}
+
+/* Landscape
+================================================= */
+.vco-layout-landscape {
+    .vco-map {
+        .vco-map-attribution {
+            bottom: 0;
+        }
+    }
+}
+
+/* Mobile, iPhone and skinny
+================================================== */
+.vco-skinny {
+    // let vertical page scrolls pass through the map instead of being
+    // captured as map pans (issue #288); horizontal drags still pan
+    .vco-map .ol-viewport {
+        touch-action: pan-y;
+    }
+
+    .vco-map-attribution {
+        font-size: 8px;
+
+        .vco-knightlab-brand,
+        a.vco-knightlab-brand {
+            font-size: 12px;
+        }
+    }
+}

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

@@ -0,0 +1,222 @@
+@use "sass:color";
+@use "../Variables" as *;
+@use "../core/Mixins" as *;
+
+/* Requires Variables.less
+================================================== */
+.vco-media {
+    // display:table-cell;
+    // vertical-align:middle;
+    width: 100%;
+    min-width: 50%;
+    height: 100%;
+
+    // float: left;
+    margin-top: auto;
+    margin-bottom: auto;
+    position: relative;
+
+    // margin-right:auto;
+    .vco-message {
+        position: relative;
+    }
+
+    .vco-media-content-container {
+        .vco-media-content {
+            position: relative;
+
+            @include clearfix;
+
+            .vco-media-loaderror {
+                p {
+                    color: $ui-background-color;
+
+                    span {
+                        color: $ui-background-color;
+                    }
+
+                    text-align: center;
+                }
+
+                [class^="vco-icon-"],
+                [class*=" vco-icon-"] {
+                    font-size: $base-font-size-xlarge;
+                }
+            }
+
+            img,
+            embed,
+            object,
+            video {
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
+    }
+}
+
+/* Media Shodow 
+================================================== */
+.vco-media-shadow {
+    z-index: 1;
+
+    // background:$color-background;
+    @include box-shadow(1px 1px 7px rgba(0, 0, 0, 0.5));
+}
+
+/*
+.vco-media-shadow:before, .vco-media-shadow:after {
+	z-index: -1;
+	position: absolute;
+	content: "";
+	bottom: 15px;
+	left: 10px;
+	width: 50%;
+	top: 80%;
+	max-width:300px;
+	background: #333;
+	@include box-shadow(0 15px 10px #666);
+	@include transform(rotate(-2deg));
+}
+.vco-media-shadow::after {
+	@include transform(rotate(2deg));
+	right: 10px;
+	left: auto;
+}
+*/
+
+/* VCard
+================================================== */
+.vcard {
+    // float:right;
+
+    @include clearfix;
+
+    margin-bottom: $base-spacing;
+    margin-top: 10px;
+
+    .twitter-date {
+        text-align: left;
+        font-size: $base-font-size-small;
+    }
+
+    .author {
+        float: right;
+
+        // text-align:right;
+    }
+
+    a {
+        color: color.adjust($color-dark, $lightness: 20%);
+        text-decoration: none;
+    }
+
+    a:hover {
+        .fn,
+        .nickname {
+            color: $color-theme;
+
+            // text-decoration: underline;
+        }
+    }
+
+    .fn,
+    .nickname {
+        padding-left: 42px;
+    }
+
+    .fn {
+        display: block;
+        font-weight: bold;
+    }
+
+    .nickname {
+        margin-top: 1px;
+        color: color.adjust($color-dark, $lightness: 40%);
+    }
+
+    .avatar {
+        float: left;
+        width: 32px;
+        height: 32px;
+
+        img {
+            border-radius: 5px;
+        }
+    }
+}
+
+.vco-slide.vco-full-image-background,
+.vco-slide.vco-full-color-background {
+    a,
+    .vcard a {
+        @include slide-text-shadow;
+
+        color: color.adjust($color-theme, $lightness: 90%);
+    }
+}
+
+/* Credit
+================================================== */
+.vco-credit {
+    color: #999;
+    text-align: right;
+    display: block;
+    margin: 0 auto;
+    margin-top: 6px;
+    font-size: $base-font-size-small - 1;
+    line-height: 13px;
+}
+
+/* Caption
+================================================== */
+.vco-caption {
+    text-align: left;
+    margin-right: auto;
+    margin-left: auto;
+    color: #666;
+    font-size: $base-font-size-small;
+    line-height: 14px;
+    text-rendering: optimizelegibility;
+    overflow-wrap: break-word;
+}
+
+/* Full Image Background
+================================================== */
+.vco-full-image-background,
+.vco-full-color-background {
+    .vco-media-shadow::before,
+    .vco-media-shadow::after {
+        background: none;
+
+        @include box-shadow(0 0 0 #000);
+    }
+}
+
+/* Mobile, iPhone and skinny
+================================================== */
+@media only screen and (width <= 500px), only screen and (device-width <= 500px) {
+    .vco-media {
+        width: 100%;
+        height: auto;
+        float: none;
+    }
+}
+
+.vco-skinny {
+    .vco-media {
+        .vco-media-content-container {
+            .vco-credit,
+            .vco-caption {
+                margin-top: 2px;
+                padding-left: 10px;
+                padding-right: 10px;
+                font-size: 8px;
+            }
+
+            .vco-credit {
+                margin-top: 0;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,76 @@
+@use "sass:math";
+@use "../../Variables" as *;
+
+.vco-media {
+    .vco-media-blockquote {
+        text-align: left;
+        clear: both;
+
+        blockquote {
+            margin: 0;
+            margin-right: $base-spacing;
+            text-align: left;
+
+            p {
+                font-size: $base-font-size-xlarge;
+                line-height: math.floor($base-font-size-xlarge * 1.1);
+            }
+
+            cite {
+                font-size: $base-font-size;
+                line-height: math.floor($base-font-size * $base-line-height);
+                color: $color-foreground;
+                text-align: right;
+            }
+        }
+
+        blockquote p::before {
+            content: open-quote;
+            display: inline-block;
+            margin-right: 5px;
+        }
+
+        blockquote p::after {
+            content: close-quote;
+            margin-left: 3px;
+        }
+    }
+}
+
+.vco-slide-media-only {
+    .vco-media {
+        .vco-media-blockquote {
+            width: 80%;
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
+}
+
+// Skinnier
+@media only screen and (width <= 800px), only screen and (device-width <= 800px) {
+    .vco-media {
+        .vco-media-blockquote {
+            blockquote {
+                p {
+                    font-size: $base-font-size-large;
+                    line-height: math.floor($base-font-size-large * 1.1);
+                }
+            }
+        }
+    }
+}
+
+// Mobile, iPhone and skinny
+@media only screen and (width <= 500px), only screen and (device-width <= 500px) {
+    .vco-media {
+        .vco-media-blockquote {
+            blockquote {
+                p {
+                    font-size: $base-font-size;
+                    line-height: math.floor($base-font-size * $base-line-height);
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+.vco-media {
+    .vco-media-iframe {
+        width: 100%;
+        height: 100%;
+
+        iframe {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}

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

@@ -0,0 +1,13 @@
+.vco-media {
+    .vco-media-image {
+        width: auto !important;
+    }
+}
+
+.vco-mobile.vco-skinny {
+    .vco-media {
+        .vco-media-image {
+            max-height: 250px !important;
+        }
+    }
+}

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

@@ -0,0 +1,7 @@
+.vco-mobile.vco-skinny {
+    .vco-media {
+        .vco-media-instagram {
+            max-height: 250px !important;
+        }
+    }
+}

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

@@ -0,0 +1,5 @@
+.vco-media {
+    .vco-media-profile {
+        border-radius: 50%;
+    }
+}

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

@@ -0,0 +1,90 @@
+@use "sass:color";
+@use "../../Variables" as *;
+
+/* Requires Variables.less
+================================================== */
+
+.vco-text {
+    width: 50%;
+    max-width: 50%;
+    min-width: 120px;
+    padding: 0 20px;
+    display: table-cell;
+    display: block;
+    vertical-align: middle;
+    text-align: left;
+
+    // float:left;
+    text-shadow: none;
+    color: var(--vco-color-text, #{$color-text});
+
+    p {
+        color: var(--vco-color-text, #{$color-text});
+    }
+
+    h2.vco-headline-title,
+    h2.vco-headline {
+        margin-top: 0;
+        color: var(--vco-color-text, #{$color-header-text});
+    }
+
+    .vco-headline-date,
+    h3.vco-headline-date {
+        font-family: $font-main;
+        font-size: $base-font-size;
+        line-height: $base-font-size;
+        font-weight: normal;
+        margin: 0 0 2px;
+        color: color.adjust($color-text, $lightness: 25%);
+
+        small {
+            font-size: $base-font-size;
+            line-height: $base-font-size;
+            font-weight: normal;
+            color: color.adjust($color-text, $lightness: 25%);
+        }
+    }
+
+    .vco-text-date {
+        display: inline-block;
+        margin-top: 10px;
+        font-size: 12px;
+
+        &::after {
+            // margin-left:3px;
+            // color:#999;
+            // font-weight:normal;
+        }
+    }
+}
+
+// When the background is an image
+.vco-full-image-background,
+.vco-full-color-background {
+    .vco-text,
+    .vco-text p {
+        color: $color-text-inverted !important;
+        text-shadow: 1px 1px 2px #000;
+
+        .vco-headline-date,
+        h3.vco-headline-date {
+            color: $color-text-inverted !important;
+
+            small {
+                color: $color-text-inverted !important;
+            }
+        }
+    }
+}
+
+/* Skinny
+================================================== */
+.vco-skinny {
+    .vco-text {
+        width: 100%;
+        max-width: 100%;
+        min-width: auto;
+        float: none;
+        margin-top: 20px;
+    }
+}

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

@@ -0,0 +1,87 @@
+@use "sass:math";
+@use "../../Variables" as *;
+
+.vco-media {
+    .vco-media-twitter {
+        text-align: left;
+
+        // margin-left: auto;
+        // margin-right: auto;
+        // margin-bottom:@base-space;
+        clear: both;
+
+        blockquote {
+            margin: 0;
+            margin-right: $base-spacing;
+            font-size: $base-font-size;
+            line-height: math.floor($base-font-size * $base-line-height);
+            color: $color-foreground;
+
+            p {
+                font-size: $base-font-size-xlarge;
+                line-height: math.floor($base-font-size-xlarge * 1.1);
+                color: $color-dark;
+            }
+        }
+
+        blockquote p::before {
+            display: none;
+        }
+
+        .vco-icon-twitter {
+            color: #55acee;
+        }
+
+        .vcard {
+            a:hover,
+            a.vco-date:hover {
+                text-decoration: none;
+                color: #55acee;
+
+                .fn,
+                .nickname {
+                    color: #55acee;
+                }
+            }
+        }
+    }
+}
+
+.vco-slide-media-only {
+    .vco-media {
+        .vco-media-twitter {
+            width: 80%;
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
+}
+
+.vco-mobile.vco-skinny {
+    .vco-media {
+        .vco-media-twitter {
+            blockquote {
+                p {
+                    font-size: $base-font-size;
+                    line-height: math.floor($base-font-size * $base-line-height);
+                }
+            }
+        }
+    }
+}
+
+.vco-skinny {
+    .vco-media {
+        .vco-media-twitter {
+            margin-left: 10px;
+            margin-right: 10px;
+
+            blockquote {
+                p {
+                    font-size: $base-font-size-large;
+                    line-height: math.floor($base-font-size-large * 1.1);
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,64 @@
+@use "../../Variables" as *;
+@use "../../core/Mixins" as *;
+
+.vco-media {
+    .vco-media-wikipedia {
+        // font-size: @base-font;
+        // line-height: @base-line;
+        text-align: left;
+        margin-left: auto;
+        margin-right: auto;
+
+        // margin-bottom:@base-space;
+        clear: both;
+
+        .wiki-source {
+            // margin-bottom:@base-space;
+            font-size: 13px;
+            line-height: 19px;
+            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;
+        }
+    }
+}
+
+.vco-slide.vco-full-image-background,
+.vco-slide.vco-full-color-background {
+    .vco-media {
+        .vco-media-wikipedia {
+            padding: 20px;
+
+            @include background-color-opacity(0, 0, 0, 60);
+            @include border-radius(7px);
+
+            h4 a {
+                @include slide-text-shadow;
+            }
+        }
+    }
+}
+
+// Mobile, iPhone and skinny
+.vco-mobile.vco-skinny {
+    .vco-media {
+        .vco-media-wikipedia {
+            margin-left: 10px;
+            margin-right: 10px;
+        }
+    }
+}