Commit a5351187 authored by Vadim Makeev's avatar Vadim Makeev

Updates

parent 814e5e84
...@@ -204,7 +204,7 @@ ...@@ -204,7 +204,7 @@
<div class="progress"></div> <div class="progress"></div>
<script src="shower/shower.min.js"></script> <script src="shower/shower.min.js"></script>
<!-- Copyright © 2018 Yours Truly, Famous Inc. --> <!-- Copyright © 3000 Yours Truly, Famous Inc. -->
</body> </body>
</html> </html>
# The MIT License # The MIT License
Copyright © 2010–2018 Vadim Makeev, http://pepelsbey.net/ Copyright © 2010–2019 Vadim Makeev, https://pepelsbey.net/
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
...@@ -12,7 +12,7 @@ THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR I ...@@ -12,7 +12,7 @@ THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR I
# Лицензия MIT # Лицензия MIT
Copyright © 2010–2018 Вадим Макеев, http://pepelsbey.net/ Copyright © 2010–2019 Вадим Макеев, https://pepelsbey.net/
Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий: Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:
......
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
![Ribbon screen shot](pictures/canvas.png) ![Ribbon screen shot](pictures/canvas.png)
Default theme for the [Shower](https://github.com/shower/shower/) presentation engine. Doesn’t include engine itself. [See it in action](http://shwr.me/shower/themes/material/). Follow [@shower_me](https://twitter.com/shower_me) for support and updates, [file an issue](https://github.com/shower/shower/issues/new) if you have any. Default theme for the [Shower](https://github.com/shower/shower/) presentation engine. Doesn’t include engine itself. [See it in action](https://shwr.me/shower/themes/material/). Follow [@shower_me](https://twitter.com/shower_me) for support and updates, [file an issue](https://github.com/shower/shower/issues/new) if you have any.
## Usage ## Usage
Get the Shower template where Material is already included. Download the [template archive](http://shwr.me/shower.zip) or install the package: Get the Shower template where Material is already included. Download the [template archive](https://shwr.me/shower.zip) or install the package:
npm install shower npm install shower
......
...@@ -26,6 +26,13 @@ ...@@ -26,6 +26,13 @@
<p class="note">Echo Park 8-bit sustainable umami deep v Kickstarter.</p> <p class="note">Echo Park 8-bit sustainable umami deep v Kickstarter.</p>
</section> </section>
<section class="slide">
<h2>First Slide Header</h2>
<p>Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic.</p>
<h2>Second Slide Header</h2>
<p>Whatever authentic disrupt, you probably haven’t heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid four loko quinoa.</p>
</section>
<section class="slide"> <section class="slide">
<h2><a href="">Linked Header</a></h2> <h2><a href="">Linked Header</a></h2>
<p>Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack bespoke Helvetica roof party. Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Echo Park 8-bit sustainable umami deep v Kickstarter. Hella sustainable messenger bag, leggings skateboard literally bicycle rights H₂0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical.</p> <p>Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack bespoke Helvetica roof party. Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Echo Park 8-bit sustainable umami deep v Kickstarter. Hella sustainable messenger bag, leggings skateboard literally bicycle rights H₂0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical.</p>
...@@ -219,6 +226,19 @@ ...@@ -219,6 +226,19 @@
</div> </div>
</section> </section>
<section class="slide">
<div class="columns two">
<div>
<h2>Column One</h2>
<p>Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack bespoke Helvetica roof party. Messenger bag retro cred Portland next level.</p>
</div>
<div>
<h2>Column Two</h2>
<p>Yr stumptown Schlitz Carles deep v small batch. Echo Park 8-bit sustainable umami deep v Kickstarter. Hella sustainable messenger bag, leggings skateboard literally bicycle rights H₂0 mumblecore banh.</p>
</div>
</div>
</section>
<section class="slide"> <section class="slide">
<h2>Simple Table</h2> <h2>Simple Table</h2>
<table> <table>
...@@ -267,6 +287,54 @@ ...@@ -267,6 +287,54 @@
</table> </table>
</section> </section>
<section class="slide">
<h2>Marked Simple Table</h2>
<table>
<tr>
<th scope="col">Gentrify</th>
<th>Twee</th>
<th>Artisan</th>
<th>Banksy</th>
</tr>
<tr>
<th scope="row">Messenger</th>
<td>Mixtape</td>
<td>Small batch</td>
<td>Bicycle rights</td>
</tr>
<tr class="mark">
<th scope="row">Meggings</th>
<td>Freegan</td>
<td>Retro biodiesel</td>
<td>Slow-carb</td>
</tr>
<tr class="mark next">
<th scope="row">Vegan</th>
<td>Occupy</td>
<td>Normcore</td>
<td>Put a bird on it</td>
</tr>
<tr class="mark next">
<th scope="row">Next level</th>
<td>Selfies</td>
<td>Sustainable</td>
<td>Organic</td>
</tr>
<tr>
<th scope="row">Umami</th>
<td>Asymmetrical</td>
<td>Keytar</td>
<td>Craft beer</td>
</tr>
<tr>
<th scope="row">Biodiesel</th>
<td>Haven’t heard</td>
<td>Skateboard</td>
<td>Farm-to-table</td>
</tr>
</table>
</section>
<section class="slide"> <section class="slide">
<h2>Striped Table</h2> <h2>Striped Table</h2>
<table class="striped"> <table class="striped">
...@@ -315,6 +383,54 @@ ...@@ -315,6 +383,54 @@
</table> </table>
</section> </section>
<section class="slide">
<h2>Marked Striped Table</h2>
<table class="striped">
<tr>
<th scope="col">Gentrify</th>
<th>Twee</th>
<th>Artisan</th>
<th>Banksy</th>
</tr>
<tr>
<th scope="row">Messenger</th>
<td>Mixtape</td>
<td>Small batch</td>
<td>Bicycle rights</td>
</tr>
<tr class="mark">
<th scope="row">Meggings</th>
<td>Freegan</td>
<td>Retro biodiesel</td>
<td>Slow-carb</td>
</tr>
<tr class="mark next">
<th scope="row">Vegan</th>
<td>Occupy</td>
<td>Normcore</td>
<td>Put a bird on it</td>
</tr>
<tr class="mark next">
<th scope="row">Next level</th>
<td>Selfies</td>
<td>Sustainable</td>
<td>Organic</td>
</tr>
<tr>
<th scope="row">Umami</th>
<td>Asymmetrical</td>
<td>Keytar</td>
<td>Craft beer</td>
</tr>
<tr>
<th scope="row">Biodiesel</th>
<td>Haven’t heard</td>
<td>Skateboard</td>
<td>Farm-to-table</td>
</tr>
</table>
</section>
<section class="slide"> <section class="slide">
<h2>Plain Code Listing</h2> <h2>Plain Code Listing</h2>
<pre><code>&lt;html lang="en"&gt; <pre><code>&lt;html lang="en"&gt;
...@@ -377,8 +493,8 @@ ...@@ -377,8 +493,8 @@
</pre> </pre>
</section> </section>
<section class="slide white"> <section class="slide gray">
<h2>White Slide</h2> <h2>Gray Slide</h2>
</section> </section>
<section class="slide black"> <section class="slide black">
...@@ -419,9 +535,9 @@ ...@@ -419,9 +535,9 @@
<h2>Cover</h2> <h2>Cover</h2>
<figure> <figure>
<img class="cover" src="pictures/exact.svg" alt="Picture placeholder."> <img class="cover" src="pictures/exact.svg" alt="Picture placeholder.">
<figcaption class="copyright top">Copyright © 2018 <a href="">Yours Truly</a>, Famous Inc.</figcaption> <figcaption class="copyright top">Copyright © 3000 <a href="">Yours Truly</a>, Famous Inc.</figcaption>
<figcaption class="copyright">Copyright © 2018 <a href="">Yours Truly</a>, Famous Inc.</figcaption> <figcaption class="copyright white">Copyright © 3000 <a href="">Yours Truly</a>, Famous Inc.</figcaption>
<figcaption class="copyright bottom">Copyright © 2018 <a href="">Yours Truly</a>, Famous Inc.</figcaption> <figcaption class="copyright bottom">Copyright © 3000 <a href="">Yours Truly</a>, Famous Inc.</figcaption>
</figure> </figure>
</section> </section>
...@@ -488,6 +604,6 @@ ...@@ -488,6 +604,6 @@
<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 © 3000 Yours Truly, Famous Inc. -->
</body> </body>
</html> </html>
...@@ -35,16 +35,4 @@ ...@@ -35,16 +35,4 @@
<line x1="912" x2="912" y1="0" y2="768" class="line"/> <line x1="912" x2="912" y1="0" y2="768" class="line"/>
<line y1="120" y2="120" x1="0" x2="1024" class="line"/> <line y1="120" y2="120" x1="0" x2="1024" class="line"/>
<line y1="192" y2="192" x1="0" x2="1024" class="line"/>
<line y1="240" y2="240" x1="0" x2="1024" class="line"/>
<line y1="288" y2="288" x1="0" x2="1024" class="line"/>
<line y1="336" y2="336" x1="0" x2="1024" class="line"/>
<line y1="384" y2="384" x1="0" x2="1024" class="line"/>
<line y1="432" y2="432" x1="0" x2="1024" class="line"/>
<line y1="480" y2="480" x1="0" x2="1024" class="line"/>
<line y1="528" y2="528" x1="0" x2="1024" class="line"/>
<line y1="576" y2="576" x1="0" x2="1024" class="line"/>
<line y1="624" y2="624" x1="0" x2="1024" class="line"/>
<line y1="672" y2="672" x1="0" x2="1024" class="line"/>
<line y1="720" y2="720" x1="0" x2="1024" class="line"/>
</svg> </svg>
...@@ -9,5 +9,5 @@ ...@@ -9,5 +9,5 @@
margin-left: calc(var(--slide-width) / 2 * -1); margin-left: calc(var(--slide-width) / 2 * -1);
width: var(--slide-width); width: var(--slide-width);
height: var(--slide-height); height: var(--slide-height);
background: black; background-color: black;
} }
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
auto-fill, auto-fill,
calc(var(--slide-width) * var(--slide-scale)) calc(var(--slide-width) * var(--slide-scale))
); );
background: var(--color-back); background-color: var(--color-back);
} }
/* IE & Edge Fix */ /* IE & Edge Fix */
......
...@@ -9,6 +9,20 @@ ...@@ -9,6 +9,20 @@
font-size: 48px; font-size: 48px;
} }
.slide * + h2 {
margin-top: 40px;
}
.slide h2 a {
background-image:
linear-gradient(
to top,
currentColor 0.05em,
transparent 0.05em
);
background-position: bottom 0.05em left 0;
}
.slide p { .slide p {
margin-top: 0; margin-top: 0;
margin-bottom: 1em; margin-bottom: 1em;
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
margin-left: -96px; margin-left: -96px;
padding: 0 0 0 96px; padding: 0 0 0 96px;
width: calc(100% + 96px + 112px); width: calc(100% + 96px + 112px);
background: none; background-color: transparent;
line-height: 2; line-height: 2;
white-space: pre; white-space: pre;
tab-size: 4; tab-size: 4;
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
/* Important */ /* Important */
.slide pre mark.important { .slide pre mark.important {
background: var(--color-key); background-color: var(--color-key);
color: white; color: white;
} }
...@@ -54,27 +54,27 @@ ...@@ -54,27 +54,27 @@
/* Marked Line */ /* Marked Line */
.slide pre code.mark:not(:only-child) { .slide pre code.mark:not(:only-child) {
background: var(--color-back); background-color: var(--color-back);
} }
/* Next Line */ /* Next Line */
.slide pre code.mark.next:not(:only-child) { .slide pre code.mark.next:not(:only-child) {
visibility: visible; visibility: visible;
background: none; background-color: transparent;
} }
.slide pre code.mark.next.active:not(:only-child) { .slide pre code.mark.next.active:not(:only-child) {
background: var(--color-back); background-color: var(--color-back);
} }
/* Full */ /* Full */
.shower.full .slide pre code:not(:only-child).mark.next { .shower.full .slide pre code:not(:only-child).mark.next {
visibility: visible; visibility: visible;
background: none; background-color: transparent;
} }
.shower.full .slide pre code:not(:only-child).mark.next.active { .shower.full .slide pre code:not(:only-child).mark.next.active {
background: var(--color-back); background-color: var(--color-back);
} }
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
left: 0; left: 0;
z-index: 1; z-index: 1;
padding: 48px 112px 24px 96px; padding: 48px 112px 24px 96px;
background: var(--color-yellow-light); background-color: var(--color-yellow-light);
transition: transform 0.3s; transition: transform 0.3s;
} }
......
...@@ -22,13 +22,13 @@ ...@@ -22,13 +22,13 @@
.slide code, .slide code,
.slide kbd, .slide kbd,
.slide samp { .slide samp {
background: var(--color-back); background-color: var(--color-back);
line-height: 1; line-height: 1;
font-family: 'Roboto Mono', monospace; font-family: 'Roboto Mono', monospace;
} }
.slide mark { .slide mark {
background: var(--color-yellow); background-color: var(--color-yellow);
} }
.slide sub, .slide sub,
......
...@@ -34,20 +34,38 @@ ...@@ -34,20 +34,38 @@
/* Lines */ /* Lines */
.slide tr:not(:last-of-type) > * { .slide tr:not(:last-of-type) > * {
background: background-image:
linear-gradient( linear-gradient(
to top, to top,
var(--color-light) 0.06em, var(--color-light) 0.06em,
transparent 0.06em transparent 0.06em
) repeat-x; );
background-repeat: repeat-x;
} }
/* Stripes */ /* Stripes */
.slide table.striped tr:nth-child(even) { .slide table.striped tr:nth-child(even) {
background: var(--color-back); background-color: var(--color-back);
} }
.slide table.striped tr > * { .slide table.striped tr > * {
background-image: none; background-image: none;
} }
/* Marked Row */
.slide tr.mark {
background-color: var(--color-yellow);
}
/* Next Marked Row */
.slide tr.mark.next {
visibility: visible;
background-color: transparent;
}
.slide tr.mark.next.active {
background-color: var(--color-yellow);
}
/* Gray */
.slide.gray {
background-color: var(--color-medium);
}
/* White */
.slide.white {
background-color: white;
}
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
/* Modifiers */ /* Modifiers */
@import 'modifiers/clear.css'; @import 'modifiers/clear.css';
@import 'modifiers/white.css'; @import 'modifiers/gray.css';
@import 'modifiers/black.css'; @import 'modifiers/black.css';
/* Slide */ /* Slide */
...@@ -35,17 +35,17 @@ ...@@ -35,17 +35,17 @@
z-index: 0; z-index: 0;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
padding: 80px 112px 0 96px; padding: 79px 112px 0 96px;
width: var(--slide-width); width: var(--slide-width);
height: var(--slide-height); height: var(--slide-height);
background: white; background-color: white;
} }
/* Number */ /* Number */
.slide::after { .slide::after {
position: absolute; position: absolute;
right: 0; right: 16px;
bottom: 38px; bottom: 38px;
left: 0; left: 0;
color: var(--color-light); color: var(--color-light);
......
# The MIT License # The MIT License
Copyright © 2010–2018 Vadim Makeev, http://pepelsbey.net/ Copyright © 2010–2019 Vadim Makeev, http://pepelsbey.net/
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
...@@ -12,7 +12,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI ...@@ -12,7 +12,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
# Лицензия MIT # Лицензия MIT
Copyright © 2010–2018 Вадим Макеев, http://pepelsbey.net/ Copyright © 2010–2019 Вадим Макеев, http://pepelsbey.net/
Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий: Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:
......
Copyright (c) 2009, ParaType Ltd. All Rights Reserved. Copyright (c) 2009, ParaType Ltd. All Rights Reserved.
LICENSING AGREEMENT LICENSING AGREEMENT
for the fonts with Original Name: PT Sans, PT Serif, PT Mono. for the fonts with Original Name: PT Sans, PT Serif, PT Mono.
Version 1.3 - January 20, 2012 Version 1.3 - January 20, 2012
GRANT OF LICENSE GRANT OF LICENSE
ParaType Ltd grants you the right to use, copy, modify the fonts and distribute ParaType Ltd grants you the right to use, copy, modify the fonts and distribute
modified and unmodified copies of the fonts by any means, including placing modified and unmodified copies of the fonts by any means, including placing
on Web servers for free downloading, embedding in documents and Web pages, on Web servers for free downloading, embedding in documents and Web pages,
bundling with commercial and non commercial products, if it does not conflict bundling with commercial and non commercial products, if it does not conflict
with the conditions listed below: with the conditions listed below:
- You may bundle the font with commercial software, but you may not sell the - You may bundle the font with commercial software, but you may not sell the
fonts by themselves. They are free. fonts by themselves. They are free.
- You may distribute the fonts in modified or unmodified version only together - You may distribute the fonts in modified or unmodified version only together
with this Licensing Agreement and with above copyright notice. You have no with this Licensing Agreement and with above copyright notice. You have no
right to modify the text of Licensing Agreement. It can be placed in a separate right to modify the text of Licensing Agreement. It can be placed in a separate
text file or inserted into the font file, but it must be easily viewed by users. text file or inserted into the font file, but it must be easily viewed by users.
- You may not distribute modified version of the font under the Original name - You may not distribute modified version of the font under the Original name
or � combination of Original name with any other words without explicit written or � combination of Original name with any other words without explicit written
permission from ParaType. permission from ParaType.
TERMINATION & TERRITORY TERMINATION & TERRITORY
This license has no limits on time and territory, but it becomes null and void This license has no limits on time and territory, but it becomes null and void
if any of the above conditions are not met. if any of the above conditions are not met.
DISCLAIMER DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY
WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK,
OR OTHER RIGHT. IN NO EVENT SHALL PARATYPE BE LIABLE FOR ANY OR OTHER RIGHT. IN NO EVENT SHALL PARATYPE BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL,
INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN
AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT
OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
DEALINGS IN THE FONT SOFTWARE. DEALINGS IN THE FONT SOFTWARE.
ParaType Ltd ParaType Ltd
http://www.paratype.ru http://www.paratype.ru
...@@ -25,6 +25,13 @@ ...@@ -25,6 +25,13 @@
<p class="note">Echo Park 8-bit sustainable umami deep v Kickstarter.</p> <p class="note">Echo Park 8-bit sustainable umami deep v Kickstarter.</p>
</section> </section>
<section class="slide">
<h2>First Slide Header</h2>
<p>Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic.</p>
<h2>Second Slide Header</h2>
<p>Whatever authentic disrupt, you probably haven’t heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid four loko quinoa.</p>
</section>
<section class="slide"> <section class="slide">
<h2><a href="">Linked Header</a></h2> <h2><a href="">Linked Header</a></h2>
<p>Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack bespoke Helvetica roof party. Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Echo Park 8-bit sustainable umami deep v Kickstarter. Hella sustainable messenger bag, leggings skateboard literally bicycle rights H₂0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical.</p> <p>Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack bespoke Helvetica roof party. Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Echo Park 8-bit sustainable umami deep v Kickstarter. Hella sustainable messenger bag, leggings skateboard literally bicycle rights H₂0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical.</p>
...@@ -218,6 +225,19 @@ ...@@ -218,6 +225,19 @@
</div> </div>
</section> </section>
<section class="slide">
<div class="columns two">
<div>
<h2>Column One</h2>
<p>Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack bespoke Helvetica roof party. Messenger bag retro cred Portland next level.</p>
</div>
<div>
<h2>Column Two</h2>
<p>Yr stumptown Schlitz Carles deep v small batch. Echo Park 8-bit sustainable umami deep v Kickstarter. Hella sustainable messenger bag, leggings skateboard literally bicycle rights H₂0 mumblecore banh.</p>
</div>
</div>
</section>
<section class="slide"> <section class="slide">
<h2>Simple Table</h2> <h2>Simple Table</h2>
<table> <table>
...@@ -267,7 +287,55 @@ ...@@ -267,7 +287,55 @@
</section> </section>
<section class="slide"> <section class="slide">
<h2>Striped Table</h2> <h2>Marked Table</h2>
<table>
<tr>
<th scope="col">Gentrify</th>
<th>Twee</th>
<th>Artisan</th>
<th>Banksy</th>
</tr>
<tr>
<th scope="row">Messenger</th>
<td>Mixtape</td>
<td>Small batch</td>
<td>Bicycle rights</td>
</tr>
<tr class="mark">
<th scope="row">Meggings</th>
<td>Freegan</td>
<td>Retro biodiesel</td>
<td>Slow-carb</td>
</tr>
<tr class="mark next">
<th scope="row">Vegan</th>
<td>Occupy</td>
<td>Normcore</td>
<td>Put a bird on it</td>
</tr>
<tr class="mark next">
<th scope="row">Next level</th>
<td>Selfies</td>
<td>Sustainable</td>
<td>Organic</td>
</tr>
<tr>
<th scope="row">Umami</th>
<td>Asymmetrical</td>
<td>Keytar</td>
<td>Craft beer</td>
</tr>
<tr>
<th scope="row">Biodiesel</th>
<td>Haven’t heard</td>
<td>Skateboard</td>
<td>Farm-to-table</td>
</tr>
</table>
</section>
<section class="slide">
<h2>Marked Striped Table</h2>
<table class="striped"> <table class="striped">
<tr> <tr>
<th scope="col">Gentrify</th> <th scope="col">Gentrify</th>
...@@ -314,6 +382,54 @@ ...@@ -314,6 +382,54 @@
</table> </table>
</section> </section>
<section class="slide">
<h2>Marked Striped Table</h2>
<table class="striped">
<tr>
<th scope="col">Gentrify</th>
<th>Twee</th>
<th>Artisan</th>
<th>Banksy</th>
</tr>
<tr>
<th scope="row">Messenger</th>
<td>Mixtape</td>
<td>Small batch</td>
<td>Bicycle rights</td>
</tr>
<tr class="mark">
<th scope="row">Meggings</th>
<td>Freegan</td>
<td>Retro biodiesel</td>
<td>Slow-carb</td>
</tr>
<tr class="mark next">
<th scope="row">Vegan</th>
<td>Occupy</td>
<td>Normcore</td>
<td>Put a bird on it</td>
</tr>
<tr class="mark next">
<th scope="row">Next level</th>
<td>Selfies</td>
<td>Sustainable</td>
<td>Organic</td>
</tr>
<tr>
<th scope="row">Umami</th>
<td>Asymmetrical</td>
<td>Keytar</td>
<td>Craft beer</td>
</tr>
<tr>
<th scope="row">Biodiesel</th>
<td>Haven’t heard</td>
<td>Skateboard</td>
<td>Farm-to-table</td>
</tr>
</table>
</section>
<section class="slide"> <section class="slide">
<h2>Plain Code Listing</h2> <h2>Plain Code Listing</h2>
<pre><code>&lt;html lang="en"&gt; <pre><code>&lt;html lang="en"&gt;
...@@ -376,8 +492,8 @@ ...@@ -376,8 +492,8 @@
</pre> </pre>
</section> </section>
<section class="slide white"> <section class="slide gray">
<h2>White Slide</h2> <h2>Gray Slide</h2>
</section> </section>
<section class="slide black"> <section class="slide black">
...@@ -426,9 +542,9 @@ ...@@ -426,9 +542,9 @@
<h2>Cover</h2> <h2>Cover</h2>
<figure> <figure>
<img class="cover" src="pictures/exact.svg" alt="Picture placeholder."> <img class="cover" src="pictures/exact.svg" alt="Picture placeholder.">
<figcaption class="copyright top">Copyright © 2018 <a href="">Yours Truly</a>, Famous Inc.</figcaption> <figcaption class="copyright top">Copyright © 3000 <a href="">Yours Truly</a>, Famous Inc.</figcaption>
<figcaption class="copyright">Copyright © 2018 <a href="">Yours Truly</a>, Famous Inc.</figcaption> <figcaption class="copyright white">Copyright © 3000 <a href="">Yours Truly</a>, Famous Inc.</figcaption>
<figcaption class="copyright bottom">Copyright © 2018 <a href="">Yours Truly</a>, Famous Inc.</figcaption> <figcaption class="copyright bottom">Copyright © 3000 <a href="">Yours Truly</a>, Famous Inc.</figcaption>
</figure> </figure>
</section> </section>
...@@ -490,6 +606,6 @@ ...@@ -490,6 +606,6 @@
<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 © 3000 Yours Truly, Famous Inc. -->
</body> </body>
</html> </html>
...@@ -29,12 +29,4 @@ ...@@ -29,12 +29,4 @@
<line x1="925" x2="925" y1="0" y2="768" class="line"/> <line x1="925" x2="925" y1="0" y2="768" class="line"/>
<line y1="125" y2="125" x1="0" x2="1024" class="line"/> <line y1="125" y2="125" x1="0" x2="1024" class="line"/>
<line y1="200" y2="200" x1="0" x2="1024" class="line"/>
<line y1="275" y2="275" x1="0" x2="1024" class="line"/>
<line y1="350" y2="350" x1="0" x2="1024" class="line"/>
<line y1="425" y2="425" x1="0" x2="1024" class="line"/>
<line y1="500" y2="500" x1="0" x2="1024" class="line"/>
<line y1="575" y2="575" x1="0" x2="1024" class="line"/>
<line y1="650" y2="650" x1="0" x2="1024" class="line"/>
<line y1="725" y2="725" x1="0" x2="1024" class="line"/>
</svg> </svg>
/* Basic */ /* Basic */
.slide h2 { .slide h2 {
margin-top: 0; margin-top: 6px;
margin-bottom: 34px; margin-bottom: 34px;
color: var(--color-grey); color: var(--color-grey);
font: bold 50px/1 'PT Sans Narrow', sans-serif; font: bold 50px/1 'PT Sans Narrow', sans-serif;
} }
.slide * + h2 {
margin-top: 41px;
}
.slide p { .slide p {
margin-top: 0; margin-top: 0;
margin-bottom: 1em; margin-bottom: 1em;
......
...@@ -36,19 +36,37 @@ ...@@ -36,19 +36,37 @@
/* Lines */ /* Lines */
.slide tr:not(:last-of-type) > * { .slide tr:not(:last-of-type) > * {
background: linear-gradient( background-image: linear-gradient(
to top, to top,
var(--color-line) 0.06em, var(--color-line) 0.06em,
transparent 0.06em transparent 0.06em
) repeat-x; );
background-repeat: repeat-x;
} }
/* Stripes */ /* Stripes */
.slide table.striped tr:nth-child(even) { .slide table.striped tr:nth-child(even) {
background: var(--color-fill); background-color: var(--color-fill);
} }
.slide table.striped tr > * { .slide table.striped tr > * {
background-image: none; background-image: none;
} }
/* Marked Row */
.slide tr.mark {
background-color: var(--color-yellow);
}
/* Next Marked Row */
.slide tr.mark.next {
visibility: visible;
background-color: transparent;
}
.slide tr.mark.next.active {
background-color: var(--color-yellow);
}
/* Gray */
.slide.gray {
background-color: #979a9e;
}
/* White */
.slide.white {
background-color: white;
}
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
/* Modifiers */ /* Modifiers */
@import 'modifiers/clear.css'; @import 'modifiers/clear.css';
@import 'modifiers/white.css'; @import 'modifiers/gray.css';
@import 'modifiers/black.css'; @import 'modifiers/black.css';
/* Slide */ /* Slide */
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
z-index: 0; z-index: 0;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
padding: 81px 100px 0; padding: 75px 100px 0;
width: var(--slide-width); width: var(--slide-width);
height: var(--slide-height); height: var(--slide-height);
background: #ffffff; background: #ffffff;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment