sass/decss.scss
@import "variables";
@import "normalize";

html,
body {
    background: $bodyBackground;
    height: 100%;
    min-height: 100%;
    width: 100%;
}

body {
    font-family: $bodyFont;
    font-weight: $bodyWeight;
    font-size: $bodyFontSizeBase;
    color: $bodyColor;
    padding: 0;
    -webkit-font-smoothing: subpixel-antialiased;
    @include transition(font-size $transitionDuration);
    @include transform-origin(center center);
    @include transform-style(preserve-3d);
    @include perspective(1000);
    @include backface-visibility(hidden);
    @media (min-width: 30em) {
        font-size: $bodyFontSizeLarge;
    }
    @media (max-height: 600px) {
        font-size: 3vh;
    }
    @media (max-width: 480px) {
        font-size: 4vw;
    }
    &[data-in-control="true"] {
        &:before {
            @include transition(top $transitionDuration);
            content: "The sync server is not responding";
            background: rgba(255,0,0,0.7);
            color: white;
            display: block;
            text-align: center;
            font-size: 14px;
            position: absolute;
            top: -3em;
            right: 0;
            left: 0;
            padding: 0.5em;
            z-index: 1000;
        }
        &[data-syncing="false"] {
            &:before {
                top: 0;
            }
        }
    }
}

html.presenter,
html.presenter body {
    background: black;
    color: white;
}

#deck {
    font-family: $bodyFont;
    font-weight: $bodyWeight;
    font-size: $bodyFontSizeBase;
    color: $bodyColor;
    @media (min-width: 30em) {
        font-size: $bodyFontSizeLarge;
    }
    @media (max-height: 600px) {
        font-size: 3vh;
    }
    @media (max-width: 480px) {
        font-size: 4vw;
    }
}

body * {
    box-sizing: border-box;
    @include transform-origin(center center);
    @include transform-style(preserve-3d);
    @include perspective(1000);
    @include backface-visibility(hidden);
}

a {
    text-decoration: none;
    color: $linkColor;
}

#deck {
    @include transform(translate3d(0,0,0));
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

section {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    visibility: hidden;
    background: $slideBackgroundColor no-repeat center bottom;
    background-size: cover;
    display: -webkit-inline-flex;
    display:         inline-flex;
    -webkit-align-items: center;
            align-items: center;
    -webkit-justify-content: flex-start;
            justify-content: flex-start;
    -webkit-flex-direction: column;
            flex-direction: column;
    -webkit-align-content: stretch;
            align-content: stretch;
    height: 100%;
    .boxsizing & {
        width: 100%;
    }
    > * {
        padding: 0 20px;
        @media (min-width: 481px) {
            padding: 0 40px;
        }
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
    }
    .ready & {
        @include transition-duration($transitionDuration);
    }
    &:target {
        z-index: 3;
    }
    &:target ~ section {
        z-index: 2;
    }
    li,
    p,
    ul,
    ol {
        margin-top: 1em;
        margin-bottom: 0;
        &:first-child {
            margin-top: 0;
        }
    }
}

center,
header:only-child {
    display: -webkit-flex;
    display:         flex;
    -webkit-align-items: center;
            align-items: center;
    -webkit-justify-content: center;
            justify-content: center;
    -webkit-align-content: center;
            align-content: center;
    -webkit-flex-direction: column;
            flex-direction: column;
    -webkit-flex: 2 1 auto;
            flex: 2 1 auto;
    padding-top: 40px;
    padding-bottom: 40px;
    height: 100%;
    width: 100%;
    > * {
        -webkit-flex: 0 1 auto;
                flex: 0 1 auto;
    }
    &.horizontal {
        -webkit-flex-direction: row;
                flex-direction: row;
        > * {
            -webkit-flex: 1 1 auto;
                    flex: 1 1 auto;
        }
    }
}

center {
    > * {
        text-align: left;
    }
}

figure {
    text-align: justify;
    text-align-last: justify;
    @include column-gap(1em);
    &.two-up {
        @include column-count(2);
    }
    &.three-up {
        @include column-count(3);
    }
    &.four-up {
        @include column-count(4);
    }
    &.five-up {
        @include column-count(5);
    }
    figcaption {
        text-align: center;
        text-align-last: center;
    }
}

