jekyll-theme-open-course 0.0.1 → 1.3.0

data/_sass/_colors.scss

@@ -0,0 +1,190 @@
+$text-color: #222;
+$back-color: #F2F2F2;
+$spot-color: #900;
+$gray-color: #7F7F7F;
+$gray-alter: darken($gray-color, 10%);
+$link-under: transparentize($spot-color, 0.65);
+$curr-color: lighten($gray-color, 40%);
+
+// Dark mode
+$dk-text-color: #AFAFAF;
+$dk-back-color: #111;
+$dk-spot-color: #9C0000;
+$dk-gray-color: #777;
+$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-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-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};
+}
+@media screen and (prefers-color-scheme: dark) {
+  html {
+    --color-text: #{$dk-text-color};
+    --color-back: #{$dk-back-color};
+    --color-spot: #{$dk-spot-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};
+  }
+}
+
+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: $spot-color;
+  color: var(--color-spot);
+}
+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 $spot-color;
+  border: 1px solid var(--color-spot);
+  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: $spot-color;
+  background-color: var(--color-spot);
+  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,
+.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);
+  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: $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);
+}
+.agenda h3 a:active,
+.agenda h3 a:focus,
+.agenda h3 a:hover {
+  background-color: $spot-color;
+  background-color: var(--color-spot);
+  color: $back-color;
+  color: var(--color-back);
+}
+.agenda h3 a::before {
+  color: $gray-color;
+  color: var(--color-gray);
+}
+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: $text-color;
+  background-color: var(--color-text);
+  border-color: $text-color;
+  border-color: var(--color-text);
+  color: $back-color;
+  color: var(--color-back);
+}
+#header #theme-button svg {
+  fill: $back-color;
+  fill: var(--color-back);
+}

data/_sass/_fonts.scss

@@ -0,0 +1,10 @@
+$font-url: "https://use.typekit.net/pig5ein.css";
+
+$primary-font-family: "Parka", serif;
+$secondary-font-family: "moderno-fb-compressed";
+$tertiary-font-family: "moderno-fb-condensed";
+
+// Font-Weight Reference
+// Parka: 300 (retina); 400 (normal); 500 (medium); 700 (bold)
+// Moderno FB Compressed: 600 (semibold)
+// Moderno FB Condensed: 700 (bold)

data/_sass/_typography.scss

@@ -0,0 +1,358 @@
+$base-size-px: 19;
+$base-line-px: 24;
+$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 (min-resolution: 192dpi) {
+  html {
+    font-weight: 300;
+  }
+}
+
+h2 {
+  font-family: $secondary-font-family;
+  font-weight: 600;
+  font-size: $base-size * $mod-scale * $mod-scale * $mod-scale;
+  line-height: $base-line * 2;
+}
+
+#content b,
+#content strong {
+  font-weight: 500;
+}
+
+#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;
+  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;
+  }
+}
+
+#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;
+  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;
+}
+
+/* ~ 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;
+  }
+}
+
+/* ~ 770px */
+@media screen and (min-width: 48.125em) {
+  body::after {
+    content: 'navbar';
+    display: none;
+  }
+}
+
+/* ~ 855px */
+@media screen and (min-width: 53.4375em) {
+  #header,
+  #content,
+  #footer,
+  #instructor {
+    padding: ($base-line * 1.5) 10%;
+  }
+  #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;
+  }
+  .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;
+  }
+}
+
+/* ~ 1100px */
+@media screen and (min-width: 68.75em) {
+  #header,
+  #content,
+  #footer,
+  #instructor {
+    padding-top: ($base-line * 3);
+  }
+  #footer {
+    padding-top: 0;
+  }
+  #instructor {
+    padding-bottom: 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 {
+  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="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;
+  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;
+}