jekyll-theme-open-course 1.3.0 → 2.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0695b828b4a9c6cc6f7daf682989a2f9b2d6733dcef9e8f36132772bb4930090'
-  data.tar.gz: 3baf24cd2b52376168d0cdca5d05c34ebce51106d2c92268d4c93be5fb0884a4
+  metadata.gz: 4bb9aa2434b1e4e4e0543a12c2e2c442635978579260c335fb4ae300a5a61e15
+  data.tar.gz: 9f4347b3bd3f224364ace21cf85f58e83a09bf38e08a1c8e594871a79c295184
 SHA512:
-  metadata.gz: 4de957ff6a9db42a0b97b8db8f679034d19f02efbb5219f8136bfca6716a87e19032ce92ed258cb4ab6794926ebb61103119d893d65821fe738f8230ac43a51b
-  data.tar.gz: a8db4a7d28aa773fcab866abda10c31647e004c771db152243fdd1a44c4c86a409fe4f74a2395a381b07981f7f12bdd23cccf4280c23fb239b7ddb1a42d775ea
+  metadata.gz: '080db13b9df00ccfe29ea5cae769befb8c9273aba284dee348436f8753c091d3340bd91c183d5b3897dbd9e474f7184406c102b858371bc52a3e9a2ce576c43c'
+  data.tar.gz: ceb510fa60404129b7b205811f187ee8b95e5d7b400cedf140880af61ad3e08ad50ceaadce56ad5b709b2d092ef1b1449ac0446affb754ad58b1383a25a74dd1

data/Gemfile.lock

@@ -4,56 +4,58 @@ GEM
     addressable (2.7.0)
       public_suffix (>= 2.0.2, < 5.0)
     colorator (1.1.0)
-    concurrent-ruby (1.1.5)
+    concurrent-ruby (1.1.7)
     em-websocket (0.5.1)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
     eventmachine (1.2.7)
-    ffi (1.11.3)
+    ffi (1.13.1)
     forwardable-extended (2.6.0)
     http_parser.rb (0.6.0)
-    i18n (1.8.1)
+    i18n (1.8.5)
       concurrent-ruby (~> 1.0)
-    jekyll (4.0.0)
+    jekyll (4.1.1)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
-      i18n (>= 0.9.5, < 2)
+      i18n (~> 1.0)
       jekyll-sass-converter (~> 2.0)
       jekyll-watch (~> 2.0)
       kramdown (~> 2.1)
       kramdown-parser-gfm (~> 1.0)
       liquid (~> 4.0)
-      mercenary (~> 0.3.3)
+      mercenary (~> 0.4.0)
       pathutil (~> 0.9)
       rouge (~> 3.0)
       safe_yaml (~> 1.0)
       terminal-table (~> 1.8)
-    jekyll-sass-converter (2.0.1)
+    jekyll-sass-converter (2.1.0)
       sassc (> 2.0.1, < 3.0)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
-    kramdown (2.1.0)
+    kramdown (2.3.0)
+      rexml
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
     liquid (4.0.3)
     listen (3.2.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.3.6)
+    mercenary (0.4.0)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (4.0.3)
-    rb-fsevent (0.10.3)
+    public_suffix (4.0.5)
+    rb-fsevent (0.10.4)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
-    rouge (3.14.0)
+    rexml (3.2.4)
+    rouge (3.22.0)
     safe_yaml (1.0.5)
