ivan-igorevich
/
bmstu-mt-wp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moving from tabs to spaces

This commit is contained in:
Vadim Makeev 2018-08-24 11:48:59 +03:00
parent 9879ceb6c2
commit bce8d326e5
5 changed files with 427 additions and 430 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.editorconfig
View File

@ -1,14 +1,12 @@
# EditorConfig is awesome: http://EditorConfig.org
root = true root = true
[*] [*]
indent_style = tab indent_style = space
indent_size = 4 indent_size = 4
end_of_line = lf end_of_line = lf
trim_trailing_whitespace = true trim_trailing_whitespace = true
insert_final_newline = true insert_final_newline = true
charset = utf-8 charset = utf-8
[{bower.json,package.json,.travis.yml}] [{*.json,*.yml,*.toml}]
indent_style = space
indent_size = 2 indent_size = 2

4
README.md
View File

@ -37,11 +37,11 @@ By doing this you would get a GitHub repo linked with Netlify in a way any chang
Once you’re done you can build a clean copy of your slides: Once you’re done you can build a clean copy of your slides:
npm run prepare npm run prepare
And you’ll find your presentation in `prepared` folder with only needed files in it. You can also run `npm run archive` to get the same files in `archive.zip`. But there’s more! You can easily publish your presentation online by running: And you’ll find your presentation in `prepared` folder with only needed files in it. You can also run `npm run archive` to get the same files in `archive.zip`. But there’s more! You can easily publish your presentation online by running:
npm run publish npm run publish
And you’ll have your slides published to `http://USER.github.io/REPO/`. And you’ll have your slides published to `http://USER.github.io/REPO/`.

341
docs/features.md
View File

