chore: refactors lesson slides (#712)

* chore: nit updates

Signed-off-by: Anthony D. Mays <[email protected]>

* chore: replaces slides for lesson_16

* chore: replaces slides for lesson_17

Signed-off-by: Anthony D. Mays <[email protected]>

* fix: resolves issue with pdf print

* chore: replaces lesson_21 slides

Signed-off-by: Anthony D. Mays <[email protected]>

* chore: add missing image

* chore: replaces slides for lesson_21

* chore: replaces slides of lesson_21

Signed-off-by: Anthony D. Mays <[email protected]>

* chore: adds missing images

* chore: removes unnecessary images

Signed-off-by: Anthony D. Mays <[email protected]>

* chore: removes unneeded slide images

Signed-off-by: Anthony D. Mays <[email protected]>

* chore: refactors lesson24 slides

* chore: removes unused lesson 24 slide images

* chore: refactors lesson 25 content.

* wip: replace lesson 26 slides

* chore: refactors lesson 26 slides

* chore: refactors lesson 27 slides.

* chore: refactors lesson 28 slides

---------

Signed-off-by: Anthony D. Mays <[email protected]>

Author: anthonydmays

slides/css/theme/source/ml.scss

@@ -85,6 +85,7 @@ $headingLetterSpacing: .02em;
     }
 
     .ml-bullet-slide {
+        height: 100%;
         text-align: left;
     }
 
@@ -171,6 +172,8 @@ $headingLetterSpacing: .02em;
     }
 
     .ml-columns-slide {
+        text-align: left;
+
         .columns {
             display: flex;
             text-align: left;
@@ -181,6 +184,25 @@ $headingLetterSpacing: .02em;
         }
     }
 
+    .background-image {
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        height: 100%;
+        text-align: center;
+        align-content: center;
+        position: relative;
+    }
+
+    .background-image > * {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        top: 0;
+        left: 0;
+        align-content: center;
+    }
+
     .fragment.em,
     .fragment.current-visible {
         color: inherit;
@@ -189,6 +211,28 @@ $headingLetterSpacing: .02em;
             color: #6d9eeb;
         }
     }
+
+    .fragment.strikethrough,
+    .fragment.current-visible {
+        text-decoration: inherit;
+
+        &.current-fragment {
+            text-decoration: line-through;
+        }
+    }
+
+    .fragment.background-fade {
+        opacity: 0;
+
+        &.visible {
+            opacity: 1;
+            background: rgba(0, 0, 0, 0.5);
+        }
+    }
+
+    .opaque {
+        opacity: .5;
+    }
 }
 
 .avatar {
@@ -204,5 +248,5 @@ table.chart th {
 }
 
 span.important {
-    color: #ff0100;
+    color: #e06666;
 }

slides/dist/theme/ml.css

@@ -383,6 +383,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
   font-weight: 700;
 }
 .reveal .ml-bullet-slide {
+  height: 100%;
   text-align: left;
 }
 .reveal h1.big-title,
@@ -452,13 +453,33 @@ section.has-light-background, section.has-light-background h1, section.has-light
   border: 4px solid;
   padding: 8px 42px;
 }
+.reveal .ml-columns-slide {
+  text-align: left;
+}
 .reveal .ml-columns-slide .columns {
   display: flex;
   text-align: left;
 }
 .reveal .ml-columns-slide .columns > * {
   flex: 1;
 }
+.reveal .background-image {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 100%;
+  text-align: center;
+  align-content: center;
+  position: relative;
+}
+.reveal .background-image > * {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  align-content: center;
+}
 .reveal .fragment.em,
 .reveal .fragment.current-visible {
   color: inherit;
@@ -467,6 +488,24 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal .fragment.current-visible.current-fragment {
   color: #6d9eeb;
 }
+.reveal .fragment.strikethrough,
+.reveal .fragment.current-visible {
+  text-decoration: inherit;
+}
+.reveal .fragment.strikethrough.current-fragment,
+.reveal .fragment.current-visible.current-fragment {
+  text-decoration: line-through;
+}
+.reveal .fragment.background-fade {
+  opacity: 0;
+}
+.reveal .fragment.background-fade.visible {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.5);
+}
+.reveal .opaque {
+  opacity: 0.5;
+}
 
 .avatar {
   width: 150px;
@@ -481,5 +520,5 @@ table.chart th {
 }
 
 span.important {
-  color: #ff0100;
+  color: #e06666;
 }