askclass-course-theme 0.11.1 → 0.12.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5b267185ef2f9f7a6a1225e1004826781155a2fac57c73fa781a4ad34f0826b4
4
- data.tar.gz: bb7c7ed2088cf8c91ccbc1991467390560d4108ee506d6fe25965ad19665bab6
3
+ metadata.gz: 572cc8521c872f728eebe711bf104817e9fd05472a4c76b8447a7ef1f58a1366
4
+ data.tar.gz: b7c3efd4ec9d25fc27ac7de2ad5bda85ccc124d0b3959d57d9aa3776fb5395b3
5
5
  SHA512:
6
- metadata.gz: 77d03ef6473d4ef7a3a82998a9f37878e59db6a68a41e9b9509373cd6cdf23c4116bbea83436137301d571d84e9c0ae2d16f5ce78539cecd66d764d2cb35e7d1
7
- data.tar.gz: 9cc074e9a076fe7449db81840738163cf32398f400046fe5477fe17b39fe610145e9babd896a866bf51757724f0045334b058ce9e97a676cb35330f16ef83292
6
+ metadata.gz: 4f2e13cbd7d2d92f1a92c96d08dd751068b28f8a489fdfc1412d94e2b580afb0680edc4b362c49222b03f711a0bf38f02b3982675b4006f544ba703c1b625ab4
7
+ data.tar.gz: c209af4d70a2c1b2a0593161c7de8e72196cb33b9a6ceaa398c6cf0161a599e405dc9db4005bad4d68e75435dda7084ec4d1bd535da88dffc590383b693a4548
data/_config.yml CHANGED
@@ -58,6 +58,7 @@ acc:
58
58
  - Open+Sans
59
59
  - Josefin+Sans
60
60
  - Share+Tech+Mono
61
+ - Lexend
61
62
  - Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
62
63
 
63
64
  collections_dir: content
@@ -2,7 +2,11 @@
2
2
  {%- include head/meta.html -%}
3
3
  {%- include head/common.html -%}
4
4
  {%- if page.collection == 'session' -%}
5
- <link rel="stylesheet" href="{{ 'assets/css/session.css' | relative_url }}" />
5
+ {%- if session_data.type == 'Dialog' -%}
6
+ <link rel="stylesheet" href="{{ 'assets/css/dialog.css' | relative_url }}" />
7
+ {%- else -%}
8
+ <link rel="stylesheet" href="{{ 'assets/css/session.css' | relative_url }}" />
9
+ {%- endif -%}
6
10
  {%- else -%}
7
11
  <link rel="stylesheet" href="{{ 'assets/css/segment.css' | relative_url }}" />
8
12
  {%- endif -%}
@@ -0,0 +1,37 @@
1
+ {% assign words = include.text | split: " " %}
2
+
3
+ <div class="bubble-container {{ include.side }}">
4
+ <div class="talk-bubble {{ include.side }} tri-right {{ include.side }}-in border round">
5
+ <div class="talktext">
6
+ <div class="index">{{ include.index }}</div>
7
+ {%- for raw in words %}
8
+ {%- assign w = raw
9
+ | replace: 'th', '<u>th</u>'
10
+ | replace: 'Th', '<u>Th</u>'
11
+ | replace: 'St', '<u>St</u>'
12
+ | replace: 've', '<u>ve</u>'
13
+ | replace: 'Ve', '<u>Ve</u>'
14
+ | replace: 'dr', '<u>dr</u>'
15
+ | replace: 'Dr', '<u>Dr</u>'
16
+ %}
17
+ {%- assign str = w | remove_first: '^' %}
18
+ {%- if str == w %}
19
+ {{ w }}
20
+ {%- else -%}
21
+ {%- assign word = str
22
+ | remove_first: '.'
23
+ | remove_first: ','
24
+ | remove_first: '!'
25
+ | remove_first: '?'
26
+ %}
27
+ {%- if word == str %}
28
+ {%- include session/say.html word=word -%}
29
+ {%- else %}
30
+ {%- assign punct = str | slice: -1, 1 -%}
31
+ {%- include session/say.html word=word punct=punct -%}
32
+ {% endif -%}
33
+ {% endif -%}
34
+ {% endfor -%}
35
+ </div>
36
+ </div>
37
+ </div>
@@ -0,0 +1,11 @@
1
+ <section class="spacer">
2
+ {%- for text in include.data -%}
3
+ {%- assign lr = forloop.index | modulo: 2 %}
4
+ {%- if lr == 0 -%}
5
+ {%- assign side = 'right' -%}
6
+ {%- else -%}
7
+ {%- assign side = 'left' -%}
8
+ {%- endif -%}
9
+ {% include session/bubble.html text=text side=side index=forloop.index %}
10
+ {%- endfor -%}
11
+ </section>
@@ -0,0 +1,2 @@
1
+ {% assign word = include.word | replace: '<u>' | replace: '</u>' %}
2
+ <a target="_blank" href="https://www.google.com/search?q=pronounce+{{ word }}">{{ include.word }}</a>{{ include.punct }}
@@ -1,6 +1,9 @@
1
- {% assign session_id = page.id | split: '/' | last %}
2
- {% assign session_data = site.data.sessions[session_id] %}
3
- {% assign segment_data = site.data.syllabus[session_data.segment] %}
1
+ {%- assign session_id = page.id | split: '/' | last -%}
2
+ {%- assign session_data = site.data.sessions[session_id] -%}
3
+ {%- assign segment_data = site.data.syllabus[session_data.segment] -%}
4
+ {%- if session_data.width != 'max' -%}
5
+ {%- assign constraint = 'max-width' -%}
6
+ {%- endif -%}
4
7
 
5
8
  <!doctype html>
6
9
  <html lang="en">
@@ -10,19 +13,20 @@
10
13
  {% include session/header.html %}
11
14
 
12
15
  <section class="center-align spacer content">
13
- <article>
14
- {% include session/images.html images=session_data.images %}
15
-
16
- {% include session/points.html %}
17
-
18
- {% include session/videos.html videos=session_data.videos %}
16
+ <article class="{{ constraint }}">
17
+ {%- include session/images.html images=session_data.images -%}
18
+ {%- include session/points.html -%}
19
+ {%- include session/videos.html videos=session_data.videos -%}
19
20
  {{ content }}
21
+ {%- if page.dialogue -%}
22
+ {%- include session/conversation.html data=page.dialogue-%}
23
+ {%- endif -%}
20
24
  </article>
21
25
  </section>
22
26
 
23
- {% include session/paginator.html %}
24
- {% include session/content_revealer.html %}
25
- {% include footer.html %}
26
- {% include foot/mathjax.html -%}
27
+ {%- include session/paginator.html -%}
28
+ {%- include session/content_revealer.html -%}
29
+ {%- include footer.html -%}
30
+ {%- include foot/mathjax.html -%}
27
31
  </body>
28
32
  </html>
data/_sass/_base.scss CHANGED
@@ -1,8 +1,9 @@
1
1
  :root {
2
2
  --font-special: #{$font-special};
3
+ --font-mono: #{$font-mono};
3
4
  --font-main: #{$font-main};
4
5
  --font-secondary: #{$font-secondary};
5
- --font-mono: #{$font-mono};
6
+ --font-tertiary: #{$font-tertiary};
6
7
 
7
8
  --color-bg: #{$color-bg};
8
9
  --color-fg: #{$color-fg};
@@ -0,0 +1,311 @@
1
+ html {
2
+ --color1: lightyellow;
3
+ --color2: lightgreen;
4
+ --color1h: #ebebbb;
5
+ --color2h: #6bd76b;
6
+ --colorFade: rgba(0,0,0,0.6);
7
+ --color1f: #666658;
8
+ --color2f: #395f39;
9
+ }
10
+
11
+ .bubble-container {
12
+ display:flex;
13
+ }
14
+ .bubble-container.left {
15
+ justify-content: flex-start;
16
+ }
17
+ .bubble-container.right {
18
+ justify-content: flex-end;
19
+ }
20
+
21
+ /* CSS talk bubble */
22
+ .talk-bubble {
23
+ margin: 10px 35px;
24
+ display: inline-block;
25
+ position: relative;
26
+ height: auto;
27
+ color: #222;
28
+ }
29
+ .talk-bubble.left {
30
+ margin-right: 60px;
31
+ background-color: var(--color1);
32
+ }
33
+ .talk-bubble.left a {
34
+ color: inherit;
35
+ background-color: var(--color1h);
36
+ }
37
+ .talk-bubble.right {
38
+ margin-left: 60px;
39
+ background-color: var(--color2);
40
+ }
41
+ .talk-bubble.right a {
42
+ color: inherit;
43
+ background-color: var(--color2h);
44
+ }
45
+ .border{
46
+ border: 8px solid var(--colorFade);
47
+ }
48
+ .round{
49
+ border-radius: 30px;
50
+ -webkit-border-radius: 30px;
51
+ -moz-border-radius: 30px;
52
+ }
53
+
54
+ /* Right triangle placed top left flush. */
55
+ .tri-right.border.left-top:before {
56
+ content: ' ';
57
+ position: absolute;
58
+ width: 0;
59
+ height: 0;
60
+ left: -40px;
61
+ right: auto;
62
+ top: -8px;
63
+ bottom: auto;
64
+ border: 32px solid;
65
+ border-color: var(--colorFade) transparent transparent transparent;
66
+ }
67
+ .tri-right.left-top:after{
68
+ content: ' ';
69
+ position: absolute;
70
+ width: 0;
71
+ height: 0;
72
+ left: -20px;
73
+ right: auto;
74
+ top: 0px;
75
+ bottom: auto;
76
+ border: 22px solid;
77
+ border-color: var(--color1) transparent transparent transparent;
78
+ }
79
+
80
+ /* Right triangle, left side slightly down */
81
+ .tri-right.border.left-in:before {
82
+ content: ' ';
83
+ position: absolute;
84
+ width: 0;
85
+ height: 0;
86
+ left: -40px;
87
+ right: auto;
88
+ top: 12px;
89
+ bottom: auto;
90
+ border: 20px solid;
91
+ border-color: var(--colorFade) var(--colorFade) transparent transparent;
92
+ }
93
+ .tri-right.left-in:after{
94
+ content: ' ';
95
+ position: absolute;
96
+ width: 0;
97
+ height: 0;
98
+ left: -20px;
99
+ right: auto;
100
+ top: 20px;
101
+ bottom: auto;
102
+ border: 12px solid;
103
+ }
104
+ .left.tri-right.left-in:after {
105
+ border-color: var(--color1) var(--color1) transparent transparent;
106
+ }
107
+ .left.tri-right.border.left-in:before {
108
+ border-color: var(--color1f) var(--color1f) transparent transparent;
109
+ }
110
+ .right.tri-right.left-in:after {
111
+ border-color: var(--color2) var(--color2) transparent transparent;
112
+ }
113
+ .right.tri-right.border.left-in:before {
114
+ border-color: var(--color2f) var(--color2f) transparent transparent;
115
+ }
116
+
117
+ /*Right triangle, placed bottom left side slightly in*/
118
+ .tri-right.border.btm-left:before {
119
+ content: ' ';
120
+ position: absolute;
121
+ width: 0;
122
+ height: 0;
123
+ left: -8px;
124
+ right: auto;
125
+ top: auto;
126
+ bottom: -40px;
127
+ border: 32px solid;
128
+ border-color: transparent transparent transparent var(--colorFade);
129
+ }
130
+ .tri-right.btm-left:after{
131
+ content: ' ';
132
+ position: absolute;
133
+ width: 0;
134
+ height: 0;
135
+ left: 0px;
136
+ right: auto;
137
+ top: auto;
138
+ bottom: -20px;
139
+ border: 22px solid;
140
+ border-color: transparent transparent transparent var(--color1);
141
+ }
142
+
143
+ /*Right triangle, placed bottom left side slightly in*/
144
+ .tri-right.border.btm-left-in:before {
145
+ content: ' ';
146
+ position: absolute;
147
+ width: 0;
148
+ height: 0;
149
+ left: 30px;
150
+ right: auto;
151
+ top: auto;
152
+ bottom: -40px;
153
+ border: 20px solid;
154
+ border-color: var(--colorFade) transparent transparent var(--colorFade);
155
+ }
156
+ .tri-right.btm-left-in:after{
157
+ content: ' ';
158
+ position: absolute;
159
+ width: 0;
160
+ height: 0;
161
+ left: 38px;
162
+ right: auto;
163
+ top: auto;
164
+ bottom: -20px;
165
+ border: 12px solid;
166
+ border-color: var(--color1) transparent transparent var(--color1);
167
+ }
168
+
169
+ /*Right triangle, placed bottom right side slightly in*/
170
+ .tri-right.border.btm-right-in:before {
171
+ content: ' ';
172
+ position: absolute;
173
+ width: 0;
174
+ height: 0;
175
+ left: auto;
176
+ right: 30px;
177
+ bottom: -40px;
178
+ border: 20px solid;
179
+ border-color: var(--colorFade) var(--colorFade) transparent transparent;
180
+ }
181
+ .tri-right.btm-right-in:after{
182
+ content: ' ';
183
+ position: absolute;
184
+ width: 0;
185
+ height: 0;
186
+ left: auto;
187
+ right: 38px;
188
+ bottom: -20px;
189
+ border: 12px solid;
190
+ border-color: var(--color1) var(--color1) transparent transparent;
191
+ }
192
+ .tri-right.border.btm-right:before {
193
+ content: ' ';
194
+ position: absolute;
195
+ width: 0;
196
+ height: 0;
197
+ left: auto;
198
+ right: -8px;
199
+ bottom: -40px;
200
+ border: 20px solid;
201
+ border-color: var(--colorFade) var(--colorFade) transparent transparent;
202
+ }
203
+ .tri-right.btm-right:after{
204
+ content: ' ';
205
+ position: absolute;
206
+ width: 0;
207
+ height: 0;
208
+ left: auto;
209
+ right: 0px;
210
+ bottom: -20px;
211
+ border: 12px solid;
212
+ border-color: var(--color1) var(--color1) transparent transparent;
213
+ }
214
+
215
+ /* Right triangle, right side slightly down*/
216
+ .tri-right.border.right-in:before {
217
+ content: ' ';
218
+ position: absolute;
219
+ width: 0;
220
+ height: 0;
221
+ left: auto;
222
+ right: -40px;
223
+ top: 12px;
224
+ bottom: auto;
225
+ border: 20px solid;
226
+ }
227
+ .tri-right.right-in:after{
228
+ content: ' ';
229
+ position: absolute;
230
+ width: 0;
231
+ height: 0;
232
+ left: auto;
233
+ right: -20px;
234
+ top: 20px;
235
+ bottom: auto;
236
+ border: 12px solid;
237
+ border-color: var(--color1) transparent transparent var(--color1);
238
+ }
239
+ .left.tri-right.right-in:after {
240
+ border-color: var(--color1) transparent transparent var(--color1);
241
+ }
242
+ .left.tri-right.border.right-in:before {
243
+ border-color: var(--color1f) transparent transparent var(--color1f);
244
+ }
245
+ .right.tri-right.right-in:after {
246
+ border-color: var(--color2) transparent transparent var(--color2);
247
+ }
248
+ .right.tri-right.border.right-in:before {
249
+ border-color: var(--color2f) transparent transparent var(--color2f);
250
+ }
251
+
252
+ /* Right triangle placed top right flush. */
253
+ .tri-right.border.right-top:before {
254
+ content: ' ';
255
+ position: absolute;
256
+ width: 0;
257
+ height: 0;
258
+ left: auto;
259
+ right: -40px;
260
+ top: -8px;
261
+ bottom: auto;
262
+ border: 32px solid;
263
+ border-color: var(--colorFade) transparent transparent transparent;
264
+ }
265
+ .tri-right.right-top:after{
266
+ content: ' ';
267
+ position: absolute;
268
+ width: 0;
269
+ height: 0;
270
+ left: auto;
271
+ right: -20px;
272
+ top: 0px;
273
+ bottom: auto;
274
+ border: 20px solid;
275
+ border-color: var(--color1) transparent transparent transparent;
276
+ }
277
+
278
+ .talktext{
279
+ padding: 1em;
280
+ text-align: left;
281
+ font-size: calc(20px + (30 - 10) * ((100vw - 500px) / (1600 - 300)));
282
+ line-height: calc(30px + (12 - 0) * ((100vw - 500px) / (600 - 10)));
283
+ font-family: var(--font-tertiary);
284
+ }
285
+ .talktext .index {
286
+ position: absolute;
287
+ top: -14px;
288
+ display: flex;
289
+ width: 30px;
290
+ font-size: 20px;
291
+ line-height: 29px;
292
+ }
293
+ .left .talktext .index {
294
+ color: var(--color1);
295
+ left: -40px;
296
+ justify-content: flex-end;
297
+ }
298
+ .right .talktext .index {
299
+ color: var(--color2);
300
+ right: -40px;
301
+ justify-content: flex-begin;
302
+ }
303
+ u {
304
+ text-decoration-thickness: from-font;
305
+ }
306
+ .left u {
307
+ text-decoration-color: var(--color1f);
308
+ }
309
+ .right u {
310
+ text-decoration-color: var(--color2f);
311
+ }
data/_sass/_post.scss CHANGED
@@ -6,13 +6,15 @@
6
6
  }
7
7
 
8
8
  article {
9
- max-width: var(--content-width);
10
9
  width: 100%;
11
10
  display: flex;
12
11
  flex-direction: column;
13
12
  overflow-wrap: break-word;
14
13
  word-break: break-word;
15
- h1, h2, h3, h4 {
14
+ &.max-width {
15
+ max-width: var(--content-width);
16
+ }
17
+ h1, h2, h3, h4, .bubble-container {
16
18
  font-family: var(--font-special);
17
19
  margin-bottom: 0;
18
20
  }
@@ -35,6 +37,8 @@ article {
35
37
  }
36
38
  pre {
37
39
  margin: 0;
40
+ width: 100%;
41
+ overflow-x: auto;
38
42
  code {
39
43
  border: 0;
40
44
  background-color: inherit;
data/_sass/init.scss CHANGED
@@ -1,7 +1,8 @@
1
1
  $font-main: 'Open Sans', sans-serif;
2
- $font-secondary: 'Teko', sans-serif;
3
- $font-special: 'Josefin Sans', sans-serif;
4
2
  $font-mono: 'Share Tech Mono', monospace;
3
+ $font-special: 'Josefin Sans', sans-serif;
4
+ $font-secondary: 'Teko', sans-serif;
5
+ $font-tertiary: 'Lexend', sans-serif;
5
6
 
6
7
  $color-primary: white;
7
8
  $color-secondary: floralwhite;
@@ -0,0 +1,8 @@
1
+ ---
2
+ ---
3
+
4
+ @import
5
+ "post",
6
+ "bubbles",
7
+ "init";
8
+
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: askclass-course-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.11.1
4
+ version: 0.12.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - AskClass
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2022-11-18 00:00:00.000000000 Z
11
+ date: 2022-11-27 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -47,7 +47,9 @@ files:
47
47
  - _includes/segment/header.html
48
48
  - _includes/segment/index.html
49
49
  - _includes/segment/nav.html
50
+ - _includes/session/bubble.html
50
51
  - _includes/session/content_revealer.html
52
+ - _includes/session/conversation.html
51
53
  - _includes/session/googledrive.html
52
54
  - _includes/session/header.html
53
55
  - _includes/session/images.html
@@ -55,12 +57,14 @@ files:
55
57
  - _includes/session/next_prev.html
56
58
  - _includes/session/paginator.html
57
59
  - _includes/session/points.html
60
+ - _includes/session/say.html
58
61
  - _includes/session/videos.html
59
62
  - _includes/session/youtube.html
60
63
  - _layouts/default.html
61
64
  - _layouts/segment.html
62
65
  - _layouts/session.html
63
66
  - _sass/_base.scss
67
+ - _sass/_bubbles.scss
64
68
  - _sass/_bullets.scss
65
69
  - _sass/_grid.scss
66
70
  - _sass/_paginator.scss
@@ -70,6 +74,7 @@ files:
70
74
  - _sass/_table.scss
71
75
  - _sass/_video.scss
72
76
  - _sass/init.scss
77
+ - assets/css/dialog.scss
73
78
  - assets/css/segment.scss
74
79
  - assets/css/session.scss
75
80
  - assets/favicon.ico