@ -4,31 +4,31 @@ All theme’s features are demonstrated in the [index.html](index.html) file. Us
- [Anatomy](#anatomy) - [Anatomy](#anatomy)
- [Common](#common) - [Common](#common)
- [Language](#language) - [Language](#language)
- [Canvas](#canvas) - [Canvas](#canvas)
- [Title](#title) - [Title](#title)
- [Badge](#badge) - [Badge](#badge)
- [Progress](#progress) - [Progress](#progress)
- [Slide](#slide) - [Slide](#slide)
- [Number](#number) - [Number](#number)
- [Types](#types) - [Types](#types)
- [White](#white) - [White](#white)
- [Black](#black) - [Black](#black)
- [Grid](#grid) - [Grid](#grid)
- [Content](#content) - [Content](#content)
- [Header](#header) - [Header](#header)
- [Paragraphs](#paragraphs) - [Paragraphs](#paragraphs)
- [Inline](#inline) - [Inline](#inline)
- [Quotes](#quotes) - [Quotes](#quotes)
- [Lists](#lists) - [Lists](#lists)
- [Columns](#columns) - [Columns](#columns)
- [Tables](#tables) - [Tables](#tables)
- [Code](#code) - [Code](#code)
- [Elements](#elements) - [Elements](#elements)
- [Cover](#cover) - [Cover](#cover)
- [Shout](#shout) - [Shout](#shout)
- [Place](#place) - [Place](#place)
- [Notes](#notes) - [Notes](#notes)
## Anatomy ## Anatomy
@ -51,8 +51,8 @@ In addition to files theme’s repository contains source files:
The main presentation language is set on the root element of the document, please note it and set the right one: The main presentation language is set on the root element of the document, please note it and set the right one:
<html lang="en"> <html lang="en">
<html lang="ru"> <html lang="ru">
Appropriate typography traditions are used based on this value. `lang` attribute could also be set on separate slides or elements. Appropriate typography traditions are used based on this value. `lang` attribute could also be set on separate slides or elements.
@ -62,11 +62,11 @@ The root presentation element has the main `shower` class and additional mode cl
List: List:
<body class="shower list"> <body class="shower list">
Full: Full:
<body class="shower full"> <body class="shower full">
Theme’s architecture is based on agreement that all presentation elements are nested in `shower` element and mode classes are hiding or showing needed elements depending on current mode. Theme’s architecture is based on agreement that all presentation elements are nested in `shower` element and mode classes are hiding or showing needed elements depending on current mode.
@ -74,10 +74,10 @@ Theme’s architecture is based on agreement that all presentation elements are
Presentation title is marked with the `caption` element, which has following elements provided: `<h1>` for the header, `<p>` for the description and also links. Presentation title is marked with the `caption` element, which has following elements provided: `<h1>` for the header, `<p>` for the description and also links.
<header class="caption"> <header class="caption">
<h1>Presentation Title</h1> <h1>Presentation Title</h1>
<p><a href="">Yours Truly</a>, Famous Inc.</p> <p><a href="">Yours Truly</a>, Famous Inc.</p>
</header> </header>
Caption is visible only in the list mode. Don’t forget to also specify presentation title in document’s `<title>` element. Caption is visible only in the list mode. Don’t forget to also specify presentation title in document’s `<title>` element.
@ -85,9 +85,9 @@ Caption is visible only in the list mode. Don’t forget to also specify present
Badge with “Fork me on GitHub” link (or any other call to action) is marked with `badge` element. Badge with “Fork me on GitHub” link (or any other call to action) is marked with `badge` element.
<footer class="badge"> <footer class="badge">
<a href="…">Fork me on Github</a> <a href="…">Fork me on Github</a>
</footer> </footer>
Badge is visible only in the list mode. Badge is visible only in the list mode.
@ -95,7 +95,7 @@ Badge is visible only in the list mode.
Progress bar shows how much is left until presentation end and marked with `progress` element visible only in full screen mode: Progress bar shows how much is left until presentation end and marked with `progress` element visible only in full screen mode:
<div class="progress"></div> <div class="progress"></div>
To remove it from presentation just remove this element from document. There’s no way to hide it for specific slides. To remove it from presentation just remove this element from document. There’s no way to hide it for specific slides.
@ -103,12 +103,12 @@ To remove it from presentation just remove this element from document. There’s
Slides are marked with `slide` class. Please don’t nest slides and don’t forget closing tags, things could go wrong. Slides are marked with `slide` class. Please don’t nest slides and don’t forget closing tags, things could go wrong.
<section class="slide"> <section class="slide">
… …
</section> </section>
<section class="slide"> <section class="slide">
… …
</section> </section>
There are two slide ratios supported: 16×10 and 4×3. To enable needed one include appropriate file `screen-4x3.css` or `screen-16x10.css`. Wide screen 16×10 format is included by default. There are two slide ratios supported: 16×10 and 4×3. To enable needed one include appropriate file `screen-4x3.css` or `screen-16x10.css`. Wide screen 16×10 format is included by default.
@ -120,13 +120,13 @@ Slide numbers help audience to remember slides for questions and open needed sli
You can hide number manually: You can hide number manually:
<section class="slide" id="off"> <section class="slide" id="off">
<style> <style>
#off::after { #off::after {
visibility: hidden; visibility: hidden;
} }
</style> </style>
</section> </section>
Slide type `clear` could also hide slide number. Slide type `clear` could also hide slide number.
@ -138,13 +138,13 @@ Types are changing slide’s look. You can set type by adding class to the main
White type sets white background. White type sets white background.
<section class="slide white"> <section class="slide white">
#### Black #### Black
Black type sets black background. Black type sets black background.
<section class="slide black"> <section class="slide black">
Please note that black slide type doesn’t change text color. Please note that black slide type doesn’t change text color.
@ -152,15 +152,15 @@ Please note that black slide type doesn’t change text color.
Clear type turns off slide number. Use it when you need a pure slide. May be mixed with `white` or `black` type. Clear type turns off slide number. Use it when you need a pure slide. May be mixed with `white` or `black` type.
<section class="slide clear"> <section class="slide clear">
#### Grid #### Grid
Grid set a background with two guide types: main magenta guides and additional cyan guides, setting margins, rows and columns. Grid set a background with two guide types: main magenta guides and additional cyan guides, setting margins, rows and columns.
<section class="slide grid"> <section class="slide grid">
… …
</section> </section>
All theme elements are aligned by this grid and it’s recommended to follow it while changing or extending a theme. All theme elements are aligned by this grid and it’s recommended to follow it while changing or extending a theme.
@ -172,9 +172,9 @@ Simple content: headers, paragraphs, lists.
Slide header is marked with `<h2>` element: Slide header is marked with `<h2>` element:
<section class="slide"> <section class="slide">
<h2>Slide Header</h2> <h2>Slide Header</h2>
</section> </section>
We haven’t introduced next heading levels to not provoke slides complexity. We haven’t introduced next heading levels to not provoke slides complexity.
@ -182,10 +182,10 @@ We haven’t introduced next heading levels to not provoke slides complexity.
Paragraphs are marked with `<p>` element. You could also make a note, less important part of a slide, by adding a `note` class to a paragraph: Paragraphs are marked with `<p>` element. You could also make a note, less important part of a slide, by adding a `note` class to a paragraph:
<section class="slide"> <section class="slide">
<p>Text</p> <p>Text</p>
<p class="note">Note</p> <p class="note">Note</p>
</section> </section>
#### Inline #### Inline
@ -202,116 +202,116 @@ There are following inline elements styled in the theme:
Quotes are marked with `<blockquote>` element which contains one or more paragraphs: Quotes are marked with `<blockquote>` element which contains one or more paragraphs:
<blockquote> <blockquote>
<p>Flannel bicycle rights locavore selfies.</p> <p>Flannel bicycle rights locavore selfies.</p>
</blockquote> </blockquote>
To add quote’s author wrap a quote to a `<figure>` element and put a caption in the `<figcaption>` right after: To add quote’s author wrap a quote to a `<figure>` element and put a caption in the `<figcaption>` right after:
<figure> <figure>
<blockquote> <blockquote>
<p>Post-ironic fashion axe flexitarian</p> <p>Post-ironic fashion axe flexitarian</p>
</blockquote> </blockquote>
<figcaption>Yours Truly</figcaption> <figcaption>Yours Truly</figcaption>
</figure> </figure>
#### Lists #### Lists
For creating list you must use `ul` (`ol` for numerical list). For creating list you must use `ul` (`ol` for numerical list).
<ol> <ol>
<li>Literally viral vegan</li> <li>Literally viral vegan</li>
<li>Wes Anderson chillwave Marfa <li>Wes Anderson chillwave Marfa
<ul> <ul>
<li>Retro meh brunch aesthetic</li> <li>Retro meh brunch aesthetic</li>
<li>Messenger bag retro cred</li> <li>Messenger bag retro cred</li>
</ul> </ul>
</li> </li>
</ol> </ol>
You can also create list with inner navigation by adding `next` class to each elements following after element from each you want start navigation: You can also create list with inner navigation by adding `next` class to each elements following after element from each you want start navigation:
<h2>Inner navigation</h2> <h2>Inner navigation</h2>
<ol> <ol>
<li>I'll be seen right away.</li> <li>I'll be seen right away.</li>
<li>Just navigate to next slide and you'll see others.</li> <li>Just navigate to next slide and you'll see others.</li>
<li class="next">Hey! It's all okay ?</li> <li class="next">Hey! It's all okay ?</li>
<li class="next"> ... </li> <li class="next"> ... </li>
</ol> </ol>
And even so: And even so:
<h2>Benefits</h2> <h2>Benefits</h2>
<ol> <ol>
<li class="next">The most important advantage</li> <li class="next">The most important advantage</li>
<li class="next">Less important advantage</li> <li class="next">Less important advantage</li>
</ol> </ol>
<h2 class="next">Disadvantages</h2> <h2 class="next">Disadvantages</h2>
<ol class="next"> <ol class="next">
<li class="next">There's nothing here</li> <li class="next">There's nothing here</li>
<li class="next"> ... </li> <li class="next"> ... </li>
</ol> </ol>
#### Columns #### Columns
If you want to form text in two or three columns use `double` or `triple` class If you want to form text in two or three columns use `double` or `triple` class
<p class="double"> <p class="double">
Echo Park 8-bit sustainable umami deep v Kickstarter. Echo Park 8-bit sustainable umami deep v Kickstarter.
</p> </p>
Also work with lists: Also work with lists:
<ul class="triple"> <ul class="triple">
<li>Occupy locavore blog</li> <li>Occupy locavore blog</li>
<li>Mustache you haven’t heard of</li> <li>Mustache you haven’t heard of</li>
<li>Something else</li> <li>Something else</li>
</ul> </ul>
#### Tables #### Tables
Create table by using usual `table`, `tr`, `th` Create table by using usual `table`, `tr`, `th`
<table> <table>
<tr> <tr>
<th scope="col">Gentrify</th> <th scope="col">Gentrify</th>
<th>Twee</th> <th>Twee</th>
</tr> </tr>
<tr> <tr>
<th scope="row">Messenger</th> <th scope="row">Messenger</th>
<td>Mixtape</td> <td>Mixtape</td>
</tr> </tr>
</table> </table>
Class `striped` stylizes your table: even rows will turn gray background Class `striped` stylizes your table: even rows will turn gray background
<table class="striped"> <table class="striped">
#### Code #### Code
`Code` tag define your program code `Code` tag define your program code
<pre><code>function action() { <pre><code>function action() {
// TODO // TODO
return true; return true;
}</code></pre> }</code></pre>
If you want to add lines numbers use next construction: If you want to add lines numbers use next construction:
<pre> <pre>
<code>function action() {</code> <code>function action() {</code>
<code> // TODO</code> <code> // TODO</code>
<code> return true;</code> <code> return true;</code>
<code>}<code> <code>}<code>
</pre> </pre>
When neccessary emphasize that code is commented, you need to use span element with `comment` class; When neccessary emphasize that code is commented, you need to use span element with `comment` class;
If you want to color part of code, wrap this part with `mark` to add yellow background and `mark` with `important` class to add red background; If you want to color part of code, wrap this part with `mark` to add yellow background and `mark` with `important` class to add red background;
<pre><code>function <mark>action()</mark> { <pre><code>function <mark>action()</mark> {
<span class="comment">// TODO<span> <span class="comment">// TODO<span>
return <mark class="important">true</mark>; return <mark class="important">true</mark>;
}</code></pre> }</code></pre>
### Elements ### Elements
@ -321,82 +321,81 @@ If you want to color part of code, wrap this part with `mark` to add yellow back
`Cover` class on img attribute indicates that picture will be background for slide `Cover` class on img attribute indicates that picture will be background for slide
<section class="slide"> <section class="slide">
<img class="cover" src="picture.png"> <img class="cover" src="picture.png">
</section> </section>
To stretch the picture in width or height, you need to set a `width` or `height` class respectively; To stretch the picture in width or height, you need to set a `width` or `height` class respectively;
Use both classes `width height`, if you want to stretch the picture in width and height Use both classes `width height`, if you want to stretch the picture in width and height
<img class="cover width" src="picture.png"> <img class="cover width" src="picture.png">
<img class="cover height" src="picture.png"> <img class="cover height" src="picture.png">
<img class="cover width height" src="picture.png"> <img class="cover width height" src="picture.png">
Shortcut for `width`, `height`: Shortcut for `width`, `height`:
<img class="cover w" src="picture.png"> <img class="cover w" src="picture.png">
<img class="cover h" src="picture.png"> <img class="cover h" src="picture.png">
To insert an image description, links to the author's site or other information use `figure` tag with `figcaption` To insert an image description, links to the author's site or other information use `figure` tag with `figcaption`
<figure> <figure>
<img class="cover" src="picture.png"> <img class="cover" src="picture.png">
<figcaption class="white"> <figcaption class="white">
© Yours Truly © Yours Truly
</figcaption> </figcaption>
</figure> </figure>
#### Shout #### Shout
There are slides, which need to be described in only a few words. Usually they display a call for action, define common themes, link to project or something else. To stylize this text, use the `shout` class. There are slides, which need to be described in only a few words. Usually they display a call for action, define common themes, link to project or something else. To stylize this text, use the `shout` class.
<section class="slide"> <section class="slide">
<h2 class="shout">Shout</h2> <h2 class="shout">Shout</h2>
</section> </section>
Add `grow` class to animate text from small to big size Add `grow` class to animate text from small to big size
<section class="slide"> <section class="slide">
<h2 class="shout grow">Growing Shout</h2> <h2 class="shout grow">Growing Shout</h2>
</section> </section>
Or, on the contrary, for animate text size from big to small add `shrink` class. Or, on the contrary, for animate text size from big to small add `shrink` class.
<section class="slide"> <section class="slide">
<h2 class="shout shrink">Shrinking Shout</h2> <h2 class="shout shrink">Shrinking Shout</h2>
</section> </section>
#### Place #### Place
Use `place` class on img attribute give same effect as `cover` class - set background image Use `place` class on img attribute give same effect as `cover` class - set background image
<section class="slide"> <section class="slide">
<img class="place" src="picture.png"> <img class="place" src="picture.png">
</section> </section>
If you want collocate picture at a certain side, you need to use `top` / `right` / `bottom` / `left` class as shown below If you want collocate picture at a certain side, you need to use `top` / `right` / `bottom` / `left` class as shown below
<img class="place top" src="picture.png"> <img class="place top" src="picture.png">
<img class="place right" src="picture.png"> <img class="place right" src="picture.png">
<img class="place bottom" src="picture.png"> <img class="place bottom" src="picture.png">
<img class="place left" src="picture.png"> <img class="place left" src="picture.png">
You can also combine classes for location in corners: You can also combine classes for location in corners:
<img class="place top left" src="picture.png"> <img class="place top left" src="picture.png">
<img class="place top right" src="picture.png"> <img class="place top right" src="picture.png">
<img class="place bottom left" src="picture.png"> <img class="place bottom left" src="picture.png">
<img class="place bottom right" src="picture.png"> <img class="place bottom right" src="picture.png">
#### Notes #### Notes
When neccessary to add some notes for slide, you may use `footer` class, that hide your notes at all time and show them when you hover to slide: When neccessary to add some notes for slide, you may use `footer` class, that hide your notes at all time and show them when you hover to slide:
<section class="slide"> <section class="slide">
<p>Retro meh brunch aesthetic.</p> <p>Retro meh brunch aesthetic.</p>
<footer class="footer"> <footer class="footer">
<p>Cosby sweater Shoreditch.</p> <p>Cosby sweater Shoreditch.</p>
</footer> </footer>
</section> </section>

148
gulpfile.js
View File

@ -9,102 +9,102 @@ const sync = require('browser-sync').create();
gulp.task('prepare', () => { gulp.task('prepare', () => {
const shower = gulp.src([ const shower = gulp.src([
'**', '**',
'!docs{,/**}', '!docs{,/**}',
'!node_modules{,/**}', '!node_modules{,/**}',
'!prepared{,/**}', '!prepared{,/**}',
'!CONTRIBUTING.md', '!CONTRIBUTING.md',
'!LICENSE.md', '!LICENSE.md',
'!README.md', '!README.md',
'!gulpfile.js', '!gulpfile.js',
'!netlify.toml', '!netlify.toml',
'!package.json', '!package.json',
'!package-lock.json' '!package-lock.json'
]) ])
.pipe(replace( .pipe(replace(
/(<link rel="stylesheet" href=")(node_modules\/shower-)([^\/]*)\/(.*\.css">)/g, /(<link rel="stylesheet" href=")(node_modules\/shower-)([^\/]*)\/(.*\.css">)/g,
'$1shower/themes/$3/$4', { skipBinary: true } '$1shower/themes/$3/$4', { skipBinary: true }
)) ))
.pipe(replace( .pipe(replace(
/(<script src=")(node_modules\/shower-core\/)(shower.min.js"><\/script>)/g, /(<script src=")(node_modules\/shower-core\/)(shower.min.js"><\/script>)/g,
'$1shower/$3', { skipBinary: true } '$1shower/$3', { skipBinary: true }
)); ));
const core = gulp.src([ const core = gulp.src([
'shower.min.js' 'shower.min.js'
], { ], {
cwd: 'node_modules/shower-core' cwd: 'node_modules/shower-core'
}) })
.pipe(rename( (path) => { .pipe(rename( (path) => {
path.dirname = 'shower/' + path.dirname; path.dirname = 'shower/' + path.dirname;
})); }));
const material = gulp.src([ const material = gulp.src([
'**', '!package.json' '**', '!package.json'
], { ], {
cwd: 'node_modules/shower-material' cwd: 'node_modules/shower-material'
}) })
.pipe(rename( (path) => { .pipe(rename( (path) => {
path.dirname = 'shower/themes/material/' + path.dirname; path.dirname = 'shower/themes/material/' + path.dirname;
})) }))
const ribbon = gulp.src([ const ribbon = gulp.src([
'**', '!package.json' '**', '!package.json'
], { ], {
cwd: 'node_modules/shower-ribbon' cwd: 'node_modules/shower-ribbon'
}) })
.pipe(rename( (path) => { .pipe(rename( (path) => {
path.dirname = 'shower/themes/ribbon/' + path.dirname; path.dirname = 'shower/themes/ribbon/' + path.dirname;
})); }));
const themes = merge(material, ribbon) const themes = merge(material, ribbon)
.pipe(replace( .pipe(replace(
/(<script src=")(\/shower-core\/)(shower.min.js"><\/script>)/, /(<script src=")(\/shower-core\/)(shower.min.js"><\/script>)/,
'$1../../$3', { skipBinary: true } '$1../../$3', { skipBinary: true }
)); ));
return merge(shower, core, themes) return merge(shower, core, themes)
.pipe(gulp.dest('prepared')); .pipe(gulp.dest('prepared'));
}); });
gulp.task('clean', () => { gulp.task('clean', () => {
return del('prepared/**'); return del('prepared/**');
}); });
gulp.task('zip', () => { gulp.task('zip', () => {
return gulp.src('prepared/**') return gulp.src('prepared/**')
.pipe(zip('archive.zip')) .pipe(zip('archive.zip'))
.pipe(gulp.dest('.')); .pipe(gulp.dest('.'));
}); });
gulp.task('upload', () => { gulp.task('upload', () => {
return pages.publish('prepared') return pages.publish('prepared')
}); });
gulp.task('archive', gulp.series( gulp.task('archive', gulp.series(
'prepare', 'prepare',
'zip', 'zip',
'clean' 'clean'
)); ));
gulp.task('publish', gulp.series( gulp.task('publish', gulp.series(
'prepare', 'prepare',
'upload', 'upload',
'clean' 'clean'
)); ));
gulp.task('serve', () => { gulp.task('serve', () => {
sync.init({ sync.init({
ui: false, ui: false,
notify: false, notify: false,
port: 3000, port: 3000,
server: { server: {
baseDir: '.' baseDir: '.'
} }
}); });
gulp.watch('index.html').on('change', () => { gulp.watch('index.html').on('change', () => {
sync.reload(); sync.reload();
}); });
}); });

358
index.html
View File

@ -1,11 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Shower Presentation Engine</title> <title>Shower Presentation Engine</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="node_modules/shower-ribbon/styles/styles.css"> <link rel="stylesheet" href="node_modules/shower-ribbon/styles/styles.css">
<style> <style>
.shower { .shower {
--slide-ratio: calc(16 / 9); --slide-ratio: calc(16 / 9);
} }
@ -13,198 +13,198 @@
</head> </head>
<body class="shower list"> <body class="shower list">
<header class="caption"> <header class="caption">
<h1>Shower Presentation Engine</h1> <h1>Shower Presentation Engine</h1>
<p>Yours Truly, Famous Inc.</p> <p>Yours Truly, Famous Inc.</p>
</header> </header>
<section class="slide" id="cover"> <section class="slide" id="cover">
<h2>Shower Presentation Engine</h2> <h2>Shower Presentation Engine</h2>
<p>Brought to you by <a href="http://pepelsbey.net">Vadim Makeev</a></p> <p>Brought to you by <a href="http://pepelsbey.net">Vadim Makeev</a></p>
<figure> <figure>
<img class="cover" src="pictures/cover.jpg" alt="Hands on the orange typewriter in a park"> <img class="cover" src="pictures/cover.jpg" alt="Hands on the orange typewriter in a park">
<figcaption class="copyright right white"> <figcaption class="copyright right white">
<a href="http://fiftyfootshadows.net/">© John Carey</a> <a href="http://fiftyfootshadows.net/">© John Carey</a>
</figcaption> </figcaption>
</figure> </figure>
<style> <style>
#cover h2 { #cover h2 {
margin: 30px 0 0; margin: 30px 0 0;
color: white; color: white;
text-align: center; text-align: center;
font-size: 70px; font-size: 70px;
} }
#cover p { #cover p {
margin: 10px 0 0; margin: 10px 0 0;
text-align: center; text-align: center;
color: white; color: white;
font-style: italic; font-style: italic;
font-size: 20px; font-size: 20px;
} }
#cover p a { #cover p a {
color: white; color: white;
} }
</style> </style>
</section> </section>
<section class="slide"> <section class="slide">
<h2>Shower key features</h2> <h2>Shower key features</h2>
<ol> <ol>
<li>Built on HTML, CSS and JavaScript</li> <li>Built on HTML, CSS and JavaScript</li>
<li>Works in all modern browsers</li> <li>Works in all modern browsers</li>
<li>Themes are separated from engine</li> <li>Themes are separated from engine</li>
<li>Fully keyboard accessible</li> <li>Fully keyboard accessible</li>
<li>Printable to PDF</li> <li>Printable to PDF</li>
</ol> </ol>
<p class="note">Shower ['ʃəuə] noun. A person or thing that shows.</p> <p class="note">Shower ['ʃəuə] noun. A person or thing that shows.</p>
</section> </section>
<section class="slide"> <section class="slide">
<h2>Plain text on your slides</h2> <h2>Plain text on your slides</h2>
<p>Lorem ipsum dolor sit amet, consectetur <a href="#4">adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <em>quis nostrud</em> exercitation ullamco laboris <strong>nisi ut aliquip</strong> ex ea commodo consequat. Duis aute irure <i>dolor</i> in reprehenderit in voluptate velit esse cillum <b>dolore</b> eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <code>&lt;culpa&gt;</code> qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur <a href="#4">adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <em>quis nostrud</em> exercitation ullamco laboris <strong>nisi ut aliquip</strong> ex ea commodo consequat. Duis aute irure <i>dolor</i> in reprehenderit in voluptate velit esse cillum <b>dolore</b> eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <code>&lt;culpa&gt;</code> qui officia deserunt mollit anim id est laborum.</p>
</section> </section>
<section class="slide"> <section class="slide">
<h2>Two columns if you like</h2> <h2>Two columns if you like</h2>
<div class="columns two"> <div class="columns two">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>
</div> </div>
</section> </section>
<section class="slide"> <section class="slide">
<h2>All kind of lists</h2> <h2>All kind of lists</h2>
<ol> <ol>
<li>Simple lists are marked with bullets</li> <li>Simple lists are marked with bullets</li>
<li>Ordered lists begin with a number</li> <li>Ordered lists begin with a number</li>
<li>You can even nest lists one inside another <li>You can even nest lists one inside another
<ul> <ul>
<li>Or mix their types</li> <li>Or mix their types</li>
<li>But do not go too far</li> <li>But do not go too far</li>
<li>Otherwise audience will be bored</li> <li>Otherwise audience will be bored</li>
</ul> </ul>
</li> </li>
<li>Look, seven rows exactly!</li> <li>Look, seven rows exactly!</li>
</ol> </ol>
</section> </section>
<section class="slide"> <section class="slide">
<h2>Serious citations</h2> <h2>Serious citations</h2>
<figure> <figure>
<blockquote> <blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>
</blockquote> </blockquote>
<figcaption>Marcus Tullius Cicero</figcaption> <figcaption>Marcus Tullius Cicero</figcaption>
</figure> </figure>
</section> </section>
<section class="slide"> <section class="slide">
<h2>Code samples</h2> <h2>Code samples</h2>
<pre> <pre>
<code>&lt;!DOCTYPE html&gt;</code> <code>&lt;!DOCTYPE html&gt;</code>
<code class="mark">&lt;html lang="en"&gt;</code> <code class="mark">&lt;html lang="en"&gt;</code>
<code><mark>&lt;head&gt;</mark> <span class="comment">&lt;!--Comment--&gt;</span></code> <code><mark>&lt;head&gt;</mark> <span class="comment">&lt;!--Comment--&gt;</span></code>
<code> &lt;title&gt;Shower&lt;/title&gt;</code> <code> &lt;title&gt;Shower&lt;/title&gt;</code>
<code> &lt;meta charset="<mark class="important">UTF-8</mark>"&gt;</code> <code> &lt;meta charset="<mark class="important">UTF-8</mark>"&gt;</code>
<code> &lt;link rel="stylesheet" href="screen.css"&gt;</code> <code> &lt;link rel="stylesheet" href="screen.css"&gt;</code>
<code><mark>&lt;/head&gt;</mark></code> <code><mark>&lt;/head&gt;</mark></code>
</pre> </pre>
</section> </section>
<section class="slide"> <section class="slide">
<h2>Even tables</h2> <h2>Even tables</h2>
<table> <table>
<tr> <tr>
<th scope="col">Locavore</th> <th scope="col">Locavore</th>
<th>Umami</th> <th>Umami</th>
<th>Helvetica</th> <th>Helvetica</th>
<th>Vegan</th> <th>Vegan</th>
</tr> </tr>
<tr> <tr>
<th scope="row">Fingerstache</th> <th scope="row">Fingerstache</th>
<td>Kale</td> <td>Kale</td>
<td>Chips</td> <td>Chips</td>
<td>Keytar</td> <td>Keytar</td>
</tr> </tr>
<tr> <tr>
<th scope="row">Sriracha</th> <th scope="row">Sriracha</th>
<td>Gluten-free</td> <td>Gluten-free</td>
<td>Ennui</td> <td>Ennui</td>
<td>Keffiyeh</td> <td>Keffiyeh</td>
</tr> </tr>
<tr> <tr>
<th scope="row">Thundercats</th> <th scope="row">Thundercats</th>
<td>Jean</td> <td>Jean</td>
<td>Shorts</td> <td>Shorts</td>
<td>Biodiesel</td> <td>Biodiesel</td>
</tr> </tr>
<tr> <tr>
<th scope="row">Terry</th> <th scope="row">Terry</th>
<td>Richardson</td> <td>Richardson</td>
<td>Swag</td> <td>Swag</td>
<td>Blog</td> <td>Blog</td>
</tr> </tr>
</table> </table>
<p>It’s good to have information organized.</p> <p>It’s good to have information organized.</p>
</section> </section>
<section class="slide" id="picture"> <section class="slide" id="picture">
<h2>Pictures</h2> <h2>Pictures</h2>
<figure> <figure>
<img class="cover" src="pictures/picture.jpg" alt="Orange typewriter on a wooden table close-up"> <img class="cover" src="pictures/picture.jpg" alt="Orange typewriter on a wooden table close-up">
<figcaption class="copyright right white"> <figcaption class="copyright right white">
<a href="http://fiftyfootshadows.net/">© John Carey</a> <a href="http://fiftyfootshadows.net/">© John Carey</a>
</figcaption> </figcaption>
</figure> </figure>
<style> <style>
#picture h2 { #picture h2 {
color: white; color: white;
} }
</style> </style>
</section> </section>
<section class="slide"> <section class="slide">
<h2 class="shout shrink">You can even shout this way</h2> <h2 class="shout shrink">You can even shout this way</h2>
</section> </section>
<section class="slide"> <section class="slide">
<h2>Inner navigation</h2> <h2>Inner navigation</h2>
<ol> <ol>
<li>Lets you reveal list items one by one</li> <li>Lets you reveal list items one by one</li>
<li class="next">To keep some key points</li> <li class="next">To keep some key points</li>
<li class="next">In secret from audience</li> <li class="next">In secret from audience</li>
<li class="next">But it will work only once</li> <li class="next">But it will work only once</li>
<li class="next">Nobody wants to see the same joke twice</li> <li class="next">Nobody wants to see the same joke twice</li>
</ol> </ol>
</section> </section>
<section class="slide" id="see-more"> <section class="slide" id="see-more">
<h2 class="shout"> <h2 class="shout">
<img src="pictures/logo.svg" alt="Shower logo"> <img src="pictures/logo.svg" alt="Shower logo">
<a href="https://github.com/shower/shower">See more on GitHub</a> <a href="https://github.com/shower/shower">See more on GitHub</a>
</h2> </h2>
<style> <style>
#see-more h2 { #see-more h2 {
font-size: 100px font-size: 100px
} }
#see-more img { #see-more img {
width: 0.72em; width: 0.72em;
height: 0.72em; height: 0.72em;
} }
</style> </style>
</section> </section>
<footer class="badge"> <footer class="badge">
<a href="https://github.com/shower/shower">Fork me on GitHub</a> <a href="https://github.com/shower/shower">Fork me on GitHub</a>
</footer> </footer>
<div class="progress"></div> <div class="progress"></div>
<script src="node_modules/shower-core/shower.min.js"></script> <script src="node_modules/shower-core/shower.min.js"></script>
<!-- Copyright © 2018 Yours Truly, Famous Inc. --> <!-- Copyright © 2018 Yours Truly, Famous Inc. -->
</body> </body>
</html> </html>