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 +4 -4
- data/_config.yml +1 -0
- data/_includes/header.html +5 -1
- data/_includes/session/bubble.html +37 -0
- data/_includes/session/conversation.html +11 -0
- data/_includes/session/say.html +2 -0
- data/_layouts/session.html +17 -13
- data/_sass/_base.scss +2 -1
- data/_sass/_bubbles.scss +311 -0
- data/_sass/_post.scss +6 -2
- data/_sass/init.scss +3 -2
- data/assets/css/dialog.scss +8 -0
- metadata +7 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 572cc8521c872f728eebe711bf104817e9fd05472a4c76b8447a7ef1f58a1366
|
4
|
+
data.tar.gz: b7c3efd4ec9d25fc27ac7de2ad5bda85ccc124d0b3959d57d9aa3776fb5395b3
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 4f2e13cbd7d2d92f1a92c96d08dd751068b28f8a489fdfc1412d94e2b580afb0680edc4b362c49222b03f711a0bf38f02b3982675b4006f544ba703c1b625ab4
|
7
|
+
data.tar.gz: c209af4d70a2c1b2a0593161c7de8e72196cb33b9a6ceaa398c6cf0161a599e405dc9db4005bad4d68e75435dda7084ec4d1bd535da88dffc590383b693a4548
|
data/_config.yml
CHANGED
data/_includes/header.html
CHANGED
@@ -2,7 +2,11 @@
|
|
2
2
|
{%- include head/meta.html -%}
|
3
3
|
{%- include head/common.html -%}
|
4
4
|
{%- if page.collection == 'session' -%}
|
5
|
-
|
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>
|
data/_layouts/session.html
CHANGED
@@ -1,6 +1,9 @@
|
|
1
|
-
{
|
2
|
-
{
|
3
|
-
{
|
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
|
-
{
|
15
|
-
|
16
|
-
{
|
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
|
-
{
|
24
|
-
{
|
25
|
-
{
|
26
|
-
{
|
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-
|
6
|
+
--font-tertiary: #{$font-tertiary};
|
6
7
|
|
7
8
|
--color-bg: #{$color-bg};
|
8
9
|
--color-fg: #{$color-fg};
|
data/_sass/_bubbles.scss
ADDED
@@ -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
|
-
|
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;
|
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.
|
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-
|
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
|