askclass-course-theme 0.4.0 → 0.5.0

Sign up to get free protection for your applications and to get access to all the features.
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;