askclass-news-theme 0.4.1 → 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: 6d7830fe82c5503855f63df33da81a394ce42329531f1ae8ff1e1a88d67115bf
4
- data.tar.gz: 9d03f151b323a60f8c723020871e77db4221bc584ec6a1bd3936d07eaa1e220c
3
+ metadata.gz: b1d4f09a3dc76c677cd16cdddfe9c78e80e49c15fe31f32396a07e5ae6331831
4
+ data.tar.gz: 768058d2afcd1c9a4a94911e7f642b9ffc9b086d8391abce7f32b875556917c9
5
5
  SHA512:
6
- metadata.gz: ec59b713992f9ec64e3a317e7b4e7810dada70c67a546d03e54f7245359cfacc1582b15e291cfad5cfe80a863c2e57e566ef15e0cc5e13c2cce2413679e4308f
7
- data.tar.gz: d3685d1c4e43aab14d671c725348bd1a2ed21e44ddcfab035b05fcd30617f21640ce669f55cd1737864225c2bcd9f865f1efe078f15391ff6eec88f1047b35e7
6
+ metadata.gz: 702cbabd277ac22b72d7bec4df42eaa82536b4206e5e218323ca53c5ea4070c7c37ae4d158aadc780d82a0eeb78c7e0140b6c3dc008102739ff16a341b9db604
7
+ data.tar.gz: 2de7cffd8d36c265ca56141aab34b62ffc0cb1ade81c6c7c34d1b712ac68c5e5c7863654370d4dbebdb31c33b7e538a9fea0f5d5adad1eddb855e4f893763ebd
data/README.md CHANGED
@@ -1,6 +1,7 @@
1
1
  # AskClass News Theme
2
+ [![Build]][Build Link] [![CodeQL]][CodeQL Link]
2
3
 
3
- Simple responsive Jekyll theme featuring posts and authors.
4
+ Simple responsive Jekyll theme puts posts and authors front and center.
4
5
 
5
6
  ## Installation
6
7
 
@@ -15,57 +16,84 @@ $ bundle
15
16
 
16
17
  ## Configuration
17
18
 
18
- Copy these files:
19
- - `index.html`
20
- - `config.yml` (edit this to fit your need)
21
- - `content/` (whole folder as an example)
22
- - `pwabuilder-sw.js` (PWA)
19
+ Copy these files to your main folder.
20
+ Edit `_config.yml` to your need.
21
+ The `content` folder requires 3 sub-folders.
22
+ `content/_hastags` folder requires `index.html`; copy content of `index.html` for every named tag.
23
23
 
24
- ## Post File Format
24
+ ```
25
+ /
26
+ │ index.html (required)
27
+ │ 404.html
28
+ │ _config.yml (edit this file)
29
+ │ pwabuilder-sw.js (PWA)
30
+
31
+ └── content/
32
+ │ │
33
+ │ └── _posts/
34
+ │ │ │ 2022-06-15-the-academy.md
35
+ │ │ │ ...
36
+ │ │
37
+ │ └── _writers/
38
+ │ │ │ plato.md
39
+ │ │ │ ...
40
+ │ │
41
+ │ └── _hashtags/
42
+ │ │ │ index.html (required)
43
+ │ │ │ bio.md
44
+ │ │ │ ...
45
+ ```
46
+
47
+ ## Post Frontmatter
48
+
49
+ Field | Example | Description
50
+ --- | --- | :---
51
+ `layout` | `post` | Don't add this unless you know what you're doing
52
+ `title` | `The Hobbit` | Main title of the post
53
+ `category` | `J.R.R._Tolkien` | Make author clickable (note the `_`)
54
+ `writer` | `J.R.R. Tolkien` | Non-clickable writer's name (note no `_`)
55
+ `color` | `c5` | Values: `c1` .. `c10` (see [Card Colors]);
56
+ `tags` | `fantasy fiction` | Alphanumeric words, use `-` to connect words
57
+ `thumb` | URL | Optional thumb image
58
+ `image` | URL | Optional main image
59
+ `source` | `The Tolkien Society` | Optional main source
60
+ `source_url` | URL | Optional link to `source`
61
+
62
+ Example
25
63
 
