diff --git a/.editorconfig b/.editorconfig
index cde0e92..2d14872 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,14 +1,12 @@
-# EditorConfig is awesome: http://EditorConfig.org
root = true
[*]
-indent_style = tab
+indent_style = space
indent_size = 4
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
charset = utf-8
-[{bower.json,package.json,.travis.yml}]
-indent_style = space
+[{*.json,*.yml,*.toml}]
indent_size = 2
diff --git a/README.md b/README.md
index d6dc6d3..322b40e 100644
--- a/README.md
+++ b/README.md
@@ -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:
- 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:
- npm run publish
+ npm run publish
And you’ll have your slides published to `http://USER.github.io/REPO/`.
diff --git a/docs/features.md b/docs/features.md
index 676ec43..cc9d230 100644
--- a/docs/features.md
+++ b/docs/features.md
@@ -4,31 +4,31 @@ All theme’s features are demonstrated in the [index.html](index.html) file. Us
- [Anatomy](#anatomy)
- [Common](#common)
- - [Language](#language)
- - [Canvas](#canvas)
- - [Title](#title)
- - [Badge](#badge)
- - [Progress](#progress)
+ - [Language](#language)
+ - [Canvas](#canvas)
+ - [Title](#title)
+ - [Badge](#badge)
+ - [Progress](#progress)
- [Slide](#slide)
- - [Number](#number)
- - [Types](#types)
- - [White](#white)
- - [Black](#black)
- - [Grid](#grid)
- - [Content](#content)
- - [Header](#header)
- - [Paragraphs](#paragraphs)
- - [Inline](#inline)
- - [Quotes](#quotes)
- - [Lists](#lists)
- - [Columns](#columns)
- - [Tables](#tables)
- - [Code](#code)
- - [Elements](#elements)
- - [Cover](#cover)
- - [Shout](#shout)
- - [Place](#place)
- - [Notes](#notes)
+ - [Number](#number)
+ - [Types](#types)
+ - [White](#white)
+ - [Black](#black)
+ - [Grid](#grid)
+ - [Content](#content)
+ - [Header](#header)
+ - [Paragraphs](#paragraphs)
+ - [Inline](#inline)
+ - [Quotes](#quotes)
+ - [Lists](#lists)
+ - [Columns](#columns)
+ - [Tables](#tables)
+ - [Code](#code)
+ - [Elements](#elements)
+ - [Cover](#cover)
+ - [Shout](#shout)
+ - [Place](#place)
+ - [Notes](#notes)
## 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:
-
-
+
+
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:
-
+
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.
@@ -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: `
+
Caption is visible only in the list mode. Don’t forget to also specify presentation title in document’s `
` 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 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:
-
+
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.
-
- …
-
-
- …
-
+
+ …
+
+
+ …
+
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:
-
-
-
+
+
+
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.
-
+
#### Black
Black type sets black background.
-
+
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.
-
+
#### Grid
Grid set a background with two guide types: main magenta guides and additional cyan guides, setting margins, rows and columns.
-
- …
-
+
+ …
+
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 `
` element:
-
-
Slide Header
-
+
+
Slide Header
+
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 `
` element. You could also make a note, less important part of a slide, by adding a `note` class to a paragraph:
-
-
Text
-
Note
-
+
+
Text
+
Note
+
#### Inline
@@ -202,116 +202,116 @@ There are following inline elements styled in the theme:
Quotes are marked with `
` element which contains one or more paragraphs:
-
-
Flannel bicycle rights locavore selfies.
-
+
+
Flannel bicycle rights locavore selfies.
+
To add quote’s author wrap a quote to a `
` element and put a caption in the `` right after:
-
+
#### Lists
For creating list you must use `ul` (`ol` for numerical list).
-
-
Literally viral vegan
-
Wes Anderson chillwave Marfa
-
-
Retro meh brunch aesthetic
-
Messenger bag retro cred
-
-
-
+
+
Literally viral vegan
+
Wes Anderson chillwave Marfa
+
+
Retro meh brunch aesthetic
+
Messenger bag retro cred
+
+
+
You can also create list with inner navigation by adding `next` class to each elements following after element from each you want start navigation:
-
Inner navigation
-
-
I'll be seen right away.
-
Just navigate to next slide and you'll see others.
-
Hey! It's all okay ?
-
...
-
+
Inner navigation
+
+
I'll be seen right away.
+
Just navigate to next slide and you'll see others.
+
Hey! It's all okay ?
+
...
+
And even so:
-
Benefits
-
-
The most important advantage
-
Less important advantage
-
-
Disadvantages
-
-
There's nothing here
-
...
-
+
Benefits
+
+
The most important advantage
+
Less important advantage
+
+
Disadvantages
+
+
There's nothing here
+
...
+
#### Columns
If you want to form text in two or three columns use `double` or `triple` class
-
- Echo Park 8-bit sustainable umami deep v Kickstarter.
-
+
+ Echo Park 8-bit sustainable umami deep v Kickstarter.
+
Also work with lists:
-
-
Occupy locavore blog
-
Mustache you haven’t heard of
-
Something else
-
+
+
Occupy locavore blog
+
Mustache you haven’t heard of
+
Something else
+
#### Tables
Create table by using usual `table`, `tr`, `th`
-
-
-
Gentrify
-
Twee
-
-
-
Messenger
-
Mixtape
-
-
+
+
+
Gentrify
+
Twee
+
+
+
Messenger
+
Mixtape
+
+
Class `striped` stylizes your table: even rows will turn gray background
-
+
#### Code
`Code` tag define your program code
-
function action() {
- // TODO
- return true;
- }
+
function action() {
+ // TODO
+ return true;
+ }
If you want to add lines numbers use next construction:
-
- function action() {
- // TODO
- return true;
- }
-
+
+ function action() {
+ // TODO
+ return true;
+ }
+
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;
-
function action() {
- // TODO
- return true;
- }
+
function action() {
+ // TODO
+ return true;
+ }
### 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
-
-
-
+
+
+
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
-
-
-
+
+
+
Shortcut for `width`, `height`:
-
-
+
+
To insert an image description, links to the author's site or other information use `figure` tag with `figcaption`
-
+
#### 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.
-
-
Shout
-
+
+
Shout
+
Add `grow` class to animate text from small to big size
-
-
Growing Shout
-
+
+
Growing Shout
+
Or, on the contrary, for animate text size from big to small add `shrink` class.
-
-
Shrinking Shout
-
+
+
Shrinking Shout
+
#### Place
Use `place` class on img attribute give same effect as `cover` class - set background image
-
-
-
+
+
+
If you want collocate picture at a certain side, you need to use `top` / `right` / `bottom` / `left` class as shown below
-
-
-
-
+
+
+
+
You can also combine classes for location in corners:
-
-
-
-
+
+
+
+
#### 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:
-
-