askclass-course-theme 0.14.0 → 0.15.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: c5a405d3e32ad41d27e9cc2b39ace30ab3e087da67ed6236217e4d2f72439eaf
4
- data.tar.gz: a0bc59753d2671743381692c2ec7e7b75194508706ad340ad28e7a3d2bfced16
3
+ metadata.gz: 2c97dd0d0d5e532f5721a54b8a0d003ebfc599c5dd275748d501c863adad803c
4
+ data.tar.gz: 52fc1f6663759fda22c98fa464af849e4989d3f24fc2c2b7ba594805d3f0a3dc
5
5
  SHA512:
6
- metadata.gz: 6803c4b2926dffa390bb4622e01040be2f948c685260833015ec0f8a6a15ba7c182b71e6bb83a38f4ec8fa1752fc40a04f319467caab5a2bf89b0725e5cbacf1
7
- data.tar.gz: 0d1c286dfcd43a6995ecb6d1ce0b545d4e2ef43eb79de3d8c6d0fd52057cda81af97cfeb5181899176da42024a054a79164e8b9fc2e24f2c3abdef4babfd96e1
6
+ metadata.gz: 0f7bfdc4e447483a223f7892003e193644ef3e2a2485dfc891b49fe0c0780682507c729a92103073016dd4791cd4c1a6f7fbafa7995cd70b54e3150a87469efc
7
+ data.tar.gz: 1312dd01ae62c1bcd4ae41ad5d15a95a6f97e329fe71e5bdeec647788f6ace425bf8e1da046605cb0032fe2207b804c869c14911ca51ae547130378776bb8126
data/_config.yml CHANGED
@@ -61,6 +61,7 @@ acc:
61
61
  - Share+Tech+Mono
62
62
  - Lexend
63
63
  - Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
64
+ icon_class: material-symbols-outlined
64
65
 
65
66
  collections_dir: content
66
67
  collections:
@@ -1,17 +1,22 @@
1
1
  {%- assign course = site.data.course -%}
2
+
2
3
  <ul class="grid">
3
4
  {%- for segment in course.segments -%}
4
5
  {%- assign info = site.data.syllabus[segment] -%}
5
6
  {%- if info -%}
6
7
  <li class="card-tab {{ info.theme }}">
7
8
  <div class="top-bar">{{ info.segment[0] }}</div>
9
+ {%- if info.segment[2] -%}
10
+ <div class="tab icon {{ symbols }}">{{ info.segment[2] }}</div>
11
+ {%- else -%}
8
12
  <div class="tab">{{ info.segment[1] }}</div>
13
+ {%- endif -%}
9
14
  <div class="header">
10
15
  <a href="/segment/{{ segment }}">
11
16
  {%- include date_range.html info=info -%}
12
17
  </a>
13
18
  </div>
14
- <div class="body">
19
+ <div class="body limit-height">
15
20
  {%- if info.desc -%}
16
21
  <h4>{{ info.desc }}</h4>
17
22
  {%- endif -%}
@@ -22,20 +27,20 @@
22
27
  {%- assign session = site.data.sessions[item] -%}
23
28
  <div class="item">
24
29
  <div class="middle-align">
25
- <span class="material-symbols-outlined">{{ session.icon }}</span>
30
+ <span class="{{ symbols }}">{{ session.icon }}</span>
26
31
  {%- if session.url -%}
27
32
  <a href="/session/{{ session.url }}" title="{{ session.title }}">
28
33
  <h3>{{ session.header }}</h3>
29
34
  </a>
30
35
  {%- else -%}
31
- <h3>{{ session.header }}</h3>
36
+ <h3>{{ session.header }}</h3>
32
37
  {%- endif -%}
33
38
  </div>
34
39
  {%- if session.due -%}
35
40
  <small class="due"
36
41
  data-date="{{ session.due }}"
37
42
  title="Due {{ session.due | date: site.acc.date_format }}">
38
- <span class="material-symbols-outlined">alarm_on</span>
43
+ <span class="icon {{ symbols }}">alarm_on</span>
39
44
  {{ session.due | date: '%b %e' }}
40
45
  </small>
41
46
  {%- endif -%}
@@ -52,7 +57,7 @@
52
57
  <a class="button" href="/segment/{{ segment }}">
53
58
  {{ info.title }}&nbsp;
54
59
  <span data-date="{{ info.end }}"
