diff --git a/Contributing.md b/Contributing.md new file mode 100644 index 0000000..948e93c --- /dev/null +++ b/Contributing.md @@ -0,0 +1,3 @@ +# Contributing to Shower + +No spaces, tabs only \ No newline at end of file diff --git a/README.md b/README.md index 4a4b18a..330aa10 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,8 @@ # Shower + Сross-browser presentation template. -- Open [pepelsbey.github.com/shower/en.htm](http://pepelsbey.github.com/shower/en.htm) +- Open [pepelsbey.github.com/shower/](http://pepelsbey.github.com/shower/) - Click any slide to enter presentation mode - Use arrow keys to navigate - Press `Esc` to exit presentation mode @@ -25,6 +26,7 @@ Please address bugs and your suggestions to [Issues](http://github.com/pepelsbey ## Usage examples +- [Clear and Sharp](http://pepelsbey.net/pres/clear-and-sharp/) - [CSS Management](http://pepelsbey.net/pres/css-management/) - [Push it!](http://pepelsbey.net/pres/push-it/) - [Pre-fixes](http://pepelsbey.net/pres/pre-fixes/) @@ -32,42 +34,4 @@ Please address bugs and your suggestions to [Issues](http://github.com/pepelsbey - [Sense Coding](http://pepelsbey.net/pres/sense-coding/) - [Dynamic Graphics](http://pepelsbey.net/pres/dynamic-graphics/) -Licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License), see [license page](shower/wiki/The-MIT-License) for details. - ---- - -# Shower -Кроссбраузерный шаблон для презентаций - -- Откройте [pepelsbey.github.com/shower/ru.htm](http://pepelsbey.github.com/shower/ru.htm) -- Кликните по любому слайду для перехода в режим презентации -- Используйте клавиши со стрелками для навигации -- Нажмите `Esc` для выхода из режима презентации - -Подробнее о том, как использовать для навигации только клавиатуру, [читайте в документации](shower/wiki/Клавиатура). - -Читайте новости и задавайте вопросы [@shower_me](http://twitter.com/shower_me/) в Твиттере. - -## Поддерживаемые браузеры - -- Десктопные: Chrome, Firefox, Opera, Safari - -Поддеживаются только последние стабильные версии указанных браузеров. - -## Планируемая поддержка - -- Десктопные: IE10 -- Мобильные: Mobile Safari, Opera Mobile - -Сообщения об ошибках и пожелания оставляйте в разделе [Issues](http://github.com/pepelsbey/shower/issues). - -## Примеры использования - -- [CSS-менеджмент](http://pepelsbey.net/pres/css-management/) -- [Жми сюда!](http://pepelsbey.net/pres/push-it/) -- [Пре-фиксы](http://pepelsbey.net/pres/pre-fixes/) -- [Веб в кривых](http://pepelsbey.net/pres/web-in-curves/) -- [Вёрстка со смыслом](http://pepelsbey.net/pres/sense-coding/) -- [Динамическая графика](http://pepelsbey.net/pres/dynamic-graphics/) - -Лицензировано под [лицензией MIT](http://ru.wikipedia.org/wiki/Лицензия_MIT), читайте подробнее [на странице лицензии](shower/wiki/Лицензия-MIT). \ No newline at end of file +Licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License), see [license page](shower/wiki/MIT-License) for details. \ No newline at end of file diff --git a/en.htm b/en.htm deleted file mode 100755 index 37254e9..0000000 --- a/en.htm +++ /dev/null @@ -1,198 +0,0 @@ - - - - Shower Presentation Template - - - - - - - - -
-

Shower Presentation Template

-

Vadim Makeev, Opera Software

-
-
-
-
-

Shower Presentation Template

-
- -
-
- -
-
-
-

Two rows.
Mighty heading

-
-

This <tool> is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser.

-
-
-
-
-
-

Unordered List

-
-
    -
  • This tool is provided
    • -
  • Without warranty, guarantee
    • -
  • Or much in the way of explanation -
      -
    1. Note that use of this tool
      2. -
    2. May or may not crash your browser
      3. -
    3. Lock up your machine
      4. -
    -
    • -
  • Erase your hard drive.
    • -
-
-
-
-
-
-

Ordered List

-
-
    -
  1. Note that use of this tool
    2. -
  2. Erase your hard drive.
    3. -
  3. May or may not crash your browser -
      -
    • This tool is provided
      • -
    • Or much in the way of explanation
      • -
    • Without warranty, guarantee
      • -
    -
    4. -
  4. Lock up your machine
    5. -
-
-
-
-
-
-

In the Middle

-
- - - -
-
-
-
-
-

Fit to height

-
- -
-
-
-
-
-

Fit to width

-
- -
-
-
-
-
-

Code Sample

-
- 
-				<html lang="en-US">
-				<head>
-				    <title>Shower</title>
-				    <meta charset="UTF-8">
-				    <link rel="stylesheet" href="s/screen.css">
-				    <script src="j/jquery.js"></script>
-				</head>
-
-
-
-
-
-
-

Code Notes

-
- 
-				<html lang="en-US">
-
-

May or may not crash your browser

- 
-				<meta charset="UTF-8">
-
-

Lock up your machine

-
-
-
-
-
-

Warning
Message

-
-
-
-
-
-
-

Demo

-
-
-
-
-
-
-

Block Quote

-
-
-

This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive.

-
-
-
-
-
-
-

Shower Presentation Template

-
-

Vadim Makeev, Opera Software

- -

Shower: github.com/pepelsbey/shower

-
-
- -
- - - - - \ No newline at end of file diff --git a/examples/index.htm b/examples/index.htm deleted file mode 100644 index 239bc12..0000000 --- a/examples/index.htm +++ /dev/null @@ -1,25 +0,0 @@ - - - - Shower - - - - -

★ Demo ★

- - \ No newline at end of file diff --git a/index.html b/index.html new file mode 100755 index 0000000..c2a9730 --- /dev/null +++ b/index.html @@ -0,0 +1,130 @@ + + + + Shower Presentation Template + + + + + + + + +
+

Shower Presentation Template

+

Vadim Makeev, Opera Software

+
+
+

Shower Presentation Template

+ +
+
+

Slide with timer

+

It will change right in five seconds

+
+
+

Heading

+

In your slides text you can use links and various inline elements for emotional and strong emphasis or just for italic or bold decoration. <code> is used for inline code samples.

+
+
+

Two rows.
Mighty heading

+

You can use two lines header but it would reduce space on a slide. The “Ribbon” theme is designed for seven lines of code after one-line header by default.

+

This paragraph could be used as a footnote

+
+
+

Various lists

+ +
+
+

Serious citation

+
+
+

You can wrap one or more paragraphs into citation, which will make text italic and add a nice quote on the left. Giving the citation source would make it even more serious.

+
+
Vadim Makeev
+
+
+
+

When you have a lot of code

+ 
+			<html lang="en">
+			<head> <!--Comment-->
+			    <title>Shower</title>
+			    <meta charset="UTF-8">
+			    <link rel="stylesheet" href="s/screen.css">
+			    <script src="j/jquery.js"></script>
+			</head>
+
+
+
+

Code in separate blocks

+ 
+			<html lang="en">
+
+

Now you can add a note for each block

+ 
+			<meta charset="UTF-8">
+
+

And explain what is interesting about it

+
+
+

You can shout
this way

+
+
+

And place any picture

+ +
+
+

Inner navigation

+
    +
  1. Lets you change objects one by one
    2. + + + + +
+
+
+

Shower Presentation Template

+

Vadim Makeev, Opera Software

+ +

Shower: github.com/pepelsbey/shower

