askclass-course-theme 0.4.0 → 0.5.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: b9e7b81c7615d7a7080463b94806c55b7525236f9cb54dffcb92bae2350528b0
4
- data.tar.gz: 1745fd369d3de94b043a049707ceeacb7e18210e7f475817c37e19454df637a4
3
+ metadata.gz: 9958814e12fcc66a3b3d3ec65d7b9fc566936da0d9a4f50c476a2060be0d5fdc
4
+ data.tar.gz: e58a07a1d503e7eadd08e7a24ce01d978ff3817dbe2a58f0fcdceb03d6c59ebf
5
5
  SHA512:
6
- metadata.gz: eae0d66205afb6e7451af62d29b04b1e2232996f3dbe1b841cfa5a0974d8f278282d9e604d26ca12227dc010db8aec15971c541b375e1029ff13f55bf6af93b8
7
- data.tar.gz: 5e94ea3c1cbf1a02f64a0d184087cdd330311063eacba7a22b347f0644e0e1bc96cc6d392d7cf9527263fdcf9c317c6018b85fd575e7ab466fafbbf9be0e39dc
6
+ metadata.gz: e5b62e020c12935fbd5b5f994e28329c1a74893c2a2671b6499ccd5320d3a890a379feee401e9b0840289e1babaa68f07cbe02afdf64312a3968041cb7d97781
7
+ data.tar.gz: 03f964ecebe9f4b5b4d005eefe83ea2a820e1def34ed20afe530a4882f802b3ab5cdb24a60ad92ee6711a3d8031a5d52d068e940c74c9c516d6c2b68f1f5134f
data/_config.yml CHANGED
@@ -63,11 +63,11 @@ collections:
63
63
  segment:
64
64
  output: true
65
65
 
66
- ignore_theme_config: false
67
- excerpt_separator: "<!--more-->"
68
- permalink: /:year/:month/:day/:title
69
-
70
66
  defaults:
67
+ - scope:
68
+ path: ""
69
+ values:
70
+ layout: "default"
71
71
  - scope:
72
72
  type: "session"
73
73
  values:
@@ -4,6 +4,6 @@
4
4
  {%- if page.collection == 'session' -%}
5
5
  <link rel="stylesheet" href="{{ 'assets/css/session.css' | relative_url }}" />
6
6
  {%- else -%}
7
- <link rel="stylesheet" href="{{ 'assets/css/index.css' | relative_url }}" />
7
+ <link rel="stylesheet" href="{{ 'assets/css/segment.css' | relative_url }}" />
8
8
  {%- endif -%}
9
9
  </head>
data/_includes/logo.html CHANGED
@@ -8,7 +8,7 @@
8
8
  {%- if include.href %}
9
9
  <h4 class="special"><a href="{{ include.href }}">{{ include.title | default: site.title }}</a></h4>
10
10
  {% elsif include.title %}
11
- <h4 class="special" style="color: var(--secondaryColor); margin: 0 0 1em 0">{{ include.title }}</h4>
11
+ <h4 class="special" style="color: var(--color-secondary); margin: 0 0 1em 0">{{ include.title }}</h4>
12
12
  {% else %}
13
13
  <h4 class="special">{{ include.title | default: site.title }}</h4>
14
14
  {% endif -%}
@@ -3,7 +3,13 @@
3
3
  {% include header.html %}
4
4
  <body>
5
5
  {% include logo.html %}
6
- {{ content }}
6
+ {% if page.url == '/' %}
7
+ {% include course.html %}
8
+ {% elsif page.url == '/404' %}
9
+ <h2 class="center-align">Page not found!</h2>
10
+ {% else %}
11
+ {{ content }}
12
+ {% endif %}
7
13
  {% include footer.html %}
8
14
  {% include foot/pwaupdate.html %}
9
15
  </body>