26
64
  ```md
27
65
  ---
28
- # Don't change this
29
- layout: post
30
- # Well, what else could this be?
31
- title: The Hobbit
32
- # This is your author's name
66
+ title: The Hobbit: An Unexpected Party
33
67
  category: J.R.R._Tolkien
34
- # Alternatively
35
- writer: J.R.R Tolkien
36
- # Values: c1 .. c10
37
- color: c1
38
- # Tags separated by spaces
39
- tags: fiction fantasy
40
- # Optional title image (shows up on index)
41
- image: https://article.images/iamge.jpg
42
- # Optional source info
43
- source: The Tolkien Society
44
- source_url: https://www.tolkiensociety.org/
68
+ color: c5
69
+ tags: fantasy fiction
45
70
  ---
46
71
 
47
- Whatever is here goes gets on index.
72
+ In a hole in the ground there lived a hobbit.
48
73
  <!--more-->
49
- The rest of the article.
74
+ Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to eat: it was a hobbit-hole, and that means comfort.
50
75
  ```
51
76
 
52
- ## Writer File Format
77
+ ## Writer Frontmatter
53
78
 
79
+ Field | Example | Description
80
+ --- | --- | :---
81
+ `layout` | `writer` | Don't add this unless you know what you're doing
82
+ `size` | `100` | Optional profile image size
83
+ `style` | `center` | Optional alignment either (`center` or `left`)
84
+ `image` | URL | Optional link to profile image
54
85
  ```md
55
86
  ---
56
- # Don't change this
57
- layout: writer
58
- # Optional size of image
59
87
  size: 100
60
- # Optional position of the profile image either center or left
61
- style: center
62
- # Optional image
88
+ style: left
63
89
  image: https://author.images/tolkien.jpg
64
90
  ---
65
91
 
66
92
  Biography.
67
93
  ```
68
94
 
95
+ ----
96
+
69
97
  ## Contributing
70
98
 
71
99
  Bug reports and pull requests are welcome on GitHub at https://github.com/beAuthentic/askclass-news-theme.
@@ -94,3 +122,8 @@ The theme is available as open source under the terms of the [MPL-2.0 License].
94
122
  [Google Fonts]: https://fonts.google.com/
95
123
  [MPL-2.0 License]: https://opensource.org/licenses/MPL-2.0
96
124
  [Contributor Covenant]: http://contributor-covenant.org
125
+ [Card Colors]: https://acn.askclass.com/2022/06/18/card-colors
126
+ [Build]: https://github.com/beAuthentic/askclass-news-theme/actions/workflows/gem-push.yml/badge.svg
127
+ [Build Link]: https://github.com/beAuthentic/askclass-news-theme/actions/workflows/gem-push.yml
128
+ [CodeQL]: https://github.com/beAuthentic/askclass-news-theme/actions/workflows/codeql-analysis.yml/badge.svg
129
+ [CodeQL Link]: https://github.com/beAuthentic/askclass-news-theme/actions/workflows/codeql-analysis.yml
data/_config.yml CHANGED
@@ -1,5 +1,5 @@
1
1
  # Custom fields
2
- title: "AskClass News"
2
+ title: "AskClass News Template"
3
3
  description: >
4
4
  Exploring the intersection between education and technology;
5
5
  how innovations in cross-disciplinary learning reorients our
@@ -19,6 +19,7 @@ acn:
19
19
  logo:
20
20
  image: "logo-icon.svg"
21
21
  size: 70
22
+ height: 70
22
23
  alt_image: "logo.svg"
23
24
  alt_size: 200
24
25
  sizes: [ 48, 96, 144, 192, 300, 512 ]
@@ -45,6 +46,9 @@ acn:
45
46
  - icon: "copyright"
46
47
  href: "https://askclass.com"
47
48
  text: "AskClass"
49
+ - icon: "newspaper"
50
+ href: "https://news.askclass.com"
51
+ text: "News"
48
52
  - icon: "toys"
49
53
  href: "https://app.askclass.com"
50
54
  text: "Icebreakers"
@@ -1,2 +1,2 @@
1
- <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
2
- <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
1
+ <script defer src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
2
+ <script async id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
@@ -1,6 +1,6 @@
1
1
  {% assign file = site.static_files | where: "path", "/pwabuilder-sw.js" %}
2
2
  {% if file.size != 0 %}
3
- <script type="module">
3
+ <script defer type="module">
4
4
  import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
5
5
  const el = document.createElement('pwa-update');
6
6
  document.body.appendChild(el);
@@ -9,4 +9,3 @@
9
9
  {%- endfor %}
10
10
  </ul>
11
11
  </footer>
12
- {% include foot/mathjax.html -%}
data/_includes/grid.html CHANGED
@@ -20,7 +20,7 @@
20
20
  </div>
21
21
  <div class="body">
22
22
  {% if post.image %}
23
- <img src="{{ post.image }}" alt="{{ post.title }}" />
23
+ <img src="/assets/loading.svg" data="{{ post.thumb | default: post.image }}" alt="{{ post.title }}" />
24
24
  {% endif %}
25
25
  <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
26
26
  {{ post.excerpt }}
@@ -40,3 +40,12 @@
40
40
  </li>
41
41
  {% endfor %}
42
42
  </ul>
43
+
44
+ <script defer>
45
+ const samps = document.querySelectorAll('img');
46
+ samps.forEach( el => {
47
+ if (el.src.match(/loading\.svg$/) && el.attributes.data) {
48
+ el.src = el.attributes.data.value;
49
+ }
50
+ } );
51
+ </script>
@@ -27,8 +27,13 @@
27
27
  {% endif % %}
28
28
 
29
29
  <link rel="manifest" href="/assets/site.webmanifest" />
30
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{ families }}&display=swap" />
30
+ <link rel="preconnect" href="https://cdn.jsdelivr.net" />
31
+ <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
31
32
  <link rel="preconnect" href="https://fonts.googleapis.com" />
33
+ <link rel='preconnect' href="https://fonts.googleapis.com" crossorigin />
34
+ <link rel="preload" as="style"
35
+ href="https://fonts.googleapis.com/css2?family={{ families }}&display=swap"
36
+ onload='this.onload=null;this.rel="stylesheet"' />
32
37
  <link rel="shortcut icon" href="/assets/{{ acn.meta.shortcut.favicon }}" />
33
38
  <link rel="icon" type="{{ acn.meta.shotcut.type }}" href="/assets/{{ acn.meta.shortcut.image }}" />
34
39
  <link rel="icon" type="image/svg+xml" href="/assets/{{ acn.logo.image }}" />
@@ -1,12 +1,12 @@
1
1
  <head>
2
2
  {% include head/meta.html %}
3
3
  {% include head/common.html %}
4
- {% include head/pwaupdate.html %}
5
4
  {% if page.collection == 'posts' %}
6
- <link href="{{ 'assets/css/md.css' | relative_url }}" rel="stylesheet" />
5
+ <link rel="preload" as="style" href="{{ 'assets/css/md.css' | relative_url }}"
6
+ onload='this.onload=null;this.rel="stylesheet"' />
7
7
  {% else %}
8
- <link href="{{ 'assets/css/grid.css' | relative_url }}" rel="stylesheet" />
9
- <link href="{{ 'assets/css/tab.css' | relative_url }}" rel="stylesheet" />
8
+ <link rel="stylesheet" href="{{ 'assets/css/grid.css' | relative_url }}" />
9
+ <link rel="stylesheet" href="{{ 'assets/css/tab.css' | relative_url }}" />
10
10
  {% endif %}
11
- <link href="{{ 'assets/css/style.css' | relative_url }}" rel="stylesheet" />
11
+ <link rel="stylesheet" href="{{ 'assets/css/style.css' | relative_url }}" />
12
12
  </head>
data/_includes/logo.html CHANGED
@@ -2,7 +2,12 @@
2
2
  <a href="/">
3
3
  <img src="/assets/{{ include.image | default: site.acn.logo.image }}"
4
4
  width="{{ include.size | default: site.acn.logo.size }}"
5
+ height="{{ include.height | default: site.acn.logo.height | default: site.acn.logo.size }}"
5
6
  title="{{ site.title }}"/>
6
7
  </a>
8
+ {%- if include.href %}
9
+ <h3 class="special"><a href="{{ include.href }}">{{ include.title | default: site.title }}</a></h3>
10
+ {% else %}
7
11
  <h3 class="special">{{ include.title | default: site.title }}</h3>
12
+ {% endif -%}
8
13
  </section>
@@ -4,6 +4,7 @@
4
4
  <body>
5
5
  {{ content }}
6
6
  {% include footer.html %}
7
+ {% include foot/pwaupdate.html %}
7
8
  </body>
8
9
  </html>
9
10
 
@@ -12,14 +12,18 @@
12
12
  {%- break -%}
13
13
  {%- endfor -%}
14
14
 
15
- {% include logo.html image=site.acn.logo.alt_image size=site.acn.logo.alt_size title=tag -%}
15
+ {% include logo.html image=site.acn.logo.alt_image size=site.acn.logo.alt_size title=tag href='/hashtags' -%}
16
16
  {%- if posts.size -%}
17
17
  {% include grid.html posts=posts %}
18
18
  {%- else -%}
19
+ {%- capture site_tags -%}
20
+ {% for tag in site.tags %}{{ tag[0] }}{% unless forloop.last %},{% endunless %}{% endfor -%}
21
+ {% endcapture -%}
22
+ {% assign tags_list = site_tags | split: ',' | sort_natural -%}
19
23
  <article class="tiles">
20
24
  <ul>
21
- {%- for t in site.tags -%}
22
- <li><a href="/hashtags/{{ t[0] }}">{{ t[0] }}<sup>{{ t[1].size }}</sup></a></li>
25
+ {%- for item in tags_list -%}
26
+ <li><a href="/hashtags/{{ item }}">{{ item }}<sup>{{ site.tags[item].size }}</sup></a></li>
23
27
  {%- endfor -%}
24
28
  </ul>
25
29
  </article>
@@ -27,5 +31,3 @@
27
31
  {%- include footer.html %}
28
32
  </body>
29
33
  </html>
30
-
31
-
data/_layouts/post.html CHANGED
@@ -12,13 +12,15 @@
12
12
  {% endif %}
13
13
 
14
14
  <h1>{{ page.title }}</h1>
15
- <small>{{ page.date | date: site.acn.date_format }}</small>
15
+ {% assign ymd = page.date | date: "%Y-%M-%D" %}
16
+ {% assign date = page.date | date: site.acn.date_format %}
17
+ <time pubdate datetime="{{ ymd }}" title="{{ date }}">{{ date }}</time>
16
18
 
17
19
  {% include writer.html info=page %}
18
20
  {% if writer_url %}
19
- <h5><a href="{{ writer_url }}">{{ writer }}</a></h5>
21
+ <address><a rel="author" href="{{ writer_url }}">{{ writer }}</a></address>
20
22
  {% else %}
21
- <h5>{{ writer }}</h5>
23
+ <address rel="author">{{ writer }}</address>
22
24
  {% endif %}
23
25
  </header>
24
26
 
@@ -47,5 +49,6 @@
47
49
 
48
50
  {% include post/paginator.html %}
49
51
  {% include footer.html %}
52
+ {% include foot/mathjax.html -%}
50
53
  </body>
51
54
  </html>
data/_sass/_default.scss CHANGED
@@ -1,39 +1,39 @@
1
- $mainFont: 'Open Sans', sans-serif;
2
- $secondaryFont: 'Teko', sans-serif;
3
- $specialFont: 'Josefin Sans', sans-serif;
4
- $monoFont: 'Share Tech Mono', monospace;
5
- $primaryColor: aliceblue;
6
- $secondaryColor: skyblue;
7
- $linkColor: deeppink;
8
- $bgColor: #222;
9
- $fgColor: ivory;
10
- $darkColor: gray;
11
- $contentWidth: 600px;
12
- $themeColor: #ffc100;
13
- $tertiaryColor: #2cdd88;
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
+ $color-primary: aliceblue;
6
+ $color-secondary: skyblue;
7
+ $color-tertiary: #2cdd88;
8
+ $color-bg: #222;
9
+ $color-fg: ivory;
10
+ $color-dark: gray;
11
+ $color-link: deeppink;
12
+ $color-theme: #ffc100;
13
+ $content-width: 600px;
14
14
 