-    sassc (2.2.1)
+    sassc (2.4.0)
       ffi (~> 1.9)
     terminal-table (1.8.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
-    unicode-display_width (1.6.0)
+    unicode-display_width (1.7.0)
 
 PLATFORMS
   ruby
@@ -62,4 +64,4 @@ DEPENDENCIES
   jekyll
 
 BUNDLED WITH
-   1.17.2
+   2.1.4

data/_config.yml

@@ -40,7 +40,7 @@ course:
       href: "policies/"
       id: pol
   css:
-    font-url: "https://use.typekit.net/pig5ein.css"
+    font-url: "https://use.typekit.net/qqk1feg.css"
 
 collections_dir: syllabus
 

data/_layouts/calendar.html

@@ -30,7 +30,7 @@ layout: default
       <header>
     {% endif %}
       <h2>
-        {{ week.theme | escape }}
+        {{ week.theme | markdownify | remove: "<p>" | remove: "</p>" | strip_newlines }}
       </h2>
       <small>Week&nbsp;{{ util.spelled_nums[week_int] }}</small>
     </header>
@@ -44,7 +44,7 @@ layout: default
       {% else %}
         {% capture dateline %}Agenda for the Week of {{ entry.begins | date: "%B %-e" }}{% endcapture %}
       {% endif %}
-      <h3>{{ dateline }}{% if meeting.video %} <a href="{{ meeting.video }}">Video</a>{% endif %}</h3>
+      <h3>{{ dateline }}{% if meeting.video %} <a href="{{ meeting.video }}"><svg class="youtube" aria-label="YouTube"><use href="#youtube"></use></svg>Video</a>{% endif %}</h3>
       <ol>
         {% for item in meeting.agenda %}
           <li>{{ item | markdownify | remove: "<p>" | remove: "</p>" | strip_newlines }}</li>
@@ -116,3 +116,6 @@ layout: default
     {% endif %}
   </article>
 {% endfor %}
+
+  <!-- Youtube Icon via https://www.flaticon.com/free-icon/youtube_2111795 -->
+  <svg xmlns='http://www.w3.org/2000/svg' class="unused"><path id="youtube" d='m23.469 5.929.03.196c-.29-1.029-1.073-1.823-2.068-2.112l-.021-.005c-1.871-.508-9.4-.508-9.4-.508s-7.51-.01-9.4.508c-1.014.294-1.798 1.088-2.083 2.096l-.005.021c-.699 3.651-.704 8.038.031 11.947l-.031-.198c.29 1.029 1.073 1.823 2.068 2.112l.021.005c1.869.509 9.4.509 9.4.509s7.509 0 9.4-.509c1.015-.294 1.799-1.088 2.084-2.096l.005-.021c.318-1.698.5-3.652.5-5.648 0-.073 0-.147-.001-.221.001-.068.001-.149.001-.23 0-1.997-.182-3.951-.531-5.846zm-13.861 9.722v-7.293l6.266 3.652z'/></svg>

data/_layouts/default.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en" id="{{page.id}}" prefix="og: http://ogp.me/ns#" class="loading">
-<head>{% assign course = site.course %}{% assign instructor = site.course.instructor %}
+<head>{% assign course = site.course %}{% assign instructor = site.course.instructor %}{% assign ta = site.course.ta %}
   <meta charset="utf-8" />
   <title>{{ course.number }}: {% if page.title %}{{ page.title}}{% else %}{{ course.title }}{% endif %}</title>
   <meta name="viewport" content="width=device-width,initial-scale=1.0,shrink-to-fit=no" />
@@ -17,7 +17,7 @@
 <body>
 <header id="header">
   <h1>
-    <a rel="home" href="{{ site.url }}{{ site.baseurl }}">{{ course.title}}</a>
+    <a rel="home" href="{{ site.url }}{{ site.baseurl }}">{{ course.title}}</a>{% if page.title %}: {{ page.title}}{% endif %}
   </h1>
   <p class="tagline">
     {% if course.tagline %}{{ course.tagline }}{% endif %}
@@ -42,13 +42,28 @@
   <ul>
     <li>
       <a href="{{ instructor.url }}">{{ instructor.honorific }} {{ instructor.name }}</a>,
-      {{ site.course.instructor.full_title | escape }}
+      {{ instructor.full_title | escape }}
     </li>
     <li><a href="mailto:{{ instructor.email }}">{{ instructor.email }}</a></li>
     <li id="office-hours">
       {{ instructor.office_hours }}
     </li>
   </ul>
+  {% if ta.name %}
+  <header>
+    <h3>Teaching Assistant</h3>
+  </header>
+  <ul>
+    <li>
+      {% if ta.url %}<a href="{{ ta.url }}">{% endif %}{{ ta.name }}{% if ta.url %}</a>{% endif %},
+      {{ ta.full_title | escape }}
+    </li>
+    <li><a href="mailto:{{ ta.email }}">{{ ta.email }}</a></li>
+    <li id="ta-office-hours">
+      {{ ta.office_hours }}
+    </li>
+  </ul>
+  {% endif %}
 </aside>
 
 

data/_layouts/links.html

@@ -0,0 +1,10 @@
+---
+layout: default
+---
+
+<article class="links">
+  <header>
+    <h2>{{ page.title }}</h2>
+  </header>
+  {{ content }}
+</article>

data/_layouts/projects.html

@@ -8,7 +8,7 @@ layout: default
 {% for project in site.projects %}
 {% assign dd = project.due_date | date: "%s" %}
 
-<article class="project" id="project-{{ site.data.utility.spelled_nums[forloop.index] | downcase }}">
+<article class="project {{project.level}}" id="project-{{ site.data.utility.spelled_nums[forloop.index] | downcase }}">
   {% if today < dd and current == true %}
     <header id="current">
     {% assign current = false %}

data/_sass/_base.scss

@@ -106,3 +106,7 @@ code {
   position: absolute;
   left: -10000px;
 }
+
+.unused {
+  display: none;
+}

data/_sass/_colors.scss

@@ -1,16 +1,18 @@
-$text-color: #222;
-$back-color: #F2F2F2;
-$spot-color: #900;
-$gray-color: #7F7F7F;
+$text-color: #321207;
+$back-color: #F6EACB;
+$spot-color: #6C1F55;
+$acnt-color: #B34523;
+$gray-color: #73664E; /* #7F7F7F; */
 $gray-alter: darken($gray-color, 10%);
 $link-under: transparentize($spot-color, 0.65);
-$curr-color: lighten($gray-color, 40%);
+$curr-color: darken($back-color, 8%);
 
 // Dark mode
-$dk-text-color: #AFAFAF;
+$dk-text-color: #DEDEDE;
 $dk-back-color: #111;
-$dk-spot-color: #9C0000;
-$dk-gray-color: #777;
+$dk-spot-color: #FFB700;
+$dk-acnt-color: #FF764D;
+$dk-gray-color: #9E9E9E;
 $dk-link-under: transparentize($dk-spot-color, 0.25);
 $dk-curr-color: darken($dk-gray-color, 45%);
 
@@ -21,6 +23,7 @@ html.light {
   --color-text: #{$text-color};
   --color-back: #{$back-color};
   --color-spot: #{$spot-color};
+  --color-acnt: #{$acnt-color};
   --color-gray: #{$gray-color};
   --color-curr: #{$curr-color};
   --color-altg: #{$gray-alter};
@@ -32,24 +35,26 @@ html.dark {
   --color-text: #{$dk-text-color};
   --color-back: #{$dk-back-color};
   --color-spot: #{$dk-spot-color};
+  --color-acnt: #{$dk-acnt-color};
   --color-gray: #{$dk-gray-color};
   --color-curr: #{$dk-curr-color};
   --color-altg: #{$dk-gray-color};
   --color-link: #{$dk-link-under};
   --color-navi: #{$dk-gray-color};
-  --color-nava: #{$dk-text-color};
+  --color-nava: #{$dk-back-color};
 }
 @media screen and (prefers-color-scheme: dark) {
   html {
     --color-text: #{$dk-text-color};
     --color-back: #{$dk-back-color};
     --color-spot: #{$dk-spot-color};
+    --color-acnt: #{$dk-acnt-color};
     --color-gray: #{$dk-gray-color};
     --color-curr: #{$dk-curr-color};
     --color-altg: #{$dk-gray-color};
     --color-link: #{$dk-link-under};
     --color-navi: #{$dk-gray-color};
-    --color-nava: #{$dk-text-color};
+    --color-nava: #{$dk-back-color};
   }
 }
 
@@ -62,8 +67,8 @@ html {
 }
 ol > li::before,
 ul li::before {
-  color: $spot-color;
-  color: var(--color-spot);
+  color: $acnt-color;
+  color: var(--color-acnt);
 }
 a {
   color: $spot-color;
@@ -81,8 +86,8 @@ a {
   color: var(--color-spot);
 }
 .nav a {
-  border: 1px solid $spot-color;
-  border: 1px solid var(--color-spot);
+  border: 1px solid $acnt-color;
+  border: 1px solid var(--color-acnt);
   color: $gray-color;
   color: var(--color-navi);
 }
@@ -92,8 +97,8 @@ a {
 #calendar #nav-cal a,
 #policies #nav-pol a,
 #projects #nav-pro a {
-  background-color: $spot-color;
-  background-color: var(--color-spot);
+  background-color: $acnt-color;
+  background-color: var(--color-acnt);
   color: $back-color;
   color: var(--color-nava);
 }
@@ -115,13 +120,6 @@ a {
   color: $gray-alter;
   color: var(--color-altg);
 }
-#btn-show-calendar,
-.agenda h3 a {
-  color: $back-color;
-  color: var(--color-back);
-  background-color: $spot-color;
-  background-color: var(--color-spot);
-}
 #btn-show-calendar {
   background-color: $back-color;
   background-color: var(--color-back);
@@ -139,24 +137,28 @@ a {
   color: var(--color-back);
 }
 .agenda h3 a {
-  background-color: $back-color;
-  background-color: var(--color-back);
-  border: 1px solid $spot-color;
-  border: 1px solid var(--color-spot);
-  color: $spot-color;
-  color: var(--color-spot);
+  background-color: inherit;
+  color: $acnt-color;
+  color: var(--color-acnt);
+}
+.youtube {
+  color: pink;
+  fill: $acnt-color;
+  fill: var(--color-acnt);
 }
 .agenda h3 a:active,
 .agenda h3 a:focus,
 .agenda h3 a:hover {
-  background-color: $spot-color;
-  background-color: var(--color-spot);
+  background-color: $acnt-color;
+  background-color: var(--color-acnt);
   color: $back-color;
   color: var(--color-back);
 }
-.agenda h3 a::before {
-  color: $gray-color;
-  color: var(--color-gray);
+a:active .youtube,
+a:focus .youtube,
+a:hover .youtube {
+  fill: $back-color;
+  fill: var(--color-back);
 }
 header small {
   color: $spot-color;
@@ -177,10 +179,10 @@ header small {
   color: var(--color-text);
 }
 #header #theme-button {
-  background-color: $text-color;
-  background-color: var(--color-text);
-  border-color: $text-color;
-  border-color: var(--color-text);
+  background-color: $acnt-color;
+  background-color: var(--color-acnt);
+  border-color: $acnt-color;
+  border-color: var(--color-acnt);
   color: $back-color;
   color: var(--color-back);
 }

data/_sass/_fall.colors.scss

@@ -0,0 +1,192 @@
+$text-color: #321207;
+$back-color: #F6EACB;
+$spot-color: #6C1F55;
+$acnt-color: #B34523;
+$gray-color: #73664E; /* #7F7F7F; */
+$gray-alter: darken($gray-color, 10%);
+$link-under: transparentize($spot-color, 0.65);
+$curr-color: darken($back-color, 8%);
+
+// Dark mode
+$dk-text-color: #DEDEDE;
+$dk-back-color: #111;
+$dk-spot-color: #FFB700;
+$dk-acnt-color: #FF764D;
+$dk-gray-color: #9E9E9E;
+$dk-link-under: transparentize($dk-spot-color, 0.25);
+$dk-curr-color: darken($dk-gray-color, 45%);
+
+
+// CSS Variables
+html,
+html.light {
+  --color-text: #{$text-color};
+  --color-back: #{$back-color};
+  --color-spot: #{$spot-color};
+  --color-acnt: #{$acnt-color};
+  --color-gray: #{$gray-color};
+  --color-curr: #{$curr-color};
+  --color-altg: #{$gray-alter};
+  --color-link: #{$link-under};
+  --color-navi: #{$gray-color};
+  --color-nava: #{$back-color};
+}
+html.dark {
+  --color-text: #{$dk-text-color};
+  --color-back: #{$dk-back-color};
+  --color-spot: #{$dk-spot-color};
+  --color-acnt: #{$dk-acnt-color};
+  --color-gray: #{$dk-gray-color};
+  --color-curr: #{$dk-curr-color};
+  --color-altg: #{$dk-gray-color};
+  --color-link: #{$dk-link-under};
+  --color-navi: #{$dk-gray-color};
+  --color-nava: #{$dk-back-color};
+}
+@media screen and (prefers-color-scheme: dark) {
+  html {
+    --color-text: #{$dk-text-color};
+    --color-back: #{$dk-back-color};
+    --color-spot: #{$dk-spot-color};
+    --color-acnt: #{$dk-acnt-color};
+    --color-gray: #{$dk-gray-color};
+    --color-curr: #{$dk-curr-color};
+    --color-altg: #{$dk-gray-color};
+    --color-link: #{$dk-link-under};
+    --color-navi: #{$dk-gray-color};
+    --color-nava: #{$dk-back-color};
+  }
+}
+
+html {
+  transition: color 0.5s, background-color 0.5s;
+  color: $text-color;
+  color: var(--color-text);
+  background-color: $back-color;
+  background-color: var(--color-back);
+}
+ol > li::before,
+ul li::before {
+  color: $acnt-color;
+  color: var(--color-acnt);
+}
+a {
+  color: $spot-color;
+  color: var(--color-spot);
+}
+@supports (text-decoration-color: red) {
+  a {
+    color: inherit;
+    text-decoration-color: $link-under;
+    text-decoration-color: var(--color-link);
+  }
+}
+#header h1 a {
+  color: $spot-color;
+  color: var(--color-spot);
+}
+.nav a {
+  border: 1px solid $acnt-color;
+  border: 1px solid var(--color-acnt);
+  color: $gray-color;
+  color: var(--color-navi);
+}
+.nav a:hover,
+.nav a:focus,
+.nav a:active,
+#calendar #nav-cal a,
+#policies #nav-pol a,
+#projects #nav-pro a {
+  background-color: $acnt-color;
+  background-color: var(--color-acnt);
+  color: $back-color;
+  color: var(--color-nava);
+}
+
+.recommended,
+.project .description,
+.project .goals,
+.week .agenda,
+.fine-print {
+  color: $gray-color;
+  color: var(--color-gray);
+}
+.current {
+  transition: background-color 0.5s;
+  background-color: $curr-color;
+  background-color: var(--color-curr);
+}
+.week.current .agenda {
+  color: $gray-alter;
+  color: var(--color-altg);
+}
+#btn-show-calendar {
+  background-color: $back-color;
+  background-color: var(--color-back);
+  color: $gray-color;
+  color: var(--color-gray);
+  border: 1px solid $gray-color;
+  border: 1px solid var(--color-gray);
+}
+#btn-show-calendar:active,
+#btn-show-calendar:focus,
+#btn-show-calendar:hover {
+  background-color: $gray-color;
+  background-color: var(--color-gray);
+  color: $back-color;
+  color: var(--color-back);
+}
+.agenda h3 a {
+  background-color: inherit;
+  color: $acnt-color;
+  color: var(--color-acnt);
+}
+.youtube {
+  color: pink;
+  fill: $acnt-color;
+  fill: var(--color-acnt);
+}
+.agenda h3 a:active,
+.agenda h3 a:focus,
+.agenda h3 a:hover {
+  background-color: $acnt-color;
+  background-color: var(--color-acnt);
+  color: $back-color;
+  color: var(--color-back);
+}
+a:active .youtube,
+a:focus .youtube,
+a:hover .youtube {
+  fill: $back-color;
+  fill: var(--color-back);
+}
+header small {
+  color: $spot-color;
+  color: var(--color-spot);
+}
+.week > header small {
+  color: $gray-color;
+  color: var(--color-gray);
+}
+#header,
+#footer,
+#instructor {
+  color: $gray-color;
+  color: var(--color-gray);
+}
+#header .nav {
+  color: $text-color;
+  color: var(--color-text);
+}
+#header #theme-button {
+  background-color: $acnt-color;
+  background-color: var(--color-acnt);
+  border-color: $acnt-color;
+  border-color: var(--color-acnt);
+  color: $back-color;
+  color: var(--color-back);
+}
+#header #theme-button svg {
+  fill: $back-color;
+  fill: var(--color-back);
+}