55
- class="middle-align material-symbols-outlined rocket">rocket_launch</span>
60
+ class="middle-align rocket {{ symbols }}">rocket_launch</span>
56
61
  </a>
57
62
  </div>
58
63
  </li>
@@ -78,4 +83,14 @@
78
83
  ymd2ms(el.dataset.date) < Date.now() &&
79
84
  (el.innerText = 'rocket')
80
85
  );
86
+
87
+ document.querySelectorAll('.limit-height').forEach(el => {
88
+ const check = () => {
89
+ const atBottom = el.scrollHeight - el.scrollTop <= el.clientHeight + 2;
90
+ el.classList.toggle('has-more', !atBottom);
91
+ };
92
+ check(); // run once on load
93
+ el.addEventListener('scroll', check);
94
+ new ResizeObserver(check).observe(el);
95
+ });
81
96
  </script>
@@ -4,7 +4,7 @@
4
4
  {% for item in site.acc.footer -%}
5
5
  <li>
6
6
  {%- if item.icon -%}
7
- <span class="material-symbols-outlined">{{ item.icon }}</span>
7
+ <span class="{{ symbols }}">{{ item.icon }}</span>
8
8
  {%- endif -%}
9
9
  <a href="{{ item.href }}">{{ item.text }}</a>
10
10
  </li>
@@ -2,6 +2,7 @@
2
2
  {%- assign desc = page.description | default: site.description | strip_html | strip_newlines %}
3
3
  {%- assign families = acc.font_families | join: "&family=" %}
4
4
  {%- assign og_image = acc.meta.og_image | prepend: '/assets/' %}
5
+ {%- assign symbols = acc.icon_class | default: 'material-symbols-outlined' -%}
5
6
 
6
7
  <meta charset="utf-8" />
7
8
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
@@ -4,7 +4,6 @@
4
4
  {%- for item in info.items -%}
5
5
  {%- assign session = site.data.sessions[item] -%}
6
6
  <li class="card-tab {{ info.theme }}">
7
-
8
7
  {%- if session.type -%}
9
8
  <div class="top-bar">{{ session.type }}</div>
10
9
  {%- elsif session.sequence -%}
@@ -16,12 +15,12 @@
16
15
  {%- if session.sequence -%}
17
16
  <div class="tab">{{ session.sequence }}</div>
18
17
  {%- elsif session.icon -%}
19
- <div class="tab material-symbols-outlined">{{ session.icon }}</div>
18
+ <div class="tab icon {{ symbols }}">{{ session.icon }}</div>
20
19
  {%- endif -%}
21
20
 
22
21
  {%- if session.due -%}
23
22
  <div class="header">
24
- <span data-date="{{ session.due }}" class="material-symbols-outlined alarm">alarm_on</span>
23
+ <span data-date="{{ session.due }}" class="{{ symbols }} alarm">alarm_on</span>
25
24
  {{ session.due | date: '%b %e, %y' }}
26
25
  </div>
27
26
  {%- elsif session.type -%}
@@ -17,25 +17,25 @@
17
17
  {% if include.icon %}
18
18
  {{ site.data.syllabus[prev].title }}
19
19
  {% endif %}
20
- <a href="/segment/{{ prev }}" class="material-symbols-outlined md-48">navigate_before</a>
20
+ <a href="/segment/{{ prev }}" class="{{ symbols }} md-48">navigate_before</a>
21
21
  {% else %}
22
22
  &nbsp;
23
- <span class="material-symbols-outlined md-48 md-disabled">navigate_before</span>
23
+ <span class="{{ symbols }} md-48 md-disabled">navigate_before</span>
24
24
  {% endif %}
25
25
 
26
26
  {% if include.icon %}
27
- <a href="/segment/{{ include.segment }}" class="material-symbols-outlined">calendar_today</a>
27
+ <a href="/segment/{{ include.segment }}" class="{{ symbols }}">calendar_today</a>
28
28
  {% else %}
29
29
  <a href="/segment/{{ include.segment }}"><h3>{{ site.data.syllabus[include.segment].title }}</h3></a>
30
30
  {% endif %}
31
31
 
32
32
  {% if next %}
33
- <a href="/segment/{{ next }}" class="material-symbols-outlined md-48">navigate_next</a>
33
+ <a href="/segment/{{ next }}" class="{{ symbols }} md-48">navigate_next</a>
34
34
  {% if include.icon %}
35
35
  {{ site.data.syllabus[next].title }}
36
36
  {% endif %}