15
15
  html {
16
- --specialFont: #{$specialFont};
17
- --mainFont: #{$mainFont};
18
- --secondaryFont: #{$secondaryFont};
19
- --monoFont: #{$monoFont};
20
- --primaryColor: #{$primaryColor};
21
- --secondaryColor: #{$secondaryColor};
22
- --linkColor: #{$linkColor};
23
- --bgColor: #{$bgColor};
24
- --fgColor: #{$fgColor};
25
- --darkColor: #{$darkColor};
26
- --contentWidth: #{$contentWidth};
27
- --themeColor: #{$themeColor};
28
- --tertiaryColor: #{$tertiaryColor};
16
+ --specialFont: #{$font-special};
17
+ --mainFont: #{$font-main};
18
+ --secondaryFont: #{$font-secondary};
19
+ --monoFont: #{$font-mono};
20
+ --primaryColor: #{$color-primary};
21
+ --secondaryColor: #{$color-secondary};
22
+ --linkColor: #{$color-link};
23
+ --bgColor: #{$color-bg};
24
+ --fgColor: #{$color-fg};
25
+ --darkColor: #{$color-dark};
26
+ --contentWidth: #{$content-width};
27
+ --themeColor: #{$color-theme};
28
+ --tertiaryColor: #{$color-tertiary};
29
29
  }
30
30
 
