@projektemacher/storymapjs 0.10.6 → 0.10.7

package/src/scss/VCO.StoryMap.scss

@@ -0,0 +1,164 @@
+/*!
+	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.Instagram" as *;
+@use "media/types/VCO.Media.Profile" 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;
+
+    @include 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;
+
+        @include box-shadow(0 -3px 6px rgba(0, 0, 0, 0.2));
+    }
+}
+
+/* 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;
+        }
+    }
+}
+
+/* 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%);
+    }
+}

package/src/scss/Variables.Dark.scss

@@ -0,0 +1,56 @@
+@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
+================================================== */
+$animation-ease: cubic-bezier(0.77, 0, 0.175, 1);
+$animation-duration: 1000ms;

package/src/scss/Variables.scss

@@ -0,0 +1,47 @@
+@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
+================================================== */
+$animation-ease: cubic-bezier(0.77, 0, 0.175, 1);
+$animation-duration: 1000ms;

package/src/scss/core/Mixins.scss

@@ -0,0 +1,112 @@
+@use "sass:color";
+@use "sass:math";
+
+/*	Mixins.scss
+	Snippets of reusable CSS to develop faster and keep code readable
+ * ----------------------------------------------------------------- */
+
+// Cubic Bezier
+@mixin animation-timing-cubic-bezier {
+    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
+}
+
+// Property Animation
+@mixin property-animation($prop: height, $time: 1000ms, $ease: cubic-bezier(0.77, 0, 0.175, 1)) {
+    transition: $prop $time $ease;
+}
+
+// Opacity
+@mixin opacity($opacity: 100) {
+    opacity: math.div($opacity, 100);
+}
+
+// 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;
+}
+
+// Border Radius
+@mixin border-radius($radius: 5px) {
+    border-radius: $radius;
+}
+
+// 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;
+}
+
+// Box Shadow
+@mixin box-shadow($shadow: 1px 1px 7px rgba(0, 0, 0, 0.3)) {
+    box-shadow: $shadow;
+}
+
+// Transform
+@mixin transform($transform) {
+    transform: $transform;
+}
+
+// User select
+// For selecting text on the page
+@mixin user-select($select) {
+    user-select: $select;
+}
+
+// Clear Fix
+@mixin clearfix {
+    &::before,
+    &::after {
+        display: table;
+        content: "";
+    }
+
+    &::after {
+        clear: both;
+    }
+}
+
+@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
+    );
+}
+
+@mixin gradient-horizontal-three-colors(
+    $start-color: #00b3ee,
+    $mid-color: #7a43b6,
+    $color-stop: 50%,
+    $end-color: #c3325f
+) {
+    background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
+    background-repeat: no-repeat;
+}
+
+@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
+    background-image: radial-gradient(circle, $inner-color, $outer-color);
+}

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