askclass-course-theme 0.15.1 → 0.16.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: 497bdd07cc2eed2b19f25fb93da4d0330034872305f43d8259863294b6daa435
4
- data.tar.gz: f6955fd59770f7cef71c5d973ef6f1472b091af492af4944be33c9ce0611e5bb
3
+ metadata.gz: aeb24827eb68d9846e452e7d8642b7af508607378b353153f76c1e965c9bd9aa
4
+ data.tar.gz: be7efd2d97f4d3d3aa1a2f7230d2822a9bcef7425fff8d284f61939c53ac9574
5
5
  SHA512:
6
- metadata.gz: 356fe44a3dbf89049c73997f1352c9b4524367b722eaed4807c99b0ec40b178be280f4d111852ff28ff29ec2994bdadee3521eea752426d00774b3c792af0fad
7
- data.tar.gz: d2b941edc3b172f251a509f595e3ae6728b964892d2181ef0408339c95d06991bfe3eee9c95984dc8cda8bd862e013d121d924a5202714c6f2fa776c1f6482e0
6
+ metadata.gz: 240947bca87191380c4b9088828cb2a065acf8350fc39c52241da2504f0b80fbfb601528e9e969c550d3c7447fc4c369b38e82446799ccb54f62e5be2ba80afb
7
+ data.tar.gz: beeeb192bd5eb9e0925c2d64a55a35674de57910b949a90f3abf61252675054a1fbae62f8a2425f3f281818166147f1384bfd521858a1e2e7e71624bb0e76f86
data/_config.yml CHANGED
@@ -85,6 +85,7 @@ defaults:
85
85
  layout: "segment"
86
86
 
87
87
  sass:
88
+ implementation: sass-embedded
88
89
  style: compact
89
90
  sourcemap: never
90
91
 
@@ -0,0 +1,7 @@
1
+ @use "post" as *;
2
+ @use "bullets" as *;
3
+ @use "table" as *;
4
+ @use "tab-colors" as *;
5
+ @use "paginator" as *;
6
+ @use "video" as *;
7
+ @use "essential-audio" as *;
data/_sass/_base.scss CHANGED
@@ -1,39 +1,40 @@
1
- @use "default";
1
+ @use "init";
2
+ @use "default" as *;
2
3
 
3
4
  :root {
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};
5
+ --icon-logo: #{$icon-logo};
6
+ --icon-name: #{$icon-name};
7
+
8
+ --font-special: #{$font-special};
9
+ --font-mono: #{$font-mono};
10
+ --font-main: #{$font-main};
11
+ --font-secondary: #{$font-secondary};
12
+ --font-tertiary: #{$font-tertiary};
13
+ --font-samp: #{$font-samp};
14
+
15
+ --color-bg: #{$color-bg};
16
+ --color-fg: #{$color-fg};
17
+ --color-primary: #{$color-primary};
18
+ --color-secondary: #{$color-secondary};
19
+ --color-tertiary: #{$color-tertiary};
20
+ --color-link: #{$color-link};
21
+ --color-dark: #{$color-dark};
22
+ --color-theme: #{$color-theme};
23
+ --color-bullet: #{$color-bullet};
24
+ --color-row-odd: #{$color-row-odd};
25
+ --color-row-even: #{$color-row-even};
26
+
27
+ --color-card-fg: #{$color-card-fg};
28
+ --color-card-bg: #{$color-card-bg};
29
+ --color-code-bg: #{$color-code-bg};
30
+
31
+ --content-width: #{$content-width};
32
+
33
+ --grid-width: #{$grid-width};
34
+ --grid-image-height: #{$grid-image-height};
35
+ --grid-body-height: #{$grid-body-height};
36
+ --card-font-size: #{$card-font-size};
37
+ --samp-font-size: #{$samp-font-size};
37
38
  }
38
39
 
