@projektemacher/storymapjs 0.10.6 → 0.10.8

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

@@ -0,0 +1,219 @@
+@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;
+            display: flow-root;
+
+            .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;
+    box-shadow: 1px 1px 7px rgb(0 0 0 / 50%);
+}
+
+/*
+.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;
+	box-shadow: 0 15px 10px #666;
+	transform: rotate(-2deg);
+}
+.vco-media-shadow::after {
+	transform: rotate(2deg);
+	right: 10px;
+	left: auto;
+}
+*/
+
+/* VCard
+================================================== */
+.vcard {
+    // float:right;
+
+    display: flow-root;
+    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;
+        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.Text.scss

@@ -0,0 +1,98 @@
+@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;
+        }
+    }
+
+    // Inline images embedded in slide text HTML (e.g. sketches, maps):
+    // constrain to the text column, keep aspect ratio with explicit
+    // width/height attributes
+    img {
+        max-width: 100%;
+        height: auto;
+    }
+}
+
+// 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,65 @@
+@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);
+
+            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;
+        }
+    }
+}