img {
    figure & {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
        display: block;
    }
}

.js {
    [data-step] {
        opacity: 0;
        @include transition-duration($transitionDuration);
        @include transition-property(opacity);
    }
    [data-step="0"],
    [data-step].active {
        opacity: 1;
    }
    &.csstransforms3d {
        [data-step] {
            @include transition-property(opacity, transform);
            @include transform(translate3d(0,-10px,0));
            @include transition-delay(0, $transitionDuration);
        }
        [data-step="0"],
        [data-step].active {
            @include transform(translate3d(0,0,0));
            @include transition-delay(0);
        }
    }
    &.presenter {
        [data-step] {
            opacity: 0.5;
            @include transform(translate3d(0,0,0));
        }
        [data-step="0"],
        [data-step].active {
            opacity: 1;
        }
    }
}

.no-js,
.ready {
    section {
        visibility: visible;
    }
}

%default_transition {
    opacity: 0;
    @include transition-property(opacity);
    &:target {
        opacity: 1;
    }
}

body:not([data-transition]),
body[data-transition="fade"] {
    section {
        @extend %default_transition;
    }
}

body[data-transition="zoom"] {
    .csstransforms3d & {
        section {
            @include transition-property(opacity, transform);
            @include transform(scale(1));
            opacity: 1;
            &:target ~ section {
                @include transform(scale(1.25));
            }
        }
    }
    .no-js &,
    .no-csstransforms3d & {
        @extend %default_transition;
    }
}

body[data-transition="slide"] {
    section {
        @include transition-property(opacity, left, right);
        left: -100%;
        right: 100%;
        opacity: 0.5;
        &:target {
            opacity: 1;
            left: 0;
            right: 0;
        }
        &:target ~ section {
            left: 100%;
            right: -100%;
        }
    }
    .no-js & {
        @extend %default_transition;
    }
}

body[data-transition] {
    .presenter.csstransforms3d & {
        section:target,
        section:target ~ section {
            &:after {
                font-family: $helvetica;
                content: "Slide: " attr(data-slide) "/" attr(data-total) "     Step: " attr(data-current-step) "/" attr(data-steps) "\A\A" attr(data-notes);
                width: 100%;
                text-align: center;
                position: absolute;
                right: 0;
                top: 100%;
                left: 0;
                white-space: pre-wrap;
                background: black;
                padding: 0.5em 0 0;
            }
        }
        section,
        section:target,
        section:target + section,
        section:target ~ section {
            @include transition-property(transform, opacity);
            @include transform(scale(0.75) translate3d(-19%, -15%, 0));
            opacity: 1;
        }
        section:target ~ section {
            opacity: 0;
        }
        section:target ~ section,
        section:target + section {
            @include transform(scale(0.25) translate3d(148%, -50%, 0));
        }
        section:target + section {
            opacity: 0.75;
        }
        section:target {
            opacity: 1;
        }
    }
}

header {
    color: $headerColor;
    font-family: $headerFont;
    font-weight: $headerWeight;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    -webkit-flex: 1 0 auto;
            flex: 1 0 auto;
    h1,
    h2,
    h3 {
        font-weight: inherit;
        margin: 0;
    }
}

progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    height: 10px;
    width: 100%;
    background: $progressBackground;
    border: 0;
    border-radius: 0;
    &::-webkit-progress-bar {
        background: $progressBackground;
    }
    &::-webkit-progress-value {
        background: $progressColor;
        .ready & {
            @include transition(width $transitionDuration);
        }
    }
    &::-moz-progress-bar {
        background: $progressColor;
        .ready & {
            @include transition(width $transitionDuration);
        }
    }
}

#timer,
#selector,
#viewers {
    position: absolute;
    z-index: 10;
    top: -120px;
    display: none;
    right: 1em;
    font-size: $bodyFontSizeLarge;
    width: 20%;
    .presenter & {
        top: 1em;
        display: block;
    }
}
#timer {
    font-family: $helvetica;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 2px #000;
}
#selector {
    max-width: 20%;
    .presenter & {
        top: 3em;
    }
}
#viewers {
    width: 20%;
    text-align: center;
    font-size: 16px;
    .presenter & {
        top: 100%;
        margin-top: -3em;
        &:before {
            content: "Live viewers: ";
        }
    }
}