37
37
  {% else %}
38
- <span class="material-symbols-outlined md-48 md-disabled">navigate_next</span>
38
+ <span class="{{ symbols }} md-48 md-disabled">navigate_next</span>
39
39
  {% endif %}
40
40
  </div>
41
41
  </section>
@@ -15,13 +15,13 @@
15
15
  {%- include date_range.html info=segment_data -%}
16
16
  </div>
17
17
 
18
- <div class="middle-align">
18
+ <div class="middle-align lesson-group">
19
19
  {%- for item in segment_data.items -%}
20
20
  {%- assign _info = site.data.sessions[item] -%}
21
21
  {%- if _info.sequence -%}
22
22
  {%- assign _mso = '' -%}
23
23
  {%- else -%}
24
- {%- assign _mso = 'material-symbols-outlined' -%}
24
+ {%- assign _mso = symbols | append: " icon" -%}
25
25
  {%- endif -%}
26
26
 
27
27
  {%- if item == session_id -%}
@@ -14,7 +14,7 @@
14
14
  {%- if _p %}
15
15
  <div class="{{ align }}">
16
16
  <span>{{ indicator }}</span>
17
- <span class="material-symbols-outlined">navigate_{{ arrow }}</span>
17
+ <span class="{{ symbols }}">navigate_{{ arrow }}</span>
18
18
  </div>
19
19
  <a href="/session/{{ _p.url }}">
20
20
  {%- if _p.header -%}
data/_sass/_base.scss CHANGED
@@ -1,35 +1,39 @@
1
+ @use "default";
2
+
1
3
  :root {
2
- --icon-logo: #{$icon-logo};
3
-
4
- --font-special: #{$font-special};
5
- --font-mono: #{$font-mono};
6
- --font-main: #{$font-main};
7
- --font-secondary: #{$font-secondary};
8
- --font-tertiary: #{$font-tertiary};
9
- --font-samp: #{$font-samp};
10
-
11
- --color-bg: #{$color-bg};
12
- --color-fg: #{$color-fg};
13
- --color-primary: #{$color-primary};
14
- --color-secondary: #{$color-secondary};
15
- --color-tertiary: #{$color-tertiary};
16
- --color-link: #{$color-link};
17
- --color-dark: #{$color-dark};
18
- --color-theme: #{$color-theme};
19
- --color-bullet: #{$color-bullet};
20
- --color-row-odd: #{$color-row-odd};
21
- --color-row-even: #{$color-row-even};
22
-
23
- --color-card-fg: #{$color-card-fg};
24
- --color-card-bg: #{$color-card-bg};
25
- --color-code-bg: #{$color-code-bg};
26
-
27
- --content-width: #{$content-width};
28
-
29
- --grid-width: #{$grid-width};
30
- --grid-image-height: #{$grid-image-height};
31
- --card-font-size: #{$card-font-size};
32
- --samp-font-size: #{$samp-font-size};
4
+ --icon-logo: #{default.$icon-logo};
5
+ --icon-name: #{default.$icon-name};
6
+
7
+ --font-special: #{default.$font-special};
8
+ --font-mono: #{default.$font-mono};
9
+ --font-main: #{default.$font-main};
10
+ --font-secondary: #{default.$font-secondary};
11
+ --font-tertiary: #{default.$font-tertiary};
12
+ --font-samp: #{default.$font-samp};
13
+
14
+ --color-bg: #{default.$color-bg};
15
+ --color-fg: #{default.$color-fg};
16
+ --color-primary: #{default.$color-primary};
17
+ --color-secondary: #{default.$color-secondary};
18
+ --color-tertiary: #{default.$color-tertiary};
19
+ --color-link: #{default.$color-link};
20
+ --color-dark: #{default.$color-dark};
21
+ --color-theme: #{default.$color-theme};
22
+ --color-bullet: #{default.$color-bullet};
23
+ --color-row-odd: #{default.$color-row-odd};
24
+ --color-row-even: #{default.$color-row-even};
25
+
26
+ --color-card-fg: #{default.$color-card-fg};
27
+ --color-card-bg: #{default.$color-card-bg};
28
+ --color-code-bg: #{default.$color-code-bg};
29
+
30
+ --content-width: #{default.$content-width};
31
+
32
+ --grid-width: #{default.$grid-width};
33
+ --grid-image-height: #{default.$grid-image-height};
34
+ --grid-body-height: #{default.$grid-body-height};
35
+ --card-font-size: #{default.$card-font-size};
36
+ --samp-font-size: #{default.$samp-font-size};
33
37
  }
