slideoff 0.1

data/themes/modern/styles/screen.scss

@@ -0,0 +1,841 @@
+// Bright theme for Shower HTML presentation engine: github.com/shower/shower
+// Copyright © 2010–2013 Vadim Makeev, pepelsbey.net
+// Licensed under MIT license: github.com/shower/shower/wiki/MIT-License
+
+@import 'defaults';
+@import 'fonts';
+@import 'reset';
+
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+.text-center { text-align: center; }
+.text-success, .text-green { color: $greenDark; }
+.text-alert, .text-red { color: $redDark; }
+.text-info, .text-blue { color: $blueDark; }
+.text-purple { color: $purpleDark; }
+.text-bluegreen { color: $bluegreenDark; }
+.text-orange { color: $orangeDark; }
+.bg-black       { background-color: black !important;          }
+.bg-white       { background-color: white !important;          }
+.bg-blue        { background-color: $blueDark !important;      }
+.bg-bluegreen   { background-color: $bluegreenDark !important; }
+.bg-gray        { background-color: $grayDark !important;      }
+.bg-red         { background-color: $redDark !important;       }
+.bg-green       { background-color: $greenDark !important;     }
+.bg-orange      { background-color: $orangeDark !important;    }
+.bg-purple      { background-color: $purpleDark !important;    }
+
+@-webkit-keyframes blink {
+  0% {opacity: 1;}
+  49% {opacity: 1;}
+  50% {opacity: 0;}
+  100% {opacity: 0;}
+}
+
+body {
+  font:30px/2 'Open Sans', sans-serif;
+  counter-reset: problem 0;
+}
+a {
+  text-decoration:none;
+}
+
+// Caption
+// -------------------------------
+.caption {
+  display:none;
+  margin:0 0 60px;
+  padding:0 50px 0 0;
+  color:#555;
+  h1 {
+    font:50px 'Open Sans', sans-serif;
+    font-weight: lighter;
+  }
+  a {
+    color:$linkColor;
+    &:hover {
+      border-bottom:0.1em solid;
+    }
+  }
+}
+
+// Badge
+// -------------------------------
+.badge {
+  position:absolute;
+  top:0;
+  right:0;
+  display:none;
+  overflow:hidden;
+  visibility:hidden;
+  width:11em;
+  height:11em;
+  line-height:2.5;
+  font-size:15px;
+}
+.badge a {
+  position:absolute;
+  bottom:50%;
+  right:-50%;
+  left:-50%;
+  visibility:visible;
+  background:$color;
+  color:#FFF;
+  text-align:center;
+  -webkit-transform-origin:50% 100%;
+  transform-origin:50% 100%;
+  -webkit-transform:rotate(45deg) translateY(-1em);
+  transform:rotate(45deg) translateY(-1em);
+}
+
+@mixin inner-div {
+  // Inner
+  > div {
+    position:absolute;
+    top:0;
+    left:0;
+    overflow:hidden;
+    padding:$top $right $bottom $left;
+    width:$width - $left - $right;
+    height:$height - $top - $bottom;
+  }
+}
+
+// Slide
+// -------------------------------
+.slide {
+  position:relative;
+  width:$width;
+  height:$height;
+  background:#FFF;
+  color:#000;
+  -webkit-print-color-adjust:exact;
+  -webkit-text-size-adjust:none;
+  -moz-text-size-adjust:none;
+  -ms-text-size-adjust:none;
+  @include inner-div;
+  // Number
+  &:after {
+    font-family: 'Open Sans', sans-serif;
+    font-weight: lighter;
+    position:absolute;
+    right:$right;
+    bottom:15px;
+    color:$color;
+    content:attr(data-slide)' / 'attr(data-slides);
+    line-height:1;
+    font-size: 17px;
+  }
+  // Debug
+  .debug & {
+    background-image:url(../images/grid-#{$ratio}.svg);
+  }
+}
+
+// Elements
+// -------------------------------
+.slide {
+  // Header
+  hgroup {
+    margin: ($top * -1) ($right * -1) 28px ($left * -1);
+    padding: $top $right 20px $left;
+    background-color: $color;
+    color: white;
+    position: relative;
+    min-height: 20px;
+    h1 {
+      float: right;
+      font:30px/1 'Open Sans', sans-serif;
+      font-weight: lighter;
+      text-transform: uppercase;
+      color: lighten($color, 60%);
+    }
+    h2 {
+      font:44px/1 'Open Sans', sans-serif;
+      font-weight: lighter;
+    }
+  }
+  h3 {
+    margin-bottom: 28px;
+    font:28px/1 'Open Sans', sans-serif;
+    font-weight: lighter;
+  }
+  &.chapter {
+    h2 {
+      text-transform: uppercase;
+    }
+  }
+  hr {
+    border: none;
+    background-color: $color;
+    height: 0.1em;
+    margin:0 0 28px;
+  }
+  // Text
+  p {
+    margin:0 0 28px;
+    &.pause {
+      margin: 0;
+    }
+  }
+  a {
+    border-bottom:0.1em solid;
+    color:$linkColor;
+  }
+  b, strong {
+    font-weight:bold;
+  }
+  i, em {
+    font-style:italic;
+  }
+  kbd, code, samp {
+    background:rgba(#000, 0.1);
+    tab-size:4;
+    line-height:1;
+    font-family: 'Inconsolata', monospace, sans-serif;
+    &.inline {
+      padding:2px 7px;
+    }
+  }
+  blink {
+    -webkit-animation: blink 1.0s infinite;
+  }
+  mark {
+    padding-left: 5px;
+    padding-right: 5px;
+    color: $color;
+    cursor: default;
+    background-color: white;
+
+    @mixin background($color) {
+      &.#{$color} {
+        @extend .bg-#{$color};
+        color: white;
+      }
+    }
+    @each $color in "blue" "bluegreen" "gray" "red" "green" "orange" "purple" {
+      @include background($color);
+    }
+    &.success { @include background(green); }
+    &.alert { @include background(red); }
+    &.info { @include background(blue); }
+  }
+  // Quote
+  blockquote {
+    font-style:italic;
+    margin: 80px;
+    &:before {
+      position:absolute;
+      margin:-50px 0 0 -70px;
+      color:#DDD;
+      content:'\201C';
+      font: 200px/1 'PT Sans', sans-serif;
+      line-height:1;
+      font-size:200px;
+    }
+    p:last-child {
+      margin:-28px 0 28px;
+      font-style:italic;
+      font-weight:bold;
+      &:before {
+        content: '';
+        //width: 0px;
+        position: relative;
+        top: 0.75em;
+        border-top: 2px solid $grayLight;
+        color: $grayLight;
+        padding-right: 20px;
+        margin-right: 15px;
+      }
+    }
+  }
+  // Images
+  @import 'figure';
+  // Lists
+  ol, ul {
+    margin:0 0 28px;
+    counter-reset:list;
+    ol, ul { // inner list
+      margin:0 0 0 2em;
+    }
+    li {
+      text-indent:-2em;
+      &.divider {
+        border-bottom: 1px solid;
+        height: 0;
+        margin: 0.2em 0;
+        // opacity: 0.7;
+        &:before {
+          content: '';
+        }
+      }
+      &:before {
+        display:inline-block;
+        width:2em;
+        color:$listItemColor;
+        font-weight: normal;
+        text-align:right;
+      }
+    }
+    &.border-separated {
+      li {
+        &:before {
+          content: '';
+        }
+        border-bottom: 2px solid lighten($color, 10%);
+        &:first-child {
+          border-top: 2px solid lighten($color, 10%);
+        }
+      }
+    }
+  }
+  ul > li:before {
+    content:'\2023\00A0\00A0\2009';
+  }
+  ul > li:lang(ru):before {
+    content:'\2014\00A0\2009';
+  }
+  ol > li:before {
+    counter-increment:list;
+    content:counter(list)'.\00A0\2009';
+  }
+  dl {
+    margin: 0 0 28px;
+    dt {
+      font-weight: bolder;
+      float: left;
+      width: 180px;
+      clear: left;
+      text-align: right;
+      margin-right: 10px;
+    }
+    dd {
+      margin-left: 200px;
+    }
+  }
+  &.small {
+    hgroup {
+      padding-top: 20px;
+    }
+    pre {
+      font-size: 19px;
+      min-height: 23px;
+      code {
+        line-height:1.3em;
+        &:before {
+          line-height: 1.6em;
+        }
+      }
+    }
+  }
+  // Code
+  pre {
+    margin:0 -10px 28px;
+    margin-left: ($left * -1);
+    counter-reset:code;
+    background-color: $colorCode;
+    white-space:normal;
+    font-size: 26px;
+    padding: 0px 5px;
+    padding-left: $left;
+    min-height: 33px; // one line
+    white-space:pre-wrap;
+    position: relative;
+    code {
+      display:block;
+      position: relative;
+      line-height:1.5;
+      background-color: transparent;
+      &:before {
+        position:absolute;
+        margin-left:-40px;
+        font-size: 0.8em;
+        line-height: 2.0em;
+        vertical-align: middle;
+        color: darken($colorCode, 25%);
+        counter-increment:code;
+        content:counter(code, decimal-leading-zero);
+      }
+      &:only-child {
+        font-size: 30px;
+        &:before {
+          content:'';
+        }
+      }
+    }
+    &:after {
+      background-color: $color;
+      color: lighten($color, 60%);
+      right: 0;
+      top: 0;
+      position: absolute;
+      font-size: 16px;
+      line-height: 25px;
+      padding: 0px 15px;
+      text-transform: uppercase;
+    }
+    &[data-lang]:after {
+      content: attr(data-lang);
+    }
+  }
+  // Table
+  table {
+    left: 50%;
+    position: relative;
+    -webkit-transform: translateX(-50%);
+    margin:0 0 28px;
+    width:100%;
+    border-collapse:collapse;
+    border-spacing:0;
+    th, td {
+      padding:0px 10px;
+      border-bottom:1px solid $color;
+    }
+    th {
+      color:white;
+      background-color:$color;
+    }
+    &.striped {
+      tr:nth-child(even) {
+        background:mix($color, #FFF, 8%);
+      }
+    }
+  }
+  // iframe
+  img, iframe {
+    position: absolute;
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    // max-height: 440px;
+    max-height: 580px;
+    max-width: 850px;
+
+    &.inline {
+      position: initial;
+      -webkit-transform: none;
+    }
+  }
+  iframe {
+    box-shadow: 3px 3px 7px rgba(#000, 0.3);
+    border: 1px solid darken(#fff, 10%);
+    width: 100%;
+    height: 100%;
+  }
+  iframe::-webkit-scrollbar {
+    display: none;
+  }
+  // Cover Shout
+  &.cover,
+  &.shout {
+    z-index:1;
+    &:after {
+      content:'';
+      border: none;
+    }
+    h1 {
+      display: none;
+    }
+    h2 {
+      //color: white;
+      border: none;
+    }
+    code {
+      color: white;
+      font-size: 0.8em;
+      padding: 20px;
+      background-color: rgba(#000, 0.3);
+      box-shadow: inset 0 0 10px rgba(#000, 0.33);
+      text-shadow: 0 0 10px rgba(#000, 0.33);
+    }
+    footer {
+      display: none;
+    }
+  }
+  // Cover
+  &.cover {
+    background:#000;
+
+    hgroup {
+      background-color: transparent;
+    }
+
+    // Inner
+    > div {
+      position:absolute;
+      top:0;
+      left:0;
+      overflow:hidden;
+      padding:0;
+      width:$width;
+      height:$height;
+    }
+    .left-33 {
+      padding: 60px 0px;
+      font:38px/1 'Open Sans', sans-serif;
+      font-weight: lighter;
+      background-color: $color;
+      color: white;
+      width: 36%;
+      height: $height;
+      position: relative;
+      box-sizing: border-box;
+
+      h1 {
+        font: 500 46px/1 'Open Sans';
+        display: block;
+        margin-bottom: 0.6em;
+      }
+      h2 {
+        font-size: 28px;
+        margin-bottom: 0.6em;
+        vertical-align: middle;
+        line-height: 38px;
+      }
+
+      p {
+        padding-left: 50px;
+        padding-right: 50px;
+      }
+
+      .vcenter {
+        height: 460px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-box-pack: center;
+      }
+      ul {
+        width: 100%;
+        margin: 0;
+        li {
+          padding: 0.5em 50px;
+        }
+      }
+    }
+    @mixin cover {
+      img, svg, video,
+      object, canvas, iframe {
+        @content;
+      }
+      iframe, img {
+        max-height: none;
+        max-width: none;
+      }
+      iframe {
+        z-index: 0;
+      }
+    }
+    @include cover {
+      position:absolute;
+      top:0;
+      left:0;
+      z-index:-1;
+    }
+    &.w {
+      @include cover {
+        top:50%;
+        width:100%;
+        -webkit-transform:translateY(-50%);
+        transform:translateY(-50%);
+      }
+    }
+    &.h {
+      @include cover {
+        left:50%;
+        height:100%;
+        -webkit-transform:translateX(-50%);
+        transform:translateX(-50%);
+      }
+    }
+    &.w.h {
+      @include cover {
+        top:0;
+        left:0;
+        -webkit-transform:none;
+        transform:none;
+      }
+    }
+  }
+  &.noheader {
+    hgroup {
+      display: none;
+    }
+  }
+  &.huge {
+    background:$color;
+    hgroup {
+      position: initial;
+      background-color: transparent;
+    }
+    h1 {
+      visibility: hidden;
+    }
+  }
+  // Shout
+  &.shout {
+    @extend .huge;
+    h2 {
+      position:absolute;
+      top:50%;
+      left: 128px;
+      color:#FFF;
+      font-size:100px;
+      -webkit-transform:translateY(-50%);
+      transform:translateY(-50%);
+      border-bottom: none;
+      z-index: 1;
+      a {
+        border-bottom:none;
+        color:#FFF;
+      }
+    }
+    p {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 50%;
+      color: #FFF;
+      -webkit-transform:translateY(-50%);
+      transform:translateY(-50%);
+      font-size: 100px;
+      line-height: 1em;
+      text-align: center;
+      border: none;
+      padding: 20px;
+      font-family: 'Open Sans';
+      font-weight: lighter;
+      text-shadow: 0px 0px 5px rgba(#000, 0.2);
+    }
+  }
+  &.chapter {
+    @extend .shout;
+    @extend .left;
+    @extend .cover;
+    @extend .w;
+    h2 {
+      padding: 20px;
+      padding-right: 1em;
+      //margin-left: 250px;
+      border-top-left-radius: 20px;
+      border-bottom-left-radius: 20px;
+      background-color: rgba($color, 0.8);
+      right: 0;
+    }
+  }
+  &.chapter-html {
+    @extend .shout;
+    p {
+      font-size: 4.5em;
+      text-align: left;
+      left: 10%;
+    }
+    .tag {
+      top: 3.2em;
+      font-size: 3em;
+      opacity: 0.3;
+      text-shadow: none;
+      text-transform: lowercase;
+    }
+    .title {
+      top: 3em;
+    }
+  }
+  &.problem-solution {
+    @extend .shout;
+    h2 {
+      left: 0;
+      right: 0;
+      text-align: center;
+      text-transform: uppercase;
+      top: 33%;
+      font-size: 2.8em;
+      opacity: 0.5;
+      letter-spacing: 0.1em;
+      font-style: italic;
+      &:before {
+        content: '#'counter(problem);
+        font-weight: 700;
+        margin-right: 0.5em;
+      }
+    }
+    .solution {
+      position: absolute;
+      padding: 100% 0;
+      background-color: $bluegreenDark;
+    }
+  }
+  &.problem {
+    @extend .problem-solution;
+    @extend .bg-red;
+    h2 {
+      &:before {
+        counter-increment: problem;
+      }
+    }
+  }
+  &.solution {
+    @extend .problem-solution;
+    @extend .bg-bluegreen;
+  }
+  &.section {
+    @extend .cover;
+    @include inner-div;
+    @extend .w;
+    hgroup {
+      background-color: $color;
+    }
+    h2 {
+      background-color: rgba($color, 0.8);
+    }
+  }
+  &.img-place-middle {
+    img {
+      @extend .place;
+      margin-top: 50px;
+    }
+  }
+  .col2 {
+    position: relative;
+    -webkit-columns: 2;
+    li {
+      margin-left: 2em;
+      text-indent: -2em;
+    }
+  }
+  .col3 {
+    position: relative;
+    -webkit-columns: 3;
+    li {
+      margin-left: 2em;
+      text-indent: -2em;
+    }
+  }
+  .col4 {
+    position: relative;
+    -webkit-columns: 4;
+    li {
+      margin-left: 2em;
+      text-indent: -2em;
+    }
+    img {
+      position: initial;
+      -webkit-transform: none;
+    }
+  }
+  // Place
+  .place {
+    position:absolute;
+    top:50%;
+    left:50%;
+    -webkit-transform:translate(-50%, -50%);
+    transform:translate(-50%, -50%);
+    &.t.l, &.t.r, &.b.r, &.b.l {
+      -webkit-transform:none;
+      transform:none;
+    }
+    &.t, &.b {
+      -webkit-transform:translate(-50%, 0);
+      transform:translate(-50%, 0);
+    }
+    &.l, &.r {
+      -webkit-transform:translate(0, -50%);
+      transform:translate(0, -50%);
+    }
+    &.t, &.t.l, &.t.r {
+      top:0;
+    }
+    &.r {
+      right:0;
+      left:auto;
+    }
+    &.b, &.b.r, &.b.l {
+      top:auto;
+      bottom:0;
+    }
+    &.l {
+      left:0;
+    }
+  }
+  //Boxes
+  @import 'box';
+  // Footer
+  footer {
+    font-family: 'Open Sans', sans-serif;
+    font-weight: lighter;
+    position:absolute;
+    left: 0;
+    right:0;
+    bottom: 5px;
+    text-align: left;
+    padding: 10px $right 10px $left;
+    color:$gray;
+    line-height:1;
+    font-size: 17px;
+  }
+}
+
+#slide-0-0 {
+  color: $grayDark;
+  font-size: 70px;
+  font-weight: 700;
+  font: 100 50px/1.4 'Open Sans',sans-serif;
+
+  hgroup {
+    background-color: $color;
+  }
+
+  dl {
+    font: 100 30px/1.6 'Open Sans', sans-serif;
+  }
+
+  > div {
+    position:absolute;
+    top:0;
+    left:0;
+    overflow:hidden;
+    padding:$top $right $bottom $left;
+    width:$width - $left - $right;
+    height:$height - $top - $bottom;
+  }
+
+  footer {
+    display: block;
+  }
+
+  hgroup {
+    margin-bottom: 0;
+
+    h1, h2 {
+      text-transform: none;
+      color: white;
+      float: none;
+      font: 300 59px/1.3 'PT Sans Narrow',sans-serif;
+      visibility: visible;
+      display: block;
+      position: relative;
+      left: 0;
+      right: 0;
+    }
+  }
+
+  p {
+    font: 30px/1.6 'Open Sans', sans-serif;
+    color: $grayDark;
+    margin: 30px 0;
+
+    &.date {
+      font-family: 'Open Sans', sans-serif;
+      font-size: 16px;
+    }
+  }
+}
+
+// Screen
+@media screen {
+  @import 'list';
+  @import 'full';
+}
+// Print
+@page {
+  margin:0;
+  size:$width $height;
+}