pageflow 0.0.1

data/app/assets/stylesheets/pageflow/page.css.scss

@@ -0,0 +1,182 @@
+.print_image, .print_only {
+  display: none;
+}
+
+.page {
+  position: relative;
+  width: 100%;
+  min-height: 100%;
+
+  > * {
+    position: absolute;
+    z-index: 1;
+  }
+
+  .content_and_background {
+    width:100%;
+    min-height:100%;
+    position: initial;
+  }
+
+  .shadow {
+    @include shadow(#000);
+    pointer-events: none;
+  }
+
+  &.invert {
+    color: #000;
+    background-color: #fff;
+
+    .shadow {
+      @include shadow(#fff);
+    }
+  }
+
+  &.text_position_right .shadow {
+    @include shadow-right(#000);
+  }
+
+  &.invert.text_position_right  {
+    color: #000;
+    background-color: #fff;
+
+    .shadow {
+      @include shadow-right(#fff);
+    }
+  }
+
+  .content {
+    width: 100%;
+    position: relative;
+  }
+
+  .backgroundArea {
+    width:100%;
+    height: 100%;
+  }
+
+  .scroller > div, .content_and_background > .page_header {
+    padding: 200px 0 5% 8%;
+    pointer-events: none;
+    width: 75%;
+    @include mobile {
+      padding: 85px 12% 5% 8%;
+      width: 100%;
+    }
+  }
+
+  .content_and_background > .page_header {
+    position: relative;
+  }
+
+  .videoPage .scroller > div, .audioPage .scroller > div {
+    padding: 0px 0 5% 8%;
+    @include mobile {
+      padding: 0px 12% 5% 8%;
+    }
+  }
+
+  &.hide_title h2 {
+    display: none;
+  }
+
+  h1, h2 span.subtitle, h2 span.tagline, h3, p {
+    max-width: 500px;
+    width: 60%;
+    @include mobile {
+      width: 100%;
+    }
+  }
+
+  h2 .title {
+    max-width: 700px;
+    width: 100%;
+  }
+
+  .shadow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+  }
+}
+
+.js .page {
+  height: 100%;
+
+  .content_and_background {
+    height: 100%;
+    position: absolute;
+  }
+
+  .scroller > div {
+    pointer-events: none;
+    padding: 15% 14% 5% 8%;
+    width: 100%;
+    @include mobile {
+      padding: 15% 12% 5% 8%;
+      width: 100%;
+      @media (orientation: landscape) {
+        padding: 7% 12% 5% 8%;
+      }
+    }
+  }
+
+  .close_button {
+    text-indent: -4000px;
+    cursor: pointer;
+    display: block;
+    background-position: -45px 0;
+    background-repeat: no-repeat;
+    width: 45px;
+    height: 45px;
+
+    position: absolute;
+    top: 20px;
+    right: 100px;
+    z-index: 10;
+    background-size: 200% auto;
+
+    &:hover {
+      background-position: 0 0;
+    }
+    background-image: image-url('pageflow/close_sprite_shadow.png');
+
+    @include phone {
+      right: 10px;
+    }
+
+    @include pad_portrait {
+      right: 10px;
+    }
+
+    &:before {
+      content: " ";
+      position: absolute;
+      top: 10px;
+      right: 48px;
+
+      width: 100px;
+      height: 30px;
+
+      background-image: image-url('close_text.png');
+    }
+  }
+
+  &.invert .close_button:before {
+    background-image: image-url('pageflow/close_text_invert.png');
+  }
+}
+
+.contentText {
+  @include phone {
+    margin-bottom: 40px;
+  }
+}
+.videoPage .contentText, .audioPage .contentText {
+  @include phone {
+    margin-bottom: 80px;
+  }
+}

data/app/assets/stylesheets/pageflow/page_types.css.scss

@@ -0,0 +1,11 @@
+@import "page_types/audio";
+@import "page_types/background-image";
+@import "page_types/background-video";
+@import "page_types/video";
+@import "page_types/internal_links";
+
+@include pageflow-page-type(audio);
+@include pageflow-page-type(background_image);
+@include pageflow-page-type(background_video);
+@include pageflow-page-type(video);
+@include pageflow-page-type(internal_links);

data/app/assets/stylesheets/pageflow/page_types/audio.css.scss

@@ -0,0 +1,67 @@
+.video-js.player {
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.audioPage .vjs-control-bar {
+  position: absolute;
+  left: 50%;
+  @include transform(translate(-50%, 0));
+}
+
+.audioPage {
+  .vjs-controls.vjs-player {
+    display: none;
+  }
+  .audio-js-box {
+    margin-bottom: 3em;
+  }
+  audio {
+    pointer-events: all;
+  }
+}
+
+.js .audioPage {
+  .contentText {
+    margin-bottom: 200px;
+
+    @include phone {
+      margin-bottom: 100px;
+    }
+  }
+
+  .audio-js-box {
+    margin-bottom: 0;
+  }
+
+  audio {
+    visibility: hidden;
+  }
+
+  .vjs-slider-handle {
+    margin-left:-17px;
+  }
+}
+
+.non_js .text_position_right .audioPage {
+  .page_header {
+    margin-left: 0;
+    max-width: initial;
+
+    > * {
+      max-width: 500px;
+      width: 60%;
+      margin-left: auto;
+    }
+  }
+  audio {
+    max-width: 500px;
+    width: 60%;
+    margin-left: auto;
+    display: block;
+  }
+}

data/app/assets/stylesheets/pageflow/page_types/background-image.css.scss

@@ -0,0 +1,19 @@
+.page {
+  .background_image {
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+
+    background-position: center center;
+    background-repeat:  no-repeat;
+    background-attachment: fixed;
+    @include background-size(cover);
+  }
+}
+
+.js .page .background_image {
+    -webkit-backface-visibility: hidden;
+}

data/app/assets/stylesheets/pageflow/page_types/background-video.css.scss

@@ -0,0 +1,50 @@
+.backgroundVideo .video-js.video-viewport {
+    position: absolute;
+    top: 0;
+    overflow: hidden;
+}
+
+.backgroundVideo .video-js .vjs-control-bar {
+	display: none;
+}
+
+.backgroundVideo .video-js .vjs-control-bar.vjs-lock-showing {
+  display: none !important;
+}
+
+.backgroundVideo .video-js .vjs-loading-spinner {
+	display: none;
+	visibility: hidden;
+	opacity: 0;
+}
+
+.backgroundVideo .video-js .vjs-tech {
+}
+
+.backgroundVideo .video-js .vjs-poster {
+  background-size: cover;
+}
+
+/* .js .contentText {
+	@include desktop {
+		margin-bottom: 100px;
+	}
+} */
+
+.backgroundVideo {
+  video,
+  .video-js {
+    display: none;
+  }
+}
+
+.js.has_no_mobile_platform .backgroundVideo {
+  .background_image {
+    display: none;
+  }
+
+  video,
+  .video-js{
+    display: block;
+  }
+}

data/app/assets/stylesheets/pageflow/page_types/internal_links.css.scss

@@ -0,0 +1,222 @@
+.js .page .internal_links_page .scroller > div,
+.page .internal_links_page .scroller > div
+ {
+  @include pad_portrait {
+    padding: 15% 8% 5% 8%;
+  }
+}
+
+.js .page:first-child .internal_links_page .scroller > div,
+.js .page:first-child .content_and_background.internal_links_page > .page_header,
+.page:first-child .internal_links_page .scroller > div,
+.js .page:first-child .content_and_background.internal_links_page > .page_header {
+  @include pad_portrait {
+    padding: 110px 8% 5% 8%;
+  }
+}
+
+.js .page .internal_links_page {
+  .scroller > div {
+    padding: 15% 14% 5% 8%;
+    width: 100%;
+  }
+}
+
+.internal_links_page {
+  nav {
+    position: relative;
+    max-width: 1011px;
+    pointer-events: all;
+
+    ul {
+      padding: 0;
+      top: 0;
+      left: 0;
+      width: 100%;
+      margin: 0 0 30px 0;
+    }
+
+    li {
+      display: inline-block;
+      list-style: none;
+      width: 19%;
+      max-width: 192px;
+      max-height: 108px;
+      padding: 0 1% 1% 0;
+      margin:  0 -4px -4px 0;
+
+      @include phone {
+        width: 48%;
+        max-width: 350px;
+        max-height: 250px;
+        padding: 0 2% 1% 0;
+        margin: 0 -3px -1px 0;
+      }
+
+      &.empty {
+        padding: 0 1% 0 0;
+
+        @include phone {
+          display: none;
+        }
+      }
+    }
+
+    .title {
+      display: none;
+    }
+
+    .title_hover {
+      .title {
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        color: white;
+        text-transform: uppercase;
+        text-align: center;
+        line-height: 1.2em;
+        letter-spacing: 0.05em;
+        font-size: 0.8em;
+        opacity: 0;
+        z-index: 1;
+        @include transform(translate3d(0,-50%,0));
+        @include transition(opacity 500ms);
+      }
+
+      &:hover {
+        .title {
+          opacity: 1;
+        }
+
+        .placeholder,
+        .thumbnail {
+          &:after {
+            opacity: 0.8;
+          }
+        }
+      }
+
+      .placeholder,
+      .thumbnail {
+        &:after {
+          opacity: 0;
+          background-color: black;
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          content: "";
+          @include transition(opacity 500ms);
+        }
+      }
+    }
+
+    .placeholder,
+    .thumbnail {
+      display: block;
+      width: 100%;
+      padding-top: 56.25%;
+      background-position: center;
+      background-size: cover;
+      position: relative;
+
+      div {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    %hero {
+      max-width: 394px;
+      max-height: 226px;
+      width: 38.9%;
+
+      @include phone {
+        width: 98%;
+        max-width: 700px;
+        max-height: 600px;
+        float: none;
+      }
+
+      .placeholder,
+      .thumbnail {
+        padding-top: 58.5%;
+      }
+
+      .title {
+        font-size: 1em;
+        line-height: 1.4em;
+      }
+
+      &.empty {
+        padding-top: 22.815%;
+
+        @include phone {
+          padding-top: 0;
+        }
+      }
+    }
+
+    %hero_left {
+      @extend %hero;
+      float: left;
+      margin: 0;
+
+      @include phone {
+        float: none;
+      }
+    }
+
+    %hero_right {
+      @extend %hero;
+      float: right;
+      margin: 0;
+      padding: 0 1.3% 0 0px;
+
+      @include phone {
+        margin: 0;
+        float: none;
+      }
+    }
+
+    &[data-layout="hero_top_left"],
+    &[data-layout="hero_top_right"] {
+      li[data-reference-key="23"],
+      li[data-reference-key="24"],
+      li[data-reference-key="25"] {
+        display: none;
+      }
+    }
+
+    &[data-layout="hero_top_left"] {
+      li:first-child {
+        @extend %hero_left;
+      }
+    }
+
+    &[data-layout="hero_top_right"] {
+      li:first-child {
+        @extend %hero_right;
+      }
+    }
+  }
+}
+
+.invert .internal_links_page {
+  nav {
+    .thumbnail, .placeholder {
+      &:after {
+        background-color: white;
+      }
+    }
+
+    .title {
+      color: black;
+    }
+  }
+}