askclass-course-theme 0.18.1 → 0.19.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 +4 -4
- data/_includes/logo_static.html +30 -10
- data/_includes/session/bubble.html +0 -1
- data/_includes/session/hilight_word.html +1 -1
- data/_layouts/session.html +2 -2
- data/_sass/_article.scss +1 -0
- data/_sass/_base.scss +1 -30
- data/_sass/_bubbles.scss +150 -278
- data/_sass/_default.scss +1 -0
- data/_sass/_logo-static.scss +64 -0
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2e69a9029ea42ae9c2fa1bea7999deb33731bf822a9475cca30cbe12a0d3155a
|
|
4
|
+
data.tar.gz: 502d5deeaffce70ddc978fb7f8a591ca2cf0fbc76349d3a6829046317a2eb802
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ddd83fdd9462303e9ecf8431ad73f76e5480e045997d651e7c0c7ac4bc7cbb1a707d8912806cacc5746007308682148da075a632c65edf33cfe86369177577df
|
|
7
|
+
data.tar.gz: a214137c17296e78f2d4f767e18455934be67f9cf19b9833695675ea31b284a275a9f1d452e2faa9cfda8bf16540891fe97e9ec9f4a4de40e06e84e97e937110
|
data/_includes/logo_static.html
CHANGED
|
@@ -1,15 +1,34 @@
|
|
|
1
|
-
<
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
<div class="logo-static">
|
|
2
|
+
<div class="progress-wrapper">
|
|
3
|
+
<!-- SVG ring – sized to match the img -->
|
|
4
|
+
<svg class="progress-ring" viewBox="0 0 100 100" aria-hidden="true">
|
|
5
|
+
<circle class="progress-ring__bar" cx="50" cy="50" r="48"/>
|
|
6
|
+
</svg>
|
|
7
|
+
<a href="/">
|
|
8
|
+
<img src="/assets/{{ include.image | default: site.acc.logo.image }}"
|
|
9
|
+
title="{{ site.title }}" />
|
|
10
|
+
</a>
|
|
11
|
+
</div>
|
|
12
|
+
<a class="logo-name" href="/segment/{{ session_data.segment }}">{{ site.acc.short_name }}</a>
|
|
13
|
+
</div>
|
|
10
14
|
|
|
11
15
|
<script defer>
|
|
12
|
-
const e = document.querySelector('
|
|
16
|
+
const e = document.querySelector('div.logo-static');
|
|
17
|
+
const bar = document.querySelector('.progress-ring__bar');
|
|
18
|
+
|
|
19
|
+
const circumference = 2 * Math.PI * 48; // ≈ 301.59 – matches r="48"
|
|
20
|
+
bar.style.strokeDasharray = circumference;
|
|
21
|
+
|
|
22
|
+
function updateProgress() {
|
|
23
|
+
const scrollTop = window.scrollY;
|
|
24
|
+
const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
|
|
25
|
+
let percent = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
|
|
26
|
+
percent = Math.min(100, Math.max(0, percent));
|
|
27
|
+
|
|
28
|
+
const offset = circumference * (1 - percent / 100);
|
|
29
|
+
bar.style.strokeDashoffset = offset;
|
|
30
|
+
}
|
|
31
|
+
|
|
13
32
|
window.onscroll = () => {
|
|
14
33
|
const top = window.pageYOffset;
|
|
15
34
|
if (window.innerHeight + top >= document.body.offsetHeight - 2) {
|
|
@@ -20,5 +39,6 @@
|
|
|
20
39
|
} else {
|
|
21
40
|
e.classList.remove('fixed');
|
|
22
41
|
}
|
|
42
|
+
updateProgress();
|
|
23
43
|
}
|
|
24
44
|
</script>
|
data/_layouts/session.html
CHANGED
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
<html lang="en">
|
|
13
13
|
{% include header.html %}
|
|
14
14
|
<body>
|
|
15
|
-
{
|
|
16
|
-
{
|
|
15
|
+
{%- include logo_static.html %}
|
|
16
|
+
{%- include session/header.html %}
|
|
17
17
|
|
|
18
18
|
<section class="center-align spacer content">
|
|
19
19
|
<article class="{{ constraint }}">
|
data/_sass/_article.scss
CHANGED
data/_sass/_base.scss
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
:root {
|
|
4
4
|
--icon-logo: #{$icon-logo};
|
|
5
|
+
--icon-logo-size: #{$icon-logo-size};
|
|
5
6
|
--icon-name: #{$icon-name};
|
|
6
7
|
|
|
7
8
|
--font-special: #{$font-special};
|
|
@@ -160,36 +161,6 @@ sub {
|
|
|
160
161
|
margin-top: 100px;
|
|
161
162
|
}
|
|
162
163
|
|
|
163
|
-
.course-id {
|
|
164
|
-
@include align-middle();
|
|
165
|
-
font-family: var(--font-special);
|
|
166
|
-
flex-direction: column;
|
|
167
|
-
z-index: 100;
|
|
168
|
-
a {
|
|
169
|
-
color: var(--color-theme);
|
|
170
|
-
display: flex;
|
|
171
|
-
margin: 0 5px;
|
|
172
|
-
}
|
|
173
|
-
& a:nth-child(2) {
|
|
174
|
-
margin: 3px 0;
|
|
175
|
-
}
|
|
176
|
-
&.fixed {
|
|
177
|
-
flex-direction: row-reverse;
|
|
178
|
-
position: fixed;
|
|
179
|
-
right: 5px;
|
|
180
|
-
top: 5px;
|
|
181
|
-
opacity: 0.8;
|
|
182
|
-
img {
|
|
183
|
-
transform: scale(0.6);
|
|
184
|
-
}
|
|
185
|
-
&.bottom {
|
|
186
|
-
opacity: 1;
|
|
187
|
-
bottom: 70px;
|
|
188
|
-
top: unset;
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
|
|
193
164
|
footer {
|
|
194
165
|
@include margin-top();
|
|
195
166
|
@include align-center();
|
data/_sass/_bubbles.scss
CHANGED
|
@@ -1,286 +1,156 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
--color1h: #ebebbb;
|
|
5
|
-
--color2h: #6bd76b;
|
|
6
|
-
--colorFade: rgba(0,0,0,0.6);
|
|
7
|
-
--color1f: #666658;
|
|
8
|
-
--color2f: #395f39;
|
|
9
|
-
}
|
|
1
|
+
// _sass/_bubbles.scss
|
|
2
|
+
// Speech / chat bubbles with directional triangles
|
|
3
|
+
// Full expansion & refactoring for better SCSS usage
|
|
10
4
|
|
|
11
|
-
.
|
|
12
|
-
|
|
5
|
+
// ── 1. Theme colors (override in _base.scss or site variables if needed) ──
|
|
6
|
+
$color1: lightyellow; // left bubble bg
|
|
7
|
+
$color1h: #ebebbb; // left hover/active
|
|
8
|
+
$color1f: #666658; // left underline/accent
|
|
9
|
+
|
|
10
|
+
$color2: lightgreen; // right bubble bg
|
|
11
|
+
$color2h: #6bd76b; // right hover/active
|
|
12
|
+
$color2f: #395f39; // right underline/accent
|
|
13
|
+
|
|
14
|
+
$color-fade: rgba(0,0,0,0.6); // border shadow
|
|
15
|
+
|
|
16
|
+
// Keep CSS vars for potential JS interop or legacy
|
|
17
|
+
:root {
|
|
18
|
+
--color1: #{$color1};
|
|
19
|
+
--color1h: #{$color1h};
|
|
20
|
+
--color1f: #{$color1f};
|
|
21
|
+
--color2: #{$color2};
|
|
22
|
+
--color2h: #{$color2h};
|
|
23
|
+
--color2f: #{$color2f};
|
|
24
|
+
--colorFade: #{$color-fade};
|
|
13
25
|
}
|
|
14
|
-
|
|
15
|
-
|
|
26
|
+
|
|
27
|
+
// ── 2. Reusable triangle mixin ───────────────────────────────────────────────
|
|
28
|
+
@mixin triangle(
|
|
29
|
+
$dir: left-in,
|
|
30
|
+
$outer-size: 32px,
|
|
31
|
+
$inner-size: 22px,
|
|
32
|
+
$outer-color: $color1f,
|
|
33
|
+
$inner-color: $color1
|
|
34
|
+
) {
|
|
35
|
+
&:before,
|
|
36
|
+
&:after {
|
|
37
|
+
content: ' ';
|
|
38
|
+
position: absolute;
|
|
39
|
+
width: 0;
|
|
40
|
+
height: 0;
|
|
41
|
+
pointer-events: none;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&:before {
|
|
45
|
+
border: $outer-size solid;
|
|
46
|
+
border-color: $outer-color;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&:after {
|
|
50
|
+
border: $inner-size solid;
|
|
51
|
+
border-color: $inner-color;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@if $dir == 'left-in' {
|
|
55
|
+
&:before {
|
|
56
|
+
left: -40px; top: 12px;
|
|
57
|
+
border-color: $outer-color $outer-color transparent transparent;
|
|
58
|
+
}
|
|
59
|
+
&:after {
|
|
60
|
+
left: -20px; top: 20px;
|
|
61
|
+
border-color: $inner-color $inner-color transparent transparent;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@else if $dir == 'right-in' {
|
|
66
|
+
&:before {
|
|
67
|
+
right: -40px; top: 12px;
|
|
68
|
+
border-color: $outer-color transparent transparent $outer-color;
|
|
69
|
+
}
|
|
70
|
+
&:after {
|
|
71
|
+
right: -20px; top: 20px;
|
|
72
|
+
border-color: $inner-color transparent transparent $inner-color;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
16
75
|
}
|
|
17
|
-
|
|
18
|
-
|
|
76
|
+
|
|
77
|
+
// ── 3. Container ──────────────────────────────────────────────────────────────
|
|
78
|
+
.bubble-container {
|
|
79
|
+
display: flex;
|
|
80
|
+
|
|
81
|
+
&.left { justify-content: flex-start; }
|
|
82
|
+
&.right { justify-content: flex-end; }
|
|
19
83
|
}
|
|
20
84
|
|
|
21
|
-
|
|
85
|
+
// ── 4. Bubble base ────────────────────────────────────────────────────────────
|
|
22
86
|
.talk-bubble {
|
|
23
|
-
margin:
|
|
24
|
-
display:
|
|
25
|
-
position:
|
|
26
|
-
height:
|
|
27
|
-
color:
|
|
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
|
-
}
|
|
87
|
+
margin: 10px 35px;
|
|
88
|
+
display: inline-block;
|
|
89
|
+
position: relative;
|
|
90
|
+
height: auto;
|
|
91
|
+
color: #222;
|
|
53
92
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
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
|
-
}
|
|
93
|
+
&.left {
|
|
94
|
+
margin-right: 60px;
|
|
95
|
+
background-color: $color1;
|
|
79
96
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
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
|
-
}
|
|
97
|
+
a {
|
|
98
|
+
color: inherit;
|
|
99
|
+
background-color: $color1h;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
116
102
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
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
|
-
}
|
|
103
|
+
&.right {
|
|
104
|
+
margin-left: 60px;
|
|
105
|
+
background-color: $color2;
|
|
142
106
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
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);
|
|
107
|
+
a {
|
|
108
|
+
color: inherit;
|
|
109
|
+
background-color: $color2h;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
167
112
|
}
|
|
168
113
|
|
|
169
|
-
|
|
170
|
-
.
|
|
171
|
-
|
|
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;
|
|
114
|
+
// ── 5. Modifiers ──────────────────────────────────────────────────────────────
|
|
115
|
+
.border {
|
|
116
|
+
border: 8px solid $color-fade;
|
|
213
117
|
}
|
|
214
118
|
|
|
215
|
-
|
|
216
|
-
|
|
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);
|
|
119
|
+
.round {
|
|
120
|
+
border-radius: 30px;
|
|
250
121
|
}
|
|
251
122
|
|
|
252
|
-
|
|
253
|
-
.tri-right
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
right: -20px;
|
|
272
|
-
top: 0px;
|
|
273
|
-
bottom: auto;
|
|
274
|
-
border: 20px solid;
|
|
275
|
-
border-color: var(--color1) transparent transparent transparent;
|
|
123
|
+
// ── 6. Triangles (using mixin) ────────────────────────────────────────────────
|
|
124
|
+
.tri-right {
|
|
125
|
+
// left-in (slightly down)
|
|
126
|
+
&.left-in {
|
|
127
|
+
@include triangle(left-in, 20px, 12px, $color1f, $color1);
|
|
128
|
+
|
|
129
|
+
&.border {
|
|
130
|
+
@include triangle(left-in, 20px, 12px, $color1f, $color1);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
// right-in (slightly down)
|
|
135
|
+
&.right-in {
|
|
136
|
+
@include triangle(right-in, 20px, 12px, $color2f, $color2);
|
|
137
|
+
|
|
138
|
+
&.border {
|
|
139
|
+
@include triangle(right-in, 20px, 12px, $color2f, $color2);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
276
142
|
}
|
|
277
143
|
|
|
278
|
-
.
|
|
144
|
+
// ── 7. Text content ───────────────────────────────────────────────────────────
|
|
145
|
+
.talktext {
|
|
279
146
|
padding: 1em;
|
|
280
147
|
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
148
|
font-family: var(--font-tertiary);
|
|
149
|
+
|
|
150
|
+
// Responsive font sizing with clamp (modern replacement for calc)
|
|
151
|
+
font-size: clamp(20px, 1.25rem + 0.5vw, 30px);
|
|
152
|
+
line-height: clamp(30px, 1.8rem + 0.8vw, 42px);
|
|
153
|
+
|
|
284
154
|
.index {
|
|
285
155
|
position: absolute;
|
|
286
156
|
top: -14px;
|
|
@@ -289,24 +159,26 @@ html {
|
|
|
289
159
|
font-size: 20px;
|
|
290
160
|
line-height: 29px;
|
|
291
161
|
white-space: nowrap;
|
|
162
|
+
background-color: transparent;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.left & .index {
|
|
166
|
+
color: $color1;
|
|
167
|
+
left: -37px;
|
|
168
|
+
justify-content: flex-end;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.right & .index {
|
|
172
|
+
color: $color2;
|
|
173
|
+
right: -37px;
|
|
174
|
+
justify-content: flex-start; // fixed typo from original
|
|
292
175
|
}
|
|
293
176
|
}
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
left: -37px;
|
|
297
|
-
justify-content: flex-end;
|
|
298
|
-
}
|
|
299
|
-
.right .talktext .index {
|
|
300
|
-
color: var(--color2);
|
|
301
|
-
right: -37px;
|
|
302
|
-
justify-content: flex-begin;
|
|
303
|
-
}
|
|
177
|
+
|
|
178
|
+
// ── 8. Underlines ─────────────────────────────────────────────────────────────
|
|
304
179
|
u {
|
|
305
180
|
text-decoration-thickness: from-font;
|
|
306
181
|
}
|
|
307
|
-
|
|
308
|
-
text-decoration-color:
|
|
309
|
-
}
|
|
310
|
-
.right u {
|
|
311
|
-
text-decoration-color: var(--color2f);
|
|
312
|
-
}
|
|
182
|
+
|
|
183
|
+
.left u { text-decoration-color: $color1f; }
|
|
184
|
+
.right u { text-decoration-color: $color2f; }
|
data/_sass/_default.scss
CHANGED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
@use "base" as *;
|
|
2
|
+
|
|
3
|
+
.logo-static {
|
|
4
|
+
@include align-middle();
|
|
5
|
+
font-family: var(--font-special);
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
z-index: 2;
|
|
8
|
+
a {
|
|
9
|
+
color: var(--color-theme);
|
|
10
|
+
display: inline-block;
|
|
11
|
+
&.logo-name {
|
|
12
|
+
margin: 3px 0;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
img {
|
|
16
|
+
width: var(--icon-logo-size);
|
|
17
|
+
height: var(--icon-logo-size);
|
|
18
|
+
}
|
|
19
|
+
.progress-wrapper {
|
|
20
|
+
position: relative;
|
|
21
|
+
display: inline-block;
|
|
22
|
+
line-height: 0;
|
|
23
|
+
width: var(--icon-logo-size);
|
|
24
|
+
height: var(--icon-logo-size);
|
|
25
|
+
.progress-ring {
|
|
26
|
+
position: absolute;
|
|
27
|
+
inset: 0;
|
|
28
|
+
width: 100%;
|
|
29
|
+
height: 100%;
|
|
30
|
+
transform: rotate(-90deg);
|
|
31
|
+
pointer-events: none; // clicks pass through to <a><img>
|
|
32
|
+
|
|
33
|
+
.progress-ring__bar {
|
|
34
|
+
fill: none;
|
|
35
|
+
stroke-linecap: round;
|
|
36
|
+
stroke-width: 5; // thinner = cleaner look
|
|
37
|
+
stroke: var(--color-theme);
|
|
38
|
+
stroke-dasharray: 301.6; // ≈ 2 * π * 48
|
|
39
|
+
stroke-dashoffset: 301.6;
|
|
40
|
+
transition: stroke-dashoffset 0.18s ease;
|
|
41
|
+
stroke-dashoffset: 301.6; // r=48 → circumference ≈301.59
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
&.fixed {
|
|
46
|
+
flex-direction: row-reverse;
|
|
47
|
+
position: fixed;
|
|
48
|
+
right: 5px;
|
|
49
|
+
top: 5px;
|
|
50
|
+
opacity: 0.8;
|
|
51
|
+
img {
|
|
52
|
+
transform: scale(0.6);
|
|
53
|
+
}
|
|
54
|
+
.progress-ring {
|
|
55
|
+
transform: rotate(-90deg) scale(0.7);
|
|
56
|
+
}
|
|
57
|
+
&.bottom {
|
|
58
|
+
opacity: 1;
|
|
59
|
+
bottom: 70px;
|
|
60
|
+
top: unset;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
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.19.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- AskClass
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2026-
|
|
11
|
+
date: 2026-02-02 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -74,6 +74,7 @@ files:
|
|
|
74
74
|
- _sass/_default.scss
|
|
75
75
|
- _sass/_essential-audio.scss
|
|
76
76
|
- _sass/_grid.scss
|
|
77
|
+
- _sass/_logo-static.scss
|
|
77
78
|
- _sass/_paginator.scss
|
|
78
79
|
- _sass/_post.scss
|
|
79
80
|
- _sass/_tab-colors.scss
|