prettydocs-jekyll 0.0.6 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: bbd230ca23c23928440527f9688e75961f01352c
-  data.tar.gz: 8f68f901c9d0b333ff449673c07f0ddc7cada8c5
+  metadata.gz: bc7b42bbe2e3bfd84289bd8eb5d9af9c8da23f18
+  data.tar.gz: dbce1ffdf00e0719cde4ca8ccdc1877936a7ffb2
 SHA512:
-  metadata.gz: 1ebe62d28d3be9099787173de672af8a8c149797bb4d5185d7662fb7a81450bfd151b8977b2d54b4e3b378b24832bdcab5e8021fa6a627a16f6d45468d67cecd
-  data.tar.gz: 61d6e1d1af90b391ad632bbf84195e07e3c558e8ea4a0b645c23940d2020db47b28f967e53ee71fe635b2a744777967eb4cfe0bd4d29ca96a69e3643689dceb1
+  metadata.gz: 46215c4ae1ddca6eb6a08d4499ee18f51a5efdbcfc11d23f11a3cc9337d2dd9c69f4f307e13735c32d47afe53420b22cb6a2304f86141c63f54931883bfb78cc
+  data.tar.gz: 5184273077a94b0cde56a0efc15e2b5e20ba72e8a4593268fd09ee3b87634447381c027b0e5ccb8263a4cfce35464e34a7d7976c2cff3f871f5553a593643727

data/_includes/_shower/setup.md

@@ -0,0 +1,39 @@
+{% capture strip_whitespace %}
+
+# Set all the things
+
+    {% capture width %}{% if page.width %}{{ page.width }}{% else %}{{ site.default_width }}{% endif %}{% endcapture %}
+    {% capture lang %}{% if page.lang %}{{ page.lang }}{% else %}{{ site.default_lang }}{% endif %}{% endcapture %}
+    {% capture body_class %}{% if page.body_class %}{{ page.body_class }}{% else %}{{ site.default_body_class }}{% endif %}{% endcapture %}
+
+    {% capture author_name %}{% if page.author %}{% if page.author.name %}{{ page.author.name }}{% else %}{{ page.author }}{% endif %}{% else %}{{ site.author.name }}{% endif %}{% endcapture %}
+    {% capture author_url  %}{% if page.author %}{{ page.author.url }}{% else %}{% if site.author.url %}{{ site.author.url }}{% endif %}{% endif %}{% endcapture %}
+
+    {% capture company_name %}{% if page.author.company %}{% if page.author.company.name %}{{ page.author.company.name }}{% else %}{{ page.author.company }}{% endif %}{% elsif page.company %}{% if page.company.name %}{{ page.company.name }}{% else %}{{ page.company }}{% endif %}{% else %}{{ site.author.company.name }}{% endif %}{% endcapture %}
+    {% capture company_url  %}{% if page.author.company %}{{ page.author.company.url }}{% elsif page.company %}{{ page.company.url }}{% else %}{% if site.author.company.url %}{{ site.author.company.url }}{% endif %}{% endif %}{% endcapture %}
+
+    {% capture title %}{% if page.title %}{{ page.title }}{% else %}{{ supertitle }}{% endif %}{% endcapture %}
+
+    {% capture subtitle %}{% if page.subtitle %}{{ page.subtitle }}{% else %}{% if author_url != '' %}[{{ author_name }}]({{ author_url }}){% else %}{{ author_name }}{% endif %}{% if company_name != '' %}, {% if company_url != '' %}[{{ company_name }}]({{ company_url }}){% else %}{{ company_name }}{% endif %}{% endif %}{% endif %}{% endcapture %}{% capture subtitle %}{{ subtitle | markdownify }}{% endcapture %}
+
+    {% capture fork_url %}{% if page.fork_url %}{{ page.fork_url }}{% else %}{{ site.fork_url }}{% endif %}{% endcapture %}
+
+## Set the progress var
+
+    {% assign progress = page.progress | append:'' | size %}
+    {% if progress == 0 %}
+        {% assign progress = site.progress %}
+    {% else %}
+        {% assign progress = page.progress %}
+    {% endif %}
+
+## Set the line numbers var
+
+    {% assign line_numbers = page.line_numbers | append:'' | size %}
+    {% if line_numbers == 0 %}
+        {% assign line_numbers = site.line_numbers %}
+    {% else %}
+        {% assign line_numbers = page.line_numbers %}
+    {% endif %}
+
+{% endcapture %}

data/_includes/_shower/showerify.html

@@ -0,0 +1,125 @@
+{% capture strip_whitespace %}
+{% include _shower/setup.md %}
+{% assign items = showerify_input | split:'<h1' %}
+{% for item in items %}
+    {% assign subitems = item | split:'</h1>' %}
+    {% assign subsubitems = subitems[0] %}
+
+    {% capture subsubitems2 %}{{ subsubitems }}{% endcapture %}
+    {% assign subsubitems2 = subsubitems2 | split: '>' %}
+    {% assign lol = subsubitems2[0] | append:">" %}
+    {% capture supertitle %}{{ subsubitems | remove_first:lol }}{% endcapture %}
+{% endfor %}
+
+{% assign flag = false %}
+{% for item in items %}
+    {% capture h1_attrs %}{{ item | split:'>' | first }}{% endcapture %}
+    {% if flag != false %}
+        {% capture showerify_middle %}<section{{ h1_attrs | replace_first:'class="','class="slide ' }}{% unless h1_attrs contains 'class' %} class="slide cover"{% endunless %}><div><h2{% endcapture %}
+        {% assign slides = item | remove_first:h1_attrs | replace_first:'</h1>','</h2>' | split: '<h2' %}
+
+        {% assign flag = false %}
+        {% for slide in slides %}
+            {% capture slide_attrs %}{{ slide | split:'>' | first }}{% endcapture %}
+
+            <!-- Looking for strong in header for shout -->
+            {% capture slide_header_content %}^BEGIN^{{ slide | remove_first:slide_attrs | split:'</h2>' | first }}$END${% endcapture %}
+            {% assign slide_extra_class = '' %}
+            {% if slide_header_content contains '^BEGIN^><strong>' and slide_header_content contains '</strong>$END$' %}
+                {% assign slide_extra_class = ' shout' %}
+            {% endif %}
+
+            {% if flag == false %}
+                {% capture showerify_middle %}{{ showerify_middle }}{{ slide }}{% endcapture %}
+                {% assign flag = true %}
+            {% else %}
+                {% capture showerify_middle %}{{ showerify_middle }}</div></section>
+<section class="slide{{ slide_extra_class }}"{{ slide_attrs }}><div><h2{% endcapture %}
+                {% assign newslide = slide | remove_first:slide_attrs %}
+                {% if slide_extra_class %}
+                    {% assign newslide = newslide | replace_first:'><strong>','>' %}
+                    {% assign newslide = newslide | replace_first:'</strong></h2>','</h2>' %}
+                {% endif %}
+                {% capture showerify_middle %}{{ showerify_middle }}{{ newslide }}{% endcapture %}
+            {% endif %}
+        {% endfor %}
+        {% capture showerify_middle %}{{ showerify_middle }}</div></section>{% endcapture %}
+    {% else %}
+        {% assign flag = true %}
+    {% endif %}
+{% endfor %}
+<!-- There is a difference between Liquid 1.4.1 and 1.5.0 in replace syntax, and in 1.4.1 you can't chain the one that is only there in 1.5.0, so multiple assigns there -->
+{% assign showerify_middle = showerify_middle | replace:'class="slide" class="','class="slide ' %}
+{% assign showerify_middle = showerify_middle | replace:'&lt;/mark&gt;','</mark>' %}
+{% assign showerify_middle = showerify_middle | replace:'&lt;mark&gt;','<mark>' %}
+{% assign showerify_middle = showerify_middle | replace:'&lt;mark class="next"&gt;','<mark class="next">' %}
+{% assign showerify_middle = showerify_middle | replace:'&lt;mark class="comment"&gt;','<mark class="comment">' %}
+{% assign showerify_middle = showerify_middle | replace:'&lt;mark class="important"&gt;','<mark class="important">' %}
+
+<!-- Replacing inline “comment” with <footer> -->
+{% assign footers = showerify_middle | split:'<p>// ' %}
+{% assign iteration = 0 %}
+{% for footer in footers %}
+    {% if iteration > 0 %}
+        {% assign footer_content = footer | split:'</p>' | first %}
+        {% capture footer_oldcontent %}<p>// {{ footer_content }}</p>{% endcapture %}
+        {% capture footer_newcontent %}<footer>{{ footer_content }}</footer>{% endcapture %}
+        {% assign showerify_middle = showerify_middle | replace_first:footer_oldcontent,footer_newcontent %}
+    {% endif %}
+    {% assign iteration = iteration | plus:1 %}
+{% endfor %}
+
+<!-- The same thing, but this time for comment without the space -->
+{% assign footers = showerify_middle | split:'<p>//' %}
+{% assign iteration = 0 %}
+{% for footer in footers %}
+    {% if iteration > 0 %}
+        {% assign footer_content = footer | split:'</p>' | first %}
+        {% capture footer_oldcontent %}<p>//{{ footer_content }}</p>{% endcapture %}
+        {% capture footer_newcontent %}<footer>{{ footer_content }}</footer>{% endcapture %}
+        {% assign showerify_middle = showerify_middle | replace_first:footer_oldcontent,footer_newcontent %}
+    {% endif %}
+    {% assign iteration = iteration | plus:1 %}
+{% endfor %}
+
+<!-- Code with line-numbers -->
+{% if line_numbers %}
+    {% assign code_blocks = showerify_middle | split:'<pre><code>' %}
+    {% assign iteration = 0 %}
+    {% for code_block in code_blocks %}
+        {% if iteration > 0 %}
+            {% assign code_block_content = code_block | split:'</code></pre>' | first %}
+            {% capture code_block_oldcontent %}<pre><code>{{ code_block_content }}</code></pre>{% endcapture %}
+            {% assign code_block_newcontent = code_block_oldcontent | newline_to_br | strip_newlines | replace:'<br />','</code><code>' %}
+            {% assign code_block_newcontent = code_block_newcontent | replace:'<code></code></pre>','</pre>' %}
+            {% assign code_block_newcontent = code_block_newcontent | replace:'<code></code>','<code> </code>' %}
+            {% assign showerify_middle = showerify_middle | replace_first:code_block_oldcontent,code_block_newcontent %}
+        {% endif %}
+        {% assign iteration = iteration | plus:1 %}
+    {% endfor %}
+{% endif %}
+
+<!-- Adding .next to list items -->
+{% assign showerify_middle = showerify_middle | replace:'>...',' class="next">' %}
+{% assign showerify_middle = showerify_middle | replace:'>&hellip;',' class="next">' %}
+{% assign showerify_middle = showerify_middle | replace:'>…',' class="next">' %}
+{% assign showerify_middle = showerify_middle | replace:' class="next"> ',' class="next">' %}
+{% assign showerify_middle = showerify_middle | replace:'>\...','>...' %}
+{% assign showerify_middle = showerify_middle | replace:'>\&hellip;','>&hellip;' %}
+{% assign showerify_middle = showerify_middle | replace:'>\…','>…' %}
+
+<!-- By default all the simple `<th>` are for cols -->
+{% assign showerify_middle = showerify_middle | replace:'<th>','<th scope="col">' %}
+<!-- And all the td starting/ending with asteriks are row ths -->
+{% assign showerify_middle = showerify_middle | replace:'<td>* ','<th scope="row">' %}
+{% assign showerify_middle = showerify_middle | replace:' *</td>','</th>' %}
+
+<!-- Kramdown mailto problem -->
+{% assign showerify_middle = showerify_middle | replace:'href="mail:','href="mailto:' %}
+
+<!-- Prototype of #3, need to split things here -->
+<!-- is there a way to declare <hr/> with classes/attributes? -->
+{% assign showerify_middle = showerify_middle | replace:'<hr />','</div></section><section class="slide"><div>' %}
+
+{% capture showerify_output %}{{ showerify_middle }}{% endcapture %}
+{% endcapture %}

