Created
August 10, 2016 18:20
-
-
Save RubenVerborgh/557a6c223d05ab2add1170ead79eba04 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| diff --git 1/v1.0.6.css 2/v2.0.6.css | |
| index a813751..bd0c9ab 100644 | |
| --- 1/v1.0.6.css | |
| +++ 2/v2.0.6.css | |
| @@ -1,27 +1,42 @@ | |
| +/** | |
| + * Ribbon theme for Shower HTML presentation engine | |
| + * shower-ribbon v2.0.6, https://github.com/shower/ribbon | |
| + * @copyright 2010–2016 Vadim Makeev, http://pepelsbey.net/ | |
| + * @license MIT | |
| + */ | |
| @charset "UTF-8"; | |
| @font-face { | |
| - font-family: 'PT Sans'; | |
| - src: url(../fonts/PTSans.woff) format("woff"); } | |
| + font-family: PT Sans; | |
| + src: url(../fonts/pt-sans-regular.woff) format("woff"); } | |
| + | |
| @font-face { | |
| font-weight: bold; | |
| - font-family: 'PT Sans'; | |
| - src: url(../fonts/PTSans.Bold.woff) format("woff"); } | |
| + font-family: PT Sans; | |
| + src: url(../fonts/pt-sans-bold.woff) format("woff"); } | |
| + | |
| @font-face { | |
| font-style: italic; | |
| - font-family: 'PT Sans'; | |
| - src: url(../fonts/PTSans.Italic.woff) format("woff"); } | |
| + font-family: PT Sans; | |
| + src: url(../fonts/pt-sans-italic.woff) format("woff"); } | |
| + | |
| @font-face { | |
| font-style: italic; | |
| font-weight: bold; | |
| - font-family: 'PT Sans'; | |
| - src: url(../fonts/PTSans.Bold.Italic.woff) format("woff"); } | |
| + font-family: PT Sans; | |
| + src: url(../fonts/pt-sans-bold-italic.woff) format("woff"); } | |
| + | |
| @font-face { | |
| - font-family: 'PT Sans Narrow'; | |
| + font-family: PT Sans Narrow; | |
| font-weight: bold; | |
| - src: url(../fonts/PTSans.Narrow.Bold.woff) format("woff"); } | |
| + src: url(../fonts/pt-sans-narrow-bold.woff) format("woff"); } | |
| + | |
| @font-face { | |
| - font-family: 'PT Mono'; | |
| - src: url(../fonts/PTMono.woff) format("woff"); } | |
| + font-family: PT Mono; | |
| + src: url(../fonts/pt-mono-regular.woff) format("woff"); } | |
| + | |
| +*, *::before, *::after { | |
| + box-sizing: border-box; } | |
| + | |
| html, body, div, span, applet, object, iframe, | |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| a, abbr, acronym, address, big, cite, code, | |
| @@ -43,7 +58,7 @@ time, mark, audio, video { | |
| vertical-align: baseline; } | |
| article, aside, details, figcaption, figure, | |
| -footer, header, hgroup, menu, nav, section { | |
| +footer, header, hgroup, main, menu, nav, section { | |
| display: block; } | |
| body { | |
| @@ -55,8 +70,8 @@ ol, ul { | |
| blockquote, q { | |
| quotes: none; } | |
| -blockquote:before, blockquote:after, | |
| -q:before, q:after { | |
| +blockquote::before, blockquote::after, | |
| +q::before, q::after { | |
| content: ''; | |
| content: none; } | |
| @@ -64,438 +79,469 @@ table { | |
| border-collapse: collapse; | |
| border-spacing: 0; } | |
| -body { | |
| - counter-reset: slide; | |
| - font: 25px/2 'PT Sans', sans-serif; } | |
| - | |
| a { | |
| - color: #4B86C2; | |
| - background: linear-gradient(to top, #4B86C2, #4B86C2 0.09em, transparent 0.09em, transparent) repeat-x; | |
| text-decoration: none; } | |
| +@page { | |
| + margin: 0; | |
| + size: 1024px 768px; } | |
| + | |
| +.shower { | |
| + color: black; | |
| + counter-reset: slide; | |
| + font: 25px/2 PT Sans, sans-serif; | |
| + -webkit-print-color-adjust: exact; | |
| + -webkit-text-size-adjust: none; | |
| + -moz-text-size-adjust: none; | |
| + -ms-text-size-adjust: none; } | |
| + @media print { | |
| + .shower { | |
| + text-rendering: geometricPrecision; } } | |
| + | |
| .caption { | |
| + font-size: 25px; | |
| display: none; | |
| - margin: 0 0 50px; | |
| + margin-top: -0.2em; | |
| + padding: 0 1em 0.93em; | |
| + width: 100%; | |
| color: #3C3D40; | |
| - text-shadow: 0 1px 1px #8D8E90; } | |
| + text-shadow: 0 1px 0 #8D8E90; } | |
| + @media (min-width: 1174px) { | |
| + .caption { | |
| + font-size: 50px; } } | |
| + @media (min-width: 2348px) { | |
| + .caption { | |
| + font-size: 100px; } } | |
| .caption h1 { | |
| - font: bold 50px/1 'PT Sans Narrow', sans-serif; } | |
| + padding-bottom: 0.15em; | |
| + font: bold 1em/1 PT Sans Narrow, sans-serif; } | |
| + .caption p { | |
| + line-height: 1; | |
| + font-size: 0.6em; } | |
| .caption a { | |
| - text-shadow: 0 -1px 1px #1F3F60; | |
| - background: none; } | |
| - .caption a:hover { | |
| - color: #5e93c8; } | |
| - | |
| -.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: #4B86C2; | |
| - box-shadow: 0 0 1em rgba(0, 0, 0, 0.3); | |
| - color: #FFF; | |
| - text-decoration: none; | |
| - text-align: center; | |
| - -webkit-transform-origin: 50% 100%; | |
| - transform-origin: 50% 100%; | |
| - -webkit-transform: rotate(45deg) translateY(-1em); | |
| - transform: rotate(45deg) translateY(-1em); } | |
| - .badge a:hover { | |
| - background: #568ec6; } | |
| + color: #4B86C2; | |
| + text-shadow: 0 -1px 0 #1F3F60; } | |
| .slide { | |
| position: relative; | |
| + z-index: 1; | |
| + overflow: hidden; | |
| + padding: 106px 100px 0; | |
| width: 1024px; | |
| - height: 640px; | |
| + height: 768px; | |
| background: #FFF; | |
| - color: #000; | |
| - -webkit-print-color-adjust: exact; | |
| - -webkit-text-size-adjust: none; | |
| - -moz-text-size-adjust: none; | |
| - -ms-text-size-adjust: none; } | |
| - .slide:after { | |
| + font-size: 25px; } | |
| + .slide::after { | |
| position: absolute; | |
| top: 0; | |
| - right: 119px; | |
| - padding: 20px 0 0; | |
| + right: 100px; | |
| + padding-top: 15px; | |
| width: 50px; | |
| - height: 80px; | |
| + height: 100px; | |
| background: url(../images/ribbon.svg) no-repeat; | |
| color: #FFF; | |
| counter-increment: slide; | |
| content: counter(slide); | |
| - text-align: center; | |
| - font-size: 20px; } | |
| - .slide > div { | |
| - position: absolute; | |
| - top: 0; | |
| - left: 0; | |
| - overflow: hidden; | |
| - padding: 105px 120px 0; | |
| - width: 784px; | |
| - height: 535px; } | |
| - | |
| -.slide h2 { | |
| - margin: 0 0 37px; | |
| - color: #666; | |
| - font: bold 50px/1 'PT Sans Narrow', sans-serif; } | |
| -.slide p { | |
| - margin: 0 0 50px; } | |
| -.slide p.note { | |
| - color: #999; } | |
| -.slide b, .slide strong { | |
| - font-weight: bold; } | |
| -.slide i, .slide em { | |
| - font-style: italic; } | |
| -.slide kbd, .slide code, .slide samp { | |
| - padding: 3px 8px; | |
| - border-radius: 8px; | |
| - background: #FAFAA2; | |
| - color: #000; | |
| - -moz-tab-size: 4; | |
| - -o-tab-size: 4; | |
| - tab-size: 4; | |
| - line-height: 1; | |
| - font-family: 'PT Mono', monospace; } | |
| -.slide sub, .slide sup { | |
| - position: relative; | |
| - line-height: 0; | |
| - font-size: 75%; } | |
| -.slide sub { | |
| - bottom: -0.25em; } | |
| -.slide sup { | |
| - top: -0.5em; } | |
| -.slide blockquote { | |
| - font-style: italic; } | |
| - .slide blockquote:before { | |
| - position: absolute; | |
| - margin: -16px 0 0 -80px; | |
| - color: #CCC; | |
| - font: 200px/1 'PT Sans', sans-serif; | |
| - content: '\201C'; } | |
| - .slide blockquote + figcaption { | |
| - margin: -50px 0 50px; | |
| - font-style: italic; | |
| + text-align: center; } | |
| + .slide h2 { | |
| + margin-bottom: 34px; | |
| + color: #585A5E; | |
| + font: bold 50px/1 PT Sans Narrow, sans-serif; } | |
| + .slide p { | |
| + margin-bottom: 1em; } | |
| + .slide p.note { | |
| + color: #979a9e; } | |
| + .slide a { | |
| + background: -webkit-linear-gradient(bottom, currentColor 0.09em, transparent 0.09em) repeat-x; | |
| + background: linear-gradient(to top, currentColor 0.09em, transparent 0.09em) repeat-x; | |
| + color: #4B86C2; } | |
| + .slide b, .slide strong { | |
| font-weight: bold; } | |
| -.slide ol, .slide ul { | |
| - margin: 0 0 50px; | |
| - counter-reset: list; } | |
| - .slide ol li, .slide ul li { | |
| - text-indent: -2em; } | |
| - .slide ol li:before, .slide ul li:before { | |
| - display: inline-block; | |
| - width: 2em; | |
| - color: #BBB; | |
| - text-align: right; } | |
| - .slide ol ol, | |
| - .slide ol ul, .slide ul ol, | |
| - .slide ul ul { | |
| - margin: 0 0 0 2em; } | |
| -.slide ul > li:before { | |
| - content: '\2022\00A0\00A0'; } | |
| -.slide ul > li:lang(ru):before { | |
| - content: '\2014\00A0\00A0'; } | |
| -.slide ol > li:before { | |
| - counter-increment: list; | |
| - content: counter(list) ". "; } | |
| -.slide pre { | |
| - margin: 0 0 49px; | |
| - padding: 1px 0 0; | |
| - counter-reset: code; | |
| - white-space: normal; } | |
| - .slide pre code { | |
| - display: block; | |
| - padding: 0; | |
| - background: none; | |
| - white-space: pre; | |
| - line-height: 50px; } | |
| - .slide pre code:before { | |
| + .slide i, .slide em, .slide dfn { | |
| + font-style: italic; } | |
| + .slide code, .slide kbd, .slide mark, .slide samp { | |
| + padding: 0.1em 0.3em; | |
| + border-radius: 0.2em; } | |
| + .slide code, .slide kbd, .slide samp { | |
| + background: rgba(88, 90, 94, 0.1); | |
| + line-height: 1; | |
| + font-family: PT Mono, monospace, monospace; } | |
| + .slide mark { | |
| + background: #FAFAA2; } | |
| + .slide sub, .slide sup { | |
| + position: relative; | |
| + line-height: 0; | |
| + font-size: 75%; } | |
| + .slide sub { | |
| + bottom: -0.25em; } | |
| + .slide sup { | |
| + top: -0.5em; } | |
| + .slide blockquote { | |
| + font-style: italic; } | |
| + .slide blockquote::before { | |
| position: absolute; | |
| - margin: 0 0 0 -110px; | |
| - width: 100px; | |
| - color: #BBB; | |
| - text-align: right; | |
| - counter-increment: code; | |
| - content: counter(code,decimal-leading-zero) "."; } | |
| - .slide pre code:only-child:before { | |
| - content: ''; } | |
| - .slide pre mark { | |
| - padding: 3px 8px; | |
| - border-radius: 8px; | |
| - background: #F7FCA0; | |
| - color: #000; | |
| - font-style: normal; } | |
| - .slide pre mark.important { | |
| - background: #C00; | |
| - color: #FFF; | |
| - font-weight: normal; } | |
| - .slide pre mark.comment { | |
| - padding: 0; | |
| + margin: -0.15em 0 0 -0.43em; | |
| + color: #CCC; | |
| + line-height: 1; | |
| + font-size: 8em; | |
| + content: '\201C'; } | |
| + .slide blockquote + figcaption { | |
| + margin: -1em 0 1em; | |
| + font-style: italic; | |
| + font-weight: bold; } | |
| + .slide ol, .slide ul { | |
| + margin-bottom: 1em; | |
| + counter-reset: list; } | |
| + .slide ol li, .slide ul li { | |
| + page-break-inside: avoid; | |
| + text-indent: -2em; } | |
| + .slide ol li::before, .slide ul li::before { | |
| + display: inline-block; | |
| + width: 2em; | |
| + color: #979a9e; | |
| + text-align: right; } | |
| + .slide ol ol, .slide ol ul, .slide ul ol, .slide ul ul { | |
| + margin-bottom: 0; | |
| + margin-left: 2em; } | |
| + .slide ul > li::before { | |
| + padding-right: 0.5em; | |
| + content: '•'; } | |
| + .slide ul > li:lang(ru)::before { | |
| + content: '—'; } | |
| + .slide ol > li::before { | |
| + padding-right: 0.4em; | |
| + counter-increment: list; | |
| + content: counter(list) "."; } | |
| + .slide table { | |
| + margin-left: -100px; | |
| + margin-bottom: 1em; | |
| + width: calc(100% + 100px + 100px); } | |
| + .slide table th:first-child, | |
| + .slide table td:first-child { | |
| + padding-left: 96px; } | |
| + .slide table th:last-child, | |
| + .slide table td:last-child { | |
| + padding-right: 96px; } | |
| + .slide table th { | |
| + text-align: left; | |
| + font-weight: bold; } | |
| + .slide table tr:not(:last-of-type) > * { | |
| + background: -webkit-linear-gradient(bottom, rgba(88, 90, 94, 0.5) 0.055em, transparent 0.055em) repeat-x; | |
| + background: linear-gradient(to top, rgba(88, 90, 94, 0.5) 0.055em, transparent 0.055em) repeat-x; } | |
| + .slide table.striped tr:nth-child(even) { | |
| + background: rgba(88, 90, 94, 0.1); } | |
| + .slide table.striped tr > * { | |
| + background-image: none; } | |
| + .slide pre { | |
| + margin-bottom: 1em; | |
| + counter-reset: code; | |
| + white-space: normal; } | |
| + .slide pre code { | |
| + display: block; | |
| + margin-left: -100px; | |
| + padding: 0 0 0 100px; | |
| + width: calc(100% + 100px + 100px); | |
| + border-radius: 0; | |
| background: none; | |
| + line-height: 2; | |
| + white-space: pre; | |
| + -moz-tab-size: 4; | |
| + -o-tab-size: 4; | |
| + tab-size: 4; } | |
| + .slide pre code:not(:only-child).mark { | |
| + background: rgba(88, 90, 94, 0.1); } | |
| + .slide pre code:not(:only-child)::before { | |
| + position: absolute; | |
| + margin-left: -2em; | |
| + color: #979a9e; | |
| + counter-increment: code; | |
| + content: counter(code, decimal-leading-zero) "."; } | |
| + .slide pre mark { | |
| + position: relative; | |
| + z-index: -1; | |
| + margin: 0 -0.3em; } | |
| + .slide pre mark.important { | |
| + background: #C00; | |
| + color: #FFF; } | |
| + .slide pre .comment { | |
| color: #999; } | |
| -.slide table { | |
| - margin: 0 0 50px; | |
| - width: 100%; | |
| - border-collapse: collapse; | |
| - border-spacing: 0; } | |
| - .slide table th, .slide table td { | |
| - background: url("data:image/gif;base64,R0lGODdhAQABAPAAAJmZmQAAACH/C1hNUCBEYXRhWE1QAj94ACwAAAAAAQABAAACAkQBADs=") 0 100% repeat-x; } | |
| - .slide table th { | |
| - text-align: left; | |
| - font-weight: bold; } | |
| - .slide table.striped tr:nth-child(even) { | |
| - background: #EEE; } | |
| -.slide.cover, .slide.shout { | |
| - z-index: 1; } | |
| - .slide.cover:after, .slide.shout:after { | |
| - visibility: hidden; } | |
| -.slide.cover { | |
| - background: #000; } | |
| - .slide.cover img, .slide.cover svg, .slide.cover video, | |
| - .slide.cover object, .slide.cover canvas, .slide.cover iframe { | |
| + .slide footer { | |
| position: absolute; | |
| - top: 0; | |
| + right: 0; | |
| + bottom: -768px; | |
| left: 0; | |
| - z-index: -1; } | |
| - .slide.cover.w img, .slide.cover.w svg, .slide.cover.w video, | |
| - .slide.cover.w object, .slide.cover.w canvas, .slide.cover.w iframe { | |
| + display: none; | |
| + padding: 41px 100px 8px; | |
| + background: #fbfbba; | |
| + box-shadow: 0 1px 0 #FAFAA2 inset; | |
| + -webkit-transition: bottom 0.3s; | |
| + transition: bottom 0.3s; } | |
| + .slide footer mark { | |
| + background: rgba(255, 255, 255, 0.8); } | |
| + .slide:hover > footer { | |
| + bottom: 0; } | |
| + .slide.grid { | |
| + background-image: url(../images/grid.png); | |
| + -ms-interpolation-mode: nearest-neighbor; | |
| + image-rendering: -webkit-optimize-contrast; | |
| + image-rendering: -moz-crisp-edges; | |
| + image-rendering: pixelated; } | |
| + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { | |
| + .slide.grid { | |
| + background-image: url(../images/grid@2x.png); | |
| + background-size: 1024px auto; } } | |
| + .slide.black { | |
| + background-color: #000; } | |
| + .slide.black::after { | |
| + visibility: hidden; } | |
| + .slide.white { | |
| + background-color: #FFF; } | |
| + .slide.white::after { | |
| + visibility: hidden; } | |
| + .slide .double, | |
| + .slide .triple { | |
| + -webkit-column-gap: 75px; | |
| + -moz-column-gap: 75px; | |
| + column-gap: 75px; | |
| + -webkit-hyphens: auto; | |
| + -ms-hyphens: auto; | |
| + hyphens: auto; } | |
| + .slide .double { | |
| + -webkit-column-count: 2; | |
| + -moz-column-count: 2; | |
| + column-count: 2; } | |
| + .slide .triple { | |
| + -webkit-column-count: 3; | |
| + -moz-column-count: 3; | |
| + column-count: 3; } | |
| + .slide .shout { | |
| + position: absolute; | |
| top: 50%; | |
| + left: 0; | |
| width: 100%; | |
| + text-align: center; | |
| + line-height: 1; | |
| + font-size: 150px; | |
| -webkit-transform: translateY(-50%); | |
| - transform: translateY(-50%); } | |
| - .slide.cover.h img, .slide.cover.h svg, .slide.cover.h video, | |
| - .slide.cover.h object, .slide.cover.h canvas, .slide.cover.h iframe { | |
| + transform: translateY(-50%); } | |
| + .slide .shout a { | |
| + background: -webkit-linear-gradient(bottom, currentColor 0.11em, transparent 0.11em) repeat-x; | |
| + background: linear-gradient(to top, currentColor 0.11em, transparent 0.11em) repeat-x; } | |
| + .slide .cover { | |
| + position: absolute; | |
| + top: 50%; | |
| left: 50%; | |
| - height: 100%; | |
| - -webkit-transform: translateX(-50%); | |
| - transform: translateX(-50%); } | |
| - .slide.cover.w.h img, .slide.cover.w.h svg, .slide.cover.w.h video, | |
| - .slide.cover.w.h object, .slide.cover.w.h canvas, .slide.cover.w.h iframe { | |
| - top: 0; | |
| - left: 0; | |
| - -webkit-transform: none; | |
| - transform: none; } | |
| -.slide.shout h2 { | |
| - position: absolute; | |
| - top: 50%; | |
| - left: 0; | |
| - width: 100%; | |
| - text-align: center; | |
| - line-height: 1; | |
| - font-size: 150px; | |
| - -webkit-transform: translateY(-50%); | |
| - transform: translateY(-50%); } | |
| - .slide.shout h2 a { | |
| - background: linear-gradient(to top, #4B86C2, #4B86C2 0.11em, transparent 0.11em, transparent) repeat-x; } | |
| -.slide .place { | |
| + z-index: -1; | |
| + -webkit-transform: translate(-50%, -50%); | |
| + transform: translate(-50%, -50%); | |
| + max-width: 100%; | |
| + max-height: 100%; } | |
| + .slide .cover.width, .slide .cover.w { | |
| + width: 100%; | |
| + max-height: none; } | |
| + .slide .cover.height, .slide .cover.h { | |
| + height: 100%; | |
| + max-width: none; } | |
| + .slide .cover + figcaption { | |
| + position: absolute; | |
| + bottom: 20px; | |
| + right: 10px; | |
| + font-size: 12px; | |
| + opacity: 0.7; | |
| + -webkit-transform-origin: 0 100%; | |
| + transform-origin: 0 100%; | |
| + -webkit-transform: translateX(100%) rotate(-90deg); | |
| + transform: translateX(100%) rotate(-90deg); } | |
| + .slide .cover + figcaption.white { | |
| + color: #FFF; } | |
| + .slide .cover + figcaption a { | |
| + color: currentcolor; } | |
| + .slide .place { | |
| + position: absolute; | |
| + top: 50%; | |
| + left: 50%; | |
| + -webkit-transform: translate(-50%, -50%); | |
| + transform: translate(-50%, -50%); } | |
| + .slide .place.top.left, .slide .place.t.l, .slide .place.top.right, .slide .place.t.r, .slide .place.bottom.right, .slide .place.b.r, .slide .place.bottom.left, .slide .place.b.l { | |
| + -webkit-transform: none; | |
| + transform: none; } | |
| + .slide .place.top, .slide .place.t, .slide .place.bottom, .slide .place.b { | |
| + -webkit-transform: translate(-50%, 0); | |
| + transform: translate(-50%, 0); } | |
| + .slide .place.left, .slide .place.l, .slide .place.right, .slide .place.r { | |
| + -webkit-transform: translate(0, -50%); | |
| + transform: translate(0, -50%); } | |
| + .slide .place.top, .slide .place.t, .slide .place.top.left, .slide .place.top.right, .slide .place.t.r { | |
| + top: 0; } | |
| + .slide .place.right, .slide .place.r { | |
| + right: 0; | |
| + left: auto; } | |
| + .slide .place.bottom, .slide .place.b, .slide .place.bottom.right, .slide .place.b.r, .slide .place.bottom.left, .slide .place.b.l { | |
| + top: auto; | |
| + bottom: 0; } | |
| + .slide .place.left, .slide .place.l { | |
| + left: 0; } | |
| + | |
| +.progress { | |
| position: absolute; | |
| - top: 50%; | |
| - left: 50%; | |
| - -webkit-transform: translate(-50%, -50%); | |
| - transform: translate(-50%, -50%); } | |
| - .slide .place.t.l, .slide .place.t.r, .slide .place.b.r, .slide .place.b.l { | |
| - -webkit-transform: none; | |
| - transform: none; } | |
| - .slide .place.t, .slide .place.b { | |
| - -webkit-transform: translate(-50%, 0); | |
| - transform: translate(-50%, 0); } | |
| - .slide .place.l, .slide .place.r { | |
| - -webkit-transform: translate(0, -50%); | |
| - transform: translate(0, -50%); } | |
| - .slide .place.t, .slide .place.t.l, .slide .place.t.r { | |
| - top: 0; } | |
| - .slide .place.r { | |
| - right: 0; | |
| - left: auto; } | |
| - .slide .place.b, .slide .place.b.r, .slide .place.b.l { | |
| - top: auto; | |
| - bottom: 0; } | |
| - .slide .place.l { | |
| - left: 0; } | |
| -.slide footer { | |
| + left: -20px; | |
| + bottom: 0; | |
| + z-index: 1; | |
| + display: none; | |
| + width: 0; | |
| + height: 0; | |
| + box-sizing: content-box; | |
| + border: 10px solid #4B86C2; | |
| + border-right-color: transparent; | |
| + -webkit-transition: width 0.2s linear; | |
| + transition: width 0.2s linear; | |
| + clip: rect(10px, 1044px, 20px, 20px); } | |
| + .progress[style*='100%'] { | |
| + padding-left: 10px; } | |
| + | |
| +.badge { | |
| + font-size: 10px; | |
| position: absolute; | |
| - left: 0; | |
| + top: 0; | |
| right: 0; | |
| - bottom: -640px; | |
| z-index: 1; | |
| + overflow: hidden; | |
| + visibility: hidden; | |
| display: none; | |
| - padding: 20px 120px; | |
| - background: #FAFAA2; | |
| - box-shadow: 0 0 0 2px #f0f0ac inset; | |
| - transition: bottom 0.3s; } | |
| -.slide:hover footer { | |
| - bottom: 0; } | |
| + width: 9em; | |
| + height: 9em; } | |
| + @media (min-width: 1174px) { | |
| + .badge { | |
| + font-size: 20px; } } | |
| + @media (min-width: 2348px) { | |
| + .badge { | |
| + font-size: 40px; } } | |
| + .badge a { | |
| + position: absolute; | |
| + right: -50%; | |
| + bottom: 50%; | |
| + left: -50%; | |
| + visibility: visible; | |
| + background: #4B86C2; | |
| + color: #FFF; | |
| + text-align: center; | |
| + line-height: 2; | |
| + -webkit-transform-origin: 50% 100%; | |
| + transform-origin: 50% 100%; | |
| + -webkit-transform: rotate(45deg); | |
| + transform: rotate(45deg); } | |
| + | |
| +.region { | |
| + display: none; } | |
| @media screen { | |
| - .list { | |
| + .shower.list { | |
| + padding-top: 25px; | |
| + width: 100%; | |
| + display: -webkit-box; | |
| + display: -ms-flexbox; | |
| + display: flex; | |
| + -ms-flex-wrap: wrap; | |
| + flex-wrap: wrap; | |
| + background: #585A5E; | |
| position: absolute; | |
| - clip: rect(0, auto, auto, 0); | |
| - padding: 80px 0 40px 100px; | |
| - background: #585A5E url(../images/linen.png); } } | |
| - @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi) { | |
| - .list { | |
| - background-image: url(../images/linen@2x.png); | |
| - background-size: 256px; } } | |
| + clip: rect(0, auto, auto, 0); } } | |
| + @media screen and (min-width: 1174px) { | |
| + .shower.list { | |
| + padding-top: 50px; } } | |
| + @media screen and (min-width: 2348px) { | |
| + .shower.list { | |
| + padding-top: 100px; } } | |
| + | |
| @media screen { | |
| - .list .caption, | |
| - .list .badge { | |
| + .shower.list .caption { | |
| display: block; } | |
| - .list .slide { | |
| - float: left; | |
| - margin: 0 -412px -220px 0; | |
| + .shower.list .slide { | |
| -webkit-transform-origin: 0 0; | |
| - transform-origin: 0 0; | |
| - -webkit-transform: scale(0.5); | |
| - transform: scale(0.5); } } | |
| - @media screen and (max-width: 1324px) { | |
| - .list .slide { | |
| - margin: 0 -688px -400px 0; | |
| - -webkit-transform: scale(0.25); | |
| - transform: scale(0.25); } } | |
| -@media screen { | |
| - .list .slide:before { | |
| - position: absolute; | |
| - top: 0; | |
| - left: 0; | |
| - z-index: -1; | |
| - width: 512px; | |
| - height: 320px; | |
| - box-shadow: 0 0 30px rgba(0, 0, 0, 0.005), 0 20px 50px rgba(42, 43, 45, 0.6); | |
| - border-radius: 2px; | |
| - content: ''; | |
| - -webkit-transform-origin: 0 0; | |
| - transform-origin: 0 0; | |
| - -webkit-transform: scale(2); | |
| - transform: scale(2); } } | |
| - @media screen and (max-width: 1324px) { | |
| - .list .slide:before { | |
| - width: 256px; | |
| - height: 160px; | |
| - -webkit-transform: scale(4); | |
| - transform: scale(4); } } | |
| -@media screen { | |
| - .list .slide:after { | |
| - top: auto; | |
| - right: auto; | |
| - bottom: -80px; | |
| - left: 120px; | |
| - padding: 0; | |
| - width: auto; | |
| - height: auto; | |
| - background: none; | |
| - color: #3C3D40; | |
| - text-shadow: 0 1px 1px #8D8E90; | |
| - font-weight: bold; | |
| - -webkit-transform-origin: 0 0; | |
| - transform-origin: 0 0; | |
| - -webkit-transform: scale(2); | |
| - transform: scale(2); } } | |
| - @media screen and (max-width: 1324px) { | |
| - .list .slide:after { | |
| - bottom: -104px; | |
| - -webkit-transform: scale(4); | |
| - transform: scale(4); } } | |
| -@media screen { | |
| - .list .slide:hover:before { | |
| - box-shadow: 0 0 0 10px rgba(42, 43, 45, 0.3), 0 20px 50px rgba(42, 43, 45, 0.6); } | |
| - .list .slide:target:before { | |
| - box-shadow: 0 0 0 1px #376da3, 0 0 0 10px #4B86C2, 0 20px 50px rgba(42, 43, 45, 0.6); } } | |
| - @media screen and (max-width: 1324px) { | |
| - .list .slide:target:before { | |
| - box-shadow: 0 0 0 1px #376da3, 0 0 0 10px #4B86C2, 0 20px 50px rgba(42, 43, 45, 0.6); } } | |
| + transform-origin: 0 0; | |
| + margin: 0 -768px -551px 25px; | |
| + -webkit-transform: scale(0.25); | |
| + transform: scale(0.25); | |
| + border-radius: 2px; | |
| + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); } } | |
| + @media screen and (min-width: 1174px) { | |
| + .shower.list .slide { | |
| + margin: 0 -512px -334px 50px; | |
| + -webkit-transform: scale(0.5); | |
| + transform: scale(0.5); } } | |
| + @media screen and (min-width: 2348px) { | |
| + .shower.list .slide { | |
| + margin: 0 0px 100px 100px; | |
| + -webkit-transform: scale(1); | |
| + transform: scale(1); } } | |
| + | |
| @media screen { | |
| - .list .slide:target:after { | |
| - text-shadow: 0 1px 1px rgba(42, 43, 45, 0.6); | |
| - color: #4B86C2; } | |
| - .list .slide > div:before { | |
| - position: absolute; | |
| - top: 0; | |
| - right: 0; | |
| - bottom: 0; | |
| - left: 0; | |
| - z-index: 2; | |
| - content: ''; } | |
| - .list .slide.cover:after, .list .slide.shout:after { | |
| - visibility: visible; } | |
| - .list .slide footer { | |
| + .shower.list .slide:hover { | |
| + box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.1), 0 20px 50px rgba(0, 0, 0, 0.3); } | |
| + .shower.list .slide:target { | |
| + box-shadow: 0 0 0 1px #376da3, 0 0 0 20px #4B86C2, 0 20px 50px rgba(0, 0, 0, 0.3); } | |
| + .shower.list .slide * { | |
| + pointer-events: none; } | |
| + .shower.list .slide footer { | |
| display: block; } | |
| - | |
| - .full { | |
| + .shower.list .badge { | |
| + display: block; } | |
| + .shower.full { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| overflow: hidden; | |
| - margin: -320px 0 0 -512px; | |
| + margin: -384px 0 0 -512px; | |
| width: 1024px; | |
| - height: 640px; | |
| + height: 768px; | |
| background: #000; } | |
| - .full.debug:after { | |
| + .shower.full .slide { | |
| position: absolute; | |
| top: 0; | |
| - right: 0; | |
| - bottom: 0; | |
| left: 0; | |
| - z-index: 2; | |
| - background: url(../images/grid-16x10.svg) no-repeat; | |
| - content: ''; } | |
| - .full .slide { | |
| - position: absolute; | |
| - top: 0; | |
| - left: 0; | |
| - margin-left: 150%; } | |
| - .full .slide .next { | |
| + margin-left: -150%; | |
| + visibility: hidden; } | |
| + .shower.full .slide:target { | |
| + margin: 0; | |
| + visibility: visible; } | |
| + .shower.full .slide pre code:not(:only-child).mark.next { | |
| + visibility: visible; | |
| + background: none; } | |
| + .shower.full .slide pre code:not(:only-child).mark.next.active { | |
| + background: rgba(88, 90, 94, 0.1); } | |
| + .shower.full .slide .next { | |
| visibility: hidden; } | |
| - .full .slide .next.active { | |
| + .shower.full .slide .next.active { | |
| visibility: visible; } | |
| - .full .slide:target { | |
| - margin: 0; } | |
| - .full .slide.shout.grow h2, .full .slide.shout.shrink h2 { | |
| + .shower.full .slide .shout.grow, .shower.full .slide .shout.shrink { | |
| opacity: 0; | |
| - transition: all 0.4s ease-out; } | |
| - .full .slide.shout.grow:target h2, .full .slide.shout.shrink:target h2 { | |
| - opacity: 1; | |
| - -webkit-transform: scale(1) translateY(-50%); | |
| - transform: scale(1) translateY(-50%); } | |
| - .full .slide.shout.grow h2 { | |
| + -webkit-transition: 0.4s ease-out; | |
| + transition: 0.4s ease-out; | |
| + -webkit-transition-property: opacity, -webkit-transform; | |
| + transition-property: opacity, -webkit-transform; | |
| + transition-property: opacity, transform; | |
| + transition-property: opacity, transform, -webkit-transform; } | |
| + .shower.full .slide .shout.grow { | |
| -webkit-transform: scale(0.1) translateY(-50%); | |
| - transform: scale(0.1) translateY(-50%); } | |
| - .full .slide.shout.shrink h2 { | |
| + transform: scale(0.1) translateY(-50%); } | |
| + .shower.full .slide .shout.shrink { | |
| -webkit-transform: scale(10) translateY(-50%); | |
| - transform: scale(10) translateY(-50%); } | |
| - .full .progress { | |
| + transform: scale(10) translateY(-50%); } | |
| + .shower.full .slide:target .shout.grow, .shower.full .slide:target .shout.shrink { | |
| + opacity: 1; | |
| + -webkit-transform: scale(1) translateY(-50%); | |
| + transform: scale(1) translateY(-50%); } | |
| + .shower.full .progress { | |
| + display: block; | |
| + -webkit-transform: translateZ(0); | |
| + transform: translateZ(0); } | |
| + .shower.full .region { | |
| position: absolute; | |
| - right: 0; | |
| - bottom: 0; | |
| - left: 0; | |
| + clip: rect(0 0 0 0); | |
| overflow: hidden; | |
| - height: 10px; | |
| - z-index: 1; } | |
| - .full .progress div { | |
| - position: absolute; | |
| - left: -20px; | |
| - top: -10px; | |
| - width: 0; | |
| - height: 0; | |
| - border: 10px solid transparent; | |
| - border-bottom-color: #4B86C2; | |
| - transition: width 0.2s linear; } | |
| - .full .progress div[style$='100%;'] { | |
| - padding-left: 10px; } } | |
| -@page { | |
| - margin: 0; | |
| - size: 1024px 640px; } | |
| - | |
| -/*# sourceMappingURL=screen.css.map */ | |
| \ No newline at end of file | |
| + margin: -1px; | |
| + padding: 0; | |
| + width: 1px; | |
| + height: 1px; | |
| + border: none; | |
| + display: block; } } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset "UTF-8"; | |
| @font-face { | |
| font-family: 'PT Sans'; | |
| src: url(../fonts/PTSans.woff) format("woff"); } | |
| @font-face { | |
| font-weight: bold; | |
| font-family: 'PT Sans'; | |
| src: url(../fonts/PTSans.Bold.woff) format("woff"); } | |
| @font-face { | |
| font-style: italic; | |
| font-family: 'PT Sans'; | |
| src: url(../fonts/PTSans.Italic.woff) format("woff"); } | |
| @font-face { | |
| font-style: italic; | |
| font-weight: bold; | |
| font-family: 'PT Sans'; | |
| src: url(../fonts/PTSans.Bold.Italic.woff) format("woff"); } | |
| @font-face { | |
| font-family: 'PT Sans Narrow'; | |
| font-weight: bold; | |
| src: url(../fonts/PTSans.Narrow.Bold.woff) format("woff"); } | |
| @font-face { | |
| font-family: 'PT Mono'; | |
| src: url(../fonts/PTMono.woff) format("woff"); } | |
| html, body, div, span, applet, object, iframe, | |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| a, abbr, acronym, address, big, cite, code, | |
| del, dfn, em, img, ins, kbd, q, s, samp, | |
| small, strike, strong, sub, sup, tt, var, | |
| b, u, i, center, | |
| dl, dt, dd, ol, ul, li, | |
| fieldset, form, label, legend, | |
| table, caption, tbody, tfoot, thead, tr, th, td, | |
| article, aside, canvas, details, embed, | |
| figure, figcaption, footer, header, hgroup, | |
| menu, nav, output, ruby, section, summary, | |
| time, mark, audio, video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; } | |
| article, aside, details, figcaption, figure, | |
| footer, header, hgroup, menu, nav, section { | |
| display: block; } | |
| body { | |
| line-height: 1; } | |
| ol, ul { | |
| list-style: none; } | |
| blockquote, q { | |
| quotes: none; } | |
| blockquote:before, blockquote:after, | |
| q:before, q:after { | |
| content: ''; | |
| content: none; } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; } | |
| body { | |
| counter-reset: slide; | |
| font: 25px/2 'PT Sans', sans-serif; } | |
| a { | |
| color: #4B86C2; | |
| background: linear-gradient(to top, #4B86C2, #4B86C2 0.09em, transparent 0.09em, transparent) repeat-x; | |
| text-decoration: none; } | |
| .caption { | |
| display: none; | |
| margin: 0 0 50px; | |
| color: #3C3D40; | |
| text-shadow: 0 1px 1px #8D8E90; } | |
| .caption h1 { | |
| font: bold 50px/1 'PT Sans Narrow', sans-serif; } | |
| .caption a { | |
| text-shadow: 0 -1px 1px #1F3F60; | |
| background: none; } | |
| .caption a:hover { | |
| color: #5e93c8; } | |
| .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: #4B86C2; | |
| box-shadow: 0 0 1em rgba(0, 0, 0, 0.3); | |
| color: #FFF; | |
| text-decoration: none; | |
| text-align: center; | |
| -webkit-transform-origin: 50% 100%; | |
| transform-origin: 50% 100%; | |
| -webkit-transform: rotate(45deg) translateY(-1em); | |
| transform: rotate(45deg) translateY(-1em); } | |
| .badge a:hover { | |
| background: #568ec6; } | |
| .slide { | |
| position: relative; | |
| width: 1024px; | |
| height: 640px; | |
| background: #FFF; | |
| color: #000; | |
| -webkit-print-color-adjust: exact; | |
| -webkit-text-size-adjust: none; | |
| -moz-text-size-adjust: none; | |
| -ms-text-size-adjust: none; } | |
| .slide:after { | |
| position: absolute; | |
| top: 0; | |
| right: 119px; | |
| padding: 20px 0 0; | |
| width: 50px; | |
| height: 80px; | |
| background: url(../images/ribbon.svg) no-repeat; | |
| color: #FFF; | |
| counter-increment: slide; | |
| content: counter(slide); | |
| text-align: center; | |
| font-size: 20px; } | |
| .slide > div { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| overflow: hidden; | |
| padding: 105px 120px 0; | |
| width: 784px; | |
| height: 535px; } | |
| .slide h2 { | |
| margin: 0 0 37px; | |
| color: #666; | |
| font: bold 50px/1 'PT Sans Narrow', sans-serif; } | |
| .slide p { | |
| margin: 0 0 50px; } | |
| .slide p.note { | |
| color: #999; } | |
| .slide b, .slide strong { | |
| font-weight: bold; } | |
| .slide i, .slide em { | |
| font-style: italic; } | |
| .slide kbd, .slide code, .slide samp { | |
| padding: 3px 8px; | |
| border-radius: 8px; | |
| background: #FAFAA2; | |
| color: #000; | |
| -moz-tab-size: 4; | |
| -o-tab-size: 4; | |
| tab-size: 4; | |
| line-height: 1; | |
| font-family: 'PT Mono', monospace; } | |
| .slide sub, .slide sup { | |
| position: relative; | |
| line-height: 0; | |
| font-size: 75%; } | |
| .slide sub { | |
| bottom: -0.25em; } | |
| .slide sup { | |
| top: -0.5em; } | |
| .slide blockquote { | |
| font-style: italic; } | |
| .slide blockquote:before { | |
| position: absolute; | |
| margin: -16px 0 0 -80px; | |
| color: #CCC; | |
| font: 200px/1 'PT Sans', sans-serif; | |
| content: '\201C'; } | |
| .slide blockquote + figcaption { | |
| margin: -50px 0 50px; | |
| font-style: italic; | |
| font-weight: bold; } | |
| .slide ol, .slide ul { | |
| margin: 0 0 50px; | |
| counter-reset: list; } | |
| .slide ol li, .slide ul li { | |
| text-indent: -2em; } | |
| .slide ol li:before, .slide ul li:before { | |
| display: inline-block; | |
| width: 2em; | |
| color: #BBB; | |
| text-align: right; } | |
| .slide ol ol, | |
| .slide ol ul, .slide ul ol, | |
| .slide ul ul { | |
| margin: 0 0 0 2em; } | |
| .slide ul > li:before { | |
| content: '\2022\00A0\00A0'; } | |
| .slide ul > li:lang(ru):before { | |
| content: '\2014\00A0\00A0'; } | |
| .slide ol > li:before { | |
| counter-increment: list; | |
| content: counter(list) ". "; } | |
| .slide pre { | |
| margin: 0 0 49px; | |
| padding: 1px 0 0; | |
| counter-reset: code; | |
| white-space: normal; } | |
| .slide pre code { | |
| display: block; | |
| padding: 0; | |
| background: none; | |
| white-space: pre; | |
| line-height: 50px; } | |
| .slide pre code:before { | |
| position: absolute; | |
| margin: 0 0 0 -110px; | |
| width: 100px; | |
| color: #BBB; | |
| text-align: right; | |
| counter-increment: code; | |
| content: counter(code,decimal-leading-zero) "."; } | |
| .slide pre code:only-child:before { | |
| content: ''; } | |
| .slide pre mark { | |
| padding: 3px 8px; | |
| border-radius: 8px; | |
| background: #F7FCA0; | |
| color: #000; | |
| font-style: normal; } | |
| .slide pre mark.important { | |
| background: #C00; | |
| color: #FFF; | |
| font-weight: normal; } | |
| .slide pre mark.comment { | |
| padding: 0; | |
| background: none; | |
| color: #999; } | |
| .slide table { | |
| margin: 0 0 50px; | |
| width: 100%; | |
| border-collapse: collapse; | |
| border-spacing: 0; } | |
| .slide table th, .slide table td { | |
| background: url("data:image/gif;base64,R0lGODdhAQABAPAAAJmZmQAAACH/C1hNUCBEYXRhWE1QAj94ACwAAAAAAQABAAACAkQBADs=") 0 100% repeat-x; } | |
| .slide table th { | |
| text-align: left; | |
| font-weight: bold; } | |
| .slide table.striped tr:nth-child(even) { | |
| background: #EEE; } | |
| .slide.cover, .slide.shout { | |
| z-index: 1; } | |
| .slide.cover:after, .slide.shout:after { | |
| visibility: hidden; } | |
| .slide.cover { | |
| background: #000; } | |
| .slide.cover img, .slide.cover svg, .slide.cover video, | |
| .slide.cover object, .slide.cover canvas, .slide.cover iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: -1; } | |
| .slide.cover.w img, .slide.cover.w svg, .slide.cover.w video, | |
| .slide.cover.w object, .slide.cover.w canvas, .slide.cover.w iframe { | |
| top: 50%; | |
| width: 100%; | |
| -webkit-transform: translateY(-50%); | |
| transform: translateY(-50%); } | |
| .slide.cover.h img, .slide.cover.h svg, .slide.cover.h video, | |
| .slide.cover.h object, .slide.cover.h canvas, .slide.cover.h iframe { | |
| left: 50%; | |
| height: 100%; | |
| -webkit-transform: translateX(-50%); | |
| transform: translateX(-50%); } | |
| .slide.cover.w.h img, .slide.cover.w.h svg, .slide.cover.w.h video, | |
| .slide.cover.w.h object, .slide.cover.w.h canvas, .slide.cover.w.h iframe { | |
| top: 0; | |
| left: 0; | |
| -webkit-transform: none; | |
| transform: none; } | |
| .slide.shout h2 { | |
| position: absolute; | |
| top: 50%; | |
| left: 0; | |
| width: 100%; | |
| text-align: center; | |
| line-height: 1; | |
| font-size: 150px; | |
| -webkit-transform: translateY(-50%); | |
| transform: translateY(-50%); } | |
| .slide.shout h2 a { | |
| background: linear-gradient(to top, #4B86C2, #4B86C2 0.11em, transparent 0.11em, transparent) repeat-x; } | |
| .slide .place { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| -webkit-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%); } | |
| .slide .place.t.l, .slide .place.t.r, .slide .place.b.r, .slide .place.b.l { | |
| -webkit-transform: none; | |
| transform: none; } | |
| .slide .place.t, .slide .place.b { | |
| -webkit-transform: translate(-50%, 0); | |
| transform: translate(-50%, 0); } | |
| .slide .place.l, .slide .place.r { | |
| -webkit-transform: translate(0, -50%); | |
| transform: translate(0, -50%); } | |
| .slide .place.t, .slide .place.t.l, .slide .place.t.r { | |
| top: 0; } | |
| .slide .place.r { | |
| right: 0; | |
| left: auto; } | |
| .slide .place.b, .slide .place.b.r, .slide .place.b.l { | |
| top: auto; | |
| bottom: 0; } | |
| .slide .place.l { | |
| left: 0; } | |
| .slide footer { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| bottom: -640px; | |
| z-index: 1; | |
| display: none; | |
| padding: 20px 120px; | |
| background: #FAFAA2; | |
| box-shadow: 0 0 0 2px #f0f0ac inset; | |
| transition: bottom 0.3s; } | |
| .slide:hover footer { | |
| bottom: 0; } | |
| @media screen { | |
| .list { | |
| position: absolute; | |
| clip: rect(0, auto, auto, 0); | |
| padding: 80px 0 40px 100px; | |
| background: #585A5E url(../images/linen.png); } } | |
| @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi) { | |
| .list { | |
| background-image: url(../images/linen@2x.png); | |
| background-size: 256px; } } | |
| @media screen { | |
| .list .caption, | |
| .list .badge { | |
| display: block; } | |
| .list .slide { | |
| float: left; | |
| margin: 0 -412px -220px 0; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scale(0.5); | |
| transform: scale(0.5); } } | |
| @media screen and (max-width: 1324px) { | |
| .list .slide { | |
| margin: 0 -688px -400px 0; | |
| -webkit-transform: scale(0.25); | |
| transform: scale(0.25); } } | |
| @media screen { | |
| .list .slide:before { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: -1; | |
| width: 512px; | |
| height: 320px; | |
| box-shadow: 0 0 30px rgba(0, 0, 0, 0.005), 0 20px 50px rgba(42, 43, 45, 0.6); | |
| border-radius: 2px; | |
| content: ''; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scale(2); | |
| transform: scale(2); } } | |
| @media screen and (max-width: 1324px) { | |
| .list .slide:before { | |
| width: 256px; | |
| height: 160px; | |
| -webkit-transform: scale(4); | |
| transform: scale(4); } } | |
| @media screen { | |
| .list .slide:after { | |
| top: auto; | |
| right: auto; | |
| bottom: -80px; | |
| left: 120px; | |
| padding: 0; | |
| width: auto; | |
| height: auto; | |
| background: none; | |
| color: #3C3D40; | |
| text-shadow: 0 1px 1px #8D8E90; | |
| font-weight: bold; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scale(2); | |
| transform: scale(2); } } | |
| @media screen and (max-width: 1324px) { | |
| .list .slide:after { | |
| bottom: -104px; | |
| -webkit-transform: scale(4); | |
| transform: scale(4); } } | |
| @media screen { | |
| .list .slide:hover:before { | |
| box-shadow: 0 0 0 10px rgba(42, 43, 45, 0.3), 0 20px 50px rgba(42, 43, 45, 0.6); } | |
| .list .slide:target:before { | |
| box-shadow: 0 0 0 1px #376da3, 0 0 0 10px #4B86C2, 0 20px 50px rgba(42, 43, 45, 0.6); } } | |
| @media screen and (max-width: 1324px) { | |
| .list .slide:target:before { | |
| box-shadow: 0 0 0 1px #376da3, 0 0 0 10px #4B86C2, 0 20px 50px rgba(42, 43, 45, 0.6); } } | |
| @media screen { | |
| .list .slide:target:after { | |
| text-shadow: 0 1px 1px rgba(42, 43, 45, 0.6); | |
| color: #4B86C2; } | |
| .list .slide > div:before { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| z-index: 2; | |
| content: ''; } | |
| .list .slide.cover:after, .list .slide.shout:after { | |
| visibility: visible; } | |
| .list .slide footer { | |
| display: block; } | |
| .full { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| overflow: hidden; | |
| margin: -320px 0 0 -512px; | |
| width: 1024px; | |
| height: 640px; | |
| background: #000; } | |
| .full.debug:after { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| z-index: 2; | |
| background: url(../images/grid-16x10.svg) no-repeat; | |
| content: ''; } | |
| .full .slide { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| margin-left: 150%; } | |
| .full .slide .next { | |
| visibility: hidden; } | |
| .full .slide .next.active { | |
| visibility: visible; } | |
| .full .slide:target { | |
| margin: 0; } | |
| .full .slide.shout.grow h2, .full .slide.shout.shrink h2 { | |
| opacity: 0; | |
| transition: all 0.4s ease-out; } | |
| .full .slide.shout.grow:target h2, .full .slide.shout.shrink:target h2 { | |
| opacity: 1; | |
| -webkit-transform: scale(1) translateY(-50%); | |
| transform: scale(1) translateY(-50%); } | |
| .full .slide.shout.grow h2 { | |
| -webkit-transform: scale(0.1) translateY(-50%); | |
| transform: scale(0.1) translateY(-50%); } | |
| .full .slide.shout.shrink h2 { | |
| -webkit-transform: scale(10) translateY(-50%); | |
| transform: scale(10) translateY(-50%); } | |
| .full .progress { | |
| position: absolute; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| overflow: hidden; | |
| height: 10px; | |
| z-index: 1; } | |
| .full .progress div { | |
| position: absolute; | |
| left: -20px; | |
| top: -10px; | |
| width: 0; | |
| height: 0; | |
| border: 10px solid transparent; | |
| border-bottom-color: #4B86C2; | |
| transition: width 0.2s linear; } | |
| .full .progress div[style$='100%;'] { | |
| padding-left: 10px; } } | |
| @page { | |
| margin: 0; | |
| size: 1024px 640px; } | |
| /*# sourceMappingURL=screen.css.map */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Ribbon theme for Shower HTML presentation engine | |
| * shower-ribbon v2.0.6, https://github.com/shower/ribbon | |
| * @copyright 2010–2016 Vadim Makeev, http://pepelsbey.net/ | |
| * @license MIT | |
| */ | |
| @charset "UTF-8"; | |
| @font-face { | |
| font-family: PT Sans; | |
| src: url(../fonts/pt-sans-regular.woff) format("woff"); } | |
| @font-face { | |
| font-weight: bold; | |
| font-family: PT Sans; | |
| src: url(../fonts/pt-sans-bold.woff) format("woff"); } | |
| @font-face { | |
| font-style: italic; | |
| font-family: PT Sans; | |
| src: url(../fonts/pt-sans-italic.woff) format("woff"); } | |
| @font-face { | |
| font-style: italic; | |
| font-weight: bold; | |
| font-family: PT Sans; | |
| src: url(../fonts/pt-sans-bold-italic.woff) format("woff"); } | |
| @font-face { | |
| font-family: PT Sans Narrow; | |
| font-weight: bold; | |
| src: url(../fonts/pt-sans-narrow-bold.woff) format("woff"); } | |
| @font-face { | |
| font-family: PT Mono; | |
| src: url(../fonts/pt-mono-regular.woff) format("woff"); } | |
| *, *::before, *::after { | |
| box-sizing: border-box; } | |
| html, body, div, span, applet, object, iframe, | |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| a, abbr, acronym, address, big, cite, code, | |
| del, dfn, em, img, ins, kbd, q, s, samp, | |
| small, strike, strong, sub, sup, tt, var, | |
| b, u, i, center, | |
| dl, dt, dd, ol, ul, li, | |
| fieldset, form, label, legend, | |
| table, caption, tbody, tfoot, thead, tr, th, td, | |
| article, aside, canvas, details, embed, | |
| figure, figcaption, footer, header, hgroup, | |
| menu, nav, output, ruby, section, summary, | |
| time, mark, audio, video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; } | |
| article, aside, details, figcaption, figure, | |
| footer, header, hgroup, main, menu, nav, section { | |
| display: block; } | |
| body { | |
| line-height: 1; } | |
| ol, ul { | |
| list-style: none; } | |
| blockquote, q { | |
| quotes: none; } | |
| blockquote::before, blockquote::after, | |
| q::before, q::after { | |
| content: ''; | |
| content: none; } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; } | |
| a { | |
| text-decoration: none; } | |
| @page { | |
| margin: 0; | |
| size: 1024px 768px; } | |
| .shower { | |
| color: black; | |
| counter-reset: slide; | |
| font: 25px/2 PT Sans, sans-serif; | |
| -webkit-print-color-adjust: exact; | |
| -webkit-text-size-adjust: none; | |
| -moz-text-size-adjust: none; | |
| -ms-text-size-adjust: none; } | |
| @media print { | |
| .shower { | |
| text-rendering: geometricPrecision; } } | |
| .caption { | |
| font-size: 25px; | |
| display: none; | |
| margin-top: -0.2em; | |
| padding: 0 1em 0.93em; | |
| width: 100%; | |
| color: #3C3D40; | |
| text-shadow: 0 1px 0 #8D8E90; } | |
| @media (min-width: 1174px) { | |
| .caption { | |
| font-size: 50px; } } | |
| @media (min-width: 2348px) { | |
| .caption { | |
| font-size: 100px; } } | |
| .caption h1 { | |
| padding-bottom: 0.15em; | |
| font: bold 1em/1 PT Sans Narrow, sans-serif; } | |
| .caption p { | |
| line-height: 1; | |
| font-size: 0.6em; } | |
| .caption a { | |
| color: #4B86C2; | |
| text-shadow: 0 -1px 0 #1F3F60; } | |
| .slide { | |
| position: relative; | |
| z-index: 1; | |
| overflow: hidden; | |
| padding: 106px 100px 0; | |
| width: 1024px; | |
| height: 768px; | |
| background: #FFF; | |
| font-size: 25px; } | |
| .slide::after { | |
| position: absolute; | |
| top: 0; | |
| right: 100px; | |
| padding-top: 15px; | |
| width: 50px; | |
| height: 100px; | |
| background: url(../images/ribbon.svg) no-repeat; | |
| color: #FFF; | |
| counter-increment: slide; | |
| content: counter(slide); | |
| text-align: center; } | |
| .slide h2 { | |
| margin-bottom: 34px; | |
| color: #585A5E; | |
| font: bold 50px/1 PT Sans Narrow, sans-serif; } | |
| .slide p { | |
| margin-bottom: 1em; } | |
| .slide p.note { | |
| color: #979a9e; } | |
| .slide a { | |
| background: -webkit-linear-gradient(bottom, currentColor 0.09em, transparent 0.09em) repeat-x; | |
| background: linear-gradient(to top, currentColor 0.09em, transparent 0.09em) repeat-x; | |
| color: #4B86C2; } | |
| .slide b, .slide strong { | |
| font-weight: bold; } | |
| .slide i, .slide em, .slide dfn { | |
| font-style: italic; } | |
| .slide code, .slide kbd, .slide mark, .slide samp { | |
| padding: 0.1em 0.3em; | |
| border-radius: 0.2em; } | |
| .slide code, .slide kbd, .slide samp { | |
| background: rgba(88, 90, 94, 0.1); | |
| line-height: 1; | |
| font-family: PT Mono, monospace, monospace; } | |
| .slide mark { | |
| background: #FAFAA2; } | |
| .slide sub, .slide sup { | |
| position: relative; | |
| line-height: 0; | |
| font-size: 75%; } | |
| .slide sub { | |
| bottom: -0.25em; } | |
| .slide sup { | |
| top: -0.5em; } | |
| .slide blockquote { | |
| font-style: italic; } | |
| .slide blockquote::before { | |
| position: absolute; | |
| margin: -0.15em 0 0 -0.43em; | |
| color: #CCC; | |
| line-height: 1; | |
| font-size: 8em; | |
| content: '\201C'; } | |
| .slide blockquote + figcaption { | |
| margin: -1em 0 1em; | |
| font-style: italic; | |
| font-weight: bold; } | |
| .slide ol, .slide ul { | |
| margin-bottom: 1em; | |
| counter-reset: list; } | |
| .slide ol li, .slide ul li { | |
| page-break-inside: avoid; | |
| text-indent: -2em; } | |
| .slide ol li::before, .slide ul li::before { | |
| display: inline-block; | |
| width: 2em; | |
| color: #979a9e; | |
| text-align: right; } | |
| .slide ol ol, .slide ol ul, .slide ul ol, .slide ul ul { | |
| margin-bottom: 0; | |
| margin-left: 2em; } | |
| .slide ul > li::before { | |
| padding-right: 0.5em; | |
| content: '•'; } | |
| .slide ul > li:lang(ru)::before { | |
| content: '—'; } | |
| .slide ol > li::before { | |
| padding-right: 0.4em; | |
| counter-increment: list; | |
| content: counter(list) "."; } | |
| .slide table { | |
| margin-left: -100px; | |
| margin-bottom: 1em; | |
| width: calc(100% + 100px + 100px); } | |
| .slide table th:first-child, | |
| .slide table td:first-child { | |
| padding-left: 96px; } | |
| .slide table th:last-child, | |
| .slide table td:last-child { | |
| padding-right: 96px; } | |
| .slide table th { | |
| text-align: left; | |
| font-weight: bold; } | |
| .slide table tr:not(:last-of-type) > * { | |
| background: -webkit-linear-gradient(bottom, rgba(88, 90, 94, 0.5) 0.055em, transparent 0.055em) repeat-x; | |
| background: linear-gradient(to top, rgba(88, 90, 94, 0.5) 0.055em, transparent 0.055em) repeat-x; } | |
| .slide table.striped tr:nth-child(even) { | |
| background: rgba(88, 90, 94, 0.1); } | |
| .slide table.striped tr > * { | |
| background-image: none; } | |
| .slide pre { | |
| margin-bottom: 1em; | |
| counter-reset: code; | |
| white-space: normal; } | |
| .slide pre code { | |
| display: block; | |
| margin-left: -100px; | |
| padding: 0 0 0 100px; | |
| width: calc(100% + 100px + 100px); | |
| border-radius: 0; | |
| background: none; | |
| line-height: 2; | |
| white-space: pre; | |
| -moz-tab-size: 4; | |
| -o-tab-size: 4; | |
| tab-size: 4; } | |
| .slide pre code:not(:only-child).mark { | |
| background: rgba(88, 90, 94, 0.1); } | |
| .slide pre code:not(:only-child)::before { | |
| position: absolute; | |
| margin-left: -2em; | |
| color: #979a9e; | |
| counter-increment: code; | |
| content: counter(code, decimal-leading-zero) "."; } | |
| .slide pre mark { | |
| position: relative; | |
| z-index: -1; | |
| margin: 0 -0.3em; } | |
| .slide pre mark.important { | |
| background: #C00; | |
| color: #FFF; } | |
| .slide pre .comment { | |
| color: #999; } | |
| .slide footer { | |
| position: absolute; | |
| right: 0; | |
| bottom: -768px; | |
| left: 0; | |
| display: none; | |
| padding: 41px 100px 8px; | |
| background: #fbfbba; | |
| box-shadow: 0 1px 0 #FAFAA2 inset; | |
| -webkit-transition: bottom 0.3s; | |
| transition: bottom 0.3s; } | |
| .slide footer mark { | |
| background: rgba(255, 255, 255, 0.8); } | |
| .slide:hover > footer { | |
| bottom: 0; } | |
| .slide.grid { | |
| background-image: url(../images/grid.png); | |
| -ms-interpolation-mode: nearest-neighbor; | |
| image-rendering: -webkit-optimize-contrast; | |
| image-rendering: -moz-crisp-edges; | |
| image-rendering: pixelated; } | |
| @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { | |
| .slide.grid { | |
| background-image: url(../images/grid@2x.png); | |
| background-size: 1024px auto; } } | |
| .slide.black { | |
| background-color: #000; } | |
| .slide.black::after { | |
| visibility: hidden; } | |
| .slide.white { | |
| background-color: #FFF; } | |
| .slide.white::after { | |
| visibility: hidden; } | |
| .slide .double, | |
| .slide .triple { | |
| -webkit-column-gap: 75px; | |
| -moz-column-gap: 75px; | |
| column-gap: 75px; | |
| -webkit-hyphens: auto; | |
| -ms-hyphens: auto; | |
| hyphens: auto; } | |
| .slide .double { | |
| -webkit-column-count: 2; | |
| -moz-column-count: 2; | |
| column-count: 2; } | |
| .slide .triple { | |
| -webkit-column-count: 3; | |
| -moz-column-count: 3; | |
| column-count: 3; } | |
| .slide .shout { | |
| position: absolute; | |
| top: 50%; | |
| left: 0; | |
| width: 100%; | |
| text-align: center; | |
| line-height: 1; | |
| font-size: 150px; | |
| -webkit-transform: translateY(-50%); | |
| transform: translateY(-50%); } | |
| .slide .shout a { | |
| background: -webkit-linear-gradient(bottom, currentColor 0.11em, transparent 0.11em) repeat-x; | |
| background: linear-gradient(to top, currentColor 0.11em, transparent 0.11em) repeat-x; } | |
| .slide .cover { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| z-index: -1; | |
| -webkit-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%); | |
| max-width: 100%; | |
| max-height: 100%; } | |
| .slide .cover.width, .slide .cover.w { | |
| width: 100%; | |
| max-height: none; } | |
| .slide .cover.height, .slide .cover.h { | |
| height: 100%; | |
| max-width: none; } | |
| .slide .cover + figcaption { | |
| position: absolute; | |
| bottom: 20px; | |
| right: 10px; | |
| font-size: 12px; | |
| opacity: 0.7; | |
| -webkit-transform-origin: 0 100%; | |
| transform-origin: 0 100%; | |
| -webkit-transform: translateX(100%) rotate(-90deg); | |
| transform: translateX(100%) rotate(-90deg); } | |
| .slide .cover + figcaption.white { | |
| color: #FFF; } | |
| .slide .cover + figcaption a { | |
| color: currentcolor; } | |
| .slide .place { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| -webkit-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%); } | |
| .slide .place.top.left, .slide .place.t.l, .slide .place.top.right, .slide .place.t.r, .slide .place.bottom.right, .slide .place.b.r, .slide .place.bottom.left, .slide .place.b.l { | |
| -webkit-transform: none; | |
| transform: none; } | |
| .slide .place.top, .slide .place.t, .slide .place.bottom, .slide .place.b { | |
| -webkit-transform: translate(-50%, 0); | |
| transform: translate(-50%, 0); } | |
| .slide .place.left, .slide .place.l, .slide .place.right, .slide .place.r { | |
| -webkit-transform: translate(0, -50%); | |
| transform: translate(0, -50%); } | |
| .slide .place.top, .slide .place.t, .slide .place.top.left, .slide .place.top.right, .slide .place.t.r { | |
| top: 0; } | |
| .slide .place.right, .slide .place.r { | |
| right: 0; | |
| left: auto; } | |
| .slide .place.bottom, .slide .place.b, .slide .place.bottom.right, .slide .place.b.r, .slide .place.bottom.left, .slide .place.b.l { | |
| top: auto; | |
| bottom: 0; } | |
| .slide .place.left, .slide .place.l { | |
| left: 0; } | |
| .progress { | |
| position: absolute; | |
| left: -20px; | |
| bottom: 0; | |
| z-index: 1; | |
| display: none; | |
| width: 0; | |
| height: 0; | |
| box-sizing: content-box; | |
| border: 10px solid #4B86C2; | |
| border-right-color: transparent; | |
| -webkit-transition: width 0.2s linear; | |
| transition: width 0.2s linear; | |
| clip: rect(10px, 1044px, 20px, 20px); } | |
| .progress[style*='100%'] { | |
| padding-left: 10px; } | |
| .badge { | |
| font-size: 10px; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| z-index: 1; | |
| overflow: hidden; | |
| visibility: hidden; | |
| display: none; | |
| width: 9em; | |
| height: 9em; } | |
| @media (min-width: 1174px) { | |
| .badge { | |
| font-size: 20px; } } | |
| @media (min-width: 2348px) { | |
| .badge { | |
| font-size: 40px; } } | |
| .badge a { | |
| position: absolute; | |
| right: -50%; | |
| bottom: 50%; | |
| left: -50%; | |
| visibility: visible; | |
| background: #4B86C2; | |
| color: #FFF; | |
| text-align: center; | |
| line-height: 2; | |
| -webkit-transform-origin: 50% 100%; | |
| transform-origin: 50% 100%; | |
| -webkit-transform: rotate(45deg); | |
| transform: rotate(45deg); } | |
| .region { | |
| display: none; } | |
| @media screen { | |
| .shower.list { | |
| padding-top: 25px; | |
| width: 100%; | |
| display: -webkit-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| background: #585A5E; | |
| position: absolute; | |
| clip: rect(0, auto, auto, 0); } } | |
| @media screen and (min-width: 1174px) { | |
| .shower.list { | |
| padding-top: 50px; } } | |
| @media screen and (min-width: 2348px) { | |
| .shower.list { | |
| padding-top: 100px; } } | |
| @media screen { | |
| .shower.list .caption { | |
| display: block; } | |
| .shower.list .slide { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| margin: 0 -768px -551px 25px; | |
| -webkit-transform: scale(0.25); | |
| transform: scale(0.25); | |
| border-radius: 2px; | |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); } } | |
| @media screen and (min-width: 1174px) { | |
| .shower.list .slide { | |
| margin: 0 -512px -334px 50px; | |
| -webkit-transform: scale(0.5); | |
| transform: scale(0.5); } } | |
| @media screen and (min-width: 2348px) { | |
| .shower.list .slide { | |
| margin: 0 0px 100px 100px; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); } } | |
| @media screen { | |
| .shower.list .slide:hover { | |
| box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.1), 0 20px 50px rgba(0, 0, 0, 0.3); } | |
| .shower.list .slide:target { | |
| box-shadow: 0 0 0 1px #376da3, 0 0 0 20px #4B86C2, 0 20px 50px rgba(0, 0, 0, 0.3); } | |
| .shower.list .slide * { | |
| pointer-events: none; } | |
| .shower.list .slide footer { | |
| display: block; } | |
| .shower.list .badge { | |
| display: block; } | |
| .shower.full { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| overflow: hidden; | |
| margin: -384px 0 0 -512px; | |
| width: 1024px; | |
| height: 768px; | |
| background: #000; } | |
| .shower.full .slide { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| margin-left: -150%; | |
| visibility: hidden; } | |
| .shower.full .slide:target { | |
| margin: 0; | |
| visibility: visible; } | |
| .shower.full .slide pre code:not(:only-child).mark.next { | |
| visibility: visible; | |
| background: none; } | |
| .shower.full .slide pre code:not(:only-child).mark.next.active { | |
| background: rgba(88, 90, 94, 0.1); } | |
| .shower.full .slide .next { | |
| visibility: hidden; } | |
| .shower.full .slide .next.active { | |
| visibility: visible; } | |
| .shower.full .slide .shout.grow, .shower.full .slide .shout.shrink { | |
| opacity: 0; | |
| -webkit-transition: 0.4s ease-out; | |
| transition: 0.4s ease-out; | |
| -webkit-transition-property: opacity, -webkit-transform; | |
| transition-property: opacity, -webkit-transform; | |
| transition-property: opacity, transform; | |
| transition-property: opacity, transform, -webkit-transform; } | |
| .shower.full .slide .shout.grow { | |
| -webkit-transform: scale(0.1) translateY(-50%); | |
| transform: scale(0.1) translateY(-50%); } | |
| .shower.full .slide .shout.shrink { | |
| -webkit-transform: scale(10) translateY(-50%); | |
| transform: scale(10) translateY(-50%); } | |
| .shower.full .slide:target .shout.grow, .shower.full .slide:target .shout.shrink { | |
| opacity: 1; | |
| -webkit-transform: scale(1) translateY(-50%); | |
| transform: scale(1) translateY(-50%); } | |
| .shower.full .progress { | |
| display: block; | |
| -webkit-transform: translateZ(0); | |
| transform: translateZ(0); } | |
| .shower.full .region { | |
| position: absolute; | |
| clip: rect(0 0 0 0); | |
| overflow: hidden; | |
| margin: -1px; | |
| padding: 0; | |
| width: 1px; | |
| height: 1px; | |
| border: none; | |
| display: block; } } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| diff --git 1/v1.0.6.css 2/v2.0.6.css | |
| index a813751..bd0c9ab 100644 | |
| --- 1/v1.0.6.css | |
| +++ 2/v2.0.6.css | |
| @@ -1,27 +1,42 @@ | |
| {+/**+} | |
| {+ * Ribbon theme for Shower HTML presentation engine+} | |
| {+ * shower-ribbon v2.0.6, https://github.com/shower/ribbon+} | |
| {+ * @copyright 2010–2016 Vadim Makeev, http://pepelsbey.net/+} | |
| {+ * @license MIT+} | |
| {+ */+} | |
| @charset "UTF-8"; | |
| @font-face { | |
| font-family: [-'PT Sans';-]{+PT Sans;+} | |
| src: [-url(../fonts/PTSans.woff)-]{+url(../fonts/pt-sans-regular.woff)+} format("woff"); } | |
| @font-face { | |
| font-weight: bold; | |
| font-family: [-'PT Sans';-]{+PT Sans;+} | |
| src: [-url(../fonts/PTSans.Bold.woff)-]{+url(../fonts/pt-sans-bold.woff)+} format("woff"); } | |
| @font-face { | |
| font-style: italic; | |
| font-family: [-'PT Sans';-]{+PT Sans;+} | |
| src: [-url(../fonts/PTSans.Italic.woff)-]{+url(../fonts/pt-sans-italic.woff)+} format("woff"); } | |
| @font-face { | |
| font-style: italic; | |
| font-weight: bold; | |
| font-family: [-'PT Sans';-]{+PT Sans;+} | |
| src: [-url(../fonts/PTSans.Bold.Italic.woff)-]{+url(../fonts/pt-sans-bold-italic.woff)+} format("woff"); } | |
| @font-face { | |
| font-family: [-'PT-]{+PT+} Sans [-Narrow';-]{+Narrow;+} | |
| font-weight: bold; | |
| src: [-url(../fonts/PTSans.Narrow.Bold.woff)-]{+url(../fonts/pt-sans-narrow-bold.woff)+} format("woff"); } | |
| @font-face { | |
| font-family: [-'PT Mono';-]{+PT Mono;+} | |
| src: [-url(../fonts/PTMono.woff)-]{+url(../fonts/pt-mono-regular.woff)+} format("woff"); } | |
| {+*, *::before, *::after {+} | |
| {+ box-sizing: border-box; }+} | |
| html, body, div, span, applet, object, iframe, | |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| a, abbr, acronym, address, big, cite, code, | |
| @@ -43,7 +58,7 @@ time, mark, audio, video { | |
| vertical-align: baseline; } | |
| article, aside, details, figcaption, figure, | |
| footer, header, hgroup, {+main,+} menu, nav, section { | |
| display: block; } | |
| body { | |
| @@ -55,8 +70,8 @@ ol, ul { | |
| blockquote, q { | |
| quotes: none; } | |
| [-blockquote:before, blockquote:after,-] | |
| [-q:before, q:after-]{+blockquote::before, blockquote::after,+} | |
| {+q::before, q::after+} { | |
| content: ''; | |
| content: none; } | |
| @@ -64,438 +79,469 @@ table { | |
| border-collapse: collapse; | |
| border-spacing: 0; } | |
| [-body {-] | |
| [- counter-reset: slide;-] | |
| [- font: 25px/2 'PT Sans', sans-serif; }-] | |
| a { | |
| [- color: #4B86C2;-] | |
| [- background: linear-gradient(to top, #4B86C2, #4B86C2 0.09em, transparent 0.09em, transparent) repeat-x;-] | |
| text-decoration: none; } | |
| {+@page {+} | |
| {+ margin: 0;+} | |
| {+ size: 1024px 768px; }+} | |
| {+.shower {+} | |
| {+ color: black;+} | |
| {+ counter-reset: slide;+} | |
| {+ font: 25px/2 PT Sans, sans-serif;+} | |
| {+ -webkit-print-color-adjust: exact;+} | |
| {+ -webkit-text-size-adjust: none;+} | |
| {+ -moz-text-size-adjust: none;+} | |
| {+ -ms-text-size-adjust: none; }+} | |
| {+ @media print {+} | |
| {+ .shower {+} | |
| {+ text-rendering: geometricPrecision; } }+} | |
| .caption { | |
| {+font-size: 25px;+} | |
| display: none; | |
| [-margin:-]{+margin-top: -0.2em;+} | |
| {+ padding:+} 0 [-0 50px;-]{+1em 0.93em;+} | |
| {+ width: 100%;+} | |
| color: #3C3D40; | |
| text-shadow: 0 1px [-1px-]{+0+} #8D8E90; } | |
| {+@media (min-width: 1174px) {+} | |
| {+ .caption {+} | |
| {+ font-size: 50px; } }+} | |
| {+ @media (min-width: 2348px) {+} | |
| {+ .caption {+} | |
| {+ font-size: 100px; } }+} | |
| .caption h1 { | |
| {+padding-bottom: 0.15em;+} | |
| font: bold [-50px/1 'PT-]{+1em/1 PT+} Sans [-Narrow',-]{+Narrow,+} sans-serif; } | |
| {+.caption p {+} | |
| {+ line-height: 1;+} | |
| {+ font-size: 0.6em; }+} | |
| .caption a { | |
| [-text-shadow: 0 -1px 1px #1F3F60;-] | |
| [- background: none; }-] | |
| [- .caption a:hover {-] color:[-#5e93c8; }-] | |
| [-.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:-] #4B86C2; | |
| [-box-shadow:-]{+text-shadow:+} 0 {+-1px+} 0 [-1em rgba(0, 0, 0, 0.3);-] | |
| [- color: #FFF;-] | |
| [- text-decoration: none;-] | |
| [- text-align: center;-] | |
| [- -webkit-transform-origin: 50% 100%;-] | |
| [- transform-origin: 50% 100%;-] | |
| [- -webkit-transform: rotate(45deg) translateY(-1em);-] | |
| [- transform: rotate(45deg) translateY(-1em); }-] | |
| [- .badge a:hover {-] | |
| [- background: #568ec6;-]{+#1F3F60;+} } | |
| .slide { | |
| position: relative; | |
| {+z-index: 1;+} | |
| {+ overflow: hidden;+} | |
| {+ padding: 106px 100px 0;+} | |
| width: 1024px; | |
| height: [-640px;-]{+768px;+} | |
| background: #FFF; | |
| [-color: #000;-] | |
| [- -webkit-print-color-adjust: exact;-] | |
| [- -webkit-text-size-adjust: none;-] | |
| [- -moz-text-size-adjust: none;-] | |
| [- -ms-text-size-adjust: none;-]{+font-size: 25px;+} } | |
| [-.slide:after-]{+.slide::after+} { | |
| position: absolute; | |
| top: 0; | |
| right: [-119px;-] | |
| [- padding: 20px 0 0;-]{+100px;+} | |
| {+ padding-top: 15px;+} | |
| width: 50px; | |
| height: [-80px;-]{+100px;+} | |
| background: url(../images/ribbon.svg) no-repeat; | |
| color: #FFF; | |
| counter-increment: slide; | |
| content: counter(slide); | |
| text-align: center;[-font-size: 20px; }-] | |
| [- .slide > div {-] | |
| [- position: absolute;-] | |
| [- top: 0;-] | |
| [- left: 0;-] | |
| [- overflow: hidden;-] | |
| [- padding: 105px 120px 0;-] | |
| [- width: 784px;-] | |
| [- height: 535px;-] } | |
| .slide h2 { | |
| [-margin: 0 0 37px;-]{+margin-bottom: 34px;+} | |
| color: [-#666;-]{+#585A5E;+} | |
| font: bold 50px/1 [-'PT-]{+PT+} Sans [-Narrow',-]{+Narrow,+} sans-serif; } | |
| .slide p { | |
| [-margin: 0 0 50px;-]{+margin-bottom: 1em;+} } | |
| .slide p.note { | |
| color: [-#999; }-] | |
| [-.slide b, .slide strong {-] | |
| [- font-weight: bold;-]{+#979a9e;+} } | |
| .slide [-i, .slide em-]{+a+} {[-font-style: italic; }-] | |
| [-.slide kbd, .slide code, .slide samp {-] | |
| [- padding: 3px 8px;-] | |
| [- border-radius: 8px;-] | |
| background: [-#FAFAA2;-]{+-webkit-linear-gradient(bottom, currentColor 0.09em, transparent 0.09em) repeat-x;+} | |
| {+ background: linear-gradient(to top, currentColor 0.09em, transparent 0.09em) repeat-x;+} | |
| color: [-#000;-] | |
| [- -moz-tab-size: 4;-] | |
| [- -o-tab-size: 4;-] | |
| [- tab-size: 4;-] | |
| [- line-height: 1;-] | |
| [- font-family: 'PT Mono', monospace; }-] | |
| [-.slide sub, .slide sup {-] | |
| [- position: relative;-] | |
| [- line-height: 0;-] | |
| [- font-size: 75%; }-] | |
| [-.slide sub {-] | |
| [- bottom: -0.25em; }-] | |
| [-.slide sup {-] | |
| [- top: -0.5em; }-] | |
| [-.slide blockquote {-] | |
| [- font-style: italic;-]{+#4B86C2;+} } | |
| .slide [-blockquote:before {-] | |
| [- position: absolute;-] | |
| [- margin: -16px 0 0 -80px;-] | |
| [- color: #CCC;-] | |
| [- font: 200px/1 'PT Sans', sans-serif;-] | |
| [- content: '\201C'; }-]{+b,+} .slide [-blockquote + figcaption-]{+strong+} {[-margin: -50px 0 50px;-] | |
| [- font-style: italic;-] | |
| font-weight: bold; } | |
| .slide [-ol,-]{+i,+} .slide [-ul-]{+em, .slide dfn+} { | |
| [-margin: 0 0 50px;-] | |
| [- counter-reset: list;-]{+font-style: italic;+} } | |
| .slide [-ol li,-]{+code,+} .slide [-ul li {-] | |
| [- text-indent: -2em; }-]{+kbd,+} .slide [-ol li:before,-]{+mark,+} .slide [-ul li:before-]{+samp+} { | |
| [-display: inline-block;-] | |
| [- width: 2em;-] | |
| [- color: #BBB;-] | |
| [- text-align: right;-]{+padding: 0.1em 0.3em;+} | |
| {+ border-radius: 0.2em;+} } | |
| .slide [-ol ol,-] | |
| [- .slide ol ul,-]{+code,+} .slide [-ul ol,-]{+kbd,+} .slide [-ul ul-]{+samp+} { | |
| [-margin: 0 0 0 2em;-]{+background: rgba(88, 90, 94, 0.1);+} | |
| {+ line-height: 1;+} | |
| {+ font-family: PT Mono, monospace, monospace;+} } | |
| .slide [-ul > li:before-]{+mark+} { | |
| [-content: '\2022\00A0\00A0';-]{+background: #FAFAA2;+} } | |
| .slide [-ul > li:lang(ru):before-]{+sub, .slide sup+} { | |
| [-content: '\2014\00A0\00A0';-]{+position: relative;+} | |
| {+ line-height: 0;+} | |
| {+ font-size: 75%;+} } | |
| .slide [-ol > li:before-]{+sub+} { | |
| [-counter-increment: list;-] | |
| [- content: counter(list) ". ";-]{+bottom: -0.25em;+} } | |
| .slide [-pre-]{+sup+} { | |
| [-margin: 0 0 49px;-] | |
| [- padding: 1px 0 0;-] | |
| [- counter-reset: code;-] | |
| [- white-space: normal;-]{+top: -0.5em;+} } | |
| .slide [-pre code-]{+blockquote+} { | |
| [-display: block;-] | |
| [- padding: 0;-] | |
| [- background: none;-] | |
| [- white-space: pre;-] | |
| [- line-height: 50px;-]{+font-style: italic;+} } | |
| .slide [-pre code:before-]{+blockquote::before+} { | |
| position: absolute; | |
| margin: {+-0.15em+} 0 0 {+-0.43em;+} | |
| {+ color: #CCC;+} | |
| {+ line-height: 1;+} | |
| {+ font-size: 8em;+} | |
| {+ content: '\201C'; }+} | |
| {+ .slide blockquote + figcaption {+} | |
| {+ margin: -1em+} 0 [--110px;-]{+1em;+} | |
| {+ font-style: italic;+} | |
| {+ font-weight: bold; }+} | |
| {+ .slide ol, .slide ul {+} | |
| {+ margin-bottom: 1em;+} | |
| {+ counter-reset: list; }+} | |
| {+ .slide ol li, .slide ul li {+} | |
| {+ page-break-inside: avoid;+} | |
| {+ text-indent: -2em; }+} | |
| {+ .slide ol li::before, .slide ul li::before {+} | |
| {+ display: inline-block;+} | |
| width: [-100px;-]{+2em;+} | |
| color: [-#BBB;-]{+#979a9e;+} | |
| text-align: right; {+}+} | |
| {+ .slide ol ol, .slide ol ul, .slide ul ol, .slide ul ul {+} | |
| {+ margin-bottom: 0;+} | |
| {+ margin-left: 2em; }+} | |
| {+ .slide ul > li::before {+} | |
| {+ padding-right: 0.5em;+} | |
| {+ content: '•'; }+} | |
| {+ .slide ul > li:lang(ru)::before {+} | |
| {+ content: '—'; }+} | |
| {+ .slide ol > li::before {+} | |
| {+ padding-right: 0.4em;+} | |
| counter-increment: [-code;-]{+list;+} | |
| content: [-counter(code,decimal-leading-zero)-]{+counter(list)+} "."; } | |
| .slide [-pre code:only-child:before-]{+table+} { | |
| [-content: '';-]{+margin-left: -100px;+} | |
| {+ margin-bottom: 1em;+} | |
| {+ width: calc(100% + 100px + 100px);+} } | |
| .slide [-pre mark-]{+table th:first-child,+} | |
| {+ .slide table td:first-child {+} | |
| {+ padding-left: 96px; }+} | |
| {+ .slide table th:last-child,+} | |
| {+ .slide table td:last-child {+} | |
| {+ padding-right: 96px; }+} | |
| {+ .slide table th {+} | |
| {+ text-align: left;+} | |
| {+ font-weight: bold; }+} | |
| {+ .slide table tr:not(:last-of-type) > *+} {[-padding: 3px 8px;-] | |
| [- border-radius: 8px;-] | |
| background: [-#F7FCA0;-] | |
| [- color: #000;-] | |
| [- font-style: normal;-]{+-webkit-linear-gradient(bottom, rgba(88, 90, 94, 0.5) 0.055em, transparent 0.055em) repeat-x;+} | |
| {+ background: linear-gradient(to top, rgba(88, 90, 94, 0.5) 0.055em, transparent 0.055em) repeat-x;+} } | |
| .slide [-pre mark.important-]{+table.striped tr:nth-child(even)+} { | |
| background: [-#C00;-] | |
| [- color: #FFF;-] | |
| [- font-weight:-]{+rgba(88, 90, 94, 0.1); }+} | |
| {+ .slide table.striped tr > * {+} | |
| {+ background-image: none; }+} | |
| {+ .slide pre {+} | |
| {+ margin-bottom: 1em;+} | |
| {+ counter-reset: code;+} | |
| {+ white-space:+} normal; } | |
| .slide pre [-mark.comment-]{+code+} { | |
| {+display: block;+} | |
| {+ margin-left: -100px;+} | |
| padding: {+0 0 0 100px;+} | |
| {+ width: calc(100% + 100px + 100px);+} | |
| {+ border-radius:+} 0; | |
| background: none; | |
| {+line-height: 2;+} | |
| {+ white-space: pre;+} | |
| {+ -moz-tab-size: 4;+} | |
| {+ -o-tab-size: 4;+} | |
| {+ tab-size: 4; }+} | |
| {+ .slide pre code:not(:only-child).mark {+} | |
| {+ background: rgba(88, 90, 94, 0.1); }+} | |
| {+ .slide pre code:not(:only-child)::before {+} | |
| {+ position: absolute;+} | |
| {+ margin-left: -2em;+} | |
| {+ color: #979a9e;+} | |
| {+ counter-increment: code;+} | |
| {+ content: counter(code, decimal-leading-zero) "."; }+} | |
| {+ .slide pre mark {+} | |
| {+ position: relative;+} | |
| {+ z-index: -1;+} | |
| {+ margin: 0 -0.3em; }+} | |
| {+ .slide pre mark.important {+} | |
| {+ background: #C00;+} | |
| {+ color: #FFF; }+} | |
| {+ .slide pre .comment {+} | |
| color: #999; } | |
| .slide [-table {-] | |
| [- margin: 0 0 50px;-] | |
| [- width: 100%;-] | |
| [- border-collapse: collapse;-] | |
| [- border-spacing: 0; }-] | |
| [- .slide table th, .slide table td {-] | |
| [- background: url("data:image/gif;base64,R0lGODdhAQABAPAAAJmZmQAAACH/C1hNUCBEYXRhWE1QAj94ACwAAAAAAQABAAACAkQBADs=") 0 100% repeat-x; }-] | |
| [- .slide table th {-] | |
| [- text-align: left;-] | |
| [- font-weight: bold; }-] | |
| [- .slide table.striped tr:nth-child(even) {-] | |
| [- background: #EEE; }-] | |
| [-.slide.cover, .slide.shout {-] | |
| [- z-index: 1; }-] | |
| [- .slide.cover:after, .slide.shout:after {-] | |
| [- visibility: hidden; }-] | |
| [-.slide.cover {-] | |
| [- background: #000; }-] | |
| [- .slide.cover img, .slide.cover svg, .slide.cover video,-] | |
| [- .slide.cover object, .slide.cover canvas, .slide.cover iframe-]{+footer+} { | |
| position: absolute; | |
| [-top:-]{+right:+} 0; | |
| {+bottom: -768px;+} | |
| left: 0; | |
| [-z-index: -1; }-] | |
| [- .slide.cover.w img, .slide.cover.w svg, .slide.cover.w video,-] | |
| [- .slide.cover.w object, .slide.cover.w canvas, .slide.cover.w iframe-]{+display: none;+} | |
| {+ padding: 41px 100px 8px;+} | |
| {+ background: #fbfbba;+} | |
| {+ box-shadow: 0 1px 0 #FAFAA2 inset;+} | |
| {+ -webkit-transition: bottom 0.3s;+} | |
| {+ transition: bottom 0.3s; }+} | |
| {+ .slide footer mark {+} | |
| {+ background: rgba(255, 255, 255, 0.8); }+} | |
| {+ .slide:hover > footer {+} | |
| {+ bottom: 0; }+} | |
| {+ .slide.grid {+} | |
| {+ background-image: url(../images/grid.png);+} | |
| {+ -ms-interpolation-mode: nearest-neighbor;+} | |
| {+ image-rendering: -webkit-optimize-contrast;+} | |
| {+ image-rendering: -moz-crisp-edges;+} | |
| {+ image-rendering: pixelated; }+} | |
| {+ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {+} | |
| {+ .slide.grid {+} | |
| {+ background-image: url(../images/grid@2x.png);+} | |
| {+ background-size: 1024px auto; } }+} | |
| {+ .slide.black {+} | |
| {+ background-color: #000; }+} | |
| {+ .slide.black::after {+} | |
| {+ visibility: hidden; }+} | |
| {+ .slide.white {+} | |
| {+ background-color: #FFF; }+} | |
| {+ .slide.white::after {+} | |
| {+ visibility: hidden; }+} | |
| {+ .slide .double,+} | |
| {+ .slide .triple {+} | |
| {+ -webkit-column-gap: 75px;+} | |
| {+ -moz-column-gap: 75px;+} | |
| {+ column-gap: 75px;+} | |
| {+ -webkit-hyphens: auto;+} | |
| {+ -ms-hyphens: auto;+} | |
| {+ hyphens: auto; }+} | |
| {+ .slide .double {+} | |
| {+ -webkit-column-count: 2;+} | |
| {+ -moz-column-count: 2;+} | |
| {+ column-count: 2; }+} | |
| {+ .slide .triple {+} | |
| {+ -webkit-column-count: 3;+} | |
| {+ -moz-column-count: 3;+} | |
| {+ column-count: 3; }+} | |
| {+ .slide .shout+} { | |
| {+position: absolute;+} | |
| top: 50%; | |
| {+left: 0;+} | |
| width: 100%; | |
| {+text-align: center;+} | |
| {+ line-height: 1;+} | |
| {+ font-size: 150px;+} | |
| -webkit-transform: translateY(-50%); | |
| transform: translateY(-50%); } | |
| [-.slide.cover.h img, .slide.cover.h svg, .slide.cover.h video,-] | |
| [- .slide.cover.h object, .slide.cover.h canvas, .slide.cover.h iframe-]{+.slide .shout a+} { | |
| {+background: -webkit-linear-gradient(bottom, currentColor 0.11em, transparent 0.11em) repeat-x;+} | |
| {+ background: linear-gradient(to top, currentColor 0.11em, transparent 0.11em) repeat-x; }+} | |
| {+ .slide .cover {+} | |
| {+ position: absolute;+} | |
| {+ top: 50%;+} | |
| left: 50%; | |
| {+z-index: -1;+} | |
| {+ -webkit-transform: translate(-50%, -50%);+} | |
| {+ transform: translate(-50%, -50%);+} | |
| {+ max-width: 100%;+} | |
| {+ max-height: 100%; }+} | |
| {+ .slide .cover.width, .slide .cover.w {+} | |
| {+ width: 100%;+} | |
| {+ max-height: none; }+} | |
| {+ .slide .cover.height, .slide .cover.h {+} | |
| height: 100%; | |
| {+max-width: none; }+} | |
| {+ .slide .cover + figcaption {+} | |
| {+ position: absolute;+} | |
| {+ bottom: 20px;+} | |
| {+ right: 10px;+} | |
| {+ font-size: 12px;+} | |
| {+ opacity: 0.7;+} | |
| {+ -webkit-transform-origin: 0 100%;+} | |
| {+ transform-origin: 0 100%;+} | |
| -webkit-transform: [-translateX(-50%);-]{+translateX(100%) rotate(-90deg);+} | |
| transform: [-translateX(-50%);-]{+translateX(100%) rotate(-90deg);+} } | |
| [-.slide.cover.w.h img, .slide.cover.w.h svg, .slide.cover.w.h video,-] | |
| [- .slide.cover.w.h object, .slide.cover.w.h canvas, .slide.cover.w.h iframe-]{+.slide .cover + figcaption.white+} { | |
| {+color: #FFF; }+} | |
| {+ .slide .cover + figcaption a {+} | |
| {+ color: currentcolor; }+} | |
| {+ .slide .place {+} | |
| {+ position: absolute;+} | |
| top: [-0;-]{+50%;+} | |
| left: [-0;-]{+50%;+} | |
| {+ -webkit-transform: translate(-50%, -50%);+} | |
| {+ transform: translate(-50%, -50%); }+} | |
| {+ .slide .place.top.left, .slide .place.t.l, .slide .place.top.right, .slide .place.t.r, .slide .place.bottom.right, .slide .place.b.r, .slide .place.bottom.left, .slide .place.b.l {+} | |
| -webkit-transform: none; | |
| transform: none; } | |
| [-.slide.shout h2-]{+.slide .place.top, .slide .place.t, .slide .place.bottom, .slide .place.b+} {[-position: absolute;-] | |
| [- top: 50%;-] | |
| [- left: 0;-] | |
| [- width: 100%;-] | |
| [- text-align: center;-] | |
| [- line-height: 1;-] | |
| [- font-size: 150px;-] | |
| -webkit-transform: [-translateY(-50%);-]{+translate(-50%, 0);+} | |
| transform: [-translateY(-50%);-]{+translate(-50%, 0);+} } | |
| [-.slide.shout h2 a-]{+.slide .place.left, .slide .place.l, .slide .place.right, .slide .place.r+} { | |
| [-background: linear-gradient(to top, #4B86C2, #4B86C2 0.11em, transparent 0.11em, transparent) repeat-x;-]{+-webkit-transform: translate(0, -50%);+} | |
| {+ transform: translate(0, -50%);+} } | |
| .slide [-.place-]{+.place.top, .slide .place.t, .slide .place.top.left, .slide .place.top.right, .slide .place.t.r {+} | |
| {+ top: 0; }+} | |
| {+ .slide .place.right, .slide .place.r {+} | |
| {+ right: 0;+} | |
| {+ left: auto; }+} | |
| {+ .slide .place.bottom, .slide .place.b, .slide .place.bottom.right, .slide .place.b.r, .slide .place.bottom.left, .slide .place.b.l {+} | |
| {+ top: auto;+} | |
| {+ bottom: 0; }+} | |
| {+ .slide .place.left, .slide .place.l {+} | |
| {+ left: 0; }+} | |
| {+.progress+} { | |
| position: absolute; | |
| [-top: 50%;-] left: [-50%;-] | |
| [- -webkit-transform: translate(-50%, -50%);-] | |
| [- transform: translate(-50%, -50%); }-] | |
| [- .slide .place.t.l, .slide .place.t.r, .slide .place.b.r, .slide .place.b.l {-] | |
| [- -webkit-transform: none;-] | |
| [- transform: none; }-] | |
| [- .slide .place.t, .slide .place.b {-] | |
| [- -webkit-transform: translate(-50%, 0);-] | |
| [- transform: translate(-50%, 0); }-] | |
| [- .slide .place.l, .slide .place.r {-] | |
| [- -webkit-transform: translate(0, -50%);-] | |
| [- transform: translate(0, -50%); }-] | |
| [- .slide .place.t, .slide .place.t.l, .slide .place.t.r {-] | |
| [- top: 0; }-] | |
| [- .slide .place.r {-] | |
| [- right: 0;-] | |
| [- left: auto; }-] | |
| [- .slide .place.b, .slide .place.b.r, .slide .place.b.l {-] | |
| [- top: auto;-]{+-20px;+} | |
| bottom: 0; | |
| [-}-] | |
| [- .slide .place.l {-] | |
| [- left:-]{+z-index: 1;+} | |
| {+ display: none;+} | |
| {+ width:+} 0; | |
| [-}-] | |
| [-.slide footer {-]{+height: 0;+} | |
| {+ box-sizing: content-box;+} | |
| {+ border: 10px solid #4B86C2;+} | |
| {+ border-right-color: transparent;+} | |
| {+ -webkit-transition: width 0.2s linear;+} | |
| {+ transition: width 0.2s linear;+} | |
| {+ clip: rect(10px, 1044px, 20px, 20px); }+} | |
| {+ .progress[style*='100%'] {+} | |
| {+ padding-left: 10px; }+} | |
| {+.badge {+} | |
| {+ font-size: 10px;+} | |
| position: absolute; | |
| [-left:-]{+top:+} 0; | |
| right: 0; | |
| [- bottom: -640px;-] | |
| z-index: 1; | |
| {+overflow: hidden;+} | |
| {+ visibility: hidden;+} | |
| display: none; | |
| [-padding: 20px 120px;-] | |
| [- background: #FAFAA2;-] | |
| [- box-shadow: 0 0 0 2px #f0f0ac inset;-] | |
| [- transition: bottom 0.3s;-]{+width: 9em;+} | |
| {+ height: 9em; }+} | |
| {+ @media (min-width: 1174px) {+} | |
| {+ .badge {+} | |
| {+ font-size: 20px; } }+} | |
| {+ @media (min-width: 2348px) {+} | |
| {+ .badge {+} | |
| {+ font-size: 40px; }+} } | |
| [-.slide:hover footer-]{+.badge a+} { | |
| {+position: absolute;+} | |
| {+ right: -50%;+} | |
| bottom: [-0;-]{+50%;+} | |
| {+ left: -50%;+} | |
| {+ visibility: visible;+} | |
| {+ background: #4B86C2;+} | |
| {+ color: #FFF;+} | |
| {+ text-align: center;+} | |
| {+ line-height: 2;+} | |
| {+ -webkit-transform-origin: 50% 100%;+} | |
| {+ transform-origin: 50% 100%;+} | |
| {+ -webkit-transform: rotate(45deg);+} | |
| {+ transform: rotate(45deg); }+} | |
| {+.region {+} | |
| {+ display: none;+} } | |
| @media screen { | |
| [-.list-]{+.shower.list+} { | |
| {+padding-top: 25px;+} | |
| {+ width: 100%;+} | |
| {+ display: -webkit-box;+} | |
| {+ display: -ms-flexbox;+} | |
| {+ display: flex;+} | |
| {+ -ms-flex-wrap: wrap;+} | |
| {+ flex-wrap: wrap;+} | |
| {+ background: #585A5E;+} | |
| position: absolute; | |
| clip: rect(0, auto, auto, 0);[-padding: 80px 0 40px 100px;-] | |
| [- background: #585A5E url(../images/linen.png);-] } } | |
| @media screen and [-(-webkit-min-device-pixel-ratio: 2),-]{+(min-width: 1174px) {+} | |
| {+ .shower.list {+} | |
| {+ padding-top: 50px; } }+} | |
| {+ @media+} screen and [-(min-resolution: 192dpi)-]{+(min-width: 2348px)+} { | |
| [-.list-]{+.shower.list+} { | |
| [-background-image: url(../images/linen@2x.png);-] | |
| [- background-size: 256px;-]{+padding-top: 100px;+} } } | |
| @media screen { | |
| [-.list .caption,-] | |
| [- .list .badge-]{+.shower.list .caption+} { | |
| display: block; } | |
| [-.list-]{+.shower.list+} .slide {[-float: left;-] | |
| [- margin: 0 -412px -220px 0;-] | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0;[--webkit-transform: scale(0.5);-] | |
| [- transform: scale(0.5); } }-] | |
| [- @media screen and (max-width: 1324px) {-] | |
| [- .list .slide {-] | |
| margin: 0 [--688px -400px 0;-]{+-768px -551px 25px;+} | |
| -webkit-transform: scale(0.25); | |
| transform: scale(0.25); | |
| [-} }-] | |
| [-@media screen {-] | |
| [- .list .slide:before {-] | |
| [- position: absolute;-] | |
| [- top: 0;-] | |
| [- left: 0;-] | |
| [- z-index: -1;-] | |
| [- width: 512px;-] | |
| [- height: 320px;-]{+border-radius: 2px;+} | |
| box-shadow: 0 [-0 30px-]{+20px 50px+} rgba(0, 0, 0, [-0.005), 0 20px 50px rgba(42, 43, 45, 0.6);-] | |
| [- border-radius: 2px;-] | |
| [- content: '';-] | |
| [- -webkit-transform-origin: 0 0;-] | |
| [- transform-origin: 0 0;-] | |
| [- -webkit-transform: scale(2);-] | |
| [- transform: scale(2);-]{+0.3);+} } } | |
| @media screen and [-(max-width: 1324px) {-] | |
| [- .list .slide:before-]{+(min-width: 1174px)+} { | |
| [-width: 256px;-] | |
| [- height: 160px;-] | |
| [- -webkit-transform: scale(4);-] | |
| [- transform: scale(4); } }-] | |
| [-@media screen {-] | |
| [- .list .slide:after-]{+.shower.list .slide+} { | |
| [-top: auto;-] | |
| [- right: auto;-] | |
| [- bottom: -80px;-] | |
| [- left: 120px;-] | |
| [- padding: 0;-] | |
| [- width: auto;-] | |
| [- height: auto;-] | |
| [- background: none;-] | |
| [- color: #3C3D40;-] | |
| [- text-shadow: 0 1px 1px #8D8E90;-] | |
| [- font-weight: bold;-] | |
| [- -webkit-transform-origin: 0 0;-] | |
| [- transform-origin:-]{+margin:+} 0 [-0;-]{+-512px -334px 50px;+} | |
| -webkit-transform: [-scale(2);-]{+scale(0.5);+} | |
| transform: [-scale(2);-]{+scale(0.5);+} } } | |
| @media screen and [-(max-width: 1324px)-]{+(min-width: 2348px)+} { | |
| [-.list .slide:after-]{+.shower.list .slide+} { | |
| [-bottom: -104px;-]{+margin: 0 0px 100px 100px;+} | |
| -webkit-transform: [-scale(4);-]{+scale(1);+} | |
| transform: [-scale(4); } }-] | |
| [-@media screen {-] | |
| [- .list .slide:hover:before {-] | |
| [- box-shadow: 0 0 0 10px rgba(42, 43, 45, 0.3), 0 20px 50px rgba(42, 43, 45, 0.6); }-] | |
| [- .list .slide:target:before {-] | |
| [- box-shadow: 0 0 0 1px #376da3, 0 0 0 10px #4B86C2, 0 20px 50px rgba(42, 43, 45, 0.6); } }-] | |
| [- @media screen and (max-width: 1324px) {-] | |
| [- .list .slide:target:before {-] | |
| [- box-shadow: 0 0 0 1px #376da3, 0 0 0 10px #4B86C2, 0 20px 50px rgba(42, 43, 45, 0.6);-]{+scale(1);+} } } | |
| @media screen { | |
| [-.list .slide:target:after-]{+.shower.list .slide:hover+} { | |
| [-text-shadow:-]{+box-shadow:+} 0 [-1px 1px rgba(42, 43, 45, 0.6);-] | |
| [- color: #4B86C2;-]{+0 0 20px rgba(0, 0, 0, 0.1), 0 20px 50px rgba(0, 0, 0, 0.3);+} } | |
| [-.list .slide > div:before-]{+.shower.list .slide:target+} { | |
| [-position: absolute;-] | |
| [- top: 0;-] | |
| [- right: 0;-] | |
| [- bottom: 0;-] | |
| [- left: 0;-] | |
| [- z-index: 2;-] | |
| [- content: '';-]{+box-shadow: 0 0 0 1px #376da3, 0 0 0 20px #4B86C2, 0 20px 50px rgba(0, 0, 0, 0.3);+} } | |
| [-.list .slide.cover:after, .list .slide.shout:after-]{+.shower.list .slide *+} { | |
| [-visibility: visible;-]{+pointer-events: none;+} } | |
| [-.list-]{+.shower.list+} .slide footer { | |
| display: block; } | |
| [-.full-]{+.shower.list .badge {+} | |
| {+ display: block; }+} | |
| {+ .shower.full+} { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| overflow: hidden; | |
| margin: [--320px-]{+-384px+} 0 0 -512px; | |
| width: 1024px; | |
| height: [-640px;-]{+768px;+} | |
| background: #000; } | |
| [-.full.debug:after-]{+.shower.full .slide+} { | |
| position: absolute; | |
| top: 0; | |
| [- right: 0;-] | |
| [- bottom: 0;-] | |
| left: 0; | |
| [-z-index: 2;-]{+margin-left: -150%;+} | |
| {+ visibility: hidden; }+} | |
| {+ .shower.full .slide:target {+} | |
| {+ margin: 0;+} | |
| {+ visibility: visible; }+} | |
| {+ .shower.full .slide pre code:not(:only-child).mark.next {+} | |
| {+ visibility: visible;+} | |
| background: [-url(../images/grid-16x10.svg) no-repeat;-] | |
| [- content: '';-]{+none;+} } | |
| [-.full-]{+.shower.full+} .slide {+pre code:not(:only-child).mark.next.active+} { | |
| [-position: absolute;-] | |
| [- top: 0;-] | |
| [- left: 0;-] | |
| [- margin-left: 150%;-]{+background: rgba(88, 90, 94, 0.1);+} } | |
| [-.full-]{+.shower.full+} .slide .next { | |
| visibility: hidden; } | |
| [-.full-]{+.shower.full+} .slide .next.active { | |
| visibility: visible; } | |
| [-.full .slide:target {-] | |
| [- margin: 0; }-] | |
| [- .full .slide.shout.grow h2, .full .slide.shout.shrink h2-]{+.shower.full .slide .shout.grow, .shower.full .slide .shout.shrink+} { | |
| opacity: 0; | |
| {+-webkit-transition: 0.4s ease-out;+} | |
| transition:[-all-] 0.4s ease-out; | |
| {+-webkit-transition-property: opacity, -webkit-transform;+} | |
| {+ transition-property: opacity, -webkit-transform;+} | |
| {+ transition-property: opacity, transform;+} | |
| {+ transition-property: opacity, transform, -webkit-transform;+} } | |
| [-.full .slide.shout.grow:target h2, .full .slide.shout.shrink:target h2 {-] | |
| [- opacity: 1;-] | |
| [- -webkit-transform: scale(1) translateY(-50%);-] | |
| [- transform: scale(1) translateY(-50%); }-] | |
| [- .full .slide.shout.grow h2-]{+.shower.full .slide .shout.grow+} { | |
| -webkit-transform: scale(0.1) translateY(-50%); | |
| transform: scale(0.1) translateY(-50%); } | |
| [-.full .slide.shout.shrink h2-]{+.shower.full .slide .shout.shrink+} { | |
| -webkit-transform: scale(10) translateY(-50%); | |
| transform: scale(10) translateY(-50%); } | |
| [-.full-]{+.shower.full .slide:target .shout.grow, .shower.full .slide:target .shout.shrink {+} | |
| {+ opacity: 1;+} | |
| {+ -webkit-transform: scale(1) translateY(-50%);+} | |
| {+ transform: scale(1) translateY(-50%); }+} | |
| {+ .shower.full+} .progress { | |
| {+display: block;+} | |
| {+ -webkit-transform: translateZ(0);+} | |
| {+ transform: translateZ(0); }+} | |
| {+ .shower.full .region {+} | |
| position: absolute; | |
| [-right: 0;-] | |
| [- bottom: 0;-] | |
| [- left: 0;-]{+clip: rect(0 0 0 0);+} | |
| overflow: hidden; | |
| [-height: 10px;-] | |
| [- z-index: 1; }-] | |
| [- .full .progress div {-] | |
| [- position: absolute;-] | |
| [- left: -20px;-] | |
| [- top: -10px;-] | |
| [- width:-]{+margin: -1px;+} | |
| {+ padding:+} 0; | |
| {+width: 1px;+} | |
| height: [-0;-]{+1px;+} | |
| border: [-10px solid transparent;-] | |
| [- border-bottom-color: #4B86C2;-] | |
| [- transition: width 0.2s linear; }-] | |
| [- .full .progress div[style$='100%;'] {-] | |
| [- padding-left: 10px; }-]{+none;+} | |
| {+ display: block;+} }[-@page {-] | |
| [- margin: 0;-] | |
| [- size: 1024px 640px;-] }[-/*# sourceMappingURL=screen.css.map */-] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment