// Bright theme for Shower HTML presentation engine: github.com/shower/shower // Copyright © 2010–2015 Vadim Makeev, pepelsbey.net // Licensed under MIT license: github.com/shower/shower/wiki/MIT-License
@import 'shower/defaults'; @import 'shower/reset';
.shower {
counter-reset:slide; font:24px/2 'Open Sans', sans-serif; @media print { text-rendering:geometricPrecision; } a { color:$color; @include underline(currentColor, 0.09); text-decoration:none; } }
.caption {
display:none; margin:0 0 60px; padding:0 50px 0 0; color:#555; h1 { font:50px 'Open Sans Light', sans-serif; } }
.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; transform-origin:50% 100%; transform:rotate(45deg) translateY(-1em); }
.region {
display:none; }
.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; @media print { page-break-before:always; } &:after { position:absolute; right:0; bottom:45px; left:0; color:#AAA; counter-increment:slide; content:counter(slide); text-align:center; line-height:1; } > div { position:absolute; top:0; left:0; overflow:hidden; padding:$top $right 0 $left; width:$width - $left - $right; height:$height - $top; } }
.slide {
h2 { margin:0 0 58px; font:48px/1 'Open Sans Light', sans-serif; } p { margin:0 0 48px; } p.note { color:#AAA; } b, strong { font-weight:bold; } i, em { font-style:italic; } code, kbd, samp { padding:5px 7px 1px; background:rgba(#000, 0.08); color:#000; line-height:1; font-family:'Anka Coder', monospace; } mark { padding:2px 7px; background:$yellow; color:#000; } sub, sup { position: relative; line-height:0; font-size:75%; } sub { bottom:-0.25em; } sup { top:-0.5em; } blockquote { font-style:italic; &:before { position:absolute; margin:-49px 0 0 -100px; color:#DDD; content:'\201C'; line-height:1; font-size:200px; } & + figcaption { margin:-48px 0 48px; font-style:italic; font-weight:bold; } } ol, ul { margin:0 0 48px; counter-reset:list; li { text-indent:-2em; &:before { display:inline-block; width:2em; color:#AAA; text-align:right; } } ol, ul { margin:0 0 0 2em; } } ul > li:before { content:'\2022\00A0\00A0\2009'; } ul > li:lang(ru):before { content:'\2014\00A0\2009'; } ol > li:before { counter-increment:list; content:counter(list)'.\00A0\2009'; } pre { margin:0 0 45px; padding:3px 0 0; counter-reset:code; white-space:normal; tab-size:4; code { display:block; padding:0; background:none; white-space:pre; line-height:2; &:before { position:absolute; margin-left:-50px; color:#AAA; counter-increment:code; content:counter(code, decimal-leading-zero)'.'; } &:only-child:before { content:''; } } mark { padding:5px 7px 1px; &.important { background:$color; color:#FFF; } &.comment { padding:0; background:none; color:#AAA; } } } table { margin:0 0 50px; width:100%; border-collapse:collapse; border-spacing:0; th, td { @include underline($color, 0.055); } th { text-align:left; font-weight:bold; } &.striped { tr:nth-child(even) { background:mix($color, #FFF, 8%); } } } &.cover, &.shout { z-index:1; &:after { content:''; } } &.cover { background:#000; @mixin cover { img, svg, video, object, canvas, iframe { @content; } } @include cover { position:absolute; top:0; left:0; z-index:-1; } &.w { @include cover { top:50%; width:100%; transform:translateY(-50%); } } &.h { @include cover { left:50%; height:100%; transform:translateX(-50%); } } &.w.h { @include cover { top:0; left:0; transform:none; } } } &.shout { background:$color; h2 { position:absolute; top:50%; left:128px; right:96px; color:#FFF; font-size:100px; transform:translateY(-50%); a { @include underline(currentColor, 0.055); color:#FFF; } } } .place { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); &.t.l, &.t.r, &.b.r, &.b.l { transform:none; } &.t, &.b { transform:translate(-50%, 0); } &.l, &.r { 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; } } footer { position:absolute; left:0; right:0; bottom:-$height; z-index:1; display:none; padding:21px $right 4px $left; background:$yellow; box-shadow:0 0 0 2px rgba(#000, 0.05); transition:bottom 0.3s; p { margin:0 0 16px; } mark { background:rgba(#FFF, 0.7); } } &:hover footer { bottom:0; } }
@media screen {
.shower.list { position:absolute; clip:rect(0, auto, auto, 0); // Having fun with IE10 padding:50px 0 50px 50px; background:desaturate(lighten($color, 30%), 60%); text-align:center; .caption, .badge { display:block; } .slide { // Gap between slides $gap:50px; position:relative; top:$height/2 - $gap; display:inline-block; margin:($gap - $height/2) ($gap - $width/2) 0 0; text-align:left; transform-origin:0 0; transform:scale(0.5); @media (max-width:$break) { top:$height/2 + $height/4 - $gap; margin:($gap - ($height/2 + $height/4)) ($gap - ($width/2 + $width/4)) 0 0; transform:scale(0.25); } &:before { position:absolute; top:0; left:0; z-index:-1; width:$width/2; height:$height/2; box-shadow:0 0 0 1px #DDD; content:''; transform-origin:0 0; transform:scale(2); @media (max-width:$break) { width:$width/4; height:$height/4; transform:scale(4); } } &:after { top:100%; bottom:auto; padding-top:50px; @media (max-width:$break) { width:$width/2; transform-origin:0 0; transform:scale(2); } } &:hover:before { box-shadow: 0 0 0 1px #EEE, 0 0 0 12px rgba(#FFF, 0.5); } &:target { &:before { box-shadow: 0 0 10px 0 darken($color, 5%), 0 0 0 12px $color; } &:after { color:$color; } } > div { &:before { position:absolute; top:0; right:0; bottom:0; left:0; z-index:2; content:''; } } &.cover, &.shout { &:after { content:counter(slide); } } // Notes footer { display:block; } } } .shower.full { position:absolute; top:50%; left:50%; overflow:hidden; margin:(-$height/2) 0 0 (-$width/2); width:$width; height:$height; background:#000; &.debug:after { position:absolute; top:0; right:0; bottom:0; left:0; z-index:2; background:url(../images/grid-#{$ratio}.svg) no-repeat; content:''; } .region { @include offscreen; display:block; } .slide { position:absolute; top:0; left:0; margin-left:150%; .next { visibility:hidden; &.active { visibility:visible; } } &:target { margin:0; } &.shout { &.right, &.up { h2 { opacity:0; transition:all 0.4s ease-out; } &:target h2 { opacity:1; transform:translateX(0) translateY(-50%); } } &.right h2 { transform:translateX(-100%) translateY(-50%); } &.up h2 { transform:translateX(0) translateY(100%); } } } .progress { position:absolute; bottom:0; left:0; z-index:1; width:0; height:8px; background:$color; transition:width 0.2s linear; } } }
@page {
margin:0; size:$width $height;
}