Add spotlight element (#58)

* Add spotlight element

* Remove commented parts

* Add rectangular sample and extra options

index.html

@@ -592,6 +592,30 @@ <h2>Stepped Placed</h2>
         <img class="place next right" height="100%" src="pictures/picture-3.svg" alt="Picture placeholder.">
     </section>
 
+    <section class="slide">
+        <h2>Spotlight</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>
+        <div class="spotlight" style="
+            --spotlight-radius: 50%;
+            --spotlight-opacity: 0.2;
+            --spotlight-size: 256px;
+            --spotlight-top: 90px;
+            --spotlight-left: 290px;
+        "></div>
+    </section>
+
+    <section class="slide">
+        <h2>Spotlight</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>
+        <div class="spotlight" style="
+            --spotlight-radius: 0;
+            --spotlight-opacity: 0.2;
+            --spotlight-width: 1024px;
+            --spotlight-height: 50px;
+            --spotlight-top: 50px;
+        "></div>
+    </section>
+
     <section class="slide" data-timing="00:03">
         <h2 class="shout">Timed Slide</h2>
     </section>

styles/slide/elements/spotlight.css

@@ -0,0 +1,20 @@
+/* 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;
+}

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 */