training: Implemented new slideover overlays for developer & validator fundamentals (#740)

* Developer Fundamentals 1 - slideovers

* Fixed auto-collapse arrow directions

* Developer Fundamentals 2 - slideovers

* Developer Fundamentals 3 - slideovers

* Developer Fundamentals 4 - slideovers

* Developer Fundamentals slideovers - proofreading

* Setup for Validator Fundamentals slideovers

* Validation Fundamentals 1 - slideovers

* Custom slideover CSS

* Pulling in latest slideover css

* Validation Fundamentals - slideovers

* Proofreading + removing old validator fundamentals

* Proofreading pt2

* Proofreading pt3

* Final proofread

Author: validbeck

site/_extensions/nrichers/slideover/_extension.yml

@@ -1,11 +1,12 @@
 title: Reveal.js Slideover
 author: Nik Richers
-version: 1.1.0
+version: 1.3.1
 quarto-required: ">=1.6.0"
 contributes:
   revealjs-plugins:
     - name: slideover
       script:
         - slideover.js
       stylesheet:
-        - slideover.css 
+        - slideover.css
+        - custom-slideover.css

site/_extensions/nrichers/slideover/custom-slideover.css

@@ -0,0 +1,80 @@
+/* Global variables */
+:root {
+    --slideover-default-bg: #FAFAFA;
+    --slideover-default-text: #083e44;
+    --slideover-default-border: 1px solid #083e44;
+    --slideover-default-links: #DE257E;
+    --slideover-default-accent: #3E6C69;
+}
+
+/* Global slideover styling */
+.slideover__content {
+    background: var(--slideover-default-bg) !important;
+    color: var(--slideover-default-text) !important;
+    border: var(--slideover-default-border) !important;
+}
+
+/* Right-aligned emphasis border */
+.slideover--r.slideover__content {
+    border-left-width: 5px !important;
+}
+
+/* Left-aligned emphasis border */
+.slideover--l.slideover__content {
+    border-right-width: 5px !important;
+}
+
+/* Top-aligned emphasis border */
+.slideover--t.slideover__content {
+    border-bottom-width: 5px !important;
+}
+
+/* Bottom-aligned emphasis border */
+.slideover--b.slideover__content {
+    border-top-width: 5px !important;
+}
+
+/* Link styling */
+.slideover__content-area a {
+    color: var(--slideover-default-links);
+    text-decoration: none;
+}
+
+.slideover__content-area a:hover {
+  text-decoration: underline 2px solid var(--slideover-default-text);
+}
+
+/* Callout embed styling */
+.slideover__content-area .embed {
+    background-color: #f5fcfd;
+    border: 1px solid rgba(8, 62, 68, 0.2);
+}
+
+/* Emphasis styling */
+.slideover__content-area strong,
+.slideover__content-area b,
+.slideover__content-area i,
+.slideover__content-area em {
+    color: var(--slideover-default-accent) !important;
+}
+
+/* Quotation styling */
+q {
+    color: var(--slideover-default-accent) !important;
+}
+
+.slideover__content-area blockquote {
+    border-left: 4px solid var(--slideover-default-accent) !important;
+    color: var(--slideover-default-accent) !important;
+}
+
+/* Code styling */
+.slideover__content-area div.sourceCode {
+    background-color: var(--slideover-default-bg) !important;
+}
+
+.slideover__content-area code {
+    color: var(--slideover-default-text) !important;
+    background-color: #EAF8FA;
+    border: 1px solid rgba(8, 62, 68, 0.2);
+}