jekyll-theme-open-course 1.1.0 → 2.2.0

data/_sass/_fonts.scss

@@ -0,0 +1,10 @@
+$font-url: "https://use.typekit.net/qqk1feg.css";
+
+$primary-font-family: "alber-new-web", serif;
+$secondary-font-family: "abril-titling-narrow";
+$tertiary-font-family: "abril-titling";
+
+// Font-Weight Reference
+// Alder New Web: 300 (retina); 400 (normal); 500 (medium); 700 (bold)
+// Abril Titling Narrow: 600 (semibold)
+// Abril Titling: 700 (bold)

data/_sass/_typography.scss

@@ -0,0 +1,382 @@
+$base-size-px: 19;
+$base-line-px: 25;
+$base-size: ($base-size-px / 16) * 100%;
+$base-line: ($base-line-px / $base-size-px) * 1rem;
+$mod-scale: 1.25;
+
+
+html {
+  -webkit-text-size-adjust: none;
+  font-family: $primary-font-family;
+  font-size: 19px;
+}
+
+@media screen and (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2) {
+  html {
+    font-weight: 300;
+  }
+}
+
+h2 {
+  font-family: $secondary-font-family;
+  font-weight: 600;
+  font-size: $base-size * $mod-scale * $mod-scale;
+  line-height: $base-line * 1.5;
+}
+
+#content b,
+#content strong {
+  font-weight: 500;
+}
+
+#nav-con {
+  position: absolute;
+  left: -10000px;
+}
+#full-nav.hidden {
+  display: none;
+}
+#quick-nav {
+  align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+}
+#quick-nav .nav {
+  display: flex;
+  flex: 1 0 auto;
+  flex-flow: row wrap;
+  justify-content: flex-end;
+}
+#quick-nav li {
+  padding: 0;
+  margin-left: $base-line / 2;
+}
+.navbar #quick-nav li::before {
+  content: "";
+}
+#nav-con a {
+  text-decoration: none;
+}
+.nav a {
+  border-radius: $base-line / 4;
+  display: block;
+  padding: $base-line / 4;
+  padding: calc(#{$base-line / 5} - 1px) $base-line / 4 calc(#{$base-line / 4} - 1px) $base-line / 4;
+  text-decoration: none;
+}
+
+.nav li::before {
+  content: "";
+}
+
+#header h1 a {
+  text-decoration: none;
+}
+
+#header #theme-button {
+  opacity: 0.55;
+  line-height: 0;
+}
+
+/* ~ 370px */
+@media screen and (min-width: 23.125em) {
+  #header h1 {
+    position: relative;
+  }
+}
+
+/* ~ 620px */
+@media screen and (min-width: 38.75em) {
+  h2 {
+    font-family: $tertiary-font-family;
+    font-weight: 700;
+    font-size: $base-size * $mod-scale * $mod-scale * $mod-scale;
+    line-height: $base-line * 2;
+  }
+}
+
+#header h3,
+#footer h3,
+#instructor h3,
+.agenda h3 {
+  text-transform: none;
+  font-weight: 500;
+  padding-bottom: $base-line / 2;
+}
+.agenda h3 {
+  padding-bottom: $base-line / 4;
+}
+.assigned h3,
+.project h3 {
+  font-weight: bold;
+}
+
+#btn-show-calendar,
+.agenda h3 a {
+  border-radius: $base-line / 4;
+  display: block;
+  padding: $base-line / 4;
+  text-decoration: none;
+  display: inline-block;
+}
+#btn-show-calendar {
+  margin-bottom: $base-line * 2;
+  text-decoration: none;
+}
+
+.agenda h3 a {
+  padding: $base-line / 8 $base-line / 4;
+  padding: calc(#{$base-line / 10} - 1px) $base-line / 4 calc(#{$base-line / 8} - 1px) $base-line / 4;
+  margin-top: -($base-line / 8);
+}
+.agenda h3 a::before {
+  content: "▸ ";
+}
+#content header {
+  padding-bottom: $base-line;
+}
+header small {
+  display: block;
+  font-weight: 500;
+  // padding-top: $base-line * 0.25;
+}
+.week > header small {
+  font-weight: normal;
+}
+
+#content article {
+  padding-bottom: $base-line * 3;
+}
+
+.current {
+  padding: $base-line * 1.5;
+  margin: ($base-line * 1.5) (-($base-line * 1.5));
+}
+
+.assigned {
+  padding-top: $base-line;
+}
+
+#header {
+  padding: $base-line * 0.5;
+}
+#header p {
+  min-height: $base-line * 4;
+  padding-top: $base-line * 0.5;
+}
+#header,
+#content,
+#footer,
+#instructor {
+  padding-left: $base-line * 1.5;
+  padding-right: $base-line * 1.5;
+}
+
+#instructor {
+  padding-bottom: $base-line * 2;
+}
+
+/* ~ 690px */
+@media screen and (min-width: 43.125em) {
+  #header,
+  .policy,
+  .project,
+  .week,
+  #instructor,
+  #footer {
+    display: grid;
+    grid-template-columns: repeat(5,1fr);
+    grid-column-gap: $base-line;
+  }
+  .week {
+    grid-template-rows: auto ($base-line * 3.25);
+    align-content: stretch;
+  }
+  .policy header,
+  .project header,
+  .week header {
+    grid-column: 1 / 6;
+  }
+  .week .agendas {
+    grid-column: 1 / 3;
+    grid-row-start: 3;
+  }
+  .week .assigned {
+    padding-top: 0;
+    grid-column: 3 / 6;
+    grid-row: 2 / 4;
+  }
+
+  .policy > * {
+    grid-column: 1 / 5;
+  }
+  #books.policy section,
+  #materials.policy .required {
+    grid-column: 1 / 4;
+  }
+  #books.policy .fine-print,
+  #materials.policy .recommended {
+    grid-column: 4 / 6;
+    grid-row: 3 / 5;
+  }
+  #books.policy .fine-print,
+  #materials.policy .recommended {
+    grid-row: 2 / 5;
+  }
+  .project .description {
+    grid-column: 1 / 3;
+    grid-row: 2 / 3;
+  }
+  .project .goals {
+    grid-column: 1 / 3;
+    grid-row: 3 / 4;
+  }
+  .project .deliverables,
+  .project .requirements {
+    grid-column: 3 / 6;
+  }
+  .project .preview {
+    grid-column: 1 / 6;
+  }
+  #header h1 {
+    grid-column: 1 / 6;
+  }
+  #header p {
+    grid-column: 1 / 4;
+  }
+  #header #quick-nav {
+    grid-column: 1 / 6;
+  }
+
+  #instructor > * {
+    grid-column: 2 / 6;
+  }
+  #footer #full-nav {
+    grid-column: 1 / 2;
+  }
+  #footer #colophon {
+    grid-column: 2 / 6;
+  }
+  .navbar #instructor > *,
+  .navbar #footer #colophon {
+    grid-column: 1 / 4;
+  }
+}
+
+/* ~ 855px */
+@media screen and (min-width: 53.4375em) {
+  #header,
+  #content,
+  #footer,
+  #instructor {
+    padding: ($base-line * 1.5) 10%;
+  }
+  #instructor {
+    padding-bottom: $base-line * 2;
+  }
+  #footer {
+    padding-top: 0;
+  }
+  h2 {
+    font-size: $base-size * $mod-scale * $mod-scale * $mod-scale * $mod-scale;
+    line-height: $base-line * 2.5;
+  }
+  .project .description {
+    grid-column: 1 / 4;
+    grid-row: 2 / 3;
+  }
+  .project .goals {
+    grid-column: 4 / 6;
+    grid-row: 2 / 3;
+  }
+  .project .deliverables,
+  .project .requirements {
+    grid-row: 3 / 6;
+  }
+  .project .deliverables {
+    grid-column: 1 / 3;
+  }
+  .project .requirements {
+    grid-column: 3 / 6;
+  }
+  .project .preview {
+    grid-column: 1 / 4;
+  }
+}
+
+/* ~ 890px */
+@media screen and (min-width: 55.625em) {
+  body::after {
+    content: 'navbar';
+    display: none;
+  }
+  .links {
+    display: grid;
+    grid-template-columns: repeat(3,1fr);
+    grid-column-gap: $base-line;
+  }
+  .links header {
+    grid-column: 1 / 4;
+  }
+  .links .suggestions {
+    grid-column: 2 / span 2;
+  }
+}
+
+/* ~ 1100px */
+@media screen and (min-width: 68.75em) {
+  #header,
+  #content,
+  #footer,
+  #instructor {
+    padding-top: ($base-line * 3);
+  }
+  #footer {
+    padding-top: 0;
+  }
+  .policy,
+  .project,
+  .week {
+    grid-column-gap: $base-line * 1.5;
+  }
+  h2 {
+    font-size: $base-size * $mod-scale * $mod-scale * $mod-scale * $mod-scale * $mod-scale;
+    line-height: $base-line * 3;
+  }
+}
+
+/* States */
+.js .past,
+.grad .ugrad,
+.ugrad .grad,
+.grad .grad h3,
+.ugrad .ugrad h3 {
+  display: none;
+}
+
+/**
+* A quick baseline grid overlay using css+svg.
+* Inspired by [Basehold.it](https://basehold.it/).
+* @author leshido
+*/
+
+.g body {
+  position: relative;
+}
+
+.g body::after {
+  background: url('data:image/svg+xml;utf8,<svg height="25" width="1" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="0.5" style="fill:rgba(255, 0, 0, 0.3)" /></svg>') repeat top left;
+  content: "";
+  display: block;
+  pointer-events: none;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
+  position: absolute;
+}
+
+.g body:active::after {
+  display: none;
+}

