Implement math-toggles natively into the theme

Adding math toggles to articles now just got a lot simpler.

assets/css/screen.css

@@ -138,6 +138,154 @@ html.dark-mode .tile-menu .tile {
     border-color: var(--color-darkgrey);
 }
 
+/* 3.2 Mathboxes: for math/math-free toggling
+/* ---------------------------------------------------------- */
+
+.mathful-infobox {
+    padding: 2em;
+    margin-bottom: 1em;
+    background-color: color-mod(var(--color-lightgrey) l(+10%));
+}
+.mathful-global-toggle {
+    position: relative;
+    width: 120px;
+    margin: 40px auto;
+}
+.mathful-global-toggle .well { /* the label */
+  cursor: pointer;
+    display: block;
+    background: color-mod(var(--color-wash) l(+10%));
+    height: 40px;
+    border-radius: 20px;
+    cursor: pointer;
+}
+
+.mathful-global-toggle .toggle ~ .emoji-label:after {
+    content: "full math";
+    display: block;
+    text-align: center;
+    margin-top: 0.5em;
+}
+
+.mathful-global-toggle .toggle:checked ~ .emoji-label:after {
+    content: "math free";
+}
+
+.mathful-global-toggle .toggle { /* the checkbox */
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    visibility: hidden;
+    background: transparent;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    z-index: 100;
+}
+/* "off" */
+.mathful-global-toggle .toggle ~ .emoji:before {
+    content: "👩🏽‍🏫";
+    position: absolute;
+    left: 0;
+    top: -15px;
+    font-size: 80px;
+    z-index: 1;
+    transition: 0.2s;
+    cursor: pointer;
+    font-style: normal;
+}
+
+/* "on" */
+.mathful-global-toggle .toggle:checked ~ .emoji:before {
+    content: "👩🏽‍🎨";
+    left: 100%;
+    margin-left: -1em;
+}
+
+/* the actual mathboxes */
+
+.mathful {
+    width: 100%;
+}
+
+.mathful .math-toggle {
+    height: 2em;
+    width: 100%;
+    z-index: 100;
+    position: absolute;
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    left: 0;
+    border: none;
+    background: none;
+}
+
+.mathful .math-toggle + .emoji-wrapper {
+    position: absolute;
+    height: 0;
+    width: 0;
+}
+
+.mathful .math-toggle + .emoji-wrapper .emoji:before {
+    content: "👩🏽‍🏫";
+}
+
+.mathful input[type="checkbox"]:checked + .emoji-wrapper .emoji:before {
+    content: "👩🏽‍🎨";
+}
+
+/* margins for toggle box on small screens */
+.mathful .math-positive,
+.mathful .math-negative {
+    text-indent: 1.6em;
+}
+
+@media (min-width: 500px) {
+    .mathful .math-toggle + .emoji-wrapper .emoji:before {
+        position: relative;
+        float: right;
+        margin-right: 0;
+    }
+
+    .mathful .math-positive,
+    .mathful .math-negative {
+        text-indent: 0.5em;
+    }
+}
+
+@media (min-width: 650px) {
+    .mathful .math-toggle + .emoji-wrapper .emoji:before {
+        margin-right: 0.5em;
+    }
+
+    .mathful .math-positive,
+    .mathful .math-negative {
+        text-indent: 0.2em;
+    }
+}
+
+@media (min-width: 800px) {
+    .mathful .math-toggle + .emoji-wrapper .emoji:before {
+        margin-right: 1em;
+        font-size: 1.6em;
+    }
+
+    .mathful .math-positive,
+    .mathful .math-negative {
+        text-indent: 0;
+    }
+}
+
+.mathful input[type="checkbox"]:checked ~ .math-positive {
+    display: none;
+}
+
+.mathful input[type="checkbox"]:not(:checked) ~ .math-negative {
+    display: none;
+}
+
 /* 4. Site Header
 /* ---------------------------------------------------------- */
 

default.hbs

@@ -118,6 +118,17 @@ $(document).ready(function () {
     $(".gh-content").fitVids();
 });
 </script>
+<script type="text/javascript">
+/**
+ * toggleMathfulness: a function to toggle between "math-free"
+ * and "mathful" elements on the page. This is a global toggle
+ * that sets all math-toggle checkboxes to the specified value.
+ */
+function toggleMathfulness(element) {
+    // apply current state to all elements
+    Array.from(document.getElementsByClassName('math-toggle')).forEach((e)=>{e.checked = element.checked})
+}
+</script>
 
 {{!-- Ghost outputs required functional scripts with this tag - it should always be the last thing before the closing body tag --}}
 {{ghost_foot}}