pageflow 0.0.1

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

@@ -0,0 +1,5 @@
+@mixin pageflow-page-type($name) {
+  .#{$name} .type_pictogram {
+    background-image: image-url("pageflow/#{$name}_pictogram_small.png");
+  }
+}

data/app/assets/stylesheets/pageflow/mixins/pressed.css.scss

@@ -0,0 +1,6 @@
+@mixin pressed {
+  body.has_mobile_platform &.pressed,
+  body.has_no_mobile_platform &.pressed {
+    @content;
+  }
+}

data/app/assets/stylesheets/pageflow/mixins/shadow.css.scss

@@ -0,0 +1,45 @@
+@mixin shadow($color) {
+  /* Generated with http://www.colorzilla.com/gradient-editor */
+  background: -moz-linear-gradient(left, rgba($color,1) 0%, rgba($color,0) 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba($color,1)), color-stop(100%,rgba($color,0))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(left, rgba($color,1) 0%,rgba($color,0) 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(left, rgba($color,1) 0%,rgba($color,0) 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(left, rgba($color,1) 0%,rgba($color,0) 100%); /* IE10+ */
+  background: linear-gradient(to right, rgba($color,1) 0%,rgba($color,0) 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie_hex_str(rgba($color, 1))}', endColorstr='#{ie_hex_str(rgba($color, 0))}',GradientType=1 ); /* IE6-9 */
+
+  @include mobile {
+    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICAgIDxzdG9wIG9mZnNldD0iNjYlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
+    background: -moz-linear-gradient(left, rgba($color,0.8) 0%, rgba($color,0.4) 66%, rgba($color,0) 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba($color,0.8)), color-stop(66%,rgba($color,0.4)), color-stop(100%,rgba($color,0))); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(left, rgba($color,0.8) 0%,rgba($color,0.4) 66%,rgba($color,0) 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(left, rgba($color,0.8) 0%,rgba($color,0.4) 66%,rgba($color,0) 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(left, rgba($color,0.8) 0%,rgba($color,0.4) 66%,rgba($color,0) 100%); /* IE10+ */
+    background: linear-gradient(to right, rgba($color,0.8) 0%,rgba($color,0.4) 66%,rgba($color,0) 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie_hex_str(rgba($color, 1))}', endColorstr='#{ie_hex_str(rgba($color, 0))}',GradientType=1 ); /* IE6-8 */
+  }
+}
+
+@mixin shadow-right($color) {
+  /* Generated with http://www.colorzilla.com/gradient-editor */
+  background: -moz-linear-gradient(left, rgba($color,0) 0%, rgba($color,1) 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba($color,0)), color-stop(100%,rgba($color,1))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(left, rgba($color,0) 0%,rgba($color,1) 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(left, rgba($color,0) 0%,rgba($color,1) 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(left, rgba($color,0) 0%,rgba($color,1) 100%); /* IE10+ */
+  background: linear-gradient(to right, rgba($color,0) 0%,rgba($color,1) 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie_hex_str(rgba($color, 0))}', endColorstr='#{ie_hex_str(rgba($color, 1))}',GradientType=1 ); /* IE6-9 */
+
+  @include mobile {
+    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICAgIDxzdG9wIG9mZnNldD0iNjYlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
+    background: -moz-linear-gradient(left, rgba($color,0) 0%, rgba($color,0.4) 33%, rgba($color,0.8) 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba($color,0)), color-stop(33%,rgba($color,0.4)), color-stop(100%,rgba($color,0.8))); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(left, rgba($color,0) 0%,rgba($color,0.4) 33%,rgba($color,0.8) 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(left, rgba($color,0) 0%,rgba($color,0.4) 33%,rgba($color,0.8) 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(left, rgba($color,0) 0%,rgba($color,0.4) 33%,rgba($color,0.8) 100%); /* IE10+ */
+    background: linear-gradient(to right, rgba($color,0) 0%,rgba($color,0.4) 33%,rgba($color,0.8) 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie_hex_str(rgba($color, 0))}', endColorstr='#{ie_hex_str(rgba($color, 1))}',GradientType=1 ); /* IE6-8 */
+  }
+}

data/app/assets/stylesheets/pageflow/mixins/text_size_adjust.css.scss

@@ -0,0 +1,3 @@
+@mixin text-size-adjust($value) {
+  @include prefixer(text-size-adjust, $value, webkit moz ms o spec);
+}

data/app/assets/stylesheets/pageflow/mixins/unselectable.css.scss

@@ -0,0 +1,4 @@
+@mixin unselectable {
+  @include user-select(none);
+  -webkit-touch-callout: none;
+}

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

@@ -0,0 +1,150 @@
+.multimedia_alert {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  background-color: rgba(0,0,0,0.6);
+  opacity: 1;
+  z-index: 90;
+  color: white;
+  text-align: center;
+  font-family: "SourceSansPro";
+
+  .multimedia_alert_box {
+    top: 50%;
+    left: 50%;
+    position: absolute;
+    margin-left: -250px;
+    margin-top: -290px;
+    width: 500px;
+    height: 580px;
+    max-width: 500px;
+    font-size: 1.4em;
+
+    @media (max-width: 500px) {
+      margin-left: -155px;
+      margin-top: -175px;
+      width: 310px;
+      font-size: 0.8em;
+      height: 350px;
+    }
+
+    .alert_headline, .close {
+      font-family: "SourceSansProLight";
+      text-transform: uppercase;
+      font-weight: normal;
+    }
+
+    .alert_headline {
+      font-size: 2.2em;
+    }
+    .close {
+      font-size: 1.4em;
+      border: 1px solid white;
+      border-radius: 7px;
+      padding: 16px 32px;
+      color: white;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    &:before {
+      width: 963px;
+      height: 963px;
+      content: "";
+      background-image: image-url('pageflow/alert_vignette.png');
+      position: absolute;
+      top: -191px;
+      left: -231px;
+      z-index: -1;
+    }
+
+    p {
+      font-weight: normal;
+      margin-top: 0;
+    }
+    p.scroll_hint {
+      margin-bottom: 3em;
+    }
+
+    .alert_icon {
+      width: 40px;
+      height: 40px;
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+      margin-bottom: 5px;
+
+      &.speaker {
+        background-image: image-url('pageflow/alert_icon_sound.png');
+      }
+      &.scrolling {
+        background-image: image-url('pageflow/alert_icon_scrolling.png');
+      }
+    }
+  }
+
+}
+
+.has_no_mobile_platform {
+  p.mobile {
+    display: none;
+  }
+}
+
+.has_mobile_platform {
+  p.desktop {
+    display: none;
+  }
+}
+
+.initially_hidden {
+  opacity: 0 !important;
+  visibility: hidden !important;
+  -webkit-transition: 0s ease !important;
+  -moz-transition: 0s ease !important;
+  transition: 0s ease !important;
+}
+
+@include phone {
+  @media (orientation: landscape) {
+    .multimedia_alert .multimedia_alert_box {
+      width: 100%;
+      left: 0;
+      top: 50%;
+      height: auto;
+      margin-left: 0;
+      margin-top: 0;
+      font-size: 0.8em;
+      max-width: 100%;
+      @include transform(translate(0,-50%));
+
+
+      .alert_block {
+        display: inline-block;
+        width: 45%;
+        vertical-align: top;
+        position: relative;
+        padding: 0 2%;
+
+        .alert_headline {
+          display: none;
+        }
+        .alert_icon {
+          /*margin-top: 10px; */
+        }
+        .close {
+          margin-left: auto;
+          width: 87px;
+          display: block;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,427 @@
+$bg-color: #353535;
+$nav-color: #9c9c9c;
+
+@mixin box($margin-top) {
+  visibility: hidden;
+  margin-top: $margin-top;
+  background-color: $bg-color;
+  border: 2px solid $nav-color;
+  position: absolute;
+  right: 90px;
+  padding: 15px;
+
+  &:before {
+    content: " ";
+    background-image: image-url("pageflow/menu-arrow-short.png");
+    display: block;
+    position: absolute;
+    width: 10px;
+    height: 38px;
+    left: 100%;
+    top: 4px;
+  }
+}
+
+.hint {
+  position: absolute;
+  top: -1000em;
+  left: -1000em;
+  line-height: 0;
+  height: 0;
+  font-size: 0;
+  color: transparent;
+  border: 0 none;
+}
+
+.navigation {
+  @include unselectable;
+  color: $nav-color;
+  width: 85px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 3;
+
+  img {
+    border: none;
+  }
+
+  a.navigation_main, a.navigation_home, a.navigation_index {
+    display: none;
+  }
+
+  @include phone {
+    display: none;
+  }
+
+  .navigation_bar_bottom {
+    display: none;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  .scroller:after {
+    content: " ";
+    display: block;
+    height: 150px;
+    @include background-image(linear-gradient(rgba(53, 53, 53, 1) 0, transparent 100%));
+  }
+
+  li {
+    list-style-type: none;
+
+    &[tabindex] {
+      outline: -webkit-focus-ring-color none 0;
+    }
+  }
+
+  a {
+    display: block;
+
+    span {
+      display: block;
+
+      &.hidden {
+        display: inline;
+      }
+    }
+
+    @include hover {
+      -webkit-mask-image: image-url("pageflow/page_thumbnail_mask.png");
+      -webkit-mask-position-y: 2px;
+    }
+
+    &:active {
+      outline: none;
+    }
+  }
+
+  a {
+    @include hover {
+      + div {
+        visibility: visible;
+      }
+    }
+  }
+
+  a:focus + div, .navigation_menu.focused div {
+    visibility: visible;
+  }
+
+  .navigation_thumbnails a {
+    position: relative;
+    outline: none;
+
+    &:focus:after {
+      content: " ";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border: solid 3px #eee;
+    }
+  }
+
+  .navigation_site_detail {
+
+    color: white;
+    font-size: 1em;
+    line-height: 1.1em;
+    font-family: sourcesanspro;
+
+    @include box(-40px);
+
+    img {
+      margin-top: 12px;
+    }
+  }
+
+  .navigation_bg, .navigation_bullet .button {
+    background-repeat: no-repeat;
+    border-bottom: 2px solid $nav-color;
+    margin: auto;
+  }
+
+  .navigation_bar_top, .navigation_bar_bottom {
+    opacity: 0.9;
+
+    li:last-child a .button {
+      border-bottom: none;
+    }
+  }
+
+  .navigation_bullet {
+    background-color: $bg-color;
+
+    @include hover {
+      -webkit-mask-image: none;
+    }
+  }
+
+  .navigation_menu {
+    a {
+      -webkit-mask-position-y: -4px !important;
+    }
+  }
+
+  .navigation_menu_box {
+    @include box(0);
+
+    a {
+      @include hover {
+        -webkit-mask-image: none;
+      }
+    }
+  }
+
+  .navigation_share_box {
+    $size: 28px;
+    width: 210px;
+
+    a {
+      float: left;
+      text-decoration: none;
+      padding: 0 15px 0 15px;
+      width: 39px;
+
+      p {
+        font-size: 9px;
+        color: $nav-color;
+        margin-bottom: 0;
+        text-align: center;
+      }
+
+      .button {
+        width: $size;
+        height: $size;
+        margin: auto;
+      }
+    }
+  }
+
+  .navigation_credits_box {
+    font-size: 1em;
+    min-width: 230px;
+    min-height: 4px;
+    font-family: "sourcesanspro";
+
+    a {
+      color: #b4c552;
+    }
+
+    a.legal {
+      float: left;
+    }
+
+    a.copy {
+      float: right;
+    }
+  }
+
+  .navigation_menu {
+    @include hover {
+      .navigation_menu_box {
+        visibility: visible;
+      }
+    }
+
+    &:focus, &.open {
+      .navigation_menu_box {
+        visibility: visible;
+      }
+    }
+  }
+
+  &.js {
+    position: absolute;
+    bottom: 0;
+
+    & > * {
+      position: absolute;
+      width: 100%;
+    }
+
+    & > .navigation_site_detail {
+      margin-top: 0;
+      width: auto;
+    }
+
+    a.scroll_indicator {
+      height: 30px;
+      width: 35px;
+      right: 25px;
+      background-repeat: no-repeat;
+      background-image: image-url('pageflow/scroll_indicator_sprite.png');
+      background-color: transparent;
+      -webkit-mask-image: none;
+      $normal-offset: -14px;
+      $hover-offset: -115px;
+      $pressed-offset: -64px;
+
+      &.top {
+        top: 145px;
+        $top-offset: -13px;
+        background-position: $top-offset $normal-offset;
+
+        @include hover {
+          background-position: $top-offset $hover-offset;
+        }
+
+        @include pressed {
+          background-position: $top-offset $pressed-offset;
+        }
+      }
+
+      &.bottom {
+        z-index: 1;
+        bottom: 234px;
+        $bottom-offset: -161px;
+        background-position: $bottom-offset $normal-offset;
+
+        @include hover {
+          background-position: $bottom-offset $hover-offset;
+        }
+        @include pressed {
+          background-position: $bottom-offset $pressed-offset;
+        }
+      }
+    }
+
+    .navigation_bar_top {
+      top: 0;
+      height: 180px;
+
+      a.navigation_main, a.navigation_home, a.navigation_index {
+        display: block;
+      }
+
+      &:after {
+        content: " ";
+        display: block;
+        background-color: $bg-color;
+        height: 50px;
+        width: 100%;
+      }
+    }
+
+    .scroller {
+      overflow: hidden;
+      top: 180px;
+      bottom: 268px;
+
+      &:after {
+        height: 100%;
+        background-color: $bg-color;
+        background-image: none;
+        opacity: 0.9;
+      }
+
+      ul {
+        position: relative;
+
+        a {
+          position: relative;
+          background-color: $bg-color;
+          background-color: rgba(53, 53, 53, 0.9);
+          padding-bottom: 4px;
+
+          &.active {
+            cursor: default;
+
+            img {
+              border-left: 5px solid #A6D513;
+            }
+          }
+        }
+
+        img {
+          display: block;
+        }
+      }
+    }
+
+    .navigation_bar_bottom {
+      display: block;
+      height: 268px;
+      bottom: 0;
+
+      & > li > a {
+        background-color: $bg-color;
+      }
+
+      .indicator {
+        height: 50px;
+        background-color: $bg-color;
+      }
+
+      .fullscreen {
+        height: 44px;
+        background-color: $bg-color;
+      }
+    }
+
+    .navigation_menu_box {
+      &:before {
+        top: auto;
+        bottom: -2px;
+      }
+    }
+
+    .navigation_share_box {
+      bottom: 48px;
+    }
+
+    .navigation_credits_box {
+      bottom: 4px;
+    }
+
+    .visible {
+      visibility: visible;
+    }
+
+    .hidden {
+      visibility: hidden;
+    }
+
+    .navigation_menu_box.navigation_volume_box .volume-control {
+      &:before, &:after {
+        background-image: image-url('pageflow/volume_control_sprite.png');
+        position: absolute;
+        width: 19px;
+        height: 19px;
+        content: " ";
+        background-repeat: no-repeat;
+        top: 8px;
+      }
+
+      &:before {
+        background-position: left top;
+        left: 0;
+        left: 12px;
+      }
+      &:after {
+        right: 8px;
+        background-position: -21px top;
+        top: 8px;
+      }
+    }
+
+    .volume-control {
+      margin: 0px 20px;
+
+      .volume-slider {
+        width: 100px;
+        height: 4px;
+        background-color: gray;
+      }
+      .volume-level {
+        height: 100%;
+        background-color: #b4c552;
+      }
+    }
+  }
+}