askclass-news-theme 0.4.0 → 0.4.3

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: fe2831ba003b1d4e6dee8eb49bdbbea8b1ef9daaaa6f73cab331ec15bd9b9981
4
- data.tar.gz: c06277f57206b19c316507ffa198859ef16d8f2420d6c57b9a249c6c42aa21a2
3
+ metadata.gz: b13ded5da26f0b7adc34fa295fc9d018f642812c38510c25713b5c241e0e907d
4
+ data.tar.gz: 4de0c2c07f7f5cb3781819d2b6762dcbe612cf5c03a9f5b24e55755a7e230576
5
5
  SHA512:
6
- metadata.gz: '03180d790acd0b4526e9e2307b688fcc685759a03f3e518295336cce2a7cb33d7b084a3a5a50f09cf7759ce4136ec70294df58eed5fa2942de292a8bcf16ce97'
7
- data.tar.gz: df3f0c2b3d8cd4409046ea1cf8e208d9dd78d6c09aa12b4e14a08a6406a184bbaaedd19950a9392575da2a8b0703cde14296942cb92dc9f789a2e01020e016a2
6
+ metadata.gz: ce1854fc325620f7d67a3b145d279b857d2c75d016befed85f4061604e82fc1b0c0ece15d57194174660b514dd0484f912e4e106a5d3a80c4772bcd9145b1f61
7
+ data.tar.gz: 6391618c039a147c1076f3a47c0fc0ebe2f3d9d57f7b9fe1d79ddc01177cb76d50756f5be119a6ed36740e94fe243f7c15752602cb4b56f58fef53c9176dfa43
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,83 @@ $ 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
+ `image` | URL | Optional main image
58
+ `source` | `The Tolkien Society` | Optional main source
59
+ `source_url` | URL | Optional link to `source`
60
+
61
+ Example
25
62
 
26
63
  ```md
27
64
  ---
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
65
+ title: The Hobbit: An Unexpected Party
33
66
  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/
67
+ color: c5
68
+ tags: fantasy fiction
45
69
  ---
46
70
 
47
- Whatever is here goes gets on index.
71
+ In a hole in the ground there lived a hobbit.
48
72
  <!--more-->
49
- The rest of the article.
73
+ 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
74
  ```
51
75
 
52
- ## Writer File Format
76
+ ## Writer Frontmatter
53
77
 
78
+ Field | Example | Description
79
+ --- | --- | :---
80
+ `layout` | `writer` | Don't add this unless you know what you're doing
81
+ `size` | `100` | Optional profile image size
82
+ `style` | `center` | Optional alignment either (`center` or `left`)
83
+ `image` | URL | Optional link to profile image
54
84
  ```md
55
85
  ---
56
- # Don't change this
57
- layout: writer
58
- # Optional size of image
59
86
  size: 100
60
- # Optional position of the profile image either center or left
61
- style: center
62
- # Optional image
87
+ style: left
63
88
  image: https://author.images/tolkien.jpg
64
89
  ---
65
90
 
66
91
  Biography.
67
92
  ```
68
93
 
94
+ ----
95
+
69
96
  ## Contributing
70
97
 
71
98
  Bug reports and pull requests are welcome on GitHub at https://github.com/beAuthentic/askclass-news-theme.
@@ -94,3 +121,8 @@ The theme is available as open source under the terms of the [MPL-2.0 License].
94
121
  [Google Fonts]: https://fonts.google.com/
95
122
  [MPL-2.0 License]: https://opensource.org/licenses/MPL-2.0
96
123
  [Contributor Covenant]: http://contributor-covenant.org
124
+ [Card Colors]: https://acn.askclass.com/2022/06/18/card-colors
125
+ [Build]: https://github.com/beAuthentic/askclass-news-theme/actions/workflows/gem-push.yml/badge.svg
126
+ [Build Link]: https://github.com/beAuthentic/askclass-news-theme/actions/workflows/gem-push.yml
127
+ [CodeQL]: https://github.com/beAuthentic/askclass-news-theme/actions/workflows/codeql-analysis.yml/badge.svg
128
+ [CodeQL Link]: https://github.com/beAuthentic/askclass-news-theme/actions/workflows/codeql-analysis.yml
data/_config.yml CHANGED
@@ -84,7 +84,7 @@ defaults:
84
84
  sass:
85
85
  style: compact
86
86
 
87
- keep_files:
87
+ include:
88
88
  - index.html
89
89
  - 404.html
90
90
  - pwabuilder-sw.js
data/_includes/logo.html CHANGED
@@ -4,5 +4,9 @@
4
4
  width="{{ include.size | default: site.acn.logo.size }}"
5
5
  title="{{ site.title }}"/>
6
6
  </a>
7
+ {%- if include.href %}
8
+ <h3 class="special"><a href="{{ include.href }}">{{ include.title | default: site.title }}</a></h3>
9
+ {% else %}
7
10
  <h3 class="special">{{ include.title | default: site.title }}</h3>
11
+ {% endif -%}
8
12
  </section>
@@ -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
 
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,19 @@ 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-special;
85
85
  }
86
86
 
87
87
  code {
88
88
  white-space: pre-wrap;
89
- color: $primaryColor;
89
+ color: $color-primary;
90
90
  }
91
91
 
92
92
  pre {
@@ -156,7 +156,7 @@ sub {
156
156
  footer {
157
157
  @include margin-top();
158
158
  @include align-center();
159
- color: $darkColor;
159
+ color: $color-dark;
160
160
  font-size: 14px;
161
161
  ul {
162
162
  padding: 0;
@@ -165,7 +165,7 @@ footer {
165
165
  @include align-middle();
166
166
  margin: 0 5px;
167
167
  a {
168
- color: $darkColor;
168
+ color: $color-dark;
169
169
  }
170
170
  }
171
171
  }
@@ -195,13 +195,20 @@ article.tiles {
195
195
  grid-gap: 1rem;
196
196
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
197
197
  li {
198
- padding: 10px;
198
+ padding: 5px;
199
199
  margin: 5px;
200
200
  border-radius: 5px;
201
201
  text-align: center;
202
- background-color: $secondaryColor;
202
+ background-color: $color-theme;
203
+ height: 60px;
204
+ display: flex;
205
+ align-items: center;
206
+ justify-content: center;
203
207
  a {
204
- color: $bgColor;
208
+ color: $color-bg;
209
+ overflow: hidden;
210
+ text-overflow: ellipsis;
211
+ word-break: break-word;
205
212
  }
206
213
  sup {
207
214
  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: 16px;
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.3em;
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;
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.0
4
+ version: 0.4.3
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-22 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