39
40
  body {
data/_sass/_default.scss CHANGED
@@ -1,35 +1,35 @@
1
- $icon-logo: url('/assets/logo-icon.svg');
2
- $icon-name: 'Material Symbols Outlined';
1
+ $icon-logo: url('/assets/logo-icon.svg') !default;
2
+ $icon-name: 'Material Symbols Outlined' !default;
3
3
 
4
- $font-main: 'Open Sans', sans-serif;
5
- $font-mono: 'Share Tech Mono', monospace;
6
- $font-special: 'Josefin Sans', sans-serif;
7
- $font-secondary: 'Teko', sans-serif;
8
- $font-tertiary: 'Lexend', sans-serif;
9
- $font-samp: $font-main;
4
+ $font-main: 'Open Sans', sans-serif !default;
5
+ $font-mono: 'Share Tech Mono', monospace !default;
6
+ $font-special: 'Josefin Sans', sans-serif !default;
7
+ $font-secondary: 'Teko', sans-serif !default;
8
+ $font-tertiary: 'Lexend', sans-serif !default;
9
+ $font-samp: $font-main !default;
10
10
 
11
- $color-primary: white;
12
- $color-secondary: floralwhite;
13
- $color-tertiary: #2cdd88;
14
- $color-bg: #3a3a3a;
15
- $color-fg: ivory;
16
- $color-dark: gray;
17
- $color-link: deeppink;
18
- $color-theme: #ffc100;
19
- $color-bullet: gray;
11
+ $color-primary: white !default;
12
+ $color-secondary: floralwhite !default;
13
+ $color-tertiary: #2cdd88 !default;
14
+ $color-bg: #3a3a3a !default;
15
+ $color-fg: ivory !default;
16
+ $color-dark: gray !default;
17
+ $color-link: deeppink !default;
18
+ $color-theme: #ffc100 !default;
19
+ $color-bullet: gray !default;
20
20
 
21
- $color-row-odd: #2a2a2a;
22
- $color-row-even: #2f2f2f;
21
+ $color-row-odd: #2a2a2a !default;
22
+ $color-row-even: #2f2f2f !default;
23
23
 
24
- $color-code-bg: #222;
25
- $color-card-bg: whitesmoke;
26
- $color-card-fg: #444;
24
+ $color-code-bg: #222 !default;
25
+ $color-card-bg: whitesmoke !default;
26
+ $color-card-fg: #444 !default;
27
27
 
28
- $card-font-size: 16px;
29
- $samp-font-size: inherit;
28
+ $card-font-size: 16px !default;
29
+ $samp-font-size: inherit !default;
30
30
 
31
- $content-width: 600px;
31
+ $content-width: 600px !default;
32
32
 
33
- $grid-width: 180px;
34
- $grid-image-height: 180px;
35
- $grid-body-height: initial;
33
+ $grid-width: 180px !default;
34
+ $grid-image-height: 180px !default;
35
+ $grid-body-height: default !default;
data/_sass/_post.scss CHANGED
@@ -1,10 +1,3 @@
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
-
8
1
  @mixin boxed() {
9
2
  margin-top: 100px;
10
3
  border-radius: 5px;
@@ -8,6 +8,16 @@ $color-7: #3C5A14;
8
8
  $color-8: #598B2C;
9
9
  $color-9: #9B2226;
10
10
  $color-10: #B18FCF;
11
+ $color-11: #5F0A87; // Deep Royal Purple
12
+ $color-12: #9D4EDD; // Bright Amethyst
13
+ $color-13: #6F1D1B; // Deep Burnt Umber
14
+ $color-14: #BB3E03; // Rust / Bright Terracotta
15
+ $color-15: #890620; // Wine Red
16
+ $color-16: #D00000; // Classic Crimson
17
+ $color-17: #1B4332; // Deep Forest Green
18
+ $color-18: #74C69D; // Seafoam Mint
19
+ $color-19: #212529; // Rich Charcoal
20
+ $color-20: #495057; // Medium Slate Grey
11
21
 
12
22
  html {
13
23
  --c1: #{$color-1};
@@ -20,6 +30,16 @@ html {
20
30
  --c8: #{$color-8};
21
31
  --c9: #{$color-9};
22
32
  --c10: #{$color-10};
33
+ --c11: #{$color-11};
34
+ --c12: #{$color-12};
35
+ --c13: #{$color-13};
36
+ --c14: #{$color-14};
37
+ --c15: #{$color-15};
38
+ --c16: #{$color-16};
39
+ --c17: #{$color-17};
40
+ --c18: #{$color-18};
41
+ --c19: #{$color-19};
42
+ --c20: #{$color-20};
23
43
  }
24
44
 
25
45
  @mixin paint($color) {
@@ -82,3 +102,33 @@ html {
82
102
  .c10 {
83
103
  @include paint($color-10);
84
104
  }
105
+ .c11 {
106
+ @include paint($color-11);
107
+ }
108
+ .c12 {
109
+ @include paint($color-12);
110
+ }
111
+ .c13 {
112
+ @include paint($color-13);
113
+ }
114
+ .c14 {
115
+ @include paint($color-14);
116
+ }
117
+ .c15 {
118
+ @include paint($color-15);
119
+ }
120
+ .c16 {
121
+ @include paint($color-16);
122
+ }
123
+ .c17 {
124
+ @include paint($color-17);
125
+ }
126
+ .c18 {
127
+ @include paint($color-18);
128
+ }
129
+ .c19 {
130
+ @include paint($color-19);
131
+ }
132
+ .c20 {
133
+ @include paint($color-20);
134
+ }
@@ -0,0 +1,175 @@
1
+ @mixin special() {
2
+ color: var(--color-card-bg, 'whitesmoke');
3
+ font-family: var(--font-special);
4
+ }
5
+
6
+ .card-tab {
7
+ display: flex;
8
+ flex-direction: column;
9
+ position: relative;
10
+ background-image: linear-gradient(225deg, var(--color-card-fg) 50%, transparent 50%);
11
+ background-size: 120px 27px;
12
+ background-repeat: no-repeat;
13
+ background-position: right top;
14
+ border-radius: 2px;
15
+ box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
16
+ border-top-width: 22px;
17
+ border-top-style: solid;
18
+ border-top-color: var(--color-card-fg);
19
+ background-color: var(--color-card-bg);
20
+ color: var(--color-card-fg);
21
+ text-transform: none;
22
+ height: calc(100% - 22px);
23
+ }
24
+
25
+ .top-bar {
26
+ @include special();
27
+ margin: -21px 0 0 5px;
28
+ font-size: 15px;
29
+ text-align: left;
30
+ }
31
+
32
+ .tab {
33
+ @include special();
34
+ position: absolute;
35
+ top: -10px;
36
+ right: 3px;
37
+ font-size: 45px;
38
+ line-height: 30px;
39
+ text-align: right;
40
+ small {
41
+ display: block;
42
+ font-size: 12px;
43
+ }
44
+ &.icon {
45
+ font-family: var(--icon-name);
46
+ line-height: 0.7;
47
+ font-size: 37px;
48
+ }
49
+ }
50
+
51
+ .header {
52
+ margin: 4px 50px 0 5px;
53
+ text-align: left;
54
+ line-height: 1;
55
+ height: 20px;
56
+ font-size: 20px;
57
+ overflow: hidden;
58
+ text-overflow: ellipsis;
59
+ display: flex;
60
+ align-items: flex-end;
61
+ font-family: var(--font-secondary);
62
+ a {
63
+ color: var(--color-bg);
64
+ }
65
+ }
66
+
67
+ .body {
68
+ flex-grow: 2;
69
+ padding: 10px;
70
+ overflow: hidden;
71
+ text-align: left;
72
+ &.limit-height {
73
+ max-height: var(--grid-body-height);
74
+ position: relative;
75
+ overflow-y: auto;
76
+ padding-bottom: 0;
77
+ box-sizing: border-box;
78
+ &::after {
79
+ content: "";
80
+ position: sticky;
81
+ display: block;
82
+ bottom: 0;
83
+ left: 0;
84
+ right: 0;
85
+ height: 30px;
86
+ opacity: 0;
87
+ padding: 0;
88
+ margin: 0;
89
+ background: linear-gradient(to top,
90
+ rgba(0, 0, 0, 0.12) 0%,
91
+ transparent 100%);
92
+ pointer-events: none; /* clicks pass through */
93
+ transition: opacity 0.4s ease;
94
+ z-index: 1;
95
+ }
96
+ &.has-more::after {
97
+ opacity: 1;
98
+ }
99
+ }
100
+ h2 {
101
+ word-break: break-word;
102
+ margin-top: 10px;
103
+ line-height: 2.4rem;
104
+ }
105
+ h4 {
106
+ color: inherit;
107
+ margin: 5px 0;
108
+ }
109
+ .item {
110
+ &:not(:first-child) {
111
+ border-top: 1px solid;
112
+ }
113
+ &:last-child {
114
+ margin-bottom: 0;
115
+ padding-bottom: 0;
116
+ }
117
+ margin-bottom: 20px;
118
+ text-align: left;
119
+ font-size: var(--card-font-size);
120
+ line-height: normal;
121
+ h3 {
122
+ margin: 3px 5px 0 5px;
123
+ color: var(--color-card-fg);
124
+ }
125
+ .due {
126
+ display: inline-flex;
127
+ align-items: center;
128
+ border-radius: 5px;
129
+ margin: 0 3px;
130
+ padding: 2px 5px;
131
+ .icon {
132
+ font-size: 1.3em;
133
+ font-variation-settings: 'FILL' 1;
134
+ }
135
+ &.past {
136
+ background-color: var(--color-dark);
137
+ }
138
+ }
139
+ small {
140
+ margin-left: 5px;
141
+ }
142
+ }
143
+ pre, code {
144
+ color: inherit;
145
+ }
146
+ }
147
+
148
+ .control {
149
+ margin-top: 10px;
150
+ padding: 10px;
151
+ display: flex;
152
+ justify-content: space-between;
153
+ a {
154
+ text-decoration: none;
155
+ font-size: var(--card-font-size);
156
+ display: contents;
157
+ &.button {
158
+ display: flex;
159
+ border-radius: 5px;
160
+ padding: 5px 10px;
161
+ color: white!important;
162
+ background-color: var(--color-card-fg);
163
+ .rocket {
164
+ font-variation-settings: 'FILL' 1;
165
+ }
166
+ }
167
+ }
168
+ .tags {
169
+ font-family: var(--font-secondary);
170
+ white-space: nowrap;
171
+ text-overflow: ellipsis;
172
+ overflow: hidden;
173
+ }
174
+ }
175
+
data/_sass/_tab.scss CHANGED
@@ -1,177 +1,2 @@
1
+ @use "tab-main" as *;
1
2
  @use "tab-colors" as *;
2
-
3
- @mixin special() {
4
- color: var(--color-card-bg, 'whitesmoke');
5
- font-family: var(--font-special);
6
- }
7
-
8
- .card-tab {
9
- display: flex;
10
- flex-direction: column;
11
- position: relative;
12
- background-image: linear-gradient(225deg, var(--color-card-fg) 50%, transparent 50%);
13
- background-size: 120px 27px;
14
- background-repeat: no-repeat;
15
- background-position: right top;
16
- border-radius: 2px;
17
- box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
18
- border-top-width: 22px;
19
- border-top-style: solid;
20
- border-top-color: var(--color-card-fg);
21
- background-color: var(--color-card-bg);
22
- color: var(--color-card-fg);
23
- text-transform: none;
24
- height: calc(100% - 22px);
25
- }
26
-
27
- .top-bar {
28
- @include special();
29
- margin: -21px 0 0 5px;
30
- font-size: 15px;
31
- text-align: left;
32
- }
33
-
34
- .tab {
35
- @include special();
36
- position: absolute;
37
- top: -10px;
38
- right: 3px;
39
- font-size: 45px;
40
- line-height: 30px;
41
- text-align: right;
42
- small {
43
- display: block;
44
- font-size: 12px;
45
- }
46
- &.icon {
47
- font-family: var(--icon-name);
48
- line-height: 0.7;
49
- font-size: 37px;
50
- }
51
- }
52
-
53
- .header {
54
- margin: 4px 50px 0 5px;
55
- text-align: left;
56
- line-height: 1;
57
- height: 20px;
58
- font-size: 20px;
59
- overflow: hidden;
60
- text-overflow: ellipsis;
61
- display: flex;
62
- align-items: flex-end;
63
- font-family: var(--font-secondary);
64
- a {
65
- color: var(--color-bg);
66
- }
67
- }
68
-
69
- .body {
70
- flex-grow: 2;
71
- padding: 10px;
72
- overflow: hidden;
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
- }
102
- h2 {
103
- word-break: break-word;
104
- margin-top: 10px;
105
- line-height: 2.4rem;
106
- }
107
- h4 {
108
- color: inherit;
109
- margin: 5px 0;
110
- }
111
- .item {
112
- &:not(:first-child) {
113
- border-top: 1px solid;
114
- }
115
- &:last-child {
116
- margin-bottom: 0;
117
- padding-bottom: 0;
118
- }
119
- margin-bottom: 20px;
120
- text-align: left;
121
- font-size: var(--card-font-size);
122
- line-height: normal;
123
- h3 {
124
- margin: 3px 5px 0 5px;
125
- color: var(--color-card-fg);
126
- }
127
- .due {
128
- display: inline-flex;
129
- align-items: center;
130
- border-radius: 5px;
131
- margin: 0 3px;
132
- padding: 2px 5px;
133
- .icon {
134
- font-size: 1.3em;
135
- font-variation-settings: 'FILL' 1;
136
- }
137
- &.past {
138
- background-color: var(--color-dark);
139
- }
140
- }
141
- small {
142
- margin-left: 5px;
143
- }
144
- }
145
- pre, code {
146
- color: inherit;
147
- }
148
- }
149
-
150
- .control {
151
- margin-top: 10px;
152
- padding: 10px;
153
- display: flex;
154
- justify-content: space-between;
155
- a {
156
- text-decoration: none;
157
- font-size: var(--card-font-size);
158
- display: contents;
159
- &.button {
160
- display: flex;
161
- border-radius: 5px;
162
- padding: 5px 10px;
163
- color: white!important;
164
- background-color: var(--color-card-fg);
165
- .rocket {
166
- font-variation-settings: 'FILL' 1;
167
- }
168
- }
169
- }
170
- .tags {
171
- font-family: var(--font-secondary);
172
- white-space: nowrap;
173
- text-overflow: ellipsis;
174
- overflow: hidden;
175
- }
176
- }
177
-
data/_sass/init.scss CHANGED
@@ -2,9 +2,8 @@
2
2
  // https://github.com/beAuthentic/askclass-course-theme/blob/main/_sass/default.scss
3
3
 
4
4
  // Example, to overwrite default bg/fg colors specified in the file above:
5
- // $color-bg: black;
6
- // $color-fg: white;
7
-
5
+ // @forward 'default' with ( $color-bg: black );
6
+ // @forward 'default' with ( $color-fg: white );
8
7
 
9
8
  // Make grid boxes the same height (scrollable)
10
- // $grid-body-height: 300px;
9
+ // @forward 'default' with ( $grid-body-height: 200px );
@@ -2,6 +2,5 @@
2
2
  ---
3
3
 
4
4
  @use "base" as *;
5
- @use "post" as *;
5
+ @use "article" as *;
6
6
  @use "bubbles" as *;
7
- @use "init" as *;
@@ -1,5 +1,5 @@
1
1
  ---
2
2
  ---
3
+
3
4
  @use "base" as *;
4
5
  @use "grid" as *;
5
- @use "init" as *;
@@ -1,5 +1,4 @@
1
1
  ---
2
2
  ---
3
3
  @use "base" as *;
4
- @use "post" as *;
5
- @use "init" as *;
4
+ @use "article" as *;
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.15.1
4
+ version: 0.16.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-01-14 00:00:00.000000000 Z
11
+ date: 2026-01-15 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -65,6 +65,7 @@ files:
65
65
  - _layouts/default.html
66
66
  - _layouts/segment.html
67
67
  - _layouts/session.html
68
+ - _sass/_article.scss
68
69
  - _sass/_base.scss
69
70
  - _sass/_bubbles.scss
70
71
  - _sass/_bullets.scss
@@ -74,6 +75,7 @@ files:
74
75
  - _sass/_paginator.scss
75
76
  - _sass/_post.scss
76
77
  - _sass/_tab-colors.scss
78
+ - _sass/_tab-main.scss
77
79
  - _sass/_tab.scss
78
80
  - _sass/_table.scss
79
81
  - _sass/_video.scss