Updates

index.html

@@ -203,7 +203,7 @@
 
     <div class="progress"></div>
 
-    <script src="shower/shower.min.js"></script>
+    <script src="shower/shower.js"></script>
     <!-- Copyright © 3000 Yours Truly, Famous Inc. -->
 
 </body>

shower/themes/material/README.md

@@ -12,7 +12,7 @@ Get the Shower template where Material is already included. Download the [templa
 
 If you want to install Material separately you can install the package:
 
-	npm install shower-material
+	npm install @shower/material
 
 ## Features
 
@@ -36,7 +36,7 @@ If you want to adjust theme for your needs:
 
 1. Fork this repository and clone it to your local machine.
 2. Install dependencies: `npm install`.
-3. Start a local server with watcher: `npm run dev` or just `gulp` if you have it installed globally.
+3. Start a local server with watcher: `npm start`.
 4. Edit your files and see changes in the opened browser.
 
 To take part in Material development please read [contributing guidelines](CONTRIBUTING.md) first and [file an issue](https://github.com/shower/shower/issues/new) before sending any pull request.

shower/themes/material/styles/shower/shower.css

@@ -12,6 +12,8 @@
     --slide-height: calc(
         var(--slide-width) / var(--slide-ratio)
     );
+    --slide-left-side: 96px;
+    --slide-right-side: 112px;
 
     --color-key: #4caf50;
     --color-black: #212121;
@@ -20,7 +22,6 @@
     --color-light: #bdbdbd;
     --color-back: #eeeeee;
     --color-yellow: #fff59d;
-    --color-yellow-light: #ffffcf;
 
     --progress-size: 8px;
 

shower/themes/material/styles/slide/content/code.css

@@ -11,12 +11,19 @@
 
 .slide pre code {
     display: block;
-    margin-left: -96px;
-    padding: 0 0 0 96px;
-    width: calc(100% + 96px + 112px);
+    margin-left: calc(
+        var(--slide-left-side) * -1
+    );
+    padding: 0 0 0 var(--slide-left-side);
+    width: calc(
+        100% +
+        var(--slide-left-side) +
+        var(--slide-right-side)
+    );
     background-color: transparent;
     line-height: 2;
     white-space: pre;
+    -moz-tab-size: 4;
     tab-size: 4;
 }
 
@@ -53,19 +60,20 @@
 
 /* Marked Line */
 
-.slide pre code.mark:not(:only-child) {
-    background-color: var(--color-back);
+.slide pre code:not(:only-child).mark {
+    background-color: var(--color-yellow);
 }
 
 /* Next Line */
 
-.slide pre code.mark.next:not(:only-child) {
+.slide pre code:not(:only-child).mark.next {
     visibility: visible;
     background-color: transparent;
 }
 
-.slide pre code.mark.next.active:not(:only-child) {
-    background-color: var(--color-back);
+.slide pre code:not(:only-child).mark.next.active,
+.slide pre code:not(:only-child).mark.next.visited {
+    background-color: var(--color-yellow);
 }
 
 /* Full */
@@ -75,6 +83,7 @@
     background-color: transparent;
 }
 
-.shower.full .slide pre code:not(:only-child).mark.next.active {
-    background-color: var(--color-back);
+.shower.full .slide pre code:not(:only-child).mark.next.active,
+.shower.full .slide pre code:not(:only-child).mark.next.visited {
+    background-color: var(--color-yellow);
 }

shower/themes/material/styles/slide/content/footer.css

@@ -6,8 +6,10 @@
     bottom: 0;
     left: 0;
     z-index: 1;
-    padding: 48px 112px 24px 96px;
-    background-color: var(--color-yellow-light);
+    padding:
+        48px var(--slide-right-side)
+        24px var(--slide-left-side);
+    background-color: var(--color-yellow);
     transition: transform 0.3s;
 }
 

shower/themes/material/styles/slide/content/table.css

 /* Table */
 
 .slide table {
-    margin-left: -96px;
+    margin-left: calc(
+        var(--slide-left-side) * -1
+    );
     margin-bottom: 1em;
-    width: calc(96px + 100% + 112px);
+    width: calc(
+        100% +
+        var(--slide-left-side) +
+        var(--slide-right-side)
+    );
     border-collapse: collapse;
     border-spacing: 0;
 }
@@ -23,12 +29,12 @@
 
 .slide th:first-child,
 .slide td:first-child {
-    padding-left: 96px;
+    padding-left: var(--slide-left-side);
 }
 
 .slide th:last-child,
 .slide td:last-child {
-    padding-right: 96px;
+    padding-right: var(--slide-left-side);
 }
 
 /* Lines */
@@ -66,6 +72,7 @@
     background-color: transparent;
 }
 
-.slide tr.mark.next.active {
+.slide tr.mark.next.active,
+.slide tr.mark.next.visited {
     background-color: var(--color-yellow);
 }

shower/themes/material/styles/slide/elements/next.css

@@ -4,6 +4,7 @@
     visibility: hidden;
 }
 
-.shower.full .next.active {
+.shower.full .next.active,
+.shower.full .next.visited {
     visibility: visible;
 }

shower/themes/material/styles/slide/elements/shout.css

@@ -5,7 +5,8 @@
     top: 50%;
     left: 0;
     width: 100%;
-    padding-left: 96px;
+    padding-left: var(--slide-left-side);
+    box-sizing: border-box;
     color: white;
     line-height: 1.1;
     font-size: 112px;

shower/themes/material/styles/slide/elements/spotlight.css

+/* Spotlight */
+
+.spotlight {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    margin-top: var(--spotlight-top, 0);
+    margin-left: var(--spotlight-left, 0);
+    width: var(--spotlight-size, var(--spotlight-width, 256px));
+    height: var(--spotlight-size, var(--spotlight-height, 256px));
+    border-radius: var(--spotlight-radius, 50%);
+    box-shadow:
+        0 0 0 var(--slide-width)
+        rgba(
+            0, 0, 0,
+            var(--spotlight-opacity, 0.2)
+        );
+    pointer-events: none;
+}

shower/themes/material/styles/slide/slide.css

@@ -21,6 +21,7 @@
 @import 'elements/next.css';
 @import 'elements/place.css';
 @import 'elements/shout.css';
+@import 'elements/spotlight.css';
 
 /* Modifiers */
 
@@ -35,7 +36,9 @@
     z-index: 0;
     overflow: hidden;
     box-sizing: border-box;
-    padding: 79px 112px 0 96px;
+    padding:
+        79px var(--slide-right-side)
+        0 var(--slide-left-side);
     width: var(--slide-width);
     height: var(--slide-height);
     background-color: white;

shower/themes/ribbon/LICENSE.md

 # The MIT License
 
-Copyright © 2010–2019 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:
 
@@ -12,7 +12,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
 # Лицензия MIT
 
-Copyright © 2010–2019 Вадим Макеев, http://pepelsbey.net/
+Copyright © 2010–2019 Вадим Макеев, https://pepelsbey.net/
 
 Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:
 

shower/themes/ribbon/README.md

@@ -2,17 +2,17 @@
 
 ![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/ribbon/). 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/ribbon/). 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
 
-Get the Shower template where Ribbon is already included. Download the [template archive](http://shwr.me/shower.zip) or install the package:
+Get the Shower template where Ribbon is already included. Download the [template archive](https://shwr.me/shower.zip) or install the package:
 
 	npm install shower
 
 If you want to install Ribbon separately you can install the package:
 
-	npm install shower-ribbon
+	npm install @shower/ribbon
 
 ## Features
 

shower/themes/ribbon/fonts/LICENSE.txt

-Copyright (c) 2009, ParaType Ltd. All Rights Reserved.
-
-LICENSING AGREEMENT 
-for the fonts with Original Name: PT Sans, PT Serif, PT Mono.
-Version 1.3 - January 20, 2012
-
-GRANT OF LICENSE
-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 
-on Web servers for free downloading, embedding in documents and Web pages, 
-bundling with commercial and non commercial products, if it does not conflict 
-with the conditions listed below:
-
-- You may bundle the font with commercial software, but you may not sell the 
-fonts by themselves. They are free. 
-
-- You may distribute the fonts in modified or unmodified version only together 
-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 
-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 
-or � combination of Original name with any other words without explicit written 
-permission from ParaType.
-
-TERMINATION & TERRITORY
-This license has no limits on time and territory, but it becomes null and void 
-if any of the above conditions are not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF 
-ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY  
-WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR 
-PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, 
-OR OTHER RIGHT. IN NO EVENT SHALL PARATYPE BE LIABLE FOR ANY 
-CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, 
-INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN 
-AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT 
-OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER 
-DEALINGS IN THE FONT SOFTWARE.
-
-ParaType Ltd
-http://www.paratype.ru
-
+Copyright (c) 2009, ParaType Ltd. All Rights Reserved.
+
+LICENSING AGREEMENT
+for the fonts with Original Name: PT Sans, PT Serif, PT Mono.
+Version 1.3 - January 20, 2012
+
+GRANT OF LICENSE
+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
+on Web servers for free downloading, embedding in documents and Web pages,
+bundling with commercial and non commercial products, if it does not conflict
+with the conditions listed below:
+
+- You may bundle the font with commercial software, but you may not sell the
+fonts by themselves. They are free.
+
+- You may distribute the fonts in modified or unmodified version only together
+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
+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
+or � combination of Original name with any other words without explicit written
+permission from ParaType.
+
+TERMINATION & TERRITORY
+This license has no limits on time and territory, but it becomes null and void
+if any of the above conditions are not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK,
+OR OTHER RIGHT. IN NO EVENT SHALL PARATYPE BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL,
+INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN
+AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT
+OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
+DEALINGS IN THE FONT SOFTWARE.
+
+ParaType Ltd
+https://www.paratype.ru/

shower/themes/ribbon/styles/blocks/badge.css

@@ -22,7 +22,7 @@
     bottom: 50%;
     left: -50%;
     visibility: visible;
-    background: var(--color-blue);
+    background-color: var(--color-blue);
     color: white;
     text-decoration: none;
     text-align: center;

shower/themes/ribbon/styles/blocks/progress.css

@@ -14,7 +14,7 @@
     display: block;
     width: 100%;
     height: var(--progress-size);
-    background: var(--color-blue);
+    background-color: var(--color-blue);
     content: '';
     transform-origin: 0 100%;
     transform: skewX(45deg);

shower/themes/ribbon/styles/shower/shower-full.css

@@ -13,5 +13,5 @@
     );
     width: var(--slide-width);
     height: var(--slide-height);
-    background: black;
+    background-color: black;
 }

shower/themes/ribbon/styles/shower/shower-list.css

@@ -18,7 +18,7 @@
         auto-fill,
         calc(var(--slide-width) * var(--slide-scale))
     );
-    background: var(--color-grey);
+    background-color: var(--color-grey);
 }
 
 /* IE & Edge Fix */

shower/themes/ribbon/styles/shower/shower.css

@@ -12,6 +12,7 @@
     --slide-height: calc(
         var(--slide-width) / var(--slide-ratio)
     );
+    --slide-side: 100px;
 
     --color-blue: #4b86c2;
     --color-blue-lighter: #6799cb;

shower/themes/ribbon/styles/slide/content/code.css

@@ -11,13 +11,18 @@
 
 .slide pre code {
     display: block;
-    margin-left: -100px;
-    padding: 0 0 0 100px;
-    width: calc(100% + 100px + 100px);
+    margin-left: calc(
+        var(--slide-side) * -1
+    );
+    padding: 0 0 0 var(--slide-side);
+    width: calc(
+        100% + var(--slide-side) * 2
+    );
     border-radius: 0;
-    background: none;
+    background-color: transparent;
     line-height: 2;
     white-space: pre;
+    -moz-tab-size: 4;
     tab-size: 4;
 }
 
@@ -43,8 +48,8 @@
 /* Important */
 
 .slide pre mark.important {
-    background: var(--color-red);
-    color: #ffffff;
+    background-color: var(--color-red);
+    color: white;
 }
 
 /* Comment */
@@ -55,28 +60,30 @@
 
 /* Marked Line */
 
-.slide pre code.mark:not(:only-child) {
-    background: var(--color-fill);
+.slide pre code:not(:only-child).mark {
+    background-color: var(--color-yellow);
 }
 
 /* Next Line */
 
-.slide pre code.mark.next:not(:only-child) {
+.slide pre code:not(:only-child).mark.next {
     visibility: visible;
-    background: none;
+    background-color: transparent;
 }
 
-.slide pre code.mark.next.active:not(:only-child) {
-    background: var(--color-fill);
+.slide pre code:not(:only-child).mark.next.active,
+.slide pre code:not(:only-child).mark.next.visited {
+    background-color: var(--color-yellow);
 }
 
 /* Full */
 
 .shower.full .slide pre code:not(:only-child).mark.next {
     visibility: visible;
-    background: none;
+    background-color: transparent;
 }
 
-.shower.full .slide pre code:not(:only-child).mark.next.active {
-    background: var(--color-fill);
+.shower.full .slide pre code:not(:only-child).mark.next.active,
+.shower.full .slide pre code:not(:only-child).mark.next.visited {
+    background-color: var(--color-yellow);
 }

shower/themes/ribbon/styles/slide/content/footer.css

@@ -6,8 +6,8 @@
     bottom: 0;
     left: 0;
     z-index: 1;
-    padding: 50px 100px 25px;
-    background: var(--color-yellow);
+    padding: 50px var(--slide-side) 25px;
+    background-color: var(--color-yellow);
     transition: transform 0.3s linear;
 }
 

shower/themes/ribbon/styles/slide/content/inline.css

@@ -22,13 +22,13 @@
 .slide code,
 .slide kbd,
 .slide samp {
-    background: var(--color-fill);
+    background-color: var(--color-fill);
     line-height: 1;
     font-family: 'PT Mono', monospace;
 }
 
 .slide mark {
-    background: var(--color-yellow);
+    background-color: var(--color-yellow);
 }
 
 .slide sub,

shower/themes/ribbon/styles/slide/content/table.css

 /* Table */
 
 .slide table {
-    margin-left: -100px;
+    margin-left: calc(var(--slide-side) * -1);
     margin-bottom: 1em;
     width: calc(
-        100% + 100px + 100px
+        100% + var(--slide-side) * 2
     );
     border-collapse: collapse;
     border-spacing: 0;
@@ -67,6 +67,7 @@
     background-color: transparent;
 }
 
-.slide tr.mark.next.active {
+.slide tr.mark.next.active,
+.slide tr.mark.next.visited {
     background-color: var(--color-yellow);
 }

shower/themes/ribbon/styles/slide/elements/next.css

@@ -4,6 +4,7 @@
     visibility: hidden;
 }
 
-.shower.full .next.active {
+.shower.full .next.active,
+.shower.full .next.visited {
     visibility: visible;
 }

shower/themes/ribbon/styles/slide/elements/spotlight.css

+/* Spotlight */
+
+.spotlight {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    margin-top: var(--spotlight-top, 0);
+    margin-left: var(--spotlight-left, 0);
+    width: var(--spotlight-size, var(--spotlight-width, 256px));
+    height: var(--spotlight-size, var(--spotlight-height, 256px));
+    border-radius: var(--spotlight-radius, 50%);
+    box-shadow:
+        0 0 0 var(--slide-width)
+        rgba(
+            0, 0, 0,
+            var(--spotlight-opacity, 0.2)
+        );
+    pointer-events: none;
+}

shower/themes/ribbon/styles/slide/slide.css

@@ -21,6 +21,7 @@
 @import 'elements/next.css';
 @import 'elements/place.css';
 @import 'elements/shout.css';
+@import 'elements/spotlight.css';
 
 /* Modifiers */
 
@@ -35,10 +36,10 @@
     z-index: 0;
     overflow: hidden;
     box-sizing: border-box;
-    padding: 75px 100px 0;
+    padding: 75px var(--slide-side) 0;
     width: var(--slide-width);
     height: var(--slide-height);
-    background: #ffffff;
+    background-color: white;
 }
 
 /* Number */
@@ -53,7 +54,7 @@
     height: calc(var(--ribbon-size) * 2);
     background-image: url('ribbon.svg');
     background-size: cover;
-    color: #ffffff;
+    color: white;
     counter-increment: slide;
     content: counter(slide);
     text-align: center;