@projektemacher/storymapjs 0.10.6 → 0.10.8

package/src/scss/Typography.scss

@@ -0,0 +1,235 @@
+@use "sass:color";
+@use "Variables" as *;
+@use "core/Mixins" as *;
+
+.vco-storymap {
+    font-family: $font-main;
+
+    // runtime-themable text colors (issue #177); set inline via the
+    // text_color/text_background_color options
+    --vco-color-text: #{$color-text};
+    --vco-color-text-muted: #{color.adjust($color-dark, $lightness: 40%)};
+
+    h1,
+    h2,
+    h3 {
+        font-size: $base-font-size-xlarge;
+        line-height: $base-font-size-xlarge;
+
+        small {
+            font-size: $base-font-size-large;
+            line-height: $base-font-size-large;
+        }
+    }
+
+    h4,
+    h5,
+    h6 {
+        font-size: $base-font-size-large;
+        line-height: $base-font-size-large;
+        margin-bottom: 0;
+
+        small {
+            font-size: $base-font-size;
+            line-height: $base-font-size;
+        }
+    }
+
+    h2.vco-headline-title {
+        font-size: $base-font-size-xlarge + 10;
+        line-height: $base-font-size-xlarge + 10;
+
+        small {
+            display: block;
+            margin-top: 5px;
+        }
+    }
+
+    h2 {
+        margin-top: 20px;
+        margin-bottom: 5px;
+    }
+
+    p {
+        margin-top: 5px;
+        margin-bottom: 10px;
+        font-size: $base-font-size;
+
+        // font-family: $font-secondary;
+        color: var(--vco-color-text-muted);
+
+        a {
+            color: var(--vco-color-text-muted);
+            text-decoration: none;
+            background-image: linear-gradient(
+                to bottom,
+                rgba(color.adjust($color-dark, $lightness: 40%), 0%) 50%,
+                rgba(color.adjust($color-dark, $lightness: 40%), 60%) 50%
+            );
+            background-repeat: repeat-x;
+            background-size: 2px 2px;
+            background-position: 0 $base-font-size + 2;
+            text-shadow:
+                -2px -1px 0 white,
+                2px -1px 0 white,
+                -2px 1px 0 white,
+                2px 1px 0 white;
+
+            &:hover,
+            &:focus {
+                color: $color-theme;
+                text-decoration: none;
+            }
+        }
+
+        @media (resolution >= 144dpi) {
+            a {
+                text-decoration: underline;
+                background-image: none;
+                text-shadow: none;
+
+                &:hover,
+                &:focus {
+                    color: $color-theme;
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+
+    b,
+    strong {
+        font-weight: bold;
+
+        // color: $color-dark;
+    }
+
+    i,
+    em {
+        font-style: italic;
+    }
+
+    a {
+        text-decoration: none;
+        color: $color-theme;
+    }
+
+    a:hover {
+        text-decoration: underline;
+        color: color.adjust($color-theme, $lightness: -20%);
+    }
+
+    .vco-caption,
+    .vco-credit,
+    .vco-slidenav-next,
+    .vco-slidenav-previous {
+        // font-family: $font-sanserif;
+        font-size: $base-font-size-small;
+        line-height: $base-font-size-small;
+
+        a {
+            color: $color-dark;
+        }
+    }
+
+    blockquote,
+    blockquote p {
+        font-family: $font-serif;
+        color: color.adjust($color-dark, $lightness: 60%);
+        text-align: left;
+        background: transparent;
+        border: 0;
+        padding: 0;
+
+        cite {
+            font-family: $font-sanserif;
+            font-size: $base-font-size-small;
+            text-align: right;
+            font-style: normal;
+        }
+
+        cite::before {
+            content: "\2014";
+        }
+    }
+
+    blockquote p::before {
+        content: open-quote;
+        display: inline-block;
+        position: relative;
+        top: 8px;
+        margin-right: 5px;
+    }
+
+    blockquote p::after {
+        content: close-quote;
+        margin-left: 3px;
+    }
+
+    blockquote {
+        margin: 10px;
+
+        p {
+            margin: 0;
+        }
+
+        // margin-left:18px;
+    }
+
+    .vcard {
+        font-family: $font-main;
+        line-height: $base-font-size;
+    }
+
+    .vco-text {
+        ul {
+            padding: 0;
+            padding-left: 30px;
+
+            li {
+                margin-bottom: 5px;
+            }
+        }
+    }
+
+    .vco-note {
+        display: block;
+        line-height: $base-font-size + 2;
+        padding: 10px;
+        border-radius: 7px;
+        color: #8a6d3b;
+        background-color: #fcf8e3;
+        border: 1px solid #faebcc;
+    }
+}
+
+// Skinnier
+@media only screen and (width <= 800px), only screen and (device-width <= 800px) {
+    .vco-storymap {
+        h1,
+        h2,
+        h3 {
+            font-size: $base-font-size-xlarge;
+            line-height: $base-font-size-xlarge;
+        }
+    }
+}
+
+// Mobile, iPhone and skinny
+@media only screen and (width <= 500px), only screen and (device-width <= 500px) {
+    .vco-storymap {
+        h1,
+        h2,
+        h3 {
+            font-size: $base-font-size-xlarge - 4;
+            line-height: $base-font-size-xlarge - 4;
+        }
+    }
+}
+
+.vco-skinny {
+    h2 {
+        margin-top: 0;
+        padding-top: 20px;
+    }
+}

package/src/scss/VCO.StoryMap.Dark.scss

@@ -0,0 +1,150 @@
+/*!
+	StoryMap
+	
+	Designed and built by Zach Wise for the Northwestern University Knight Lab
+	
+	This Source Code Form is subject to the terms of the Mozilla Public
+	License, v. 2.0. If a copy of the MPL was not distributed with this
+	file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+*/
+
+/* Includes
+================================================== */
+@use "sass:color";
+@use "Variables.Dark" as *; // Variables (easy way to make style changes)
+@use "core/Mixins" as *; // Less shortcuts and functions
+@use "core/Reset" as *; // CSS Reset
+@use "Typography" as *;
+
+// Icons
+@use "icons/Icons" as *;
+
+//	Components
+@use "ui/VCO.MenuBar" as *;
+@use "ui/VCO.MenuBar.Button" as *;
+@use "ui/VCO.Message" as *;
+@use "slider/VCO.Slide" as *;
+@use "slider/VCO.SlideNav" as *;
+@use "slider/VCO.StorySlider" as *;
+@use "media/VCO.Media" as *;
+@use "media/types/VCO.Media.Text" as *;
+@use "media/types/VCO.Media.Image" as *;
+@use "media/types/VCO.Media.Twitter" as *;
+@use "media/types/VCO.Media.Blockquote" as *;
+@use "media/types/VCO.Media.IFrame" as *;
+@use "media/types/VCO.Media.Wikipedia" as *;
+@use "map/openlayers/VCO.Map.OpenLayers" as *;
+@use "map/VCO.MapMarker" as *;
+@use "map/VCO.ImageMarker" as *;
+@use "map/VCO.Map" as *;
+@use "snapmap/VCO.SnapMap" as *;
+
+/* StoryMap
+================================================== */
+.vco-storymap {
+    width: 100%;
+    height: 100%;
+    font-size: 16px;
+    line-height: normal;
+    overflow: hidden;
+    position: relative;
+    user-select: none;
+}
+
+/* Portrait
+================================================== */
+.vco-layout-portrait {
+    .vco-storyslider {
+        padding-top: 10px;
+        box-shadow: 0 -3px 6px rgb(0 0 0 / 20%);
+    }
+}
+
+/* Landscape
+================================================== */
+.vco-layout-landscape {
+    .vco-storyslider {
+        padding-top: 0;
+        position: absolute;
+        width: 50%;
+        left: 50%;
+        overflow: visible;
+
+        .vco-slider-background {
+            margin-left: -20%;
+            width: 120%;
+            overflow: hidden;
+
+            @include gradient-horizontal(
+                rgba(255, 255, 255, 0.0001),
+                rgba(255, 255, 255, 0.85),
+                0%,
+                15%
+            );
+        }
+
+        .vco-slider-container-mask {
+            overflow: visible;
+        }
+
+        .vco-slidenav-next,
+        .vco-slidenav-previous {
+            .vco-slidenav-icon::before {
+                background-color: $color-background;
+                padding: 20px;
+                border: 1px solid color.adjust($color-background, $lightness: -30%);
+            }
+
+            .vco-slidenav-icon,
+            .vco-slidenav-title,
+            .vco-slidenav-description {
+                text-shadow: none;
+            }
+
+            .vco-slidenav-title,
+            .vco-slidenav-description {
+                display: none;
+            }
+        }
+
+        .vco-slidenav-previous {
+            left: -100%;
+            margin-left: 0;
+
+            .vco-slidenav-icon::before {
+                @include border-right-radius(7px);
+            }
+        }
+
+        .vco-slidenav-next {
+            right: 130px;
+
+            .vco-slidenav-icon::before {
+                @include border-left-radius(7px);
+            }
+        }
+
+        .vco-slidenav-previous:hover {
+            .vco-slidenav-icon {
+                margin-left: -4px;
+            }
+        }
+    }
+}
+
+/* No map (map_type: "none")
+================================================== */
+.vco-layout-no-map {
+    .vco-storyslider {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        background-color: $color-background;
+
+        .vco-slider-background {
+            display: none;
+        }
+    }
+}

package/src/scss/VCO.StoryMap.scss

@@ -0,0 +1,195 @@
+/*!
+	StoryMap
+
+	Designed and built by Zach Wise for the Northwestern University Knight Lab
+
+	This Source Code Form is subject to the terms of the Mozilla Public
+	License, v. 2.0. If a copy of the MPL was not distributed with this
+	file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+*/
+
+/* Includes
+================================================== */
+@use "Variables" as *; // Variables (easy way to make style changes)
+@use "core/Mixins" as *; // Less shortcuts and functions
+@use "core/Reset" as *; // CSS Reset
+@use "Typography" as *;
+
+// Icons
+@use "icons/Icons" as *;
+
+//	Components
+@use "ui/VCO.MenuBar" as *;
+@use "ui/VCO.MenuBar.Button" as *;
+@use "ui/VCO.Message" as *;
+@use "ui/VCO.Consent" as *;
+@use "slider/VCO.Slide" as *;
+@use "slider/VCO.SlideNav" as *;
+@use "slider/VCO.StorySlider" as *;
+@use "media/VCO.Media" as *;
+@use "media/types/VCO.Media.Text" as *;
+@use "media/types/VCO.Media.Image" as *;
+@use "media/types/VCO.Media.Twitter" as *;
+@use "media/types/VCO.Media.Blockquote" as *;
+@use "media/types/VCO.Media.IFrame" as *;
+@use "media/types/VCO.Media.Wikipedia" as *;
+@use "map/openlayers/VCO.Map.OpenLayers" as *;
+@use "map/VCO.MapMarker" as *;
+@use "map/VCO.ImageMarker" as *;
+@use "map/VCO.Map" as *;
+@use "snapmap/VCO.SnapMap" as *;
+
+/* StoryMap
+================================================== */
+.vco-storymap {
+    width: 100%;
+    height: 100%;
+    font-size: 16px;
+    line-height: normal;
+    overflow: hidden;
+    position: relative;
+    user-select: none;
+
+    /* fullscreen: fill the screen and sit above everything else */
+    &:fullscreen {
+        width: 100%;
+        height: 100%;
+        background-color: $color-background;
+    }
+
+    *,
+    *::before,
+    *::after {
+        box-sizing: content-box;
+    }
+}
+
+/* Portrait
+================================================== */
+.vco-layout-portrait {
+    .vco-storyslider {
+        padding-top: 10px;
+        box-shadow: 0 -3px 6px rgb(0 0 0 / 20%);
+    }
+}
+
+/* Landscape
+================================================== */
+.vco-layout-landscape {
+    .vco-storyslider {
+        padding-top: 0;
+        position: absolute;
+        width: 50%;
+        left: 50%;
+        overflow: visible;
+
+        .vco-slider-background {
+            margin-left: -20%;
+            width: 120%;
+            overflow: hidden;
+
+            @include gradient-horizontal(
+                rgba(255, 255, 255, 0.0001),
+                rgba(255, 255, 255, 0.85),
+                0%,
+                15%
+            );
+        }
+
+        .vco-slider-container-mask {
+            overflow: visible;
+        }
+    }
+}
+
+/* No map (map_type: "none")
+   The storyslider is the whole story: it takes the full width and height
+   under the menubar, and it is opaque, because there is no map behind it for
+   the panel to fade over. Landscape normally pins the panel to the right
+   half (`.vco-layout-landscape .vco-storyslider`), so the width, left and the
+   gradient background all have to be undone here.
+================================================== */
+.vco-layout-no-map {
+    .vco-storyslider {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        background-color: $color-background;
+
+        .vco-slider-background {
+            display: none;
+        }
+    }
+}
+
+/* Map area "left" (options.map_area): the map is limited to the left,
+   visible half and the slide panel is opaque — no gradient fades over the
+   map, so the view center is the visible center (no offset needed)
+================================================== */
+.vco-map-area-left {
+    .vco-storyslider {
+        background-color: $color-background;
+    }
+
+    .vco-slider-background {
+        display: none;
+    }
+}
+
+/* Right to Left
+================================================== */
+.vco-rtl {
+    direction: rtl;
+
+    .vco-text-content,
+    .vco-text,
+    .vco-caption,
+    .vco-media-wikipedia,
+    .vco-headline,
+    .vco-media-blockquote {
+        text-align: right;
+    }
+
+    // mirror the slider navigation
+    .vco-slidenav-next {
+        right: auto;
+        left: 100px;
+        text-align: left;
+
+        .vco-slidenav-icon {
+            margin-left: 0;
+            margin-right: 100 - 24px;
+        }
+    }
+
+    .vco-slidenav-previous {
+        left: auto;
+        right: 100px;
+        text-align: right;
+
+        .vco-slidenav-icon {
+            margin-right: 0;
+            margin-left: 0;
+        }
+    }
+
+    .vco-marker-label {
+        transform: translateX(50%);
+    }
+}
+
+/* Screen-reader-only utility (aria-live slide announcements)
+================================================== */
+.vco-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+}

package/src/scss/Variables.Dark.scss

@@ -0,0 +1,57 @@
+@use "sass:color";
+
+/*	VARIABLES
+----------------------------------------------------- */
+
+/* UI
+================================================== */
+$axis-height: 35px;
+
+/* TYPEFACE
+================================================== */
+$font-serif:
+    "Georgia",
+    times new roman,
+    times,
+    serif;
+$font-sanserif: "Helvetica Neue", helvetica, arial, sans-serif;
+$font-main: $font-sanserif;
+$font-secondary: $font-serif;
+$base-font-size: 15px;
+$base-font-size-small: 11px;
+$base-font-size-large: 24px;
+$base-font-size-xlarge: 36px;
+$base-line-height: 1.4286;
+
+/* COLOR SCHEME
+================================================== */
+$color-background: #222;
+$color-foreground: #ccc;
+$color-dark: #fff;
+$color-theme: #c34528; // #DA0000;
+
+$color-theme-dark: color.adjust($color-theme, $lightness: -15%);
+$color-text: color.adjust($color-dark, $lightness: -50%);
+$color-header-text: $color-dark;
+$color-text-inverted: color.adjust($color-dark, $lightness: -25%);
+$color-header-text-inverted: $color-dark;
+
+/* UI COLOR
+================================================== */
+$ui-background-color: color.adjust($color-foreground, $lightness: -50%);
+$marker-color: color.adjust($ui-background-color, $lightness: -15%);
+$marker-selected-text-color: $color-dark;
+$minor-ticks-color: color.adjust($color-dark, $lightness: -66%);
+$major-ticks-color: color.adjust($color-dark, $lightness: -33%);
+
+/* UI
+================================================== */
+$base-spacing: 15px;
+$arrow-size: 20px;
+$time-marker-border-radius: 10px;
+
+/* Animation
+   The animation curves live in src/animation/easings.ts, not here: the
+   widget animates through OpenLayers and the Web Animations API, not CSS
+   transitions. See that file.
+================================================== */

package/src/scss/Variables.scss

@@ -0,0 +1,48 @@
+@use "sass:color";
+
+/*	VARIABLES
+----------------------------------------------------- */
+
+/* TYPEFACE
+================================================== */
+$font-serif:
+    "Georgia",
+    times new roman,
+    times,
+    serif;
+$font-sanserif: "Helvetica Neue", helvetica, arial, sans-serif;
+$font-main: $font-sanserif;
+$font-secondary: $font-serif;
+$base-font-size: 15px;
+$base-font-size-small: 11px;
+$base-font-size-large: 24px;
+$base-font-size-xlarge: 36px;
+$base-line-height: 1.4286;
+
+/* COLOR SCHEME
+================================================== */
+$color-background: #fff;
+$color-foreground: #333;
+$color-dark: #000;
+$color-theme: #c34528; // #DA0000;
+
+$color-theme-dark: color.adjust($color-theme, $lightness: -15%);
+$color-text: color.adjust($color-foreground, $lightness: 25%);
+$color-header-text: $color-dark;
+$color-text-inverted: color.adjust($color-background, $lightness: -33%);
+$color-header-text-inverted: $color-background;
+
+/* UI COLOR
+================================================== */
+$ui-background-color: color.adjust($color-background, $lightness: -15%);
+
+/* UI
+================================================== */
+$base-spacing: 15px;
+$arrow-size: 20px;
+
+/* Animation
+   The animation curves live in src/animation/easings.ts, not here: the
+   widget animates through OpenLayers and the Web Animations API, not CSS
+   transitions. See that file.
+================================================== */