+
+ +
+ + + + + \ No newline at end of file diff --git a/license.txt b/license.txt index a06f506..50f20e4 100644 --- a/license.txt +++ b/license.txt @@ -18,30 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -THE SOFTWARE. - -- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Лицензия MIT - -Copyright © 2010–2012 Вадим Макеев, http://pepelsbey.net/ - -Данная лицензия разрешает лицам, получившим копию данного программного обеспечения -и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), -безвозмездно использовать Программное Обеспечение без ограничений, включая -неограниченное право на использование, копирование, изменение, добавление, -публикацию, распространение, сублицензирование и/или продажу копий -Программного Обеспечения, также как и лицам, которым предоставляется -данное Программное Обеспечение, при соблюдении следующих условий: - -Указанное выше уведомление об авторском праве и данные условия должны быть -включены во все копии или значимые части данного Программного Обеспечения. - -ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, -ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ -ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. -НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ -О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, -ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ -ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ -С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ. \ No newline at end of file +THE SOFTWARE. \ No newline at end of file diff --git a/pictures/picture.jpg b/pictures/picture.jpg index e6c543b..681816c 100644 Binary files a/pictures/picture.jpg and b/pictures/picture.jpg differ diff --git a/ru.htm b/ru.htm deleted file mode 100755 index a19accd..0000000 --- a/ru.htm +++ /dev/null @@ -1,198 +0,0 @@ - - - - Шаблон презентаций Shower - - - - - - - - -
-

Шаблон презентаций Shower

-

Вадим Макеев, Opera Software

-
-
-
-
-

Шаблон презентации Shower

-
- -
-
- -
-
-
-

Две строки.
Мощный заголовок

-
-

Очередь заведено создаете те про, джоэл должен написано вы всю. Получаете отказаться программистов миф мы, не пишете размере количества нее, по две.

-
-
-
-
-
-

Неупорядоченный список

-
-
    -
  • Очередь заведено создаете
    • -
  • Те про, джоэл должен написано вы всю
    • -
  • Получаете отказаться программистов -
      -
    1. Миф мы, не пишете размере
      2. -
    2. Количества нее, по две
      3. -
    3. Заведено безостановочно
      4. -
    -
    • -
  • Ещё то этой вреде внешних.
    • -
-
-
-
-
-
-

Упорядоченный список

-
-
    -
  1. Миф мы, не пишете размере
    2. -
  2. Ещё то этой вреде внешних
    3. -
  3. Заведено безостановочно -
      -
    • Очередь заведено создаете
      • -
    • Те про, джоэл должен написано вы всю
      • -
    • Получаете отказаться программистов
      • -
    -
    4. -
  4. Количества нее, по две
    5. -
-
-
-
-
-
-

Посередине

-
- - - -
-
-
-
-
-

Вписана по высоте

-
- -
-
-
-
-
-

Вписана по ширине

-
- -
-
-
-
-
-

Пример кода

-
- 
-				<html lang="ru-RU">
-				<head>
-				    <title>Shower</title>
-				    <meta charset="UTF-8">
-				    <link rel="stylesheet" href="s/screen.css">
-				    <script src="j/jquery.js"></script>
-				</head>
-
-
-
-
-
-
-

Заметки к коду

-
- 
-				<html lang="ru-RU">
-
-

Получаете отказаться программистов

- 
-				<meta charset="UTF-8">
-
-

Заведено безостановочно

-
-
-
-
-
-

Опасносте
сообщение

-
-
-
-
-
-
-

Демо

-
-
-
-
-
-
-

Цитата

-
-
-

Очередь заведено создаете те про, джоэл должен написано вы всю. Получаете отказаться программистов миф мы, не пишете размере количества нее, по две.

-
-
-
-
-
-
-

Шаблон презентаций Shower

-
-

Вадим Макеев, Opera Software

- -

Shower: github.com/pepelsbey/shower