@@ -1,9 +1,36 @@
1
+ :root {
2
+ --font-special: #{$font-special};
3
+ --font-main: #{$font-main};
4
+ --font-secondary: #{$font-secondary};
5
+ --font-mono: #{$font-mono};
6
+
7
+ --color-bg: #{$color-bg};
8
+ --color-fg: #{$color-fg};
9
+ --color-primary: #{$color-primary};
10
+ --color-secondary: #{$color-secondary};
11
+ --color-tertiary: #{$color-tertiary};
12
+ --color-link: #{$color-link};
13
+ --color-dark: #{$color-dark};
14
+ --color-theme: #{$color-theme};
15
+ --color-row-odd: #{$color-row-odd};
16
+ --color-row-even: #{$color-row-even};
17
+
18
+ --color-card-fg: #{$color-card-fg};
19
+ --color-card-bg: #{$color-card-bg};
20
+
21
+ --content-width: #{$content-width};
22
+
23
+ --grid-width: #{$grid-width};
24
+ --grid-image-height: #{$grid-image-height};
25
+ --card-font-size: #{$card-font-size};
26
+ }
27
+
1
28
  body {
2
- font-family: $font-main;
29
+ font-family: var(--font-main);
3
30
  font-size: 17px;
4
31
  line-height: 1.6;
5
- background-color: $color-bg;
6
- color: $color-fg;
32
+ background-color: var(--color-bg);
33
+ color: var(--color-fg);
7
34
  &::-webkit-scrollbar {
8
35
  width: 6px;
9
36
  height: 6px;
@@ -21,18 +48,18 @@ hr {
21
48
  width: 300px;
22
49
  margin-bottom: 20px;
23
50
  margin-top: 40px;
24
- border-color: $color-bg;
51
+ border-color: var(--color-bg);
25
52
  }
26
53
 
27
54
  a {
28
- color: $color-link;
55
+ color: var(--color-link);
29
56
  text-decoration: none;
30
57
  }
31
58
 
32
59
  h1, h2, h3, h4, h5, h6 {
33
- font-family: $font-secondary;
60
+ font-family: var(--font-secondary);
34
61
  font-weight: normal;
35
- color: $color-secondary;
62
+ color: var(--color-secondary);
36
63
  line-height: 1;
37
64
  }
38
65
 
@@ -44,19 +71,19 @@ h5 { font-size: 1.2em }
44
71
  h6 { font-size: 1em }
45
72
 
46
73
  .special {
47
- font-family: $font-special;
74
+ font-family: var(--font-special);
48
75
  text-align: center;
49
- color: $color-primary;
76
+ color: var(--color-primary);
50
77
  margin: 10px 0 5px 0;
51
78
  }
52
79
 
53
80
  code, pre {
54
- font-family: $font-mono;
81
+ font-family: var(--font-mono);
55
82
  }
56
83
 
57
84
  code {
58
85
  white-space: pre-wrap;
59
- color: $color-secondary;
86
+ color: var(--color-secondary);
60
87
  &.rounded {
61
88
  border-radius: 5px;
62
89
  margin: 0 3px;
@@ -88,14 +115,6 @@ sub {
88
115
  .md-48 { font-size: 48px; }
89
116
  .md-disabled { color: rgba(0,0,0,0.6); }
90
117
 
91
- .buttons {
92
- margin-bottom: 1em;
93
- a {
94
- text-decoration: none;
95
- color: yellowgreen;
96
- }
97
- }
98
-
99
118
  @mixin margin-top() {
100
119
  margin-top: 100px;
101
120
  }
@@ -131,7 +150,7 @@ sub {
131
150
  footer {
132
151
  @include margin-top();
133
152
  @include align-center();
134
- color: $color-dark;
153
+ color: var(--color-dark);
135
154
  font-size: 14px;
136
155
  ul {
137
156
  padding: 0;
@@ -140,7 +159,7 @@ footer {
140
159
  @include align-middle();
141
160
  margin: 0 5px;
142
161
  a {
143
- color: $color-secondary;
162
+ color: var(--color-secondary);
144
163
  }
145
164
  }
146
165
  }
@@ -160,34 +179,34 @@ article {
160
179
  margin: 5px 10px 0 0;
161
180
  display: inline-block;
162
181
  }
163
- }
164
-
165
- article.tiles {
166
- ul {
167
- list-style-type: none;
168
- padding-inline-start: unset;
169
- display: grid;
170
- grid-gap: 1rem;
171
- grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
172
- li {
173
- padding: 5px;
174
- margin: 5px;
175
- border-radius: 5px;
176
- text-align: center;
177
- background-color: $color-theme;
178
- height: 60px;
179
- display: flex;
180
- align-items: center;
181
- justify-content: center;
182
- a {
183
- color: $color-bg;
184
- overflow: hidden;
185
- text-overflow: ellipsis;
186
- word-break: break-word;
187
- }
188
- sup {
189
- vertical-align: 3px;
182
+ &.tiles {
183
+ ul {
184
+ list-style-type: none;
185
+ padding-inline-start: unset;
186
+ display: grid;
187
+ grid-gap: 1rem;
188
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
189
+ li {
190
+ padding: 5px;
191
+ margin: 5px;
192
+ border-radius: 5px;
193
+ text-align: center;
194
+ background-color: var(--color-theme);
195
+ height: 60px;
196
+ display: flex;
197
+ align-items: center;
198
+ justify-content: center;
199
+ a {
200
+ color: var(--color-bg);
201
+ overflow: hidden;
202
+ text-overflow: ellipsis;
203
+ word-break: break-word;
204
+ }
205
+ sup {
206
+ vertical-align: 3px;
207
+ }
190
208
  }
191
209
  }
192
210
  }
193
211
  }
212
+
data/_sass/_grid.scss CHANGED
@@ -1,12 +1,9 @@
1
- $size-width: 180px;
2
- $size-height: 180px;
3
-
4
1
  ul.grid {
5
2
  list-style-type: none;
6
3
  padding-inline-start: unset;
7
4
  display: grid;
8
5
  grid-gap: 1rem;
9
- grid-template-columns: repeat(auto-fit, minmax($size-width, 1fr));
6
+ grid-template-columns: repeat(auto-fit, minmax(var(--grid-width), 1fr));
10
7
  clear: both;
11
8
 
12
9
  li {
@@ -19,6 +16,8 @@ ul.grid {
19
16
  img {
20
17
  object-fit: cover;
21
18
  width: 100%;
22
- height: $size-height;
19
+ height: var(--grid-image-height);
23
20
  }
24
21
  }
22
+
23
+ @import "tab";
data/_sass/_post.scss CHANGED
@@ -1,27 +1,27 @@
1
1
  article {
2
- max-width: var(--contentWidth);
2
+ max-width: var(--content-width);
3
3
  width: 100%;
4
4
  display: flex;
5
5
  flex-direction: column;
6
6
  overflow-wrap: break-word;
7
7
  word-break: break-word;
8
8
  h1, h2, h3, h4 {
9
- font-family: var(--specialFont);
9
+ font-family: var(--font-special);
10
10
  margin-bottom: 0;
11
11
  }
12
12
  h1 {
13
13
  & + time {
14
- color: var(--darkColor);
14
+ color: var(--color-dark);
15
15
  font-size: 15px;
16
16
  }
17
17
  }
18
18
  address {
19
19
  font-style: normal;
20
- font-family: var(--secondaryFont);
20
+ font-family: var(--font-secondary);
21
21
  margin-top: 1.5em;
22
22
  font-size: 1.4em;
23
23
  a {
24
- color: var(--tertiaryColor);
24
+ color: var(--color-tertiary);
25
25
  }
26
26
  }
27
27
  .text > p:first-child {
@@ -30,12 +30,12 @@ article {
30
30
  }
31
31
  .tags {
32
32
  small {
33
- font-family: var(--secondaryFont);
34
- color: var(--darkColor);
33
+ font-family: var(--font-secondary);
34
+ color: var(--color-dark);
35
35
  }
36
36
  }
37
37
  .source {
38
- color: var(--darkColor);
38
+ color: var(--color-dark);
39
39
  font-size: 13px;
40
40
  & > * {
41
41
  margin-left: 10px;
@@ -44,10 +44,10 @@ article {
44
44
  }
45
45
 
46
46
  blockquote {
47
- border-left: 5px solid var(--darkColor);
47
+ border-left: 5px solid var(--color-dark);
48
48
  padding-left: 10px;
49
49
  margin: 0 10px 0 20px;
50
- font-family: var(--specialFont);
50
+ font-family: var(--font-special);
51
51
  font-size: 19px;
52
52
  p {
53
53
  margin: 0;
@@ -56,3 +56,50 @@ blockquote {
56
56
  margin-bottom: 2em;
57
57
  }
58
58
  }
59
+
60
+ samp {
61
+ filter: blur(4px);
62
+ font-family: var(--font-special);
63
+ font-size: 18px;
64
+ cursor: pointer;
65
+ &.on {
66
+ filter: none;
67
+ color: var(--color-secondary);
68
+ }
69
+ }
70
+
71
+ .lesson-number {
72
+ display: flex;
73
+ align-items: center;
74
+ justify-content: center;
75
+ text-decoration: none;
76
+ padding: 7px 5px 3px 5px;
77
+ margin: 0 5px;
78
+ background-color: var(--color-fg);
79
+ font-family: var(--fontText);
80
+ color: var(--color-bg);
81
+ border-radius: 50%;
82
+ width: 25px;
83
+ height: 25px;
84
+ font-size: 16px;
85
+
86
+ &.current {
87
+ background-color: var(--color-secondary);
88
+ }
89
+ &.material-symbols-outlined {
90
+ font-size: 25px;
91
+ padding: 5px;
92
+ font-family: 'Material Symbols Outlined';
93
+ }
94
+ }
95
+
96
+ a.lesson-number{
97
+ color: var(--color-fg);
98
+ background-color: var(--color-link);
99
+ }
100
+
101
+ @import
102
+ "bullets",
103
+ "table",
104
+ "tab-colors",
105
+ "video";
data/_sass/_tab.scss CHANGED
@@ -1,23 +1,13 @@
1
- $color-bg: whitesmoke;
2
- $color-fg: #444;
3
- $size-font: 16px;
4
-
5
1
  @mixin special() {
6
- color: $color-bg;
7
- font-family: var(--specialFont);
8
- }
9
-
10
- html {
11
- --bg: #{$color-bg};
12
- --fg: #{$color-fg};
13
- --fontSize: #{$size-font};
2
+ color: var(--color-card-bg, 'whitesmoke');
3
+ font-family: var(--font-special);
14
4
  }
15
5
 
16
6
  .card-tab {
17
7
  display: flex;
18
8
  flex-direction: column;
19
9
  position: relative;
20
- background-image: linear-gradient(225deg, $color-fg 50%, transparent 50%);
10
+ background-image: linear-gradient(225deg, var(--color-card-fg) 50%, transparent 50%);
21
11
  background-size: 120px 27px;
22
12
  background-repeat: no-repeat;
23
13
  background-position: right top;
@@ -25,9 +15,9 @@ html {
25
15
  box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
26
16
  border-top-width: 22px;
27
17
  border-top-style: solid;
28
- border-top-color: $color-fg;
29
- background-color: $color-bg;
30
- color: $color-fg;
18
+ border-top-color: var(--color-card-fg);
19
+ background-color: var(--color-card-bg);
20
+ color: var(--color-card-fg);
31
21
  text-transform: none;
32
22
  height: calc(100% - 22px);
33
23
  }
@@ -68,9 +58,9 @@ html {
68
58
  text-overflow: ellipsis;
69
59
  display: flex;
70
60
  align-items: flex-end;
71
- font-family: var(--secondaryFont);
61
+ font-family: var(--font-secondary);
72
62
  a {
73
- color: var(--bgColor);
63
+ color: var(--color-bg);
74
64
  }
75
65
  }
76
66
 
@@ -94,11 +84,11 @@ html {
94
84
  .item {
95
85
  margin-bottom: 20px;
96
86
  text-align: left;
97
- font-size: $size-font;
87
+ font-size: var(--card-font-size);
98
88
  line-height: normal;
99
89
  h3 {
100
90
  margin: 3px 5px 0 5px;
101
- color: $color-fg;
91
+ color: var(--color-card-fg);
102
92
  }
103
93
  .due {
104
94
  display: inline-flex;
@@ -111,7 +101,7 @@ html {
111
101
  font-variation-settings: 'FILL' 1;
112
102
  }
113
103
  &.past {
114
- background-color: var(--darkColor);
104
+ background-color: var(--color-dark);
115
105
  }
116
106
  }
117
107
  small {
@@ -130,23 +120,25 @@ html {
130
120
  justify-content: space-between;
131
121
  a {
132
122
  text-decoration: none;
133
- font-size: $size-font;
123
+ font-size: var(--card-font-size);
134
124
  display: contents;
135
125
  &.button {
136
126
  display: flex;
137
127
  border-radius: 5px;
138
128
  padding: 5px 10px;
139
129
  color: white!important;
140
- background-color: $color-fg;
130
+ background-color: var(--color-card-fg);
141
131
  .material-symbols-outlined {
142
132
  font-variation-settings: 'FILL' 1;
143
133
  }
144
134
  }
145
135
  }
146
136
  .tags {
147
- font-family: var(--secondaryFont);
137
+ font-family: var(--font-secondary);
148
138
  white-space: nowrap;
149
139
  text-overflow: ellipsis;
150
140
  overflow: hidden;
151
141
  }
152
142
  }
143
+
144
+ @import "tab-colors";
data/_sass/_table.scss CHANGED
@@ -1,13 +1,10 @@
1
- $color-odd: #2a2a2a;
2
- $color-even: #2f2f2f;
3
-
4
1
  table {
5
2
  table-layout: fixed;
6
3
  tr:nth-child(odd) {
7
- background-color: $color-odd;
4
+ background-color: var(--color-row-odd, '#2a2a2a');
8
5
  }
9
6
  th, tr:nth-child(even) {
10
- background-color: $color-even;
7
+ background-color: var(--color-row,even, '#2f2f2f');
11
8
  }
12
9
  td, th {
13
10
  word-break: normal;
data/_sass/init.scss CHANGED
@@ -1,37 +1,27 @@
1
- $font-main: 'Open Sans', sans-serif;
2
- $font-secondary: 'Teko', sans-serif;
3
- $font-special: 'Josefin Sans', sans-serif;
4
- $font-mono: 'Share Tech Mono', monospace;
1
+ $font-main: 'Open Sans', sans-serif;
2
+ $font-secondary: 'Teko', sans-serif;
3
+ $font-special: 'Josefin Sans', sans-serif;
4
+ $font-mono: 'Share Tech Mono', monospace;
5
5
 
6
- $color-primary: aliceblue;
7
- $color-secondary: skyblue;
8
- $color-tertiary: #2cdd88;
9
- $color-bg: #222;
10
- $color-fg: ivory;
11
- $color-dark: gray;
12
- $color-link: deeppink;
13
- $color-theme: #ffc100;
6
+ $color-primary: aliceblue;
7
+ $color-secondary: skyblue;
8
+ $color-tertiary: #2cdd88;
9
+ $color-bg: #222;
10
+ $color-fg: ivory;
11
+ $color-dark: gray;
12
+ $color-link: deeppink;
13
+ $color-theme: #ffc100;
14
14
 
15
- $content-width: 600px;
15
+ $color-row-odd: #2a2a2a;
16
+ $color-row-even: #2f2f2f;
16
17
 
17
- :root {
18
- --specialFont: #{$font-special};
19
- --mainFont: #{$font-main};
20
- --secondaryFont: #{$font-secondary};
21
- --monoFont: #{$font-mono};
18
+ $color-card-bg: whitesmoke;
19
+ $color-card-fg: #444;
20
+ $card-font-size: 16px;
22
21
 
23
- --bgColor: #{$color-bg};
24
- --fgColor: #{$color-fg};
25
- --primaryColor: #{$color-primary};
26
- --secondaryColor: #{$color-secondary};
27
- --tertiaryColor: #{$color-tertiary};
28
- --linkColor: #{$color-link};
29
- --darkColor: #{$color-dark};
30
- --themeColor: #{$color-theme};
22
+ $content-width: 600px;
31
23
 
32
- --contentWidth: #{$content-width};
33
- }
24
+ $grid-width: 180px;
25
+ $grid-image-height: 180px;
34
26
 
35
- @import
36
- "custom-variables",
37
- "default";
27
+ @import "base";
@@ -3,6 +3,4 @@
3
3
 
4
4
  @import
5
5
  "grid",
6
- "tab",
7
- "tab-colors",
8
6
  "init";
@@ -3,9 +3,4 @@
3
3
 
4
4
  @import
5
5
  "post",
6
- "bullets",
7
- "table",
8
- "tab-colors",
9
- "video",
10
- "lesson",
11
6
  "init";
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: askclass-course-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.4.0
4
+ version: 0.5.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - AskClass
@@ -56,18 +56,16 @@ files:
56
56
  - _layouts/default.html
57
57
  - _layouts/segment.html
58
58
  - _layouts/session.html
59
+ - _sass/_base.scss
59
60
  - _sass/_bullets.scss
60
- - _sass/_default.scss
61
61
  - _sass/_grid.scss
62
- - _sass/_lesson.scss
63
62
  - _sass/_post.scss
64
63
  - _sass/_tab-colors.scss
65
64
  - _sass/_tab.scss
66
65
  - _sass/_table.scss
67
66
  - _sass/_video.scss
68
- - _sass/custom-variables.scss
69
67
  - _sass/init.scss
70
- - assets/css/index.scss
68
+ - assets/css/segment.scss
71
69
  - assets/css/session.scss
72
70
  - assets/favicon.ico
73
71
  - assets/loading.svg
data/_sass/_lesson.scss DELETED
@@ -1,40 +0,0 @@
1
- samp {
2
- filter: blur(4px);
3
- font-family: var(--specialFont);
4
- font-size: 18px;
5
- cursor: pointer;
6
- &.on {
7
- filter: none;
8
- color: var(--secondaryColor);
9
- }
10
- }
11
-
12
- .lesson-number {
13
- display: flex;
14
- align-items: center;
15
- justify-content: center;
16
- text-decoration: none;
17
- padding: 7px 5px 3px 5px;
18
- margin: 0 5px;
19
- background-color: var(--fgColor);
20
- font-family: var(--fontText);
21
- color: var(--bgColor);
22
- border-radius: 50%;
23
- width: 25px;
24
- height: 25px;
25
- font-size: 16px;
26
-
27
- &.current {
28
- background-color: var(--secondaryColor);
29
- }
30
- &.material-symbols-outlined {
31
- font-size: 25px;
32
- padding: 5px;
33
- font-family: 'Material Symbols Outlined';
34
- }
35
- }
36
-
37
- a.lesson-number{
38
- color: var(--fgColor);
39
- background-color: var(--linkColor);
40
- }
@@ -1,16 +0,0 @@
1
- // Fonts are specified in _config.yml
2
- // $font-main: 'Open Sans', sans-serif;
3
- // $font-secondary: 'Teko', sans-serif;
4
- // $font-special: 'Josefin Sans', sans-serif;
5
- // $font-mono: 'Share Tech Mono', monospace;
6
-
7
- // Change colors
8
- // $color-primary: aliceblue;
9
- // $color-secondary: skyblue;
10
- // $color-tertiary: #2cdd88;
11
- // $color-bg: green;
12
- // $color-fg: ivory;
13
- // $color-dark: gray;
14
- // $color-link: deeppink;
15
- // $color-theme: #ffc100;
16
- // $content-width: 600px;