jekyll-theme-open-course 2.3.0 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 716df6bf04c275d4007f6d4e949423fa8c98ff93fcfaf8853b817582f7d07978
4
- data.tar.gz: 21964c6358a01696074d03252a050c5340ed8aab96f3efd8ac0f6a969b961f22
3
+ metadata.gz: 4bb9aa2434b1e4e4e0543a12c2e2c442635978579260c335fb4ae300a5a61e15
4
+ data.tar.gz: 9f4347b3bd3f224364ace21cf85f58e83a09bf38e08a1c8e594871a79c295184
5
5
  SHA512:
6
- metadata.gz: b91575da3506b994cc3ad35960d222b3fd35c2cb3b503e93f3e4d119362d79d860eb9f5cd36ae0e079f286ced418cc391b9f630239d6a509448cce61605c43b3
7
- data.tar.gz: 66cb78d35083548cb234b6d037f760c15737b8e19b2c35aba406279e91e3d394756597180d6bcc6e0b5afbca7ac8219a9ca5b5269ac88d10ca351d8e9cde1aa5
6
+ metadata.gz: '080db13b9df00ccfe29ea5cae769befb8c9273aba284dee348436f8753c091d3340bd91c183d5b3897dbd9e474f7184406c102b858371bc52a3e9a2ce576c43c'
7
+ data.tar.gz: ceb510fa60404129b7b205811f187ee8b95e5d7b400cedf140880af61ad3e08ad50ceaadce56ad5b709b2d092ef1b1449ac0446affb754ad58b1383a25a74dd1
@@ -77,8 +77,8 @@ a {
77
77
  @supports (text-decoration-color: red) {
78
78
  a {
79
79
  color: inherit;
80
- text-decoration-color: $spot-color;
81
- text-decoration-color: var(--color-spot);
80
+ text-decoration-color: $link-under;
81
+ text-decoration-color: var(--color-link);
82
82
  }
83
83
  }
84
84
  #header h1 a {
@@ -179,10 +179,10 @@ header small {
179
179
  color: var(--color-text);
180
180
  }
181
181
  #header #theme-button {
182
- background-color: $text-color;
183
- background-color: var(--color-text);
184
- border-color: $text-color;
185
- border-color: var(--color-text);
182
+ background-color: $acnt-color;
183
+ background-color: var(--color-acnt);
184
+ border-color: $acnt-color;
185
+ border-color: var(--color-acnt);
186
186
  color: $back-color;
187
187
  color: var(--color-back);
188
188
  }
@@ -0,0 +1,192 @@
1
+ $text-color: #321207;
2
+ $back-color: #F6EACB;
3
+ $spot-color: #6C1F55;
4
+ $acnt-color: #B34523;
5
+ $gray-color: #73664E; /* #7F7F7F; */
6
+ $gray-alter: darken($gray-color, 10%);
7
+ $link-under: transparentize($spot-color, 0.65);
8
+ $curr-color: darken($back-color, 8%);
9
+
10
+ // Dark mode
11
+ $dk-text-color: #DEDEDE;
12
+ $dk-back-color: #111;
13
+ $dk-spot-color: #FFB700;
14
+ $dk-acnt-color: #FF764D;
15
+ $dk-gray-color: #9E9E9E;
16
+ $dk-link-under: transparentize($dk-spot-color, 0.25);
17
+ $dk-curr-color: darken($dk-gray-color, 45%);
18
+
19
+
20
+ // CSS Variables
21
+ html,
22
+ html.light {
23
+ --color-text: #{$text-color};
24
+ --color-back: #{$back-color};
25
+ --color-spot: #{$spot-color};
26
+ --color-acnt: #{$acnt-color};
27
+ --color-gray: #{$gray-color};
28
+ --color-curr: #{$curr-color};
29
+ --color-altg: #{$gray-alter};
30
+ --color-link: #{$link-under};
31
+ --color-navi: #{$gray-color};
32
+ --color-nava: #{$back-color};
33
+ }
34
+ html.dark {
35
+ --color-text: #{$dk-text-color};
36
+ --color-back: #{$dk-back-color};
37
+ --color-spot: #{$dk-spot-color};
38
+ --color-acnt: #{$dk-acnt-color};
39
+ --color-gray: #{$dk-gray-color};
40
+ --color-curr: #{$dk-curr-color};
41
+ --color-altg: #{$dk-gray-color};
42
+ --color-link: #{$dk-link-under};
43
+ --color-navi: #{$dk-gray-color};
44
+ --color-nava: #{$dk-back-color};
45
+ }
46
+ @media screen and (prefers-color-scheme: dark) {
47
+ html {
48
+ --color-text: #{$dk-text-color};
49
+ --color-back: #{$dk-back-color};
50
+ --color-spot: #{$dk-spot-color};
51
+ --color-acnt: #{$dk-acnt-color};
52
+ --color-gray: #{$dk-gray-color};
53
+ --color-curr: #{$dk-curr-color};
54
+ --color-altg: #{$dk-gray-color};
55
+ --color-link: #{$dk-link-under};
56
+ --color-navi: #{$dk-gray-color};
57
+ --color-nava: #{$dk-back-color};
58
+ }
59
+ }
60
+
61
+ html {
62
+ transition: color 0.5s, background-color 0.5s;
63
+ color: $text-color;
64
+ color: var(--color-text);
65
+ background-color: $back-color;
66
+ background-color: var(--color-back);
67
+ }
68
+ ol > li::before,
69
+ ul li::before {
70
+ color: $acnt-color;
71
+ color: var(--color-acnt);
72
+ }
73
+ a {
74
+ color: $spot-color;
75
+ color: var(--color-spot);
76
+ }
77
+ @supports (text-decoration-color: red) {
78
+ a {
79
+ color: inherit;
80
+ text-decoration-color: $link-under;
81
+ text-decoration-color: var(--color-link);
82
+ }
83
+ }
84
+ #header h1 a {
85
+ color: $spot-color;
86
+ color: var(--color-spot);
87
+ }
88
+ .nav a {
89
+ border: 1px solid $acnt-color;
90
+ border: 1px solid var(--color-acnt);
91
+ color: $gray-color;
92
+ color: var(--color-navi);
93
+ }
94
+ .nav a:hover,
95
+ .nav a:focus,
96
+ .nav a:active,
97
+ #calendar #nav-cal a,
98
+ #policies #nav-pol a,
99
+ #projects #nav-pro a {
100
+ background-color: $acnt-color;
101
+ background-color: var(--color-acnt);
102
+ color: $back-color;
103
+ color: var(--color-nava);
104
+ }
105
+
106
+ .recommended,
107
+ .project .description,
108
+ .project .goals,
109
+ .week .agenda,
110
+ .fine-print {
111
+ color: $gray-color;
112
+ color: var(--color-gray);
113
+ }
114
+ .current {
115
+ transition: background-color 0.5s;
116
+ background-color: $curr-color;
117
+ background-color: var(--color-curr);
118
+ }
119
+ .week.current .agenda {
120
+ color: $gray-alter;
121
+ color: var(--color-altg);
122
+ }
123
+ #btn-show-calendar {
124
+ background-color: $back-color;
125
+ background-color: var(--color-back);
126
+ color: $gray-color;
127
+ color: var(--color-gray);
128
+ border: 1px solid $gray-color;
129
+ border: 1px solid var(--color-gray);
130
+ }
131
+ #btn-show-calendar:active,
132
+ #btn-show-calendar:focus,
133
+ #btn-show-calendar:hover {
134
+ background-color: $gray-color;
135
+ background-color: var(--color-gray);
136
+ color: $back-color;
137
+ color: var(--color-back);
138
+ }
139
+ .agenda h3 a {
140
+ background-color: inherit;
141
+ color: $acnt-color;
142
+ color: var(--color-acnt);
143
+ }
144
+ .youtube {
145
+ color: pink;
146
+ fill: $acnt-color;
147
+ fill: var(--color-acnt);
148
+ }
149
+ .agenda h3 a:active,
150
+ .agenda h3 a:focus,
151
+ .agenda h3 a:hover {
152
+ background-color: $acnt-color;
153
+ background-color: var(--color-acnt);
154
+ color: $back-color;
155
+ color: var(--color-back);
156
+ }
157
+ a:active .youtube,
158
+ a:focus .youtube,
159
+ a:hover .youtube {
160
+ fill: $back-color;
161
+ fill: var(--color-back);
162
+ }
163
+ header small {
164
+ color: $spot-color;
165
+ color: var(--color-spot);
166
+ }
167
+ .week > header small {
168
+ color: $gray-color;
169
+ color: var(--color-gray);
170
+ }
171
+ #header,
172
+ #footer,
173
+ #instructor {
174
+ color: $gray-color;
175
+ color: var(--color-gray);
176
+ }
177
+ #header .nav {
178
+ color: $text-color;
179
+ color: var(--color-text);
180
+ }
181
+ #header #theme-button {
182
+ background-color: $acnt-color;
183
+ background-color: var(--color-acnt);
184
+ border-color: $acnt-color;
185
+ border-color: var(--color-acnt);
186
+ color: $back-color;
187
+ color: var(--color-back);
188
+ }
189
+ #header #theme-button svg {
190
+ fill: $back-color;
191
+ fill: var(--color-back);
192
+ }
@@ -143,7 +143,7 @@ h2 {
143
143
  header small {
144
144
  display: block;
145
145
  font-weight: 500;
146
- // padding-top: $base-line * 0.25;
146
+ padding-top: $base-line * 0.25;
147
147
  }
148
148
  .week > header small {
149
149
  font-weight: normal;
@@ -184,6 +184,7 @@ header small {
184
184
  /* ~ 690px */
185
185
  @media screen and (min-width: 43.125em) {
186
186
  #header,
187
+ .error,
187
188
  .policy,
188
189
  .project,
189
190
  .week,
@@ -197,6 +198,7 @@ header small {
197
198
  grid-template-rows: auto ($base-line * 3.25);
198
199
  align-content: stretch;
199
200
  }
201
+ .error header,
200
202
  .policy header,
201
203
  .project header,
202
204
  .week header {
@@ -212,6 +214,7 @@ header small {
212
214
  grid-row: 2 / 4;
213
215
  }
214
216
 
217
+ .error > *,
215
218
  .policy > * {
216
219
  grid-column: 1 / 5;
217
220
  }
@@ -339,6 +342,7 @@ header small {
339
342
  #footer {
340
343
  padding-top: 0;
341
344
  }
345
+ .error,
342
346
  .policy,
343
347
  .project,
344
348
  .week {
@@ -0,0 +1,192 @@
1
+ $text-color: #470E49;
2
+ $back-color: #ECE9D8;
3
+ $spot-color: #18384D;
4
+ $acnt-color: #596B6B;
5
+ $gray-color: #6D626F; /* #7F7F7F; */
6
+ $gray-alter: darken($gray-color, 10%);
7
+ $link-under: $acnt-color;
8
+ $curr-color: #D4CCBE;
9
+
10
+ // Dark mode
11
+ $dk-text-color: $back-color;
12
+ $dk-back-color: darken($text-color, 10%);
13
+ $dk-spot-color: #E5DDB6;
14
+ $dk-acnt-color: lighten(#627482, 10%);
15
+ $dk-gray-color: lighten($gray-color, 30%);
16
+ $dk-link-under: $dk-acnt-color;
17
+ $dk-curr-color: darken($text-color, 12%);
18
+
19
+
20
+ // CSS Variables
21
+ html,
22
+ html.light {
23
+ --color-text: #{$text-color};
24
+ --color-back: #{$back-color};
25
+ --color-spot: #{$spot-color};
26
+ --color-acnt: #{$acnt-color};
27
+ --color-gray: #{$gray-color};
28
+ --color-curr: #{$curr-color};
29
+ --color-altg: #{$gray-alter};
30
+ --color-link: #{$link-under};
31
+ --color-navi: #{$gray-color};
32
+ --color-nava: #{$back-color};
33
+ }
34
+ html.dark {
35
+ --color-text: #{$dk-text-color};
36
+ --color-back: #{$dk-back-color};
37
+ --color-spot: #{$dk-spot-color};
38
+ --color-acnt: #{$dk-acnt-color};
39
+ --color-gray: #{$dk-gray-color};
40
+ --color-curr: #{$dk-curr-color};
41
+ --color-altg: #{$dk-gray-color};
42
+ --color-link: #{$dk-link-under};
43
+ --color-navi: #{$dk-gray-color};
44
+ --color-nava: #{$dk-back-color};
45
+ }
46
+ @media screen and (prefers-color-scheme: dark) {
47
+ html {
48
+ --color-text: #{$dk-text-color};
49
+ --color-back: #{$dk-back-color};
50
+ --color-spot: #{$dk-spot-color};
51
+ --color-acnt: #{$dk-acnt-color};
52
+ --color-gray: #{$dk-gray-color};
53
+ --color-curr: #{$dk-curr-color};
54
+ --color-altg: #{$dk-gray-color};
55
+ --color-link: #{$dk-link-under};
56
+ --color-navi: #{$dk-gray-color};
57
+ --color-nava: #{$dk-back-color};
58
+ }
59
+ }
60
+
61
+ html {
62
+ transition: color 0.5s, background-color 0.5s;
63
+ color: $text-color;
64
+ color: var(--color-text);
65
+ background-color: $back-color;
66
+ background-color: var(--color-back);
67
+ }
68
+ ol > li::before,
69
+ ul li::before {
70
+ color: $acnt-color;
71
+ color: var(--color-acnt);
72
+ }
73
+ a {
74
+ color: $spot-color;
75
+ color: var(--color-spot);
76
+ }
77
+ @supports (text-decoration-color: red) {
78
+ a {
79
+ color: inherit;
80
+ text-decoration-color: $link-under;
81
+ text-decoration-color: var(--color-link);
82
+ }
83
+ }
84
+ #header h1 a {
85
+ color: $spot-color;
86
+ color: var(--color-spot);
87
+ }
88
+ .nav a {
89
+ border: 1px solid $acnt-color;
90
+ border: 1px solid var(--color-acnt);
91
+ color: $gray-color;
92
+ color: var(--color-navi);
93
+ }
94
+ .nav a:hover,
95
+ .nav a:focus,
96
+ .nav a:active,
97
+ #calendar #nav-cal a,
98
+ #policies #nav-pol a,
99
+ #projects #nav-pro a {
100
+ background-color: $acnt-color;
101
+ background-color: var(--color-acnt);
102
+ color: $back-color;
103
+ color: var(--color-nava);
104
+ }
105
+
106
+ .recommended,
107
+ .project .description,
108
+ .project .goals,
109
+ .week .agenda,
110
+ .fine-print {
111
+ color: $gray-color;
112
+ color: var(--color-gray);
113
+ }
114
+ .current {
115
+ transition: background-color 0.5s;
116
+ background-color: $curr-color;
117
+ background-color: var(--color-curr);
118
+ }
119
+ .week.current .agenda {
120
+ color: $gray-alter;
121
+ color: var(--color-altg);
122
+ }
123
+ #btn-show-calendar {
124
+ background-color: $back-color;
125
+ background-color: var(--color-back);
126
+ color: $gray-color;
127
+ color: var(--color-gray);
128
+ border: 1px solid $gray-color;
129
+ border: 1px solid var(--color-gray);
130
+ }
131
+ #btn-show-calendar:active,
132
+ #btn-show-calendar:focus,
133
+ #btn-show-calendar:hover {
134
+ background-color: $gray-color;
135
+ background-color: var(--color-gray);
136
+ color: $back-color;
137
+ color: var(--color-back);
138
+ }
139
+ .agenda h3 a {
140
+ background-color: inherit;
141
+ color: $acnt-color;
142
+ color: var(--color-acnt);
143
+ }
144
+ .youtube {
145
+ color: pink;
146
+ fill: $acnt-color;
147
+ fill: var(--color-acnt);
148
+ }
149
+ .agenda h3 a:active,
150
+ .agenda h3 a:focus,
151
+ .agenda h3 a:hover {
152
+ background-color: $acnt-color;
153
+ background-color: var(--color-acnt);
154
+ color: $back-color;
155
+ color: var(--color-back);
156
+ }
157
+ a:active .youtube,
158
+ a:focus .youtube,
159
+ a:hover .youtube {
160
+ fill: $back-color;
161
+ fill: var(--color-back);
162
+ }
163
+ header small {
164
+ color: $spot-color;
165
+ color: var(--color-spot);
166
+ }
167
+ .week > header small {
168
+ color: $gray-color;
169
+ color: var(--color-gray);
170
+ }
171
+ #header,
172
+ #footer,
173
+ #instructor {
174
+ color: $gray-color;
175
+ color: var(--color-gray);
176
+ }
177
+ #header .nav {
178
+ color: $text-color;
179
+ color: var(--color-text);
180
+ }
181
+ #header #theme-button {
182
+ background-color: $acnt-color;
183
+ background-color: var(--color-acnt);
184
+ border-color: $acnt-color;
185
+ border-color: var(--color-acnt);
186
+ color: $back-color;
187
+ color: var(--color-back);
188
+ }
189
+ #header #theme-button svg {
190
+ fill: $back-color;
191
+ fill: var(--color-back);
192
+ }
@@ -17,6 +17,10 @@ html.loading * {
17
17
  }
18
18
 
19
19
  @import "fonts";
20
+ {% if site.course.css.theme %}
21
+ @import "{{site.course.css.theme}}.colors";
22
+ {% else %}
20
23
  @import "colors";
24
+ {% endif %}
21
25
  @import "typography";
22
26
  @import "base";
@@ -5,7 +5,7 @@ module JTOpenCourse
5
5
  require 'fileutils'
6
6
  require 'pathname'
7
7
 
8
- VERSION = "2.3.0"
8
+ VERSION = "2.4.0"
9
9
 
10
10
  SPELLED_NUMS = %w(
11
11
  Zero One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-theme-open-course
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.3.0
4
+ version: 2.4.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Karl Stolley
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2020-11-28 00:00:00.000000000 Z
11
+ date: 2020-12-10 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -73,8 +73,10 @@ files:
73
73
  - _layouts/projects.html
74
74
  - _sass/_base.scss
75
75
  - _sass/_colors.scss
76
+ - _sass/_fall.colors.scss
76
77
  - _sass/_fonts.scss
77
78
  - _sass/_typography.scss
79
+ - _sass/_winter.colors.scss
78
80
  - assets/css/print.css
79
81
  - assets/css/screen.scss
80
82
  - assets/img/te.png