data/assets/css/print.css

@@ -1,3 +1,12 @@
+html {
+  font-size: 11pt;
+  color: black;
+}
+
+* {
+  color: black;
+}
+
 #header,
 #footer {
   color: inherit;
@@ -7,7 +16,12 @@ a,
   text-decoration: none;
   color: inherit;
 }
-#content a[href^="http"]::after {
+.agenda h3 a {
+  display: none;
+}
+
+#content a[href^="http"]::after,
+#footer a[href^="http"]::after {
   display: inline;
   content: "(" attr(href) ")";
   font-family: Menlo, Monaco, "Droid Sans Mono", Courier, "Courier New", monospace;
@@ -19,14 +33,10 @@ p,li {
   -webkit-hyphens: none;
   hyphens: none;
 }
-h2 {
-  font-family: "moderno-fb-condensed";
-  font-weight: 700;
-}
-
 
 /* Hide Navigation Stuff */
 
+#quick-nav,
 #nav-nav,
 #full-nav {
   display: none;

data/assets/js/site.js

@@ -25,73 +25,111 @@ if ('serviceWorker' in navigator) {
   }
 }
 
-function themeSwitcher() {
-  // Exit fast if no CSS properties support
-  if (!('supports' in CSS && CSS.supports("(--foo: bar)"))) {
-    return;
-  }
-
-  var header = document.querySelector('#header h1');
-  var toggle = document.createElement('a');
-  var html = document.querySelector('html');
-  // Icons from https://remixicon.com/
-  var icons = {
-    light: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>',
-    dark: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.38 2.019a7.5 7.5 0 1 0 10.6 10.6C21.662 17.854 17.316 22 12.001 22 6.477 22 2 17.523 2 12c0-5.315 4.146-9.661 9.38-9.981z"/></svg>'
-  }
+// Load up the theme switcher if @supports & custom properties available
+if ('supports' in CSS && CSS.supports("(--foo: bar)")) {
 
-  var dark_mode = false;
-  var modes = ['light','dark'];
+  function ThemeSwitch() {
+    var html = document.querySelector('html');
+    var icons = {
+      light: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>',
+      dark: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.38 2.019a7.5 7.5 0 1 0 10.6 10.6C21.662 17.854 17.316 22 12.001 22 6.477 22 2 17.523 2 12c0-5.315 4.146-9.661 9.38-9.981z"/></svg>',
+      system: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2V4a8 8 0 1 0 0 16z"/></svg>'
+      // system: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 1l9.5 5.5v11L12 23l-9.5-5.5v-11L12 1zm0 2.311L4.5 7.653v8.694l7.5 4.342 7.5-4.342V7.653L12 3.311zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>'
+    }
+    var mode = 'system';
+    var modes = ['dark','light'];
+    var button = document.createElement('a');
 
-  if ('matchMedia' in window) {
-    dark_mode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    if (dark_mode) {
-      modes.reverse(); // ['dark','light']
+    var cleanupOldPreferences = function() {
+      // Clean up earlier `modes` item
+      if (storageAvailable('localStorage')) {
+        localStorage.removeItem('modes');
+      }
     }
-  }
 
-  if (storageAvailable('localStorage')) {
-    if (!localStorage.getItem('modes')) {
-      localStorage.setItem('modes',modes.join(','));
-    } else {
-      modes = localStorage.getItem('modes').split(',');
+    var loadPreference = function() {
+      // read from local storage
+      if (storageAvailable('localStorage')) {
+        if (localStorage.getItem('mode')) {
+          mode = localStorage.getItem('mode');
+        } else {
+          mode = 'system';
+        }
+      }
     }
-  }
 
-  html.classList.add(modes[0]);
+    var setModeOrder = function() {
+      // reverse the modes if dark mode is preferred,
+      // or if dark is set in preferences
+      if ('matchMedia' in window) {
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches && (mode !== 'light')) {
+          modes.reverse(); // ['light','dark']
+        }
+      }
+      // system gets tacked onto the end as the last option, always
+      modes.push('system');
+    }
 
-  toggle.id = 'theme-toggle';
-  toggle.href = '#null';
-  toggle.title = 'Switch to ' + modes[1] + ' theme';
-  toggle.innerHTML = icons[modes[1]];
-  header.appendChild(toggle);
+    var storePreference = function() {
+      // store current mode (default or selected) in local storage
+      if (storageAvailable('localStorage')) {
+        localStorage.setItem('mode', mode);
+      }
+    }
 
-  toggle.addEventListener('click', function(e) {
-    e.preventDefault();
-    html.classList.replace(modes[0],modes[1]);
-    modes.reverse();
-    if (storageAvailable('localStorage')) {
-      localStorage.setItem('modes',modes.join(','));
+    var setHTMLClass = function() {
+      html.classList.replace(mode,modes[0]);
     }
-    toggle.title = 'Switch to ' + modes[1] + ' theme';
-    toggle.innerHTML = icons[modes[1]];
-  });
 
-  function storageAvailable(type) {
-    try {
-      var storage = window[type];
-      var x = '__storage_test__';
-      storage.setItem(x, x);
-      storage.removeItem(x);
-      return true;
+    var cycleModes = function() {
+      mode = modes.shift(); // grab the current mode from the front of the array...
+      modes.push(mode); // ...and push it to the end of the array
     }
-    catch(e) {
-      return false;
+
+    this.switcherButton = function() {
+      button.id = 'theme-button';
+      button.href = '#null';
+      button.title = 'Switch to ' + modes[0] + ' theme';
+      button.innerHTML = icons[modes[0]];
+      button.addEventListener('click', function(e) {
+        e.preventDefault();
+        // fix the class list on <html>
+        setHTMLClass();
+        cycleModes();
+        storePreference();
+        button.title = 'Switch to ' + modes[0] + ' theme';
+        button.innerHTML = icons[modes[0]];
+      });
+      return button;
     }
+
+    // Do things on construction
+    cleanupOldPreferences();
+    loadPreference();
+    setModeOrder();
+    html.classList.add(mode);
   }
+
+  var ts = new ThemeSwitch();
+  var ts_li = document.createElement('li');
+  ts_li.id = 'nav-thm';
+  ts_li.appendChild(ts.switcherButton());
+  document.querySelector('#quick-nav .nav').appendChild(ts_li);
 }
 
-themeSwitcher();
+
+function storageAvailable(type) {
+  try {
+    var storage = window[type];
+    var x = '__storage_test__';
+    storage.setItem(x, x);
+    storage.removeItem(x);
+    return true;
+  }
+  catch(e) {
+    return false;
+  }
+}
 
 // Move the nav to the header when there is room
 // Responsive detection
@@ -107,34 +145,47 @@ function responsiveFeature(feature) {
 }
 
 function ToggledNav() {
-  this.nav = document.querySelector('#full-nav .nav');
-  this.quick_nav = document.querySelector('#quick-nav .nav');
-  this.full_nav = document.querySelector('#full-nav');
-  this.nav_nav;
-  this.nav_items = [];
+  var nav = document.querySelector('#full-nav .nav');
+  var quick_nav = document.querySelector('#quick-nav .nav');
+  var full_nav = document.querySelector('#full-nav');
+  var thm_btn = document.querySelector('#theme-button')
+  var nav_thm;
+  var nav_nav;
+  var nav_items = [];
   this.toggle = function() {
     if (responsiveFeature('navbar') && !html.classList.contains('navbar')) {
-      while (this.nav.firstChild) {
-        if (this.nav.firstChild.tagName) {
-          this.nav_items.push(this.nav.removeChild(this.nav.firstChild));
+      if (thm_btn) {
+        nav_thm = quick_nav.removeChild(document.getElementById('nav-thm'));
+      }
+      while (nav.firstChild) {
+        if (nav.firstChild.tagName) {
+          nav_items.push(nav.removeChild(nav.firstChild));
         } else {
-          this.nav.removeChild(this.nav.firstChild); // remove text nodes
+          nav.removeChild(nav.firstChild); // remove text nodes
         }
       }
-      for (var i = 0; i < this.nav_items.length; i++) {
-        this.quick_nav.appendChild(this.nav_items[i]);
+      for (var i = 0; i < nav_items.length; i++) {
+        quick_nav.appendChild(nav_items[i]);
       }
-      this.nav_nav = this.quick_nav.removeChild(document.getElementById('nav-nav'));
+      if (thm_btn) {
+        quick_nav.appendChild(nav_thm);
+      }
+      nav_nav = quick_nav.removeChild(document.getElementById('nav-nav'));
       html.classList.add('navbar');
-      this.full_nav.classList.add('hidden');
+      full_nav.classList.add('hidden');
     }
     if (!responsiveFeature('navbar') && html.classList.contains('navbar')) {
-      console.log('nav-nav node name:', this.nav_nav.nodeName);
-      this.quick_nav.appendChild(this.nav_nav);
-      for (var i = 0; i < this.nav_items.length; i++) {
-        this.nav.appendChild(this.nav_items[i]);
+      if (thm_btn) {
+        nav_thm = quick_nav.removeChild(document.getElementById('nav-thm'));
+      }
+      quick_nav.appendChild(nav_nav);
+      for (var i = 0; i < nav_items.length; i++) {
+        nav.appendChild(nav_items[i]);
       }
-      this.full_nav.classList.remove('hidden');
+      if (thm_btn) {
+        quick_nav.appendChild(nav_thm);
+      }
+      full_nav.classList.remove('hidden');
       html.classList.remove('navbar');
     }
   }
@@ -149,7 +200,7 @@ window.addEventListener('resize', function() {
 
 
 // Capture and replicate the current week at the top of the calendar
-if (document.querySelector('#calendar')) {
+if ((document.querySelector('#calendar')) && (document.querySelector('#this-week'))) {
   var this_week = document.querySelector('#this-week').closest('article'); // grab this week's <article>
   var current_week = this_week.cloneNode(true); // make a copy of it,
   this_week.querySelector('#this-week').id = ''; // remove the original #this-week id
@@ -161,11 +212,11 @@ if (document.querySelector('#calendar')) {
   //  location.hash = '#this-week'; // point at the new hash position; viewport should show this one
   // }
   var btn_show_calendar = document.createElement('a');
+  var past_weeks = document.querySelectorAll('article.past');
   btn_show_calendar.id = "btn-show-calendar";
   btn_show_calendar.href = "#null";
   btn_show_calendar.text = "Show Previous Weeks"
   btn_show_calendar.addEventListener('click', function(e) {
-      var past_weeks = document.querySelectorAll('article.past');
       for (var week of past_weeks) {
         week.classList.remove('past');
       }
@@ -173,7 +224,9 @@ if (document.querySelector('#calendar')) {
       e.preventDefault();
     }
   );
-  current_week.insertAdjacentElement('afterend', btn_show_calendar);
+  if (past_weeks.length > 1) {
+    current_week.insertAdjacentElement('afterend', btn_show_calendar);
+  }
 }
 
 if ('fetch' in window) {
@@ -204,6 +257,8 @@ if ('fetch' in window) {
       data = data[0]; // only need most recent commit
       // Lowercase commit message's first word to run in `...to XYZ` copy:
       commit.message = data.commit.message.charAt(0).toLowerCase() + data.commit.message.slice(1);
+      // Grab only the first line of a multiline message
+      commit.message = commit.message.split("\n\n")[0];
       commit.url = data.html_url;
       commit.stamp = data.commit.author.date;
       commit.date = new Date(commit.stamp);
@@ -219,6 +274,28 @@ if ('fetch' in window) {
   }
 }
 
+// This is 10,000 kinds of ugly and bad, but it gets the job done...for now.
+var course_levels = ['grad','ugrad','all'];
+var title = document.querySelector('title');
+var title_components = {};
+  title_components.original = title.innerText.trim();
+  title_components.name = title_components.original.split(':')[1] // Web Real-Time Communications
+  title_components.full = title_components.original.split(':')[0]; // ITMD 469/545
+  title_components.code = title_components.full.split(' ')[0]; // ITMD
+  title_components.all = title_components.full.split(' ')[1]; // 469/545
+  title_components.ugrad = title_components.all.split('/')[0]; // 469
+  title_components.grad = title_components.all.split('/')[1]; // 545
+
+document.querySelector('#footer').addEventListener('dblclick', function(e) {
+  // Adjust the <title> contents
+  title.innerText = title_components.code + ' ' + title_components[course_levels[0]] + ': ' + title_components.name;
+  // Switch up the ancestor level class
+  html.classList.remove(course_levels[course_levels.length - 1]);
+  html.classList.add(course_levels[0]);
+  // Push the current level to the end of the array
+  course_levels.push(course_levels.shift());
+});
+
 window.addEventListener('keyup', function(e) {
   // console.log(e.keyCode);
   // Toggle the visibility of gridlines when `g` is pressed