-
-
- -
- - - - - \ No newline at end of file diff --git a/scripts/script.js b/scripts/script.js index 00e2c39..2c0c126 100755 --- a/scripts/script.js +++ b/scripts/script.js @@ -1,38 +1,76 @@ -window.shower = (function () { - var _ = {}, +window.shower = (function(window, document, undefined) { + var shower = {}, url = window.location, body = document.body, - slides = document.querySelectorAll('div.slide'), + slides = document.querySelectorAll('.slide'), progress = document.querySelector('div.progress div'), slideList = [], + timer, + isHistoryApiSupported = !!(window.history && history.pushState), l = slides.length, i; + /** + * Get value at named data store for the DOM element. + * @private + * @param {domElem} element + * @param {string} name + * @returns {string} + */ + shower._getData = function(element, name) { + return element.dataset ? element.dataset[name] : element.getAttribute('data-' + name); + } + for (i = 0; i < l; i++) { + // Slide ID's are optional. In case of missing ID we set it to the + // slide number + if ( ! slides[i].id) { + slides[i].id = i + 1; + } + slideList.push({ id: slides[i].id, - hasInnerNavigation: null !== slides[i].querySelector('.inner') + hasInnerNavigation: null !== slides[i].querySelector('.next'), + hasTiming: (shower._getData(slides[i], 'timing') && shower._getData(slides[i], 'timing').indexOf(':') !== -1) }); } - function getTransform() { + /** + * Get slide scale value + * @private + * @returns {String} + */ + shower._getTransform = function() { var denominator = Math.max( body.clientWidth / window.innerWidth, body.clientHeight / window.innerHeight ); return 'scale(' + (1 / denominator) + ')'; - } + }; - function applyTransform(transform) { + /** + * Set CSS transform with prefixes to body + * @private + * @returns {true} + */ + shower._applyTransform = function(transform) { body.style.WebkitTransform = transform; body.style.MozTransform = transform; body.style.msTransform = transform; body.style.OTransform = transform; body.style.transform = transform; - } - _.next = function () { - var currentSlideNumber = _.getCurrentSlideNumber(); + return true; + }; + + /** + * Show next slide. If slide is last returns false, otherwise return slide + * number which been shown. + * @returns {number|false} + */ + shower.next = function () { + var currentSlideNumber = shower.getCurrentSlideNumber(), + ret; // Only go to next slide if current slide have no inner // navigation or inner navigation is fully shown @@ -40,188 +78,441 @@ window.shower = (function () { if ( -1 === currentSlideNumber || !slideList[currentSlideNumber].hasInnerNavigation || - -1 === increaseInnerNavigation(currentSlideNumber) + -1 === shower.increaseInnerNavigation(currentSlideNumber) ) { - currentSlideNumber++; - _.go(currentSlideNumber); + shower.go(currentSlideNumber + 1); + // slides starts from 0 + ret = currentSlideNumber + 2; + } else { + ret = false; } - } - _.previous = function () { - _.go(_.getCurrentSlideNumber() - 1); - } - _.first = function() { - _.go(0) - } - _.last = function() { - _.go(slideList.length - 1); - } - _.enterSlideMode = function() { - body.className = 'full'; - applyTransform(getTransform()); - } + return ret; + }; - _.enterListMode = function() { - body.className = 'list'; - applyTransform('none'); - } + /** + * Show previous slide. If slide is first returns false, otherwise return slide + * number which been shown. + * @returns {number|false} + */ + shower.previous = function () { + var currentSlideNumber = shower.getCurrentSlideNumber(), + ret; - _.getCurrentSlideNumber = function() { - var i, l = slideList.length, + // slides starts from 0 + if (currentSlideNumber > 0) { + ret = currentSlideNumber; + shower.go(currentSlideNumber - 1); + } else { + ret = false; + } + + return ret; + }; + + /** + * Show first slide. + * @returns {number} + */ + shower.first = function() { + return shower.go(0); + }; + + /** + * Show last slide. + * @returns {number} + */ + shower.last = function() { + return shower.go(slideList.length - 1); + }; + + /** + * Switch to slide view. + * @returns {number} + */ + shower.enterSlideMode = function() { + // @TODO: check if it's already in slide mode... + body.classList.remove('list'); + body.classList.add('full'); + return shower._applyTransform(shower._getTransform()); + }; + + /** + * Switch to list view. + * @returns {number} + */ + shower.enterListMode = function() { + // @TODO: check if it's already in list mode... + body.classList.remove('full'); + body.classList.add('list'); + return shower._applyTransform('none'); + }; + + // @TODO: add method shower.toggleMode() + + /** + * Get current slide number. Starts from zero. Warning: when in url you have + * slide number 1 this method will return 0. + * If something wrong return -1. + * @returns {number} + */ + shower.getCurrentSlideNumber = function() { + var i = slideList.length - 1, currentSlideId = url.hash.substr(1); - for (i = 0; i < l; ++i) { + // As fast as you can ;-) + // http://jsperf.com/for-vs-foreach/46 + for (; i >= 0; --i) { if (currentSlideId === slideList[i].id) { return i; } } return -1; - } + }; - function scrollToSlide(slideNumber) { - if (-1 === slideNumber ) { return; } + /** + * Check if arg is number. + * @private + * @param {number|whatelse} arg Any type + * @returns {boolean} + */ + shower._isNumber = function(arg) { + if(! ( ! isNaN(parseFloat(arg)) && isFinite(arg))) { + return false; + } - var currentSlide = document.getElementById(slideList[slideNumber].id); + return true; + }; - if (null != currentSlide) { + /** + * Scroll to slide. + * @param {number} slideNumber slide number (sic!) + * @returns {undefined|boolean} + */ + shower.scrollToSlide = function(slideNumber) { + var currentSlide, + ret; + + if( ! shower._isNumber(slideNumber)) { + throw new Error('Gimme slide number as number, baby!'); + } + + if( ! shower.isListMode()) { + throw new Error('You can\'t to scroll cause you in slide mode. Please, switch to list mode.'); + } + + // @TODO: WTF? + if (-1 === slideNumber) { + return; + } + + if (slideList[slideNumber]) { + currentSlide = document.getElementById(slideList[slideNumber].id); window.scrollTo(0, currentSlide.offsetTop); - } - } - - _.isListMode = function() { - return 'full' !== url.search.substr(1); - } - - function normalizeSlideNumber(slideNumber) { - if (0 > slideNumber) { - return slideList.length - 1; - } else if (slideList.length <= slideNumber) { - return 0; + ret = true; } else { - return slideNumber; - } - } - - _.updateProgress = function(slideNumber) { - if (null === progress) { return; } - progress.style.width = (100 / (slideList.length - 1) * normalizeSlideNumber(slideNumber)).toFixed(2) + '%'; - } - - _.getSlideHash = function(slideNumber) { - return '#' + slideList[normalizeSlideNumber(slideNumber)].id; - } - - _.go = function(slideNumber) { - url.hash = _.getSlideHash(slideNumber); - - if (!_.isListMode()) { - _.updateProgress(slideNumber); + throw new Error('There is no slide with number ' + slideNumber); } - if (typeof _.onchange == 'function') - _.onchange(slideNumber); - } + return ret; + }; - function getContainingSlideId(el) { - var node = el; - while ('BODY' !== node.nodeName && 'HTML' !== node.nodeName) { - if (node.classList.contains('slide')) { - return node.id; + /** + * Chech if it's list mode. + * @returns {boolean} + */ + shower.isListMode = function() { + return isHistoryApiSupported ? 'full' !== url.search.substr(1) : body.classList.contains('list'); + }; + + /** + * Normalize slide number. + * @private + * @param {number} slideNumber slide number (sic!) + * @returns {number} + */ + shower._normalizeSlideNumber = function(slideNumber) { + if( ! shower._isNumber(slideNumber)) { + throw new Error('Gimme slide number as number, baby!'); + } + + if (slideNumber < 0) { + slideNumber = 0; + } + + if (slideNumber >= slideList.length) { + slideNumber = slideList.length - 1; + } + + return slideNumber; + }; + + /** + * Update progress bar. + * @param {number} slideNumber slide number (sic!) + * @returns {boolean} + */ + shower.updateProgress = function(slideNumber) { + // if progress bar doesn't exist + if (null === progress) { + return false; + } + + if( ! shower._isNumber(slideNumber)) { + throw new Error('Gimme slide number as number, baby!'); + } + + progress.style.width = (100 / (slideList.length - 1) * shower._normalizeSlideNumber(slideNumber)).toFixed(2) + '%'; + + return true; + }; + + /** + * Update current and passed slides. + * @param {number} slideNumber slide number (sic!) + * @returns {boolean} + */ + shower.updateCurrentAndPassedSlides = function(slideNumber) { + var i, + slide, + l = slideList.length; + + slideNumber = shower._normalizeSlideNumber(slideNumber); + + if( ! shower._isNumber(slideNumber)) { + throw new Error('Gimme slide number as number, baby!'); + } + + for (i = 0; i < l; ++i) { + slide = document.getElementById(slideList[i].id); + + if (i < slideNumber) { + slide.classList.remove('current'); + slide.classList.add('passed'); + } else if (i > slideNumber) { + slide.classList.remove('passed'); + slide.classList.remove('current'); } else { - node = node.parentNode; + slide.classList.remove('passed'); + slide.classList.add('current'); + } + } + + return true; + }; + + /** + * Get slide hash. + * @param {number} slideNumber slide number (sic!). Attention: starts from zero. + * @returns {boolean} + */ + shower.getSlideHash = function(slideNumber) { + if( ! shower._isNumber(slideNumber)) { + throw new Error('Gimme slide number as number, baby!'); + } + + slideNumber = shower._normalizeSlideNumber(slideNumber); + + return '#' + slideList[slideNumber].id; + }; + + /** + * Go to slide number... + * @param {number} slideNumber slide number (sic!). Attention: starts from zero. + * @returns {number} + */ + shower.go = function(slideNumber) { + if( ! shower._isNumber(slideNumber)) { + throw new Error('Gimme slide number as number, baby!'); + } + + url.hash = shower.getSlideHash(slideNumber); + + if ( ! shower.isListMode()) { + shower.updateProgress(slideNumber); + shower.updateCurrentAndPassedSlides(slideNumber); + } + + return slideNumber; + }; + + /** + * Get containing slide id. + * @private + * @param {domElem} el + * @returns {string} + */ + shower._getContainingSlideId = function(el) { + while ('BODY' !== el.nodeName && 'HTML' !== el.nodeName) { + if (el.classList.contains('slide')) { + return el.id; + } else { + el = el.parentNode; } } return ''; - } + }; - function dispatchSingleSlideMode(e) { - var slideId = getContainingSlideId(e.target); + /** + * Dispatch single slide mode. + * @TODO: Renaming needed? Or just some handlers rewriting? + * @private + * @param {domElem} e + * @returns {undefined} + */ + shower._dispatchSingleSlideMode = function(e) { + // Process links + // @TODO: presentation links support + if ('A' === e.target.nodeName) { + e.preventDefault(); - if ('' !== slideId && _.isListMode()) { + window.open(e.target.getAttribute('href')); + return; + } + + var slideId = shower._getContainingSlideId(e.target); + + if ('' !== slideId && shower.isListMode()) { e.preventDefault(); // NOTE: we should update hash to get things work properly url.hash = '#' + slideId; - history.replaceState(null, null, url.pathname + '?full#' + slideId); - _.enterSlideMode(); + if (isHistoryApiSupported) + history.replaceState(null, null, url.pathname + '?full#' + slideId); + shower.enterSlideMode(); - _.updateProgress(_.getCurrentSlideNumber()); + shower.updateProgress(shower.getCurrentSlideNumber()); + shower.updateCurrentAndPassedSlides(shower.getCurrentSlideNumber()); + shower.runSlideshowIfPresented(shower.getCurrentSlideNumber()); } - } - // Increases inner navigation by adding 'active' class to next inactive inner navigation item - function increaseInnerNavigation(slideNumber) { - // Shortcut for slides without inner navigation - if (true !== slideList[slideNumber].hasInnerNavigation) { return -1; } + return; + }; - var activeNodes = document.querySelectorAll(_.getSlideHash(slideNumber) + ' .active'), - // NOTE: we assume there is no other elements in inner navigation - node = activeNodes[activeNodes.length - 1].nextElementSibling; - - if (null !== node) { - node.classList.add('active'); - return activeNodes.length + 1; - } else { - return -1; + /** + * Run slide show in presented. + * @param {number} slideNumber + * @returns {undefined} + */ + shower.runSlideshowIfPresented = function(slideNumber) { + if( ! shower._isNumber(slideNumber)) { + throw new Error('Gimme slide number as number, baby!'); } - } + + slideNumber = shower._normalizeSlideNumber(slideNumber); + + clearTimeout(timer); + + if (slideList[slideNumber].hasTiming) { + // Compute number of milliseconds from format "X:Y", where X is + // number of minutes, and Y is number of seconds + var timing = shower._getData(document.getElementById(slideList[slideNumber].id), 'timing').split(':'); + timing = parseInt(timing[0], 10) * 60 * 1000 + parseInt(timing[1], 10) * 1000; + + timer = setTimeout(function() { + shower.go(slideNumber + 1); + shower.runSlideshowIfPresented(slideNumber + 1); + }, + timing); + } + }; + + /** + * Increases inner navigation by adding 'active' class to next inactive inner navigation item + * @param {number} slideNumber + * @returns {number} + */ + shower.increaseInnerNavigation = function(slideNumber) { + var nextNodes, + node, + ret = -1; + + if( ! shower._isNumber(slideNumber)) { + throw new Error('Gimme slide number as number, baby!'); + } + + // If inner navigation in this slide... + if (slideList[slideNumber].hasInnerNavigation) { + nextNodes = document.getElementById(slideList[slideNumber].id).querySelectorAll('.next:not(.active)'); + + if (0 !== nextNodes.length) { + node = nextNodes[0]; + node.classList.add('active'); + ret = nextNodes.length - 1; + } + } + + return ret; + }; + + + // Event handlers window.addEventListener('DOMContentLoaded', function () { - if (!_.isListMode()) { + if ( ! shower.isListMode()) { // "?full" is present without slide hash, so we should display first slide - if (-1 === _.getCurrentSlideNumber()) { - history.replaceState(null, null, url.pathname + '?full' + _.getSlideHash(0)); + if (-1 === shower.getCurrentSlideNumber()) { + if (isHistoryApiSupported) + history.replaceState(null, null, url.pathname + '?full' + shower.getSlideHash(0)); } - _.enterSlideMode(); - _.updateProgress(_.getCurrentSlideNumber()); + shower.enterSlideMode(); + shower.updateProgress(shower.getCurrentSlideNumber()); + shower.updateCurrentAndPassedSlides(shower.getCurrentSlideNumber()); + shower.runSlideshowIfPresented(shower.getCurrentSlideNumber()); } }, false); window.addEventListener('popstate', function (e) { - if (_.isListMode()) { - _.enterListMode(); - scrollToSlide(_.getCurrentSlideNumber()); + if (shower.isListMode()) { + shower.enterListMode(); + shower.scrollToSlide(shower.getCurrentSlideNumber()); } else { - _.enterSlideMode(); + shower.enterSlideMode(); } }, false); window.addEventListener('resize', function (e) { - if (!_.isListMode()) { - applyTransform(getTransform()); + if ( ! shower.isListMode()) { + shower._applyTransform(shower._getTransform()); } }, false); document.addEventListener('keydown', function (e) { // Shortcut for alt, shift and meta keys if (e.altKey || e.ctrlKey || e.metaKey) { return; } - var currentSlideNumber = _.getCurrentSlideNumber(); + + var currentSlideNumber = shower.getCurrentSlideNumber(), + innerNavigationCompleted = true; switch (e.which) { case 116: // F5 case 13: // Enter - if (_.isListMode() && -1 !== currentSlideNumber) { + if (shower.isListMode() && -1 !== currentSlideNumber) { e.preventDefault(); - history.pushState(null, null, url.pathname + '?full' + _.getSlideHash(currentSlideNumber)); - _.enterSlideMode(); + if (isHistoryApiSupported) + history.pushState(null, null, url.pathname + '?full' + shower.getSlideHash(currentSlideNumber)); + shower.enterSlideMode(); - _.updateProgress(currentSlideNumber); + shower.updateProgress(currentSlideNumber); + shower.updateCurrentAndPassedSlides(currentSlideNumber); + shower.runSlideshowIfPresented(currentSlideNumber); } break; case 27: // Esc - if (!_.isListMode()) { + if ( ! shower.isListMode()) { e.preventDefault(); - history.pushState(null, null, url.pathname + _.getSlideHash(currentSlideNumber)); - _.enterListMode(); - scrollToSlide(currentSlideNumber); + if (isHistoryApiSupported) + history.pushState(null, null, url.pathname + shower.getSlideHash(currentSlideNumber)); + shower.enterListMode(); + shower.scrollToSlide(currentSlideNumber); } break; @@ -231,7 +522,7 @@ window.shower = (function () { case 72: // h case 75: // k e.preventDefault(); - _.previous(); + shower.previous(); break; case 34: // PgDown @@ -241,24 +532,46 @@ window.shower = (function () { case 74: // j e.preventDefault(); - _.next(); + if ( ! shower.isListMode()) { + // Inner navigation is "completed" if current slide have + // no inner navigation or inner navigation is fully shown + innerNavigationCompleted = !slideList[currentSlideNumber].hasInnerNavigation || + -1 === shower.increaseInnerNavigation(currentSlideNumber); + } else { + // Also inner navigation is always "completed" if we are in + // list mode + innerNavigationCompleted = true; + } + // NOTE: First of all check if there is no current slide + if ( + -1 === currentSlideNumber || innerNavigationCompleted + ) { + currentSlideNumber++; + shower.go(currentSlideNumber); + // We must run slideshow only in full mode + if ( ! shower.isListMode()) { + shower.runSlideshowIfPresented(currentSlideNumber); + } + } break; case 36: // Home e.preventDefault(); - _.first(); + + shower.first(); break; case 35: // End e.preventDefault(); - _.last(); + + shower.last(); break; case 9: // Tab = +1; Shift + Tab = -1 case 32: // Space = +1; Shift + Space = -1 e.preventDefault(); - _[e.shiftKey ? 'previous' : 'next'](); + shower[e.shiftKey ? 'previous' : 'next'](); break; default: @@ -266,12 +579,12 @@ window.shower = (function () { } }, false); - document.addEventListener('click', dispatchSingleSlideMode, false); - document.addEventListener('touchend', dispatchSingleSlideMode, false); + document.addEventListener('click', shower._dispatchSingleSlideMode, false); + document.addEventListener('touchend', shower._dispatchSingleSlideMode, false); document.addEventListener('touchstart', function (e) { - if (!_.isListMode()) { - var currentSlideNumber = _.getCurrentSlideNumber(), + if ( ! shower.isListMode()) { + var currentSlideNumber = shower.getCurrentSlideNumber(), x = e.touches[0].pageX; if (x > window.innerWidth / 2) { currentSlideNumber++; @@ -279,15 +592,16 @@ window.shower = (function () { currentSlideNumber--; } - _.go(currentSlideNumber); + shower.go(currentSlideNumber); } }, false); document.addEventListener('touchmove', function (e) { - if (!_.isListMode()) { + if ( ! shower.isListMode()) { e.preventDefault(); } }, false); - return _; -}()); + return shower; + +})(this, this.document); diff --git a/themes/ribbon/fonts/PTSans.Narrow.svg b/themes/ribbon/fonts/PTSans.Narrow.svg deleted file mode 100644 index 3610602..0000000 --- a/themes/ribbon/fonts/PTSans.Narrow.svg +++ /dev/null @@ -1,728 +0,0 @@ - - - - -Generated by SVGconv. -Copyright : Copyright 2009 ParaType Ltd. All rights reserved. -Designer : A.Korolkova, O.Umpeleva, V.Yefimov -Foundry : ParaType Ltd -Foundry URL : http://www.paratype.com - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/themes/ribbon/fonts/PTSans.Narrow.ttf b/themes/ribbon/fonts/PTSans.Narrow.ttf deleted file mode 100644 index c48b4a6..0000000 Binary files a/themes/ribbon/fonts/PTSans.Narrow.ttf and /dev/null differ diff --git a/themes/ribbon/fonts/PTSans.Narrow.woff b/themes/ribbon/fonts/PTSans.Narrow.woff deleted file mode 100644 index 4267d7a..0000000 Binary files a/themes/ribbon/fonts/PTSans.Narrow.woff and /dev/null differ diff --git a/themes/ribbon/fonts/TargetBlank.otf b/themes/ribbon/fonts/TargetBlank.otf deleted file mode 100644 index 796024d..0000000 Binary files a/themes/ribbon/fonts/TargetBlank.otf and /dev/null differ diff --git a/themes/ribbon/fonts/TargetBlank.svg b/themes/ribbon/fonts/TargetBlank.svg deleted file mode 100644 index 6b33703..0000000 --- a/themes/ribbon/fonts/TargetBlank.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - Designer: Vadim Makeev - - - - - - - - - - \ No newline at end of file diff --git a/themes/ribbon/images/grid-16x10.png b/themes/ribbon/images/grid-16x10.png new file mode 100644 index 0000000..fee272b Binary files /dev/null and b/themes/ribbon/images/grid-16x10.png differ diff --git a/themes/ribbon/images/grid-4x3.png b/themes/ribbon/images/grid-4x3.png new file mode 100644 index 0000000..978d731 Binary files /dev/null and b/themes/ribbon/images/grid-4x3.png differ diff --git a/themes/ribbon/images/grid.png b/themes/ribbon/images/grid.png deleted file mode 100644 index 0e07860..0000000 Binary files a/themes/ribbon/images/grid.png and /dev/null differ diff --git a/themes/ribbon/images/ribbon.svg b/themes/ribbon/images/ribbon.svg index 02b2a89..ea47ff8 100644 --- a/themes/ribbon/images/ribbon.svg +++ b/themes/ribbon/images/ribbon.svg @@ -1,4 +1,3 @@ - - - + + \ No newline at end of file diff --git a/themes/ribbon/index.html b/themes/ribbon/index.html new file mode 100644 index 0000000..7a5850b --- /dev/null +++ b/themes/ribbon/index.html @@ -0,0 +1,137 @@ + + + + Ribbon theme for Shower + + + + + + +
+

Presentation Title

+

Author Name

+
+
+

Header

+

Typewriter etsy messenger bag fingerstache, aesthetic vinyl semiotics twee DIY forage chillwave. Thundercats ennui messenger bag, squid carles chillwave shoreditch pickled cliche letterpress. DIY beard locavore occupy salvia, whatever single-origin coffee fanny pack 3 wolf moon typewriter gastropub kale chips.

+

Secondary footnote.

+
+
+

Lists in Enlish typography

+ +
+
+

Lists in Russian typography

+ +
+
+

Quote

+
+
+

Typewriter etsy messenger bag fingerstache, aesthetic vinyl semiotics twee DIY forage chillwave. Thundercats ennui messenger bag, squid carles chillwave shoreditch pickled cliche letterpress. DIY beard locavore occupy salvia, whatever single-origin coffee fanny pack 3 wolf moon typewriter gastropub kale chips.

+
+
Author Name
+
+
+
+

Code listing

+ 
+			<html lang="en">
+			<head> <!--Comment-->
+			    <title>Shower</title>
+			    <meta charset="UTF-8">
+			    <link rel="stylesheet" href="s/screen.css">
+			    <script src="j/jquery.js"></script>
+			</head>
+
+
+
+

Code listing

+ 
<html lang="en">
+<head> <!--Comment-->
+    <title>Shower</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="s/screen.css">
+    <script src="j/jquery.js"></script>
+</head>
+
+
+

Shout

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + + + + + + + +
+
+

Timer

+

Three seconds to go.

+
+
+

List navigation

+
    +
  1. Ennui keffiyeh thundercats
    2. + + + + + + +
+
+ +
+ + + + \ No newline at end of file diff --git a/themes/ribbon/pictures/exact.png b/themes/ribbon/pictures/exact.png new file mode 100644 index 0000000..ba73bb2 Binary files /dev/null and b/themes/ribbon/pictures/exact.png differ diff --git a/themes/ribbon/pictures/square.png b/themes/ribbon/pictures/square.png new file mode 100644 index 0000000..3ed628b Binary files /dev/null and b/themes/ribbon/pictures/square.png differ diff --git a/themes/ribbon/pictures/tall.png b/themes/ribbon/pictures/tall.png new file mode 100644 index 0000000..dcf670a Binary files /dev/null and b/themes/ribbon/pictures/tall.png differ diff --git a/themes/ribbon/pictures/wide.png b/themes/ribbon/pictures/wide.png new file mode 100644 index 0000000..35fae64 Binary files /dev/null and b/themes/ribbon/pictures/wide.png differ diff --git a/themes/ribbon/styles/defaults.scss b/themes/ribbon/styles/defaults.scss new file mode 100644 index 0000000..1094ee8 --- /dev/null +++ b/themes/ribbon/styles/defaults.scss @@ -0,0 +1,38 @@ +// 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 + +// Layout +$width:1024px; // Slide width, permanent in most cases +$height:640px; // Slide height, 640px for 16/10, 768px for 4/3 +$top:71px; // Top padding above slide content +$sides:120px; // Left and right paddings around slide content +$break:1324px; // Window width for small thumbnails to appear +$grid:''; + +// Mixins +@mixin tab-size($n) { + -moz-tab-size:$n; + -o-tab-size:$n; + tab-size:$n; + } +@mixin transform($n) { + -webkit-transform:$n; + -moz-transform:$n; + -ms-transform:$n; + -o-transform:$n; + transform:$n; + } +@mixin transform-origin($n) { + -webkit-transform-origin:$n; + -moz-transform-origin:$n; + -ms-transform-origin:$n; + -o-transform-origin:$n; + transform-origin:$n; + } +@mixin transition($n) { + -webkit-transition:$n; + -moz-transition:$n; + -o-transition:$n; + transition:$n; + } \ No newline at end of file diff --git a/themes/ribbon/styles/fonts.css b/themes/ribbon/styles/fonts.css deleted file mode 100755 index 71a4828..0000000 --- a/themes/ribbon/styles/fonts.css +++ /dev/null @@ -1,64 +0,0 @@ -/* PTSans */ -@font-face { - font-family:'PT Sans'; - src:local('PT Sans'), local('PTSansRegular'), - url(../fonts/PTSans.woff) format('woff'), - url(../fonts/PTSans.ttf) format('truetype'), - url(../fonts/PTSans.svg#PTSans-Regular) format('svg'); - } -@font-face { - font-weight:bold; - font-family:'PT Sans'; - src:local('PT Sans Bold'), local('PTSansBold'), - url(../fonts/PTSans.Bold.woff) format('woff'), - url(../fonts/PTSans.Bold.ttf) format('truetype'), - url(../fonts/PTSans.Bold.svg#PTSans-Bold) format('svg'); - } -@font-face { - font-style:italic; - font-family:'PT Sans'; - src:local('PT Sans Italic'), local('PTSansItalic'), - url(../fonts/PTSans.Italic.woff) format('woff'), - url(../fonts/PTSans.Italic.ttf) format('truetype'), - url(../fonts/PTSans.Italic.svg#PTSans-Italic) format('svg'); - } -@font-face { - font-style:italic; - font-weight:bold; - font-family:'PT Sans'; - src:local('PT Sans Bold Italic'), local('PTSansBoldItalic'), - url(../fonts/PTSans.Bold.Italic.woff) format('woff'), - url(../fonts/PTSans.Bold.Italic.ttf) format('truetype'), - url(../fonts/PTSans.Bold.Italic.svg#PTSans-BoldItalic) format('svg'); - } -@font-face { - font-family:'PT Sans Narrow'; - src:local('PT Sans Narrow'), local('PTSansNarrow'), - url(../fonts/PTSans.Narrow.woff) format('woff'), - url(../fonts/PTSans.Narrow.ttf) format('truetype'), - url(../fonts/PTSans.Narrow.svg#PTSans-Narrow) format('svg'); - } -@font-face { - font-family:'PT Sans Narrow'; - font-weight:bold; - src:local('PT Sans Narrow Bold'), local('PTSansNarrowBold'), - url(../fonts/PTSans.Narrow.Bold.woff) format('woff'), - url(../fonts/PTSans.Narrow.Bold.ttf) format('truetype'), - url(../fonts/PTSans.Narrow.Bold.svg#PTSans-NarrowBold) format('svg'); - } - -/* PT Mono */ -@font-face { - font-family:'PT Mono'; - src:local('PT Mono'), local('PTMonoRegular'), - url(../fonts/PTMono.woff) format('woff'), - url(../fonts/PTMono.ttf) format('truetype'), - url(../fonts/PTMono.svg#PTMono) format('svg'); - } - -/* Linker */ -@font-face { - font-family:'Target Blank'; - src:url(../fonts/TargetBlank.otf) format('opentype'), - url(../fonts/TargetBlank.svg#TargetBlank) format('svg'); - } \ No newline at end of file diff --git a/themes/ribbon/styles/fonts.scss b/themes/ribbon/styles/fonts.scss new file mode 100755 index 0000000..3032dbd --- /dev/null +++ b/themes/ribbon/styles/fonts.scss @@ -0,0 +1,44 @@ +/* PT Sans */ +@font-face { + font-family:'PT Sans'; + src:url(../fonts/PTSans.woff) format('woff'), + url(../fonts/PTSans.ttf) format('truetype'), + url(../fonts/PTSans.svg#PTSans-Regular) format('svg'); + } +@font-face { + font-weight:bold; + font-family:'PT Sans'; + src:url(../fonts/PTSans.Bold.woff) format('woff'), + url(../fonts/PTSans.Bold.ttf) format('truetype'), + url(../fonts/PTSans.Bold.svg#PTSans-Bold) format('svg'); + } +@font-face { + font-style:italic; + font-family:'PT Sans'; + src:url(../fonts/PTSans.Italic.woff) format('woff'), + url(../fonts/PTSans.Italic.ttf) format('truetype'), + url(../fonts/PTSans.Italic.svg#PTSans-Italic) format('svg'); + } +@font-face { + font-style:italic; + font-weight:bold; + font-family:'PT Sans'; + src:url(../fonts/PTSans.Bold.Italic.woff) format('woff'), + url(../fonts/PTSans.Bold.Italic.ttf) format('truetype'), + url(../fonts/PTSans.Bold.Italic.svg#PTSans-BoldItalic) format('svg'); + } +@font-face { + font-family:'PT Sans Narrow'; + font-weight:bold; + src:url(../fonts/PTSans.Narrow.Bold.woff) format('woff'), + url(../fonts/PTSans.Narrow.Bold.ttf) format('truetype'), + url(../fonts/PTSans.Narrow.Bold.svg#PTSans-NarrowBold) format('svg'); + } + +/* PT Mono */ +@font-face { + font-family:'PT Mono'; + src:url(../fonts/PTMono.woff) format('woff'), + url(../fonts/PTMono.ttf) format('truetype'), + url(../fonts/PTMono.svg#PTMono) format('svg'); + } \ No newline at end of file diff --git a/themes/ribbon/styles/print.css b/themes/ribbon/styles/print.css index 4fd7cc0..f6f4dba 100644 --- a/themes/ribbon/styles/print.css +++ b/themes/ribbon/styles/print.css @@ -1,59 +1 @@ -/* - Ribbon theme for Shower presentation template: http://github.com/pepelsbey/shower - Copyright © 2010–2012 Vadim Makeev, http://pepelsbey.net/ - Licensed under MIT license: https://github.com/pepelsbey/shower/wiki/License -*/ - -* { -webkit-print-color-adjust:exact } - -@page { - margin:0; - size:1024px 640px; - } - -/* List ----------------------------------------- */ -.list { - float:none; - padding:0; - background:none; - } - -/* Caption */ -.list .caption { - display:none; - } - -/* Slide */ -.list .slide { - float:none; - margin:0; - padding:0; - } - .list .slide:after { - position:absolute; - bottom:85px; - left:120px; - color:#BBB; - line-height:1; - text-shadow:none; - } - .list .slide > div { - width:1024px; - height:640px; - background:none; - } - .list .slide > div, - .list .slide > div:hover, - .list .slide:target > div { - -webkit-box-shadow:none; - -moz-box-shadow:none; - box-shadow:none; - } - .list .slide section { - -webkit-transform:scale(1); - -moz-transform:scale(1); - -ms-transform:scale(1); - -o-transform:scale(1); - transform:scale(1); - } \ No newline at end of file +@page{margin:0;size:1024px 640px}.list{padding:0;background:none}.list *{-webkit-print-color-adjust:exact}.list .caption{display:none}.list .slide{float:none;margin:0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.list .slide:before{display:none}.list .slide:after{position:absolute;left:120px;bottom:80px;color:#CCC;text-shadow:none;line-height:18px;font-weight:normal;font-size:25px}.list .slide.cover,.list .slide.shout{z-index:1}.list .slide.cover:after,.list .slide.shout:after{content:''}.list .slide.cover{background:#000} diff --git a/themes/ribbon/styles/print.scss b/themes/ribbon/styles/print.scss new file mode 100644 index 0000000..1f1a4a9 --- /dev/null +++ b/themes/ribbon/styles/print.scss @@ -0,0 +1,59 @@ +// 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.scss'; + +@page { + margin:0; + size:$width $height; + } + +// List +// ------------------------------- +.list { + padding:0; + background:none; + // Magic + * { + -webkit-print-color-adjust:exact; + } + // Caption + .caption { + display:none; + } + // Slide + .slide { + float:none; + margin:0; + -webkit-transform:none; + -moz-transform:none; + -ms-transform:none; + -o-transform:none; + transform:none; + &:before { + display:none; + } + &:after { + position:absolute; + left:120px; + bottom:80px; + color:#CCC; + text-shadow:none; + line-height:18px; + font-weight:normal; + font-size:25px; + } + // Cover Shout + &.cover, + &.shout { + z-index:1; + &:after { + content:''; + } + } + &.cover { + background:#000; + } + } + } \ No newline at end of file diff --git a/themes/ribbon/styles/reset.css b/themes/ribbon/styles/reset.scss similarity index 100% rename from themes/ribbon/styles/reset.css rename to themes/ribbon/styles/reset.scss diff --git a/themes/ribbon/styles/screen.css b/themes/ribbon/styles/screen.css new file mode 100644 index 0000000..e3c6830 --- /dev/null +++ b/themes/ribbon/styles/screen.css @@ -0,0 +1 @@ +@font-face{font-family:'PT Sans';src:url(../fonts/PTSans.woff) format("woff"),url(../fonts/PTSans.ttf) format("truetype"),url(../fonts/PTSans.svg#PTSans-Regular) format("svg")}@font-face{font-weight:bold;font-family:'PT Sans';src:url(../fonts/PTSans.Bold.woff) format("woff"),url(../fonts/PTSans.Bold.ttf) format("truetype"),url(../fonts/PTSans.Bold.svg#PTSans-Bold) format("svg")}@font-face{font-style:italic;font-family:'PT Sans';src:url(../fonts/PTSans.Italic.woff) format("woff"),url(../fonts/PTSans.Italic.ttf) format("truetype"),url(../fonts/PTSans.Italic.svg#PTSans-Italic) format("svg")}@font-face{font-style:italic;font-weight:bold;font-family:'PT Sans';src:url(../fonts/PTSans.Bold.Italic.woff) format("woff"),url(../fonts/PTSans.Bold.Italic.ttf) format("truetype"),url(../fonts/PTSans.Bold.Italic.svg#PTSans-BoldItalic) format("svg")}@font-face{font-family:'PT Sans Narrow';font-weight:bold;src:url(../fonts/PTSans.Narrow.Bold.woff) format("woff"),url(../fonts/PTSans.Narrow.Bold.ttf) format("truetype"),url(../fonts/PTSans.Narrow.Bold.svg#PTSans-NarrowBold) format("svg")}@font-face{font-family:'PT Mono';src:url(../fonts/PTMono.woff) format("woff"),url(../fonts/PTMono.ttf) format("truetype"),url(../fonts/PTMono.svg#PTMono) format("svg")}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}.slide{width:1024px;height:640px;background:#fff url(../images/ribbon.svg) 865px 0 no-repeat;color:#000}.slide:after{position:absolute;counter-increment:slide;content:counter(slide, decimal-leading-zero);line-height:1}.debug .slide{background:url(../images/ribbon.svg) 865px 0 no-repeat, url(../images/grid-16x10.png) no-repeat, #fff}.slide>div{position:absolute;top:0;left:0;overflow:hidden;padding:71px 120px 0;width:784px;height:569px}.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 a{border-bottom:0.1em solid;color:#0174A7;text-decoration:none}.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 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 40px;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 39px}.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) ".\00A0"}.slide pre{margin:0 0 50px;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{margin:0 -8px;padding:3px 8px;border-radius:8px;background:rgba(236,249,0,0.37);color:#000;font-style:normal}.slide pre mark.important{margin:0;background:#C00;color:#FFF;font-weight:normal}.slide pre mark.comment{margin:0;padding:0;background:none;color:#999}.slide.cover{background:#000}.slide.cover img,.slide.cover svg,.slide.cover video,.slide.cover object,.slide.cover canvas{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{top:50%;width:100%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-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{left:50%;height:100%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-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{top:0;left:0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.slide.shout{background-image: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%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)}.slide .place{position:absolute}.slide .place.t,.slide .place.m,.slide .place.b{left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%)}.slide .place.t{top:0}.slide .place.b{bottom:0}.slide .place.l,.slide .place.m,.slide .place.r{top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)}.slide .place.l{left:0}.slide .place.m{-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.slide .place.r{right:0;left:auto}.slide .place.t.l,.slide .place.t.r,.slide .place.b.r,.slide .place.b.l{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.slide .place.t.l,.slide .place.t.r{top:0}.slide .place.b.r,.slide .place.b.l{top:auto}.list{padding:80px 0 40px 100px;background:#585a5e url(../images/linen.png)}.list:after{clear:both;display:block;content:''}.list .caption{margin:0 0 50px;color:#3C3D40;text-shadow:0 1px 1px #8D8E90}.list .caption h1{font:bold 50px/1 "PT Sans Narrow",sans-serif}.list .caption a{color:#4B86C2;text-shadow:0 -1px 1px #1f3f60;text-decoration:none}.list .caption a:hover{color:#5ca4ed}.list .slide{position:relative;float:left;margin:0 -412px -220px 0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5)}@media (max-width: 1324px){.list .slide{margin:0 -688px -400px 0;-webkit-transform:scale(0.25);-moz-transform:scale(0.25);-ms-transform:scale(0.25);-o-transform:scale(0.25);transform:scale(0.25)}}.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;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)}@media (max-width: 1324px){.list .slide:before{width:256px;height:160px;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)}}.list .slide:after{bottom:-100px;left:120px;color:#3C3D40;text-shadow:0 2px 1px #8D8E90;font-weight:bold;font-size:50px}@media (max-width: 1324px){.list .slide:after{bottom:-180px;text-shadow:0 4px 2px #8D8E90;font-size:100px}}.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 #305f8d,0 0 0 10px #3c7cbd,0 20px 50px rgba(42,43,45,0.6)}@media (max-width: 1324px){.list .slide:target:before{box-shadow:0 0 0 1px #305f8d,0 0 0 10px #3c7cbd,0 20px 50px rgba(42,43,45,0.6)}}.list .slide:target:after{text-shadow:0 2px 1px rgba(42,43,45,0.6);color:#4B86C2}@media (max-width: 1324px){.list .slide:target:after{text-shadow:0 4px 2px rgba(42,43,45,0.6)}}.full{position:absolute;top:50%;left:50%;overflow:hidden;margin:-320px 0 0 -512px;width:1024px;height:640px;background:#000}.full .caption{display:none}.full .slide{position:absolute;top:0;left:0;clip:rect(0, 0, 0, 0)}.full .slide:after{left:120px;bottom:80px;color:#CCC;line-height:18px;font-size:25px}.full .slide:target{clip:rect(0, auto, auto, 0)}.full .slide.cover,.full .slide.shout{z-index:1}.full .slide.cover:after,.full .slide.shout:after{content:''}.full li.next{display:none}.full li.next.active{display:block}.full .progress{position:absolute;right:118px;bottom:40px;left:118px}.full .progress 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);-webkit-transition:width 0.2s linear;-moz-transition:width 0.2s linear;-o-transition:width 0.2s linear;transition:width 0.2s linear} diff --git a/themes/ribbon/styles/screen.scss b/themes/ribbon/styles/screen.scss new file mode 100644 index 0000000..9077fb1 --- /dev/null +++ b/themes/ribbon/styles/screen.scss @@ -0,0 +1,408 @@ +// 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); + } + } + } \ No newline at end of file diff --git a/themes/ribbon/styles/style.css b/themes/ribbon/styles/style.css deleted file mode 100644 index 3cc7847..0000000 --- a/themes/ribbon/styles/style.css +++ /dev/null @@ -1,418 +0,0 @@ -/* - Ribbon theme for Shower presentation template: http://github.com/pepelsbey/shower - Copyright © 2010–2012 Vadim Makeev, http://pepelsbey.net/ - Licensed under MIT license: https://github.com/pepelsbey/shower/wiki/License -*/ - -@import url(fonts.css); -@import url(reset.css); - -BODY { - font:25px/1.8 'PT Sans', sans-serif; - counter-reset:paging; - } - -/* Slide ----------------------------------------- */ -.slide:after { - counter-increment:paging; - content:counter(paging, decimal-leading-zero); - } -.slide section { - padding:80px 120px 0; - width:784px; - height:560px; - background:#FFF; - color:#000; - } - .slide section:before { - position:absolute; - top:0; - right:120px; - width:40px; - height:120px; - background:url(../images/ribbon.svg) no-repeat; - content:''; - } - -/* Header */ -.slide header { - margin:0 0 58px; - color:#666; - font:bold 40px/1.13 'PT Sans Narrow', sans-serif; - } - -/* Elements */ -.slide p { - margin:0 0 45px; - } -.slide p.note { - color:#888; - } -.slide a { - border-bottom:0.1em solid; - color:#0174A7; - text-decoration:none; - } -.slide a[target=_blank] { - margin-right:22px; - } -.slide a[target=_blank]:after { - position:absolute; - margin-left:7px; - font-family:'Target Blank'; - content:'\005E'; - } -.slide b, -.slide strong { - font-weight:bold; - } -.slide i, -.slide em { - font-style:italic; - } -.slide kbd, -.slide code { - padding:3px 8px; - -webkit-border-radius:8px; - -moz-border-radius:8px; - border-radius:8px; - background:#FAFAA2; - color:#000; - -webkit-tab-size:4; - -moz-tab-size:4; - -o-tab-size:4; - tab-size:4; - font-family:'PT Mono', monospace; - } - -/* Quote */ -.slide blockquote { - font-style:italic; - } -.slide blockquote:before { - position:absolute; - margin:-15px 0 0 -80px; - color:#CCC; - font:200px/1 'PT Sans', sans-serif; - content:'\201C'; /* ldquo */ - } - -/* Lists */ -.slide ol, -.slide ul { - margin:0 0 45px; - counter-reset:list; - } - .slide ul ul, - .slide ol ul, - .slide ol ol, - .slide ul ol { - margin:0 0 0 38px; - } - .slide ol > li:before, - .slide ul > li:before { - position:absolute; - margin-left:-120px; - width:100px; - color:#BBB; - text-align:right; - } - .slide ul > li:before { - content:'\2022'; /* bull */ - line-height:1.1; - font-size:40px; - } - .slide ol > li:before { - counter-increment:list; - content:counter(list)'.'; - } - -/* Code */ -.slide pre { - margin:0 0 45px; - counter-reset:code; - white-space:normal; - } - .slide pre code { - display:block; - padding:0; - background:none; - white-space:pre; - } - .slide pre code:before { - position:absolute; - margin:0 0 0 -120px; - width:110px; - color:#BBB; - text-align:right; - counter-increment:code; - content:counter(code, decimal-leading-zero)'.'; - } - .slide pre mark { - padding:3px 8px; - -webkit-border-radius:8px; - -moz-border-radius:8px; - border-radius:8px; - background:#FAFAA2; - color:#000; - font-style:normal; - } - .slide pre .important { - background:#C00; - color:#FFF; - font-weight:normal; - } - .slide pre .comment { - padding:0; - background:none; - color:#888; - } - -/* Cover */ -.slide.cover section { - background:#000; - overflow:hidden; - } - .slide.cover section:before { - display:none; - } -.slide.cover img, -.slide.cover svg, -.slide.cover video, -.slide.cover object { - position:absolute; - top:0; - left:50%; - z-index:-1; - height:100%; - -webkit-transform:translateX(-50%); - -moz-transform:translateX(-50%); - -ms-transform:translateX(-50%); - -o-transform:translateX(-50%); - transform:translateX(-50%); - } -.slide.cover.w img, -.slide.cover.w svg, -.slide.cover.w video, -.slide.cover.w object { - top:50%; - left:0; - width:100%; - height:auto; - -webkit-transform:translateY(-50%); - -moz-transform:translateY(-50%); - -ms-transform:translateY(-50%); - -o-transform:translateY(-50%); - transform:translateY(-50%); - } - -/* Shout */ -.slide.shout section:before { - display: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%); - -moz-transform:translateY(-50%); - -ms-transform:translateY(-50%); - -o-transform:translateY(-50%); - transform:translateY(-50%); - } - .slide.shout h2 a[target=_blank] { - margin:0; - } - .slide.shout h2 a[target=_blank]:after { - content:''; - } - -/* Middle */ -.middle { - position:absolute; - top:50%; - left:50%; - -webkit-transform:translate(-50%, -50%); - -moz-transform:translate(-50%, -50%); - -ms-transform:translate(-50%, -50%); - -o-transform:translate(-50%, -50%); - transform:translate(-50%, -50%); - } - -/* List ----------------------------------------- */ -.list { - float:left; - padding:80px 0 80px 100px; - background:#585A5E url(../images/linen.png); - } - -/* Caption */ -.list .caption { - color:#3C3D40; - text-shadow:0 1px 1px #8D8E90; - } - .list .caption h1 { - font:bold 50px/1 'PT Sans Narrow', sans-serif; - } - .list .caption a { - color:#4B86C2; - text-shadow:0 -1px 1px #1F3F60; - text-decoration:none; - } - .list .caption a:hover { - color:#5ca4ed; - } - -/* Slide */ -.list .slide { - position:relative; - float:left; - margin:0 50px 0 0; - padding:80px 0 0; - } - .list .slide:after { - position:absolute; - bottom:-45px; - left:60px; - color:#3C3D40; - text-shadow:0 1px 1px #8D8E90; - line-height:1; - font-weight:bold; - font-size:25px; - } - .list .slide:target:after { - text-shadow:0 -1px 1px #1F3F60; - color:#4B86C2; - } - .list .slide > div { - position:relative; - overflow:hidden; - width:512px; - height:320px; - box-shadow:0 0 50px #3C3D40; - border-radius:1px; - background:rgba(0, 0, 0, 0.3); - } - .list .slide > div:hover { - box-shadow: - 0 0 0 10px rgba(60, 61, 64, 0.6), - 0 0 50px #3C3D40; - } - .list .slide:target > div { - box-shadow: - 0 0 0 1px #305F8D, - 0 0 0 10px #3C7CBD, - 0 0 50px #3C3D40; - } - .list .slide section { - -webkit-transform-origin:0 0; - -webkit-transform:scale(0.5); - -moz-transform-origin:0 0; - -moz-transform:scale(0.5); - -ms-transform-origin:0 0; - -ms-transform:scale(0.5); - -o-transform-origin:0 0; - -o-transform:scale(0.5); - transform-origin:0 0; - transform:scale(0.5); - } - .list .slide section:after { - position:absolute; - top:0; - right:0; - bottom:0; - left:0; - content:''; - } - -/* Small */ -@media all and (max-width:1274px) { - .list .slide:after { - left:30px; - } - .list .slide > div { - width:256px; - height:160px; - } - .list .slide section { - -webkit-transform:scale(0.25); - -moz-transform:scale(0.25); - -ms-transform:scale(0.25); - -o-transform:scale(0.25); - transform:scale(0.25); - } - } - -/* Full ----------------------------------------- */ -.full { - position:absolute; - top:50%; - left:50%; - overflow:hidden; - margin:-320px 0 0 -512px; - width:1024px; - height:640px; - background:#000; - } - .full .caption { - display:none; - } - .full .slide { - position:absolute; - visibility:hidden; - } - .full .slide:target { - visibility:visible; - } - .full .slide:after { - position:absolute; - bottom:85px; - left:120px; - color:#BBB; - line-height:1; - } - .full .slide section { - -webkit-transform:scale(1); - -moz-transform:scale(1); - -ms-transform:scale(1); - -o-transform:scale(1); - transform:scale(1); - } - .full .slide.cover { - z-index:1; - } - .full .slide.cover:after, - .full .slide.shout:after { - content:''; - } - -/* Progress */ -.full .progress { - position:absolute; - right:118px; - bottom:49px; - left:118px; - border-radius:7px; - border:2px solid rgba(255, 255, 255, 0.2); - } - .full .progress DIV { - width:0; - height:10px; - border-radius:5px; - background:rgba(177, 177, 177, 0.4); - -webkit-transition:width 0.2s linear; - -moz-transition:width 0.2s linear; - -ms-transition:width 0.2s linear; - -o-transition:width 0.2s linear; - transition:width 0.2s linear; - } -.full .progress-off { - z-index:1; - } \ No newline at end of file