From 088c87bcb58be576308da503d4f11a68843c5013 Mon Sep 17 00:00:00 2001
From: Bradley Taunt <bt@btxx.org>
Date: Mon, 1 Jul 2024 16:23:43 -0400
Subject: Initial new commit

---
 _posts/2020-06-22-keynote-slides-css.md | 100 ++++++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 _posts/2020-06-22-keynote-slides-css.md

(limited to '_posts/2020-06-22-keynote-slides-css.md')

diff --git a/_posts/2020-06-22-keynote-slides-css.md b/_posts/2020-06-22-keynote-slides-css.md
new file mode 100644
index 0000000..883dc90
--- /dev/null
+++ b/_posts/2020-06-22-keynote-slides-css.md
@@ -0,0 +1,100 @@
+---
+layout: post
+title: "Keynote Slides with Pure CSS"
+date: 2020-06-22
+---
+
+
+There are a great deal of options available on the web and built into most operating systems when you need to create presentation / keynote slides. You could use native software like LibremOffice Impress, Powerpoint, Apple's Keynote, etc. You could also decide to use preexisting web-based apps like Google Slides or an open source project such as RevealJS. All of these are good options.
+
+But thinking more about how overly complex these apps are implemented, it got me wondering if I could quickly code up a presentation slide framework with pure CSS and barely any code.
+
+This is what I came up with:
+
+## The Demo
+
+[Live CodePen Example](https://codepen.io/bradleytaunt/pen/jOWBJZb)
+
+Yes, I know this is _ugly_, but this was created as a barebones skeleton for others to build upon. The demo uses a simple set of `radio` inputs that correspond to their own individual `slide` element. The framework looks at the currently `checked` input, then changes the `opacity` and `z-index` of its corresponding slide item. Pretty straightforward stuff!
+
+Let's break down each piece:
+
+## The HTML
+
+
+    <div class="slider">
+        <input type="radio" name="pagination" value="1" checked>
+        <input type="radio" name="pagination" value="2">
+        <input type="radio" name="pagination" value="3">
+        <input type="radio" name="pagination" value="4">
+        <input type="radio" name="pagination" value="5">
+    
+        <div class="slide">
+            <h2>Slide 1</h2>
+        </div>
+        <div class="slide">
+            <h2>Slide 2</h2>
+        </div>
+        <div class="slide">
+            <h2>Slide 3</h2>
+        </div>
+        <div class="slide">
+            <h2>Slide 4</h2>
+        </div>
+        <div class="slide">
+            <h2>Slide 5</h2>
+        </div>
+    </div>
+
+
+There isn't a whole lot going on here. We are just including a set of `radio` inputs (based on how many slides are desired) along with their corresponding `slide` class elements. You might notice we don't do anything to specifically target each individual slide item - you'll see why we don't need to in the CSS section!
+
+## The CSS (SCSS)
+
+
+    /* Basic default styles */
+    .slider {
+        height: 100%;
+        left: 0;
+        position: fixed;
+        top: 0;
+        width: 100%;
+    
+        .slide {
+            height: 100%;
+            opacity: 0;
+            position: absolute;
+            width: 100%;
+            z-index: -2;
+        }
+    }
+    
+    input[type="radio"] { cursor: pointer; }
+    
+    /* Target slide item based on currently checked radio */
+    input[type="radio"]:nth-of-type(1):checked ~ .slide:nth-of-type(1),
+    input[type="radio"]:nth-of-type(2):checked ~ .slide:nth-of-type(2),
+    input[type="radio"]:nth-of-type(3):checked ~ .slide:nth-of-type(3),
+    input[type="radio"]:nth-of-type(4):checked ~ .slide:nth-of-type(4),
+    input[type="radio"]:nth-of-type(5):checked ~ .slide:nth-of-type(5) {
+        opacity: 1;
+        z-index: 1;
+    }
+    
+    /* Individual slide styling */
+    .slide:nth-of-type(1) { background: dodgerblue; }
+    .slide:nth-of-type(2) { background: crimson; }
+    .slide:nth-of-type(3) { background: rebeccapurple; }
+    .slide:nth-of-type(4) { background: goldenrod; }
+    .slide:nth-of-type(5) { background: pink; }
+
+
+Again, not much to see here. We use CSS to look down through the DOM for each `radio` elements slide "partner". We do this by targeting the `nth-of-type` on both elements. Simple stuff.
+
+Some drawbacks to this approach:
+
+- You need to manually target each new slide you add (color, styling, content, etc.)
+- Lack of animations might require extra work to implement (maybe 3rd party libraries- ke AOS?)
+- Probably won't be best for extremely long/complex presentation slides
+
+That's it! Hope you enjoy playing around with it.
-- 
cgit v1.2.3-54-g00ecf