34
38
 
35
39
  body {
data/_sass/_default.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  $icon-logo: url('/assets/logo-icon.svg');
2
+ $icon-name: 'Material Symbols Outlined';
2
3
 
3
4
  $font-main: 'Open Sans', sans-serif;
4
5
  $font-mono: 'Share Tech Mono', monospace;
@@ -31,3 +32,4 @@ $content-width: 600px;
31
32
 
32
33
  $grid-width: 180px;
33
34
  $grid-image-height: 180px;
35
+ $grid-body-height: initial;
data/_sass/_grid.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use "tab" as *;
2
+
1
3
  ul.grid {
2
4
  list-style-type: none;
3
5
  padding-inline-start: unset;
@@ -19,5 +21,3 @@ ul.grid {
19
21
  height: var(--grid-image-height);
20
22
  }
21
23
  }
22
-
23
- @import "tab";
data/_sass/_post.scss CHANGED
@@ -1,3 +1,10 @@
1
+ @use "bullets" as *;
2
+ @use "table" as *;
3
+ @use "tab-colors" as *;
4
+ @use "paginator" as *;
5
+ @use "video" as *;
6
+ @use "essential-audio" as *;
7
+
1
8
  @mixin boxed() {
2
9
  margin-top: 100px;
3
10
  border-radius: 5px;
@@ -179,13 +186,18 @@ samp {
179
186
  }
180
187
  }
181
188
 
189
+ .lesson-group {
190
+ flex-wrap: wrap;
191
+ justify-content: center;
192
+ }
193
+
182
194
  .lesson-number {
183
195
  display: flex;
184
196
  align-items: center;
185
197
  justify-content: center;
186
198
  text-decoration: none;
187
199
  padding: 7px 5px 3px 5px;
188
- margin: 0 5px;
200
+ margin: 5px;
189
201
  background-color: var(--color-fg);
190
202
  font-family: var(--fontText);
191
203
  color: var(--color-bg);
@@ -197,10 +209,10 @@ samp {
197
209
  &.current {
198
210
  background-color: var(--color-secondary);
199
211
  }
200
- &.material-symbols-outlined {
212
+ &.icon {
201
213
  font-size: 25px;
202
214
  padding: 5px;
203
- font-family: 'Material Symbols Outlined';
215
+ font-family: var(--icon-name);
204
216
  }
205
217
  }
206
218
 
@@ -208,11 +220,3 @@ a.lesson-number{
208
220
  color: var(--color-fg);
209
221
  background-color: var(--color-link);
210
222
  }
211
-
212
- @import
213
- "bullets",
214
- "table",
215
- "tab-colors",
216
- "paginator",
217
- "video",
218
- "essential-audio";
data/_sass/_tab.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use "tab-colors" as *;
2
+
1
3
  @mixin special() {
2
4
  color: var(--color-card-bg, 'whitesmoke');
3
5
  font-family: var(--font-special);
@@ -41,8 +43,8 @@
41
43
  display: block;
42
44
  font-size: 12px;
43
45
  }
44
- &.material-symbols-outlined {
45
- font-family: 'Material Symbols Outlined';
46
+ &.icon {
47
+ font-family: var(--icon-name);
46
48
  line-height: 0.7;
47
49
  font-size: 37px;
48
50
  }
@@ -69,6 +71,34 @@
69
71
  padding: 10px;
70
72
  overflow: hidden;
71
73
  text-align: left;
74
+ &.limit-height {
75
+ max-height: var(--grid-body-height);
76
+ position: relative;
77
+ overflow-y: auto;
78
+ padding-bottom: 0;
79
+ box-sizing: border-box;
80
+ &::after {
81
+ content: "";
82
+ position: sticky;
83
+ display: block;
84
+ bottom: 0;
85
+ left: 0;
86
+ right: 0;
87
+ height: 30px;
88
+ opacity: 0;
89
+ padding: 0;
90
+ margin: 0;
91
+ background: linear-gradient(to top,
92
+ rgba(0, 0, 0, 0.12) 0%,
93
+ transparent 100%);
94
+ pointer-events: none; /* clicks pass through */
95
+ transition: opacity 0.4s ease;
96
+ z-index: 1;
97
+ }
98
+ &.has-more::after {
99
+ opacity: 1;
100
+ }
101
+ }
72
102
  h2 {
73
103
  word-break: break-word;
74
104
  margin-top: 10px;
@@ -78,10 +108,14 @@
78
108
  color: inherit;
79
109
  margin: 5px 0;
80
110
  }
81
- .item:not(:first-child) {
82
- border-top: 1px solid;
83
- }
84
111
  .item {
112
+ &:not(:first-child) {
113
+ border-top: 1px solid;
114
+ }
115
+ &:last-child {
116
+ margin-bottom: 0;
117
+ padding-bottom: 0;
118
+ }
85
119
  margin-bottom: 20px;
86
120
  text-align: left;
87
121
  font-size: var(--card-font-size);
@@ -96,7 +130,7 @@
96
130
  border-radius: 5px;
97
131
  margin: 0 3px;
98
132
  padding: 2px 5px;
99
- .material-symbols-outlined {
133
+ .icon {
100
134
  font-size: 1.3em;
101
135
  font-variation-settings: 'FILL' 1;
102
136
  }
@@ -128,7 +162,7 @@
128
162
  padding: 5px 10px;
129
163
  color: white!important;
130
164
  background-color: var(--color-card-fg);
131
- .material-symbols-outlined {
165
+ .rocket {
132
166
  font-variation-settings: 'FILL' 1;
133
167
  }
134
168
  }
@@ -141,4 +175,3 @@
141
175
  }
142
176
  }
143
177
 
144
- @import "tab-colors";
data/_sass/init.scss CHANGED
@@ -4,3 +4,7 @@
4
4
  // Example, to overwrite default bg/fg colors specified in the file above:
5
5
  // $color-bg: black;
6
6
  // $color-fg: white;
7
+
8
+
9
+ // Make grid boxes the same height (scrollable)
10
+ // $grid-body-height: 300px;
@@ -1,3 +1,7 @@
1
1
  ---
2
2
  ---
3
- @import "post", "bubbles", "default", "init", "base";
3
+
4
+ @use "base" as *;
5
+ @use "post" as *;
6
+ @use "bubbles" as *;
7
+ @use "init" as *;
@@ -1,3 +1,5 @@
1
1
  ---
2
2
  ---
3
- @import "grid", "default", "init", "base";
3
+ @use "base" as *;
4
+ @use "grid" as *;
5
+ @use "init" as *;
@@ -1,3 +1,5 @@
1
1
  ---
2
2
  ---
3
- @import "post", "default", "init", "base";
3
+ @use "base" as *;
4
+ @use "post" as *;
5
+ @use "init" as *;
@@ -44,6 +44,12 @@
44
44
  "type": "image/png",
45
45
  "sizes": "300x300"
46
46
  },
47
+ {
48
+ "src": "logo-512.png",
49
+ "type": "image/png",
50
+ "sizes": "312x312",
51
+ "purpose": "any"
52
+ },
47
53
  {
48
54
  "src": "logo-icon.svg",
49
55
  "type": "image/svg+xml",
@@ -53,6 +59,7 @@
53
59
  ],
54
60
  "display_override": [
55
61
  "standalone",
56
- "fullscreen"
62
+ "fullscreen",
63
+ "window-controls-overlay"
57
64
  ]
58
65
  }
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.14.0
4
+ version: 0.15.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - AskClass
8
- autorequire:
8
+ autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-03-13 00:00:00.000000000 Z
11
+ date: 2026-01-14 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -24,7 +24,7 @@ dependencies:
24
24
  - - "~>"
25
25
  - !ruby/object:Gem::Version
26
26
  version: '4.2'
27
- description:
27
+ description:
28
28
  email:
29
29
  - team@askclass.com
30
30
  executables: []
@@ -104,7 +104,7 @@ homepage: https://acc.askclass.com
104
104
  licenses:
105
105
  - MPL-2.0
106
106
  metadata: {}
107
- post_install_message:
107
+ post_install_message:
108
108
  rdoc_options: []
109
109
  require_paths:
110
110
  - lib
@@ -119,8 +119,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
119
119
  - !ruby/object:Gem::Version
120
120
  version: '0'
121
121
  requirements: []
122
- rubygems_version: 3.3.7
123
- signing_key:
122
+ rubygems_version: 3.4.19
123
+ signing_key:
124
124
  specification_version: 4
125
125
  summary: Responsive Jekyll theme for putting analog class syllabus online.
126
126
  test_files: []