jekyll-theme-open-course 1.3.0 → 2.4.0

data/_sass/_fonts.scss

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

data/_sass/_typography.scss

@@ -1,5 +1,5 @@
 $base-size-px: 19;
-$base-line-px: 24;
+$base-line-px: 25;
 $base-size: ($base-size-px / 16) * 100%;
 $base-line: ($base-line-px / $base-size-px) * 1rem;
 $mod-scale: 1.25;
@@ -11,7 +11,7 @@ html {
   font-size: 19px;
 }
 
-@media (min-resolution: 192dpi) {
+@media screen and (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2) {
   html {
     font-weight: 300;
   }
@@ -20,8 +20,8 @@ html {
 h2 {
   font-family: $secondary-font-family;
   font-weight: 600;
-  font-size: $base-size * $mod-scale * $mod-scale * $mod-scale;
-  line-height: $base-line * 2;
+  font-size: $base-size * $mod-scale * $mod-scale;
+  line-height: $base-line * 1.5;
 }
 
 #content b,
@@ -29,6 +29,10 @@ h2 {
   font-weight: 500;
 }
 
+#nav-con {
+  position: absolute;
+  left: -10000px;
+}
 #full-nav.hidden {
   display: none;
 }
@@ -57,6 +61,7 @@ h2 {
   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;
 }
 
@@ -85,6 +90,8 @@ h2 {
   h2 {
     font-family: $tertiary-font-family;
     font-weight: 700;
+    font-size: $base-size * $mod-scale * $mod-scale * $mod-scale;
+    line-height: $base-line * 2;
   }
 }
 
@@ -106,6 +113,7 @@ h2 {
 
 #btn-show-calendar,
 .agenda h3 a {
+  font-weight: normal;
   border-radius: $base-line / 4;
   display: block;
   padding: $base-line / 4;
@@ -119,10 +127,15 @@ h2 {
 
 .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: "▸ ";
+.youtube {
+  float: left;
+  padding-right: 5px;
+  padding-top: 1px;
+  height: 25px;
+  width: 25px;
 }
 #content header {
   padding-bottom: $base-line;
@@ -130,7 +143,7 @@ h2 {
 header small {
   display: block;
   font-weight: 500;
-  // padding-top: $base-line * 0.25;
+  padding-top: $base-line * 0.25;
 }
 .week > header small {
   font-weight: normal;
@@ -164,9 +177,14 @@ header small {
   padding-right: $base-line * 1.5;
 }
 
+#instructor {
+  padding-bottom: $base-line * 2;
+}
+
 /* ~ 690px */
 @media screen and (min-width: 43.125em) {
   #header,
+  .error,
   .policy,
   .project,
   .week,
@@ -180,6 +198,7 @@ header small {
     grid-template-rows: auto ($base-line * 3.25);
     align-content: stretch;
   }
+  .error header,
   .policy header,
   .project header,
   .week header {
@@ -195,6 +214,7 @@ header small {
     grid-row: 2 / 4;
   }
 
+  .error > *,
   .policy > * {
     grid-column: 1 / 5;
   }
@@ -251,14 +271,6 @@ header small {
   }
 }
 
-/* ~ 770px */
-@media screen and (min-width: 48.125em) {
-  body::after {
-    content: 'navbar';
-    display: none;
-  }
-}
-
 /* ~ 855px */
 @media screen and (min-width: 53.4375em) {
   #header,
@@ -267,12 +279,12 @@ header small {
   #instructor {
     padding: ($base-line * 1.5) 10%;
   }
+  #instructor {
+    padding-bottom: $base-line * 2;
+  }
   #footer {
     padding-top: 0;
   }
-  #instructor {
-    padding-bottom: 0;
-  }
   h2 {
     font-size: $base-size * $mod-scale * $mod-scale * $mod-scale * $mod-scale;
     line-height: $base-line * 2.5;
@@ -300,6 +312,25 @@ header small {
   }
 }
 
+/* ~ 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,
@@ -311,9 +342,7 @@ header small {
   #footer {
     padding-top: 0;
   }
-  #instructor {
-    padding-bottom: 0;
-  }
+  .error,
   .policy,
   .project,
   .week {
@@ -326,7 +355,11 @@ header small {
 }
 
 /* States */
-.js .past {
+.js .past,
+.grad .ugrad,
+.ugrad .grad,
+.grad .grad h3,
+.ugrad .ugrad h3 {
   display: none;
 }
 
@@ -341,7 +374,7 @@ header small {
 }
 
 .g body::after {
-  background: url('data:image/svg+xml;utf8,<svg height="24" 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;
+  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;

data/_sass/_winter.colors.scss

@@ -0,0 +1,192 @@
+$text-color: #470E49;
+$back-color: #ECE9D8;
+$spot-color: #18384D;
+$acnt-color: #596B6B;
+$gray-color: #6D626F; /* #7F7F7F; */
+$gray-alter: darken($gray-color, 10%);
+$link-under: $acnt-color;
+$curr-color: #D4CCBE;
+
+// Dark mode
+$dk-text-color: $back-color;
+$dk-back-color: darken($text-color, 10%);
+$dk-spot-color: #E5DDB6;
+$dk-acnt-color: lighten(#627482, 10%);
+$dk-gray-color: lighten($gray-color, 30%);
+$dk-link-under: $dk-acnt-color;
+$dk-curr-color: darken($text-color, 12%);
+
+
+// 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);
+}

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;