408 lines
7.1 KiB
SCSS
408 lines
7.1 KiB
SCSS
|
// Ribbon theme for Shower HTML presentation template: github.com/pepelsbey/shower
|
|||
|
|
// Copyright © 2010–2012 Vadim Makeev, pepelsbey.net
|
|||
|
|
// Licensed under MIT license: github.com/pepelsbey/shower/wiki/License-En
|
|||
|
|
|
|||
|
|
@import 'defaults';
|
|||
|
|
@import 'fonts';
|
|||
|
|
@import 'reset';
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
counter-reset:slide;
|
|||
|
|
font:25px/2 'PT Sans', sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Slide
|
|||
|
|
// -------------------------------
|
|||
|
|
.slide {
|
|||
|
|
width:$width;
|
|||
|
|
height:$height;
|
|||
|
|
background:#FFF url(../images/ribbon.svg) 865px 0 no-repeat;
|
|||
|
|
color:#000;
|
|||
|
|
&:after {
|
|||
|
|
position:absolute;
|
|||
|
|
counter-increment:slide;
|
|||
|
|
content:counter(slide, decimal-leading-zero);
|
|||
|
|
line-height:1;
|
|||
|
|
}
|
|||
|
|
.debug & {
|
|||
|
|
@if $width == 1024px {
|
|||
|
|
@if $height == 640px {
|
|||
|
|
$grid:'url(../images/grid-16x10.png) no-repeat,'
|
|||
|
|
}
|
|||
|
|
@if $height == 768px {
|
|||
|
|
$grid:'url(../images/grid-4x3.png) no-repeat,'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
background:url(../images/ribbon.svg) 865px 0 no-repeat, #{$grid} #FFF;
|
|||
|
|
}
|
|||
|
|
> div {
|
|||
|
|
position:absolute;
|
|||
|
|
top:0;
|
|||
|
|
left:0;
|
|||
|
|
overflow:hidden;
|
|||
|
|
padding:$top $sides 0;
|
|||
|
|
width:$width - $sides * 2;
|
|||
|
|
height:$height - $top;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Header
|
|||
|
|
.slide {
|
|||
|
|
h2 {
|
|||
|
|
margin:0 0 37px;
|
|||
|
|
color:#666;
|
|||
|
|
font:bold 50px/1 'PT Sans Narrow', sans-serif;
|
|||
|
|
}
|
|||
|
|
// Text
|
|||
|
|
p {
|
|||
|
|
margin:0 0 50px;
|
|||
|
|
}
|
|||
|
|
p.note {
|
|||
|
|
color:#999;
|
|||
|
|
}
|
|||
|
|
a {
|
|||
|
|
border-bottom:0.1em solid;
|
|||
|
|
color:#0174A7;
|
|||
|
|
text-decoration:none;
|
|||
|
|
}
|
|||
|
|
b, strong {
|
|||
|
|
font-weight:bold;
|
|||
|
|
}
|
|||
|
|
i, em {
|
|||
|
|
font-style:italic;
|
|||
|
|
}
|
|||
|
|
kbd, code, samp {
|
|||
|
|
padding:3px 8px;
|
|||
|
|
border-radius:8px;
|
|||
|
|
background:#FAFAA2;
|
|||
|
|
color:#000;
|
|||
|
|
@include tab-size(4);
|
|||
|
|
line-height:1;
|
|||
|
|
font-family:'PT Mono', monospace;
|
|||
|
|
}
|
|||
|
|
// Quote
|
|||
|
|
blockquote {
|
|||
|
|
font-style:italic;
|
|||
|
|
&:before {
|
|||
|
|
position:absolute;
|
|||
|
|
margin:-16px 0 0 -80px;
|
|||
|
|
color:#CCC;
|
|||
|
|
font:200px/1 'PT Sans', sans-serif;
|
|||
|
|
content:'\201C';
|
|||
|
|
}
|
|||
|
|
& + figcaption {
|
|||
|
|
margin:-50px 0 40px;
|
|||
|
|
font-style:italic;
|
|||
|
|
font-weight:bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Lists
|
|||
|
|
ol, ul {
|
|||
|
|
margin:0 0 50px;
|
|||
|
|
counter-reset:list;
|
|||
|
|
li {
|
|||
|
|
text-indent:-2em;
|
|||
|
|
&:before {
|
|||
|
|
display:inline-block;
|
|||
|
|
width:2em;
|
|||
|
|
color:#BBB;
|
|||
|
|
text-align:right;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
ol,
|
|||
|
|
ul {
|
|||
|
|
margin:0 0 0 39px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
ul > li:before {
|
|||
|
|
content:'\2022\00A0\00A0';
|
|||
|
|
}
|
|||
|
|
ul > li:lang(ru):before {
|
|||
|
|
content:'\2014\00A0\00A0';
|
|||
|
|
}
|
|||
|
|
ol > li:before {
|
|||
|
|
counter-increment:list;
|
|||
|
|
content:counter(list)'.\00A0';
|
|||
|
|
}
|
|||
|
|
// Code
|
|||
|
|
pre {
|
|||
|
|
margin:0 0 50px;
|
|||
|
|
counter-reset:code;
|
|||
|
|
white-space:normal;
|
|||
|
|
code {
|
|||
|
|
display:block;
|
|||
|
|
padding:0;
|
|||
|
|
background:none;
|
|||
|
|
white-space:pre;
|
|||
|
|
line-height:50px;
|
|||
|
|
&:before {
|
|||
|
|
position:absolute;
|
|||
|
|
margin:0 0 0 -110px;
|
|||
|
|
width:100px;
|
|||
|
|
color:#BBB;
|
|||
|
|
text-align:right;
|
|||
|
|
counter-increment:code;
|
|||
|
|
content:counter(code, decimal-leading-zero)'.';
|
|||
|
|
}
|
|||
|
|
&:only-child:before {
|
|||
|
|
content:'';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
mark {
|
|||
|
|
margin:0 -8px;
|
|||
|
|
padding:3px 8px;
|
|||
|
|
border-radius:8px;
|
|||
|
|
background:rgba(236,249,0,.37);
|
|||
|
|
color:#000;
|
|||
|
|
font-style:normal;
|
|||
|
|
&.important {
|
|||
|
|
margin:0;
|
|||
|
|
background:#C00;
|
|||
|
|
color:#FFF;
|
|||
|
|
font-weight:normal;
|
|||
|
|
}
|
|||
|
|
&.comment {
|
|||
|
|
margin:0;
|
|||
|
|
padding:0;
|
|||
|
|
background:none;
|
|||
|
|
color:#999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Cover
|
|||
|
|
&.cover {
|
|||
|
|
background:#000;
|
|||
|
|
img, svg, video,
|
|||
|
|
object, canvas {
|
|||
|
|
position:absolute;
|
|||
|
|
top:0;
|
|||
|
|
left:0;
|
|||
|
|
z-index:-1;
|
|||
|
|
}
|
|||
|
|
&.w {
|
|||
|
|
img, svg, video,
|
|||
|
|
object, canvas {
|
|||
|
|
top:50%;
|
|||
|
|
width:100%;
|
|||
|
|
@include transform(translateY(-50%));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
&.h {
|
|||
|
|
img, svg, video,
|
|||
|
|
object, canvas {
|
|||
|
|
left:50%;
|
|||
|
|
height:100%;
|
|||
|
|
@include transform(translateX(-50%));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
&.w.h {
|
|||
|
|
img, svg, video,
|
|||
|
|
object, canvas {
|
|||
|
|
top:0;
|
|||
|
|
left:0;
|
|||
|
|
@include transform(none);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Shout
|
|||
|
|
&.shout {
|
|||
|
|
background-image:none;
|
|||
|
|
h2 {
|
|||
|
|
position:absolute;
|
|||
|
|
top:50%;
|
|||
|
|
left:0;
|
|||
|
|
width:100%;
|
|||
|
|
text-align:center;
|
|||
|
|
line-height:1;
|
|||
|
|
font-size:150px;
|
|||
|
|
@include transform(translateY(-50%));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Place
|
|||
|
|
.place {
|
|||
|
|
position:absolute;
|
|||
|
|
&.t, &.m, &.b {
|
|||
|
|
left:50%;
|
|||
|
|
@include transform(translateX(-50%));
|
|||
|
|
}
|
|||
|
|
&.t { top:0; }
|
|||
|
|
&.b { bottom:0; }
|
|||
|
|
&.l, &.m, &.r {
|
|||
|
|
top:50%;
|
|||
|
|
@include transform(translateY(-50%));
|
|||
|
|
}
|
|||
|
|
&.l { left:0; }
|
|||
|
|
&.m { @include transform(translate(-50%, -50%)); }
|
|||
|
|
&.r {
|
|||
|
|
right:0;
|
|||
|
|
left:auto;
|
|||
|
|
}
|
|||
|
|
&.t.l, &.t.r, &.b.r, &.b.l {
|
|||
|
|
@include transform(none);
|
|||
|
|
}
|
|||
|
|
&.t.l, &.t.r { top:0; }
|
|||
|
|
&.b.r, &.b.l { top:auto; }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// List
|
|||
|
|
// -------------------------------
|
|||
|
|
.list {
|
|||
|
|
padding:80px 0 40px 100px;
|
|||
|
|
background:#585A5E url(../images/linen.png);
|
|||
|
|
&:after {
|
|||
|
|
clear:both;
|
|||
|
|
display:block;
|
|||
|
|
content:'';
|
|||
|
|
}
|
|||
|
|
// Caption
|
|||
|
|
.caption {
|
|||
|
|
margin:0 0 50px;
|
|||
|
|
color:#3C3D40;
|
|||
|
|
text-shadow:0 1px 1px #8D8E90;
|
|||
|
|
h1 {
|
|||
|
|
font:bold 50px/1 'PT Sans Narrow', sans-serif;
|
|||
|
|
}
|
|||
|
|
a {
|
|||
|
|
color:#4B86C2;
|
|||
|
|
text-shadow:0 -1px 1px #1F3F60;
|
|||
|
|
text-decoration:none;
|
|||
|
|
&:hover {
|
|||
|
|
color:#5ca4ed;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Slide
|
|||
|
|
.slide {
|
|||
|
|
position:relative;
|
|||
|
|
float:left;
|
|||
|
|
margin:0 (100-$width/2) (100-$height/2) 0;
|
|||
|
|
@include transform-origin(0 0);
|
|||
|
|
@include transform(scale(0.5));
|
|||
|
|
@media (max-width:$break) {
|
|||
|
|
margin:0 (80-($width/2+$width/4)) (80-($height/2+$height/4)) 0;
|
|||
|
|
@include transform(scale(0.25));
|
|||
|
|
}
|
|||
|
|
&:before {
|
|||
|
|
position:absolute;
|
|||
|
|
top:0;
|
|||
|
|
left:0;
|
|||
|
|
z-index:-1;
|
|||
|
|
width:$width/2;
|
|||
|
|
height:$height/2;
|
|||
|
|
box-shadow:
|
|||
|
|
0 0 30px rgba(0, 0, 0, 0.005),
|
|||
|
|
0 20px 50px rgba(42, 43, 45, 0.6);
|
|||
|
|
border-radius:2px;
|
|||
|
|
content:'';
|
|||
|
|
@include transform-origin(0 0);
|
|||
|
|
@include transform(scale(2));
|
|||
|
|
@media (max-width:$break) {
|
|||
|
|
width:$width/4;
|
|||
|
|
height:$height/4;
|
|||
|
|
@include transform(scale(4));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
&:after {
|
|||
|
|
bottom:-100px;
|
|||
|
|
left:120px;
|
|||
|
|
color:#3C3D40;
|
|||
|
|
text-shadow:0 2px 1px #8D8E90;
|
|||
|
|
font-weight:bold;
|
|||
|
|
font-size:50px;
|
|||
|
|
@media (max-width:$break) {
|
|||
|
|
bottom:-180px;
|
|||
|
|
text-shadow:0 4px 2px #8D8E90;
|
|||
|
|
font-size:100px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
&:hover:before {
|
|||
|
|
box-shadow:
|
|||
|
|
0 0 0 10px rgba(42, 43, 45, 0.3),
|
|||
|
|
0 20px 50px rgba(42, 43, 45, 0.6);
|
|||
|
|
}
|
|||
|
|
&:target {
|
|||
|
|
&:before {
|
|||
|
|
box-shadow:
|
|||
|
|
0 0 0 1px #305F8D,
|
|||
|
|
0 0 0 10px #3C7CBD,
|
|||
|
|
0 20px 50px rgba(42, 43, 45, 0.6);
|
|||
|
|
@media (max-width:$break) {
|
|||
|
|
box-shadow:
|
|||
|
|
0 0 0 1px #305F8D,
|
|||
|
|
0 0 0 10px #3C7CBD,
|
|||
|
|
0 20px 50px rgba(42, 43, 45, 0.6);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
&:after {
|
|||
|
|
text-shadow:0 2px 1px rgba(42, 43, 45, 0.6);
|
|||
|
|
color:#4B86C2;
|
|||
|
|
@media (max-width:$break) {
|
|||
|
|
text-shadow:0 4px 2px rgba(42, 43, 45, 0.6);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Full
|
|||
|
|
// -------------------------------
|
|||
|
|
.full {
|
|||
|
|
position:absolute;
|
|||
|
|
top:50%;
|
|||
|
|
left:50%;
|
|||
|
|
overflow:hidden;
|
|||
|
|
margin:(-$height/2) 0 0 (-$width/2);
|
|||
|
|
width:$width;
|
|||
|
|
height:$height;
|
|||
|
|
background:#000;
|
|||
|
|
.caption {
|
|||
|
|
display:none;
|
|||
|
|
}
|
|||
|
|
.slide {
|
|||
|
|
position:absolute;
|
|||
|
|
top:0;
|
|||
|
|
left:0;
|
|||
|
|
clip:rect(0, 0, 0, 0);
|
|||
|
|
&:after {
|
|||
|
|
left:120px;
|
|||
|
|
bottom:80px;
|
|||
|
|
color:#CCC;
|
|||
|
|
line-height:18px;
|
|||
|
|
font-size:25px;
|
|||
|
|
}
|
|||
|
|
&:target {
|
|||
|
|
clip:rect(0, auto, auto, 0);
|
|||
|
|
}
|
|||
|
|
// Cover Shout
|
|||
|
|
&.cover,
|
|||
|
|
&.shout {
|
|||
|
|
z-index:1;
|
|||
|
|
&:after {
|
|||
|
|
content:'';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Next Lists
|
|||
|
|
li.next {
|
|||
|
|
display:none;
|
|||
|
|
&.active {
|
|||
|
|
display:block;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Progress
|
|||
|
|
.progress {
|
|||
|
|
position:absolute;
|
|||
|
|
right:118px;
|
|||
|
|
bottom:40px;
|
|||
|
|
left:118px;
|
|||
|
|
div {
|
|||
|
|
width:0;
|
|||
|
|
height:10px;
|
|||
|
|
box-shadow:0 0 0 1px rgba(255, 255, 255, 0.4);
|
|||
|
|
border-radius:5px;
|
|||
|
|
background:rgba(177, 177, 177, 0.4);
|
|||
|
|
@include transition(width 0.2s linear);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|