data/_layouts/shower.html

@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+    {% capture showerify_input %}{{ content }}{% endcapture %}
+    {% include _shower/showerify.html %}
+    {% include _shower/setup.md %}
+<html lang="{{ lang }}">
+    <head>
+        <title>{{ title | strip_html }}</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width={% if width %}{{ width }}{% else %}792{% endif %}, user-scalable=no">
+        <link id="theme-style" rel="stylesheet" href="{{ "/assets/css/shower.css" | prepend: site.baseurl }}">
+    </head>
+    <body class="shower {{ body_class }}">
+        <header class="caption">
+            <h1>{{ title }}</h1>
+            {% if subtitle %}{{ subtitle }}{% endif %}
+        </header>
+        {{ showerify_output }}
+        {% if progress %}
+            <div class="progress"><div></div></div>
+        {% endif %}
+    </body>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/shower-core/2.1.0/shower.min.js" integrity="sha256-q52BKo1uAiqrR1kBKY6LWvBcwF4ujCgQokN5u8AwWzQ=" crossorigin="anonymous"></script>
+</html>

data/_sass/vendor/_shower.scss

@@ -0,0 +1,549 @@
+// Bright theme for Shower HTML presentation engine: github.com/shower/shower
+// Copyright © 2010–2015 Vadim Makeev, pepelsbey.net
+// Licensed under MIT license: github.com/shower/shower/wiki/MIT-License
+
+@import 'shower/defaults';
+@import 'shower/fonts';
+@import 'shower/reset';
+
+.shower {
+	counter-reset:slide;
+	font:24px/2 'Open Sans', sans-serif;
+	@media print {
+		text-rendering:geometricPrecision;
+		}
+	a {
+		color:$color;
+		@include underline(currentColor, 0.09);
+		text-decoration:none;
+		}
+	}
+
+// Caption
+// -------------------------------
+.caption {
+	display:none;
+	margin:0 0 60px;
+	padding:0 50px 0 0;
+	color:#555;
+	h1 {
+		font:50px 'Open Sans Light', sans-serif;
+		}
+	}
+
+// Badge
+// -------------------------------
+.badge {
+	position:absolute;
+	top:0;
+	right:0;
+	display:none;
+	overflow:hidden;
+	visibility:hidden;
+	width:11em;
+	height:11em;
+	line-height:2.5;
+	font-size:15px;
+	}
+	.badge a {
+		position:absolute;
+		bottom:50%;
+		right:-50%;
+		left:-50%;
+		visibility:visible;
+		background:$color;
+		color:#FFF;
+		text-align:center;
+		transform-origin:50% 100%;
+		transform:rotate(45deg) translateY(-1em);
+		}
+
+// Region
+// -------------------------------
+.region {
+	display:none;
+	}
+
+// Slide
+// -------------------------------
+.slide {
+	position:relative;
+	width:$width;
+	height:$height;
+	background:#FFF;
+	color:#000;
+	-webkit-print-color-adjust:exact;
+	-webkit-text-size-adjust:none;
+	-moz-text-size-adjust:none;
+	-ms-text-size-adjust:none;
+	@media print {
+		page-break-before:always;
+		}
+	// Number
+	&:after {
+		position:absolute;
+		right:0;
+		bottom:45px;
+		left:0;
+		color:#AAA;
+		counter-increment:slide;
+		content:counter(slide);
+		text-align:center;
+		line-height:1;
+		}
+	// Inner
+	> div {
+		position:absolute;
+		top:0;
+		left:0;
+		overflow:hidden;
+		padding:$top $right 0 $left;
+		width:$width - $left - $right;
+		height:$height - $top;
+		}
+	}
+
+// Elements
+// -------------------------------
+.slide {
+	// Header
+	h2 {
+		margin:0 0 58px;
+		font:48px/1 'Open Sans Light', sans-serif;
+		}
+	// Text
+	p {
+		margin:0 0 48px;
+		}
+	p.note {
+		color:#AAA;
+		}
+	b, strong {
+		font-weight:bold;
+		}
+	i, em {
+		font-style:italic;
+		}
+	code, kbd, samp {
+		padding:5px 7px 1px;
+		background:rgba(#000, 0.08);
+		color:#000;
+		line-height:1;
+		font-family:'Anka Coder', monospace;
+		}
+	mark {
+		padding:2px 7px;
+		background:$yellow;
+		color:#000;
+		}
+	sub, sup {
+		position: relative;
+		line-height:0;
+		font-size:75%;
+		}
+	sub {
+		bottom:-0.25em;
+		}
+	sup {
+		top:-0.5em;
+		}
+	// Quote
+	blockquote {
+		font-style:italic;
+		&:before {
+			position:absolute;
+			margin:-49px 0 0 -100px;
+			color:#DDD;
+			content:'\201C';
+			line-height:1;
+			font-size:200px;
+			}
+		& + figcaption {
+			margin:-48px 0 48px;
+			font-style:italic;
+			font-weight:bold;
+			}
+		}
+	// Lists
+	ol, ul {
+		margin:0 0 48px;
+		counter-reset:list;
+		li {
+			text-indent:-2em;
+			&:before {
+				display:inline-block;
+				width:2em;
+				color:#AAA;
+				text-align:right;
+				}
+			}
+		ol, ul {
+			margin:0 0 0 2em;
+			}
+		}
+	ul > li:before {
+		content:'\2022\00A0\00A0\2009';
+		}
+	ul > li:lang(ru):before {
+		content:'\2014\00A0\2009';
+		}
+	ol > li:before {
+		counter-increment:list;
+		content:counter(list)'.\00A0\2009';
+		}
+	// Code
+	pre {
+		margin:0 0 45px;
+		padding:3px 0 0;
+		counter-reset:code;
+		white-space:normal;
+		tab-size:4;
+		code {
+			display:block;
+			padding:0;
+			background:none;
+			white-space:pre;
+			line-height:2;
+			&:before {
+				position:absolute;
+				margin-left:-50px;
+				color:#AAA;
+				counter-increment:code;
+				content:counter(code, decimal-leading-zero)'.';
+				}
+			&:only-child:before {
+				content:'';
+				}
+			}
+		// Mark
+		mark {
+			padding:5px 7px 1px;
+			&.important {
+				background:$color;
+				color:#FFF;
+				}
+			&.comment {
+				padding:0;
+				background:none;
+				color:#AAA;
+				}
+			}
+		}
+	// Table
+	table {
+		margin:0 0 50px;
+		width:100%;
+		border-collapse:collapse;
+		border-spacing:0;
+		th, td {
+			@include underline($color, 0.055);
+			}
+		th {
+			text-align:left;
+			font-weight:bold;
+			}
+		&.striped {
+			tr:nth-child(even) {
+				background:mix($color, #FFF, 8%);
+				}
+			}
+		}
+	// Cover Shout
+	&.cover,
+	&.shout {
+		z-index:1;
+		&:after {
+			content:'';
+			}
+		}
+	// Cover
+	&.cover {
+		background:#000;
+		@mixin cover {
+			img, svg, video,
+			object, canvas, iframe {
+				@content;
+				}
+			}
+		@include cover {
+			position:absolute;
+			top:0;
+			left:0;
+			z-index:-1;
+			}
+		&.w {
+			@include cover {
+				top:50%;
+				width:100%;
+				transform:translateY(-50%);
+				}
+			}
+		&.h {
+			@include cover {
+				left:50%;
+				height:100%;
+				transform:translateX(-50%);
+				}
+			}
+		&.w.h {
+			@include cover {
+				top:0;
+				left:0;
+				transform:none;
+				}
+			}
+		}
+	// Shout
+	&.shout {
+		background:$color;
+		h2 {
+			position:absolute;
+			top:50%;
+			left:128px;
+			right:96px;
+			color:#FFF;
+			font-size:100px;
+			transform:translateY(-50%);
+			a {
+				@include underline(currentColor, 0.055);
+				color:#FFF;
+				}
+			}
+		}
+	// Place
+	.place {
+		position:absolute;
+		top:50%;
+		left:50%;
+		transform:translate(-50%, -50%);
+		&.t.l, &.t.r, &.b.r, &.b.l {
+			transform:none;
+			}
+		&.t, &.b {
+			transform:translate(-50%, 0);
+			}
+		&.l, &.r {
+			transform:translate(0, -50%);
+			}
+		&.t, &.t.l, &.t.r {
+			top:0;
+			}
+		&.r {
+			right:0;
+			left:auto;
+			}
+		&.b, &.b.r, &.b.l {
+			top:auto;
+			bottom:0;
+			}
+		&.l {
+			left:0;
+			}
+		}
+	// Notes
+	footer {
+		position:absolute;
+		left:0;
+		right:0;
+		bottom:-$height;
+		z-index:1;
+		display:none;
+		padding:21px $right 4px $left;
+		background:$yellow;
+		box-shadow:0 0 0 2px rgba(#000, 0.05);
+		transition:bottom 0.3s;
+		p {
+			margin:0 0 16px;
+			}
+		mark {
+			background:rgba(#FFF, 0.7);
+			}
+		}
+	&:hover footer {
+		bottom:0;
+		}
+	}
+
+// Screen
+@media screen {
+	// List
+	.shower.list {
+		position:absolute;
+		clip:rect(0, auto, auto, 0); // Having fun with IE10
+		padding:50px 0 50px 50px;
+		background:desaturate(lighten($color, 30%), 60%);
+		text-align:center;
+		// Outfit
+		.caption,
+		.badge {
+			display:block;
+			}
+		// Slide
+		.slide {
+			// Gap between slides
+			$gap:50px;
+			position:relative;
+			top:$height/2 - $gap;
+			display:inline-block;
+			margin:($gap - $height/2) ($gap - $width/2) 0 0;
+			text-align:left;
+			transform-origin:0 0;
+			transform:scale(0.5);
+			@media (max-width:$break) {
+				top:$height/2 + $height/4 - $gap;
+				margin:($gap - ($height/2 + $height/4)) ($gap - ($width/2 + $width/4)) 0 0;
+				transform:scale(0.25);
+				}
+			// Frame
+			&:before {
+				position:absolute;
+				top:0;
+				left:0;
+				z-index:-1;
+				width:$width/2;
+				height:$height/2;
+				box-shadow:0 0 0 1px #DDD;
+				content:'';
+				transform-origin:0 0;
+				transform:scale(2);
+				@media (max-width:$break) {
+					width:$width/4;
+					height:$height/4;
+					transform:scale(4);
+					}
+				}
+			// Number
+			&:after {
+				top:100%;
+				bottom:auto;
+				padding-top:50px;
+				@media (max-width:$break) {
+					width:$width/2;
+					transform-origin:0 0;
+					transform:scale(2);
+					}
+				}
+			// Hover
+			&:hover:before {
+				box-shadow:
+					0 0 0 1px #EEE,
+					0 0 0 12px rgba(#FFF, 0.5);
+				}
+			// Current
+			&:target {
+				&:before {
+					box-shadow:
+						0 0 10px 0 darken($color, 5%),
+						0 0 0 12px $color;
+					}
+				&:after {
+					color:$color;
+					}
+				}
+			// Inner
+			> div {
+				&:before {
+					position:absolute;
+					top:0;
+					right:0;
+					bottom:0;
+					left:0;
+					z-index:2;
+					content:'';
+					}
+				}
+			// Cover Shout
+			&.cover,
+			&.shout {
+				&:after {
+					content:counter(slide);
+					}
+				}
+			// Notes
+			footer {
+				display:block;
+				}
+			}
+		}
+	// Full
+	.shower.full {
+		position:absolute;
+		top:50%;
+		left:50%;
+		overflow:hidden;
+		margin:(-$height/2) 0 0 (-$width/2);
+		width:$width;
+		height:$height;
+		background:#000;
+		// Debug
+		&.debug:after {
+			position:absolute;
+			top:0;
+			right:0;
+			bottom:0;
+			left:0;
+			z-index:2;
+			background:url(../images/grid-#{$ratio}.svg) no-repeat;
+			content:'';
+			}
+		// Region
+		.region {
+			@include offscreen;
+			display:block;
+			}
+		// Slide
+		.slide {
+			position:absolute;
+			top:0;
+			left:0;
+			margin-left:150%;
+			// Next
+			.next {
+				visibility:hidden;
+				&.active {
+					visibility:visible;
+					}
+				}
+			// Current
+			&:target {
+				margin:0;
+				}
+			// Shout
+			&.shout {
+				&.right, &.up {
+					h2 {
+						opacity:0;
+						transition:all 0.4s ease-out;
+						}
+					&:target h2 {
+						opacity:1;
+						transform:translateX(0) translateY(-50%);
+						}
+					}
+				&.right h2 {
+					transform:translateX(-100%) translateY(-50%);
+					}
+				&.up h2 {
+					transform:translateX(0) translateY(100%);
+					}
+				}
+			}
+		// Progress
+		.progress {
+			position:absolute;
+			bottom:0;
+			left:0;
+			z-index:1;
+			width:0;
+			height:8px;
+			background:$color;
+			transition:width 0.2s linear;
+			}
+		}
+	}
+
+// Print
+@page {
+	margin:0;
+	size:$width $height;
+	}