31
31
  body {
32
- font-family: $mainFont;
32
+ font-family: $font-main;
33
33
  font-size: 17px;
34
34
  line-height: 1.6;
35
- background-color: $bgColor;
36
- color: $fgColor;
35
+ background-color: $color-bg;
36
+ color: $color-fg;
37
37
  &::-webkit-scrollbar {
38
38
  width: 6px;
39
39
  height: 6px;
@@ -51,18 +51,18 @@ hr {
51
51
  width: 300px;
52
52
  margin-bottom: 20px;
53
53
  margin-top: 40px;
54
- border-color: $bgColor;
54
+ border-color: $color-bg;
55
55
  }
56
56
 
57
57
  a {
58
- color: $linkColor;
58
+ color: $color-link;
59
59
  text-decoration: none;
60
60
  }
61
61
 
62
62
  h1, h2, h3, h4, h5, h6 {
63
- font-family: $secondaryFont;
63
+ font-family: $font-secondary;
64
64
  font-weight: normal;
65
- color: $secondaryColor;
65
+ color: $color-secondary;
66
66
  line-height: 1;
67
67
  }
68
68
 
@@ -74,19 +74,20 @@ h5 { font-size: 1.2em }
74
74
  h6 { font-size: 1em }
75
75
 
76
76
  .special {
77
- font-family: $specialFont;
77
+ font-family: $font-special;
78
78
  text-align: center;
79
- color: $primaryColor;
79
+ color: $color-primary;
80
80
  margin: 10px 0 5px 0;
81
81
  }
82
82
 
83
83
  code, pre {
84
- font-family: $specialFont;
84
+ font-family: $font-mono;
85
+ font-size: 19px;
85
86
  }
86
87
 
87
88
  code {
88
89
  white-space: pre-wrap;
89
- color: $primaryColor;
90
+ color: $color-secondary;
90
91
  }
91
92
 
92
93
  pre {
@@ -156,7 +157,7 @@ sub {
156
157
  footer {
157
158
  @include margin-top();
158
159
  @include align-center();
159
- color: $darkColor;
160
+ color: $color-dark;
160
161
  font-size: 14px;
161
162
  ul {
162
163
  padding: 0;
@@ -165,7 +166,7 @@ footer {
165
166
  @include align-middle();
166
167
  margin: 0 5px;
167
168
  a {
168
- color: $darkColor;
169
+ color: $color-secondary;
169
170
  }
170
171
  }
171
172
  }
@@ -195,13 +196,20 @@ article.tiles {
195
196
  grid-gap: 1rem;
196
197
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
197
198
  li {
198
- padding: 10px;
199
+ padding: 5px;
199
200
  margin: 5px;
200
201
  border-radius: 5px;
201
202
  text-align: center;
202
- background-color: $secondaryColor;
203
+ background-color: $color-theme;
204
+ height: 60px;
205
+ display: flex;
206
+ align-items: center;
207
+ justify-content: center;
203
208
  a {
204
- color: $bgColor;
209
+ color: $color-bg;
210
+ overflow: hidden;
211
+ text-overflow: ellipsis;
212
+ word-break: break-word;
205
213
  }
206
214
  sup {
207
215
  vertical-align: 3px;
data/_sass/_grid.scss CHANGED
@@ -1,12 +1,12 @@
1
- $width: 180px;
2
- $height: 180px;
1
+ $size-width: 180px;
2
+ $size-height: 180px;
3
3
 
4
4
  ul.grid {
5
5
  list-style-type: none;
6
6
  padding-inline-start: unset;
7
7
  display: grid;
8
8
  grid-gap: 1rem;
9
- grid-template-columns: repeat(auto-fit, minmax($width, 1fr));
9
+ grid-template-columns: repeat(auto-fit, minmax($size-width, 1fr));
10
10
  clear: both;
11
11
 
12
12
  li {
@@ -19,6 +19,6 @@ ul.grid {
19
19
  img {
20
20
  object-fit: cover;
21
21
  width: 100%;
22
- height: $height;
22
+ height: $size-height;
23
23
  }
24
24
  }
@@ -1,4 +1,4 @@
1
- $width: 150px;
1
+ $size-width: 150px;
2
2
 
3
3
  .paginator-container {
4
4
  max-width: var(--contentWidth);
@@ -8,7 +8,7 @@ $width: 150px;
8
8
  }
9
9
 
10
10
  .paginator {
11
- width: $width;
11
+ width: $size-width;
12
12
  a {
13
13
  text-align: center;
14
14
  display: block;
data/_sass/_post.scss CHANGED
@@ -9,12 +9,19 @@ article {
9
9
  }
10
10
  h1 {
11
11
  margin-bottom: 0;
12
- & + small {
12
+ & + time {
13
13
  color: var(--darkColor);
14
+ font-size: 15px;
14
15
  }
15
16
  }
16
- h5, h5 a {
17
- color: var(--tertiaryColor);
17
+ address {
18
+ font-style: normal;
19
+ font-family: var(--secondaryFont);
20
+ margin-top: 1.5em;
21
+ font-size: 1.4em;
22
+ a {
23
+ color: var(--tertiaryColor);
24
+ }
18
25
  }
19
26
  .text > p:first-child {
20
27
  font-size: 25px;
@@ -1,25 +1,25 @@
1
- $c1: #005F73;
2
- $c2: #03989E;
3
- $c3: #CA6702;
4
- $c4: #EE9B00;
5
- $c5: #355691;
6
- $c6: #4073A0;
7
- $c7: #3C5A14;
8
- $c8: #598B2C;
9
- $c9: #9B2226;
10
- $c10: #B18FCF;
1
+ $color-1: #005F73;
2
+ $color-2: #03989E;
3
+ $color-3: #CA6702;
4
+ $color-4: #EE9B00;
5
+ $color-5: #355691;
6
+ $color-6: #4073A0;
7
+ $color-7: #3C5A14;
8
+ $color-8: #598B2C;
9
+ $color-9: #9B2226;
10
+ $color-10: #B18FCF;
11
11
 
12
12
  html {
13
- --c1: #{$c1};
14
- --c2: #{$c2};
15
- --c3: #{$c3};
16
- --c4: #{$c4};
17
- --c5: #{$c5};
18
- --c6: #{$c6};
19
- --c7: #{$c7};
20
- --c8: #{$c8};
21
- --c9: #{$c9};
22
- --c10: #{$c10};
13
+ --c1: #{$color-1};
14
+ --c2: #{$color-2};
15
+ --c3: #{$color-3};
16
+ --c4: #{$color-4};
17
+ --c5: #{$color-5};
18
+ --c6: #{$color-6};
19
+ --c7: #{$color-7};
20
+ --c8: #{$color-8};
21
+ --c9: #{$color-9};
22
+ --c10: #{$color-10};
23
23
  }
24
24
 
25
25
  @mixin paint($color) {
@@ -46,32 +46,32 @@ html {
46
46
  }
47
47
 
48
48
  .c1 {
49
- @include paint($c1);
49
+ @include paint($color-1);
50
50
  }
51
51
  .c2 {
52
- @include paint($c2);
52
+ @include paint($color-2);
53
53
  }
54
54
  .c3 {
55
- @include paint($c3);
55
+ @include paint($color-3);
56
56
  }
57
57
  .c4 {
58
- @include paint($c4);
58
+ @include paint($color-4);
59
59
  }
60
60
  .c5 {
61
- @include paint($c5);
61
+ @include paint($color-5);
62
62
  }
63
63
  .c6 {
64
- @include paint($c6);
64
+ @include paint($color-6);
65
65
  }
66
66
  .c7 {
67
- @include paint($c7);
67
+ @include paint($color-7);
68
68
  }
69
69
  .c8 {
70
- @include paint($c8);
70
+ @include paint($color-8);
71
71
  }
72
72
  .c9 {
73
- @include paint($c9);
73
+ @include paint($color-9);
74
74
  }
75
75
  .c10 {
76
- @include paint($c10);
76
+ @include paint($color-10);
77
77
  }
data/_sass/_tab.scss CHANGED
@@ -1,23 +1,23 @@
1
- $bg: whitesmoke;
2
- $fg: #444;
3
- $fontSize: 16px;
1
+ $color-bg: whitesmoke;
2
+ $color-fg: #444;
3
+ $size-font: 16px;
4
4
 
5
5
  @mixin special() {
6
- color: $bg;
6
+ color: $color-bg;
7
7
  font-family: var(--specialFont);
8
8
  }
9
9
 
10
10
  html {
11
- --bg: #{$bg};
12
- --fg: #{$fg};
13
- --fontSize: #{$fontSize};
11
+ --bg: #{$color-bg};
12
+ --fg: #{$color-fg};
13
+ --fontSize: #{$size-font};
14
14
  }
15
15
 
16
16
  .card-tab {
17
17
  display: flex;
18
18
  flex-direction: column;
19
19
  position: relative;
20
- background-image: linear-gradient(225deg, $fg 50%, transparent 50%);
20
+ background-image: linear-gradient(225deg, $color-fg 50%, transparent 50%);
21
21
  background-size: 120px 27px;
22
22
  background-repeat: no-repeat;
23
23
  background-position: right top;
@@ -25,9 +25,9 @@ html {
25
25
  box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
26
26
  border-top-width: 22px;
27
27
  border-top-style: solid;
28
- border-top-color: $fg;
29
- background-color: $bg;
30
- color: $fg;
28
+ border-top-color: $color-fg;
29
+ background-color: $color-bg;
30
+ color: $color-fg;
31
31
  text-transform: none;
32
32
  height: calc(100% - 22px);
33
33
  }
@@ -85,12 +85,12 @@ html {
85
85
  .item {
86
86
  margin-bottom: 20px;
87
87
  text-align: left;
88
- font-size: $fontSize;
88
+ font-size: $size-font;
89
89
  border-top: 3px outset;
90
90
  line-height: normal;
91
91
  h3 {
92
92
  margin: 0 0 0 5px;
93
- color: $fg;
93
+ color: $color-fg;
94
94
  }
95
95
  }
96
96
  pre, code {
@@ -105,14 +105,14 @@ html {
105
105
  justify-content: space-between;
106
106
  a {
107
107
  text-decoration: none;
108
- font-size: $fontSize;
108
+ font-size: $size-font;
109
109
  display: contents;
110
110
  &.button {
111
111
  display: flex;
112
112
  border-radius: 5px;
113
113
  padding: 5px 10px;
114
114
  color: white!important;
115
- background-color: $fg;
115
+ background-color: $color-fg;
116
116
  }
117
117
  }
118
118
  .tags {
data/_sass/_table.scss CHANGED
@@ -1,16 +1,13 @@
1
- $odd: #2a2a2a;
2
- $even: #2f2f2f;
1
+ $color-odd: #2a2a2a;
2
+ $color-even: #2f2f2f;
3
3
 
4
4
  table {
5
5
  table-layout: fixed;
6
- th {
7
- background-color: $even;
8
- }
9
6
  tr:nth-child(odd) {
10
- background-color: $odd;
7
+ background-color: $color-odd;
11
8
  }
12
- tr:nth-child(even) {
13
- background-color: $even;
9
+ th, tr:nth-child(even) {
10
+ background-color: $color-even;
14
11
  }
15
12
  td, th {
16
13
  vertical-align: top;
@@ -0,0 +1,6 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
2
+ <g transform="translate(50 50)">
3
+ <g>
4
+ <animateTransform attributeName="transform" type="rotate" values="0;45" keyTimes="0;1" dur="0.2s" repeatCount="indefinite"></animateTransform><path d="M29.491524206117255 -5.5 L37.491524206117255 -5.5 L37.491524206117255 5.5 L29.491524206117255 5.5 A30 30 0 0 1 24.742744050198738 16.964569457146712 L24.742744050198738 16.964569457146712 L30.399598299691117 22.621423706639092 L22.621423706639096 30.399598299691114 L16.964569457146716 24.742744050198734 A30 30 0 0 1 5.5 29.491524206117255 L5.5 29.491524206117255 L5.5 37.491524206117255 L-5.499999999999997 37.491524206117255 L-5.499999999999997 29.491524206117255 A30 30 0 0 1 -16.964569457146705 24.742744050198738 L-16.964569457146705 24.742744050198738 L-22.621423706639085 30.399598299691117 L-30.399598299691117 22.621423706639092 L-24.742744050198738 16.964569457146712 A30 30 0 0 1 -29.491524206117255 5.500000000000009 L-29.491524206117255 5.500000000000009 L-37.491524206117255 5.50000000000001 L-37.491524206117255 -5.500000000000001
5
+ L-29.491524206117255 -5.500000000000002 A30 30 0 0 1 -24.742744050198738 -16.964569457146705 L-24.742744050198738 -16.964569457146705 L-30.399598299691117 -22.621423706639085 L-22.621423706639092 -30.399598299691117 L-16.964569457146712 -24.742744050198738 A30 30 0 0 1 -5.500000000000011 -29.491524206117255 L-5.500000000000011 -29.491524206117255 L-5.500000000000012 -37.491524206117255 L5.499999999999998 -37.491524206117255 L5.5 -29.491524206117255 A30 30 0 0 1 16.964569457146702 -24.74274405019874 L16.964569457146702 -24.74274405019874 L22.62142370663908 -30.39959829969112 L30.399598299691117 -22.6214237066391 L24.742744050198738 -16.964569457146716 A30 30 0 0 1 29.491524206117255 -5.500000000000013 M0 -20A20 20 0 1 0 0 20 A20 20 0 1 0 0 -20" fill="#eee"></path></g></g>
6
+ </svg>
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: askclass-news-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.4.1
4
+ version: 0.5.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - AskClass
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2022-06-23 00:00:00.000000000 Z
11
+ date: 2022-06-30 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -35,11 +35,11 @@ files:
35
35
  - README.md
36
36
  - _config.yml
37
37
  - _includes/foot/mathjax.html
38
+ - _includes/foot/pwaupdate.html
38
39
  - _includes/footer.html
39
40
  - _includes/grid.html
40
41
  - _includes/head/common.html
41
42
  - _includes/head/meta.html
42
- - _includes/head/pwaupdate.html
43
43
  - _includes/header.html
44
44
  - _includes/logo.html
45
45
  - _includes/post/nextprev.html
@@ -64,6 +64,7 @@ files:
64
64
  - assets/css/style.scss
65
65
  - assets/css/tab.scss
66
66
  - assets/favicon.ico
67
+ - assets/loading.svg
67
68
  - assets/logo-144.png
68
69
  - assets/logo-192.png
69
70
  - assets/logo-300.png