From 68178c7523f6023e369c6da4f2ef47bdb4972679 Mon Sep 17 00:00:00 2001
From: Vadim Makeev <pepelsbey@gmail.com>
Date: Mon, 9 Mar 2020 16:04:59 +0300
Subject: [PATCH 1/3] Add spotlight element

---
 index.html                          | 11 ++++++++
 styles/slide/elements/spotlight.css | 41 +++++++++++++++++++++++++++++
 styles/slide/slide.css              |  1 +
 3 files changed, 53 insertions(+)
 create mode 100644 styles/slide/elements/spotlight.css

diff --git a/index.html b/index.html
index 3dbdbc8..926759a 100644
--- a/index.html
+++ b/index.html
@@ -592,6 +592,17 @@ <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-opacity: 0.2;
+            --spotlight-size: 256px;
+            --spotlight-top: 90px;
+            --spotlight-left: 290px;
+        "></div>
+    </section>
+
     <section class="slide" data-timing="00:03">
         <h2 class="shout">Timed Slide</h2>
     </section>
diff --git a/styles/slide/elements/spotlight.css b/styles/slide/elements/spotlight.css
new file mode 100644
index 0000000..2a265f0
--- /dev/null
+++ b/styles/slide/elements/spotlight.css
@@ -0,0 +1,41 @@
+/* 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, 256px);
+    height: var(--spotlight-size, 256px);
+    border-radius: 50%;
+    box-shadow:
+        0 0 0 var(--slide-width)
+        rgba(
+            0, 0, 0,
+            var(--spotlight-opacity, 0.2)
+        );
+    pointer-events: none;
+}
+
+/* .spotlight {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+    display: flex;
+}
+
+.spotlight::before {
+    position: relative;
+    display: block;
+    margin: auto;
+    width: 256px;
+    height: 256px;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.2);
+    content: '';
+} */
diff --git a/styles/slide/slide.css b/styles/slide/slide.css
index ad4cf1c..e0c0a2e 100644
--- a/styles/slide/slide.css
+++ b/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 */
 

From 88b70cd271294288586038e940247c8cb6d1f436 Mon Sep 17 00:00:00 2001
From: Vadim Makeev <pepelsbey@gmail.com>
Date: Mon, 9 Mar 2020 16:09:43 +0300
Subject: [PATCH 2/3] Remove commented parts

---
 styles/slide/elements/spotlight.css | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/styles/slide/elements/spotlight.css b/styles/slide/elements/spotlight.css
index 2a265f0..428be88 100644
--- a/styles/slide/elements/spotlight.css
+++ b/styles/slide/elements/spotlight.css
@@ -18,24 +18,3 @@
         );
     pointer-events: none;
 }
-
-/* .spotlight {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    pointer-events: none;
-    display: flex;
-}
-
-.spotlight::before {
-    position: relative;
-    display: block;
-    margin: auto;
-    width: 256px;
-    height: 256px;
-    border-radius: 50%;
-    background-color: rgba(0, 0, 0, 0.2);
-    content: '';
-} */

From 71e3a693837551e5584566f31961629fc71c3942 Mon Sep 17 00:00:00 2001
From: Vadim Makeev <pepelsbey@gmail.com>
Date: Mon, 9 Mar 2020 16:55:35 +0300
Subject: [PATCH 3/3] Add rectangular sample and extra options

---
 index.html                          | 13 +++++++++++++
 styles/slide/elements/spotlight.css |  6 +++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 926759a..71c146a 100644
--- a/index.html
+++ b/index.html
@@ -596,6 +596,7 @@ <h2>Stepped Placed</h2>
         <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;
@@ -603,6 +604,18 @@ <h2>Spotlight</h2>
         "></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>
diff --git a/styles/slide/elements/spotlight.css b/styles/slide/elements/spotlight.css
index 428be88..f5330a6 100644
--- a/styles/slide/elements/spotlight.css
+++ b/styles/slide/elements/spotlight.css
@@ -7,9 +7,9 @@
     transform: translate(-50%, -50%);
     margin-top: var(--spotlight-top, 0);
     margin-left: var(--spotlight-left, 0);
-    width: var(--spotlight-size, 256px);
-    height: var(--spotlight-size, 256px);
-    border-radius: 50%;
+    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(