deploy: a4e7582

_sources/intro.md

@@ -47,6 +47,12 @@ Each tutorial is rendered on this website for easy viewing 👀, but they are al
 Jupyter notebooks designed to be ran interactively 💫. See the instructions
 below on how you can start running the tutorials in no time! 🚀
 
+# Recording
+
+A recording of the full short course is available on YouTube:
+
+[![YouTube Playlist](https://img.youtube.com/vi/Dgf6ijduNoE/0.jpg)](https://youtube.com/playlist?list=PL3GHXjKa-p6VBA_MlUP7T_ByCFYQZ5uDG)
+
 # 🌠 Quickstart
 
 To run these notebooks in an interactive Jupyter session online,

_static/togglebutton.css

@@ -8,21 +8,39 @@
 }
 
 /* Toggle buttons inside admonitions so we see the title */
-.toggle.admonition {
+.admonition.toggle {
     position: relative;
 }
 
 /* Titles should cut off earlier to avoid overlapping w/ button */
-.toggle.admonition .admonition-title {
+.admonition.toggle .admonition-title {
     padding-right: 25%;
     cursor: pointer;
 }
 
+/* Hovering will cause a slight shift in color to make it feel interactive */
+.admonition.toggle .admonition-title:hover {
+    box-shadow: inset 0 0 0px 20px rgb(0 0 0 / 1%);
+}
+
+/* Hovering will cause a slight shift in color to make it feel interactive */
+.admonition.toggle .admonition-title:active {
+    box-shadow: inset 0 0 0px 20px rgb(0 0 0 / 3%);
+}
+
+/* Remove extra whitespace below the admonition title when hidden */
+.admonition.toggle-hidden {
+    padding-bottom: 0;
+}
+
+.admonition.toggle-hidden .admonition-title {
+    margin-bottom: 0;
+}
+
 /* hides all the content of a page until de-toggled */
-.toggle-hidden.admonition .admonition-title ~ * {
+.admonition.toggle-hidden .admonition-title ~ * {
     height: 0;
     margin: 0;
-    float: left; /* so they overlap when hidden */
     opacity: 0;
     visibility: hidden;
 }
@@ -37,14 +55,12 @@ button.toggle-button {
     border: none;
     outline: none;
 
-    /* Positioning just inside the amonition title */
-    margin-right: 0.5em;
+    /* Positioning just inside the admonition title */
     position: absolute;
-    right: 0em;
-    top: .5em;
-    float: right;
+    right: 0.5em;
     padding: 0px;
-    display: flex;
+    border: none;
+    outline: none;
 }
 
 /* Display the toggle hint on wide screens */
@@ -64,15 +80,15 @@ button.toggle-button {
     stroke: currentColor;  /* So that we inherit the color of other text */
 }
 
-/* Rotate icon with admonitions so that it points down */
-.admonition.toggle .tb-icon {
-    transform: rotate(-90deg);
+/* The icon should point right when closed, down when open. */
+/* Open */
+.admonition.toggle button .tb-icon {
+    transform: rotate(90deg);
 }
 
-/* When the admonition is hidden, icon should flip upwards but retain rotation */
-/* We scaleX, in order to flip along Y, because it is rotated */
-.admonition.toggle .toggle-button-hidden .tb-icon {
-    transform: rotate(-90deg) scaleX(-1);
+/* Closed */
+.admonition.toggle button.toggle-button-hidden .tb-icon {
+    transform: rotate(0deg);
 }
 
 /* With details toggles, we don't rotate the icon so it points right */
@@ -93,29 +109,29 @@ details.toggle-details {
     margin: 1em 0;
 }
 
+
 details.toggle-details summary {
     display: flex;
     align-items: center;
-    width: fit-content;
     cursor: pointer;
     list-style: none;
-    border-radius: .4em;
-    border: 1px solid #ccc;
-    background: #f8f8f8;
+    border-radius: .2em;
+    border-left: 3px solid #1976d2;
+    background-color: rgb(204 204 204 / 10%);
     padding: 0.2em 0.7em 0.3em 0.5em; /* Less padding on left because the SVG has left margin */
-    font-size: 0.8em;
-}
-
-.toggle-details__summary-text {
-    margin-left: 0.2em;
+    font-size: 0.9em;
 }
 
 details.toggle-details summary:hover {
-    background: #f6f6f6;
+    background-color: rgb(204 204 204 / 20%);
 }
 
 details.toggle-details summary:active {
-    background: #eee;
+    background: rgb(204 204 204 / 28%);
+}
+
+.toggle-details__summary-text {
+    margin-left: 0.2em;
 }
 
 details.toggle-details[open] summary {

_static/togglebutton.js

@@ -25,20 +25,24 @@ var initToggleItems = () => {
       }
       // This is the button that will be added to each item to trigger the toggle
       var collapseButton = `
-        <button type="button" id="${buttonID}" class="toggle-button" data-target="${toggleID}" data-button="${buttonID}" data-toggle-hint="${toggleHintShow}" aria-label="Click to toggle content">
+        <button type="button" id="${buttonID}" class="toggle-button" data-target="${toggleID}" data-button="${buttonID}" data-toggle-hint="${toggleHintShow}" aria-label="Toggle hidden content">
             ${toggleChevron}
         </button>`;
 
-      item.insertAdjacentHTML("afterbegin", collapseButton);
+      title = item.querySelector(".admonition-title")
+      title.insertAdjacentHTML("beforeend", collapseButton);
       thisButton = document.getElementById(buttonID);
 
       // Add click handlers for the button + admonition title (if admonition)
-      thisButton.addEventListener('click', toggleClickHandler);
       admonitionTitle = document.querySelector(`#${toggleID} > .admonition-title`)
       if (admonitionTitle) {
+        // If an admonition, then make the whole title block clickable
         admonitionTitle.addEventListener('click', toggleClickHandler);
         admonitionTitle.dataset.target = toggleID
         admonitionTitle.dataset.button = buttonID
+      } else {
+        // If not an admonition then we'll listen for the button click
+        thisButton.addEventListener('click', toggleClickHandler);
       }
 
       // Now hide the item for this toggle button unless explicitly noted to show
@@ -60,6 +64,7 @@ var initToggleItems = () => {
       // Now move the toggle-able content inside of the details block
       details = item.previousElementSibling
       details.appendChild(item)
+      item.classList.add("toggle-details__container")
 
       // Set up a click trigger to change the text as needed
       details.addEventListener('click', (click) => {
@@ -73,9 +78,9 @@ var initToggleItems = () => {
         }
         // Update the inner text for the proper hint
         if (details.open) {
-          summary.querySelector("span").innerText = toggleHintShow;
+          summary.querySelector("span.toggle-details__summary-text").innerText = toggleHintShow;
         } else {
-          summary.querySelector("span").innerText = toggleHintHide;
+          summary.querySelector("span.toggle-details__summary-text").innerText = toggleHintHide;
         }
 
       });
@@ -102,12 +107,22 @@ var toggleHidden = (button) => {
 }
 
 var toggleClickHandler = (click) => {
+  // Be cause the admonition title is clickable and extends to the whole admonition
+  // We only look for a click event on this title to trigger the toggle.
+
   if (click.target.classList.contains("admonition-title")) {
-    // If it's an admonition title, the button will be just before
-    button = click.target.previousElementSibling;
+    button = click.target.querySelector(".toggle-button");
+  } else if (click.target.classList.contains("tb-icon")) {
+    // We've clicked the icon and need to search up one parent for the button
+    button = click.target.parentElement;
+  } else if (click.target.tagName == "polyline") {
+    // We've clicked the SVG elements inside the button, need to up 2 layers
+    button = click.target.parentElement.parentElement;
+  } else if (click.target.classList.contains("toggle-button")) {
+    // We've clicked the button itself and so don't need to do anything
+    button = click.target;
   } else {
-    // If not, we've clicked the button itself or its content, so search upwards
-    button = click.currentTarget;
+    console.log(`[togglebutton]: Couldn't find button for ${click.target}`)
   }
   target = document.getElementById(button.dataset['button']);
   toggleHidden(target);