jekyll-theme-open-course 1.2.1 → 2.3.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,387 @@
+$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 {
+  font-weight: normal;
+  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);
+}
+.youtube {
+  float: left;
+  padding-right: 5px;
+  padding-top: 1px;
+  height: 25px;
+  width: 25px;
+}
+#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

@@ -212,11 +212,11 @@ if ((document.querySelector('#calendar')) && (document.querySelector('#this-week
   //  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');
       }
@@ -224,7 +224,9 @@ if ((document.querySelector('#calendar')) && (document.querySelector('#this-week
       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) {
@@ -235,7 +237,13 @@ if ('fetch' in window) {
     var url = document.querySelector('#github').getAttribute('href'); // grab the href value of the repo link
     if (typeof(url) !== 'undefined') {
       var fragment = url.substring(url.indexOf('.com/') + 5); // find the tail end (5 = .com/)
-      return 'https://api.github.com/repos/' + fragment + '/commits?per_page=1'; // return the API url
+      var branch_regex = /tree/gi;
+      var branch_fragment = fragment.replace(branch_regex,'branches'); // replace 'tree' with 'branches'
+      // If not dealing with an archival branch (no replacement), append the `main` branch
+      if (fragment === branch_fragment) {
+        branch_fragment = fragment + '/branches/main';
+      }
+      return 'https://api.github.com/repos/' + branch_fragment; // return the branch API url
     }
   })();
 
@@ -251,14 +259,14 @@ if ('fetch' in window) {
       return response.json();
     })
     .then(function(data) {
+      var c = data.commit; // Work only with the commit property of the branch API response
       var commit = {};
-      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);
+      commit.message = c.commit.message.charAt(0).toLowerCase() + c.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.url = c.html_url;
+      commit.stamp = c.commit.author.date;
       commit.date = new Date(commit.stamp);
       // Put the date in Day, Month 31 at <Local Time String> format
       commit.time_string = namedDays[commit.date.getDay()] + ', ' +
@@ -272,6 +280,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