askclass-news-theme 0.4.1 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6d7830fe82c5503855f63df33da81a394ce42329531f1ae8ff1e1a88d67115bf
-  data.tar.gz: 9d03f151b323a60f8c723020871e77db4221bc584ec6a1bd3936d07eaa1e220c
+  metadata.gz: b1d4f09a3dc76c677cd16cdddfe9c78e80e49c15fe31f32396a07e5ae6331831
+  data.tar.gz: 768058d2afcd1c9a4a94911e7f642b9ffc9b086d8391abce7f32b875556917c9
 SHA512:
-  metadata.gz: ec59b713992f9ec64e3a317e7b4e7810dada70c67a546d03e54f7245359cfacc1582b15e291cfad5cfe80a863c2e57e566ef15e0cc5e13c2cce2413679e4308f
-  data.tar.gz: d3685d1c4e43aab14d671c725348bd1a2ed21e44ddcfab035b05fcd30617f21640ce669f55cd1737864225c2bcd9f865f1efe078f15391ff6eec88f1047b35e7
+  metadata.gz: 702cbabd277ac22b72d7bec4df42eaa82536b4206e5e218323ca53c5ea4070c7c37ae4d158aadc780d82a0eeb78c7e0140b6c3dc008102739ff16a341b9db604
+  data.tar.gz: 2de7cffd8d36c265ca56141aab34b62ffc0cb1ade81c6c7c34d1b712ac68c5e5c7863654370d4dbebdb31c33b7e538a9fea0f5d5adad1eddb855e4f893763ebd

data/README.md

@@ -1,6 +1,7 @@
 # AskClass News Theme
+[![Build]][Build Link] [![CodeQL]][CodeQL Link]
 
-Simple responsive Jekyll theme featuring posts and authors.
+Simple responsive Jekyll theme puts posts and authors front and center.
 
 ## Installation
 
@@ -15,57 +16,84 @@ $ bundle
 
 ## Configuration
 
-Copy these files:
-- `index.html`
-- `config.yml` (edit this to fit your need)
-- `content/` (whole folder as an example)
-- `pwabuilder-sw.js` (PWA)
+Copy these files to your main folder.
+Edit `_config.yml` to your need.
+The `content` folder requires 3 sub-folders.
+`content/_hastags` folder requires `index.html`; copy content of `index.html` for every named tag.
 
-## Post File Format
+```
+/
+│   index.html (required)
+│   404.html
+│   _config.yml (edit this file)
+│   pwabuilder-sw.js (PWA)
+│
+└── content/
+│   │
+│   └── _posts/
+│   │   │   2022-06-15-the-academy.md
+│   │   │   ...
+│   │
+│   └── _writers/
+│   │   │   plato.md
+│   │   │   ...
+│   │
+│   └── _hashtags/
+│   │   │   index.html (required)
+│   │   │   bio.md
+│   │   │   ...
+```
+
+## Post Frontmatter
+
+Field        | Example               | Description
+---          | ---                   | :---
+`layout`     | `post`                | Don't add this unless you know what you're doing
+`title`      | `The Hobbit`          | Main title of the post
+`category`   | `J.R.R._Tolkien`      | Make author clickable (note the `_`)
+`writer`     | `J.R.R. Tolkien`      | Non-clickable writer's name (note no `_`)
+`color`      | `c5`                  | Values: `c1` .. `c10` (see [Card Colors]);
+`tags`       | `fantasy fiction`     | Alphanumeric words, use `-` to connect words
+`thumb`      | URL                   | Optional thumb image
+`image`      | URL                   | Optional main image
+`source`     | `The Tolkien Society` | Optional main source
+`source_url` | URL                   | Optional link to `source`
+
+Example
 
 ```md
 ---
-# Don't change this
-layout: post
-# Well, what else could this be?
-title: The Hobbit
-# This is your author's name
+title: The Hobbit: An Unexpected Party
 category: J.R.R._Tolkien
-# Alternatively
-writer: J.R.R Tolkien
-# Values: c1 .. c10
-color: c1
-# Tags separated by spaces
-tags: fiction fantasy
-# Optional title image (shows up on index)
-image: https://article.images/iamge.jpg
-# Optional source info
-source: The Tolkien Society
-source_url: https://www.tolkiensociety.org/
+color: c5
+tags: fantasy fiction
 ---
 
-Whatever is here goes gets on index.
+In a hole in the ground there lived a hobbit.
 <!--more-->
-The rest of the article.
+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.
 ```
 
-## Writer File Format
+## Writer Frontmatter
 
+Field      | Example   | Description
+---        | ---       | :---
+`layout`   | `writer`  | Don't add this unless you know what you're doing
+`size`     | `100`     | Optional profile image size
+`style`    | `center`  | Optional alignment either (`center` or `left`)
+`image`    | URL       | Optional link to profile image
 ```md
 ---
-# Don't change this
-layout: writer
-# Optional size of image
 size: 100
-# Optional position of the profile image either center or left
-style: center
-# Optional image
+style: left
 image: https://author.images/tolkien.jpg
 ---
 
 Biography.
 ```
 
+----
+
 ## Contributing
 
 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].
 [Google Fonts]: https://fonts.google.com/
 [MPL-2.0 License]: https://opensource.org/licenses/MPL-2.0
 [Contributor Covenant]: http://contributor-covenant.org
+[Card Colors]: https://acn.askclass.com/2022/06/18/card-colors
+[Build]: https://github.com/beAuthentic/askclass-news-theme/actions/workflows/gem-push.yml/badge.svg
+[Build Link]: https://github.com/beAuthentic/askclass-news-theme/actions/workflows/gem-push.yml
+[CodeQL]: https://github.com/beAuthentic/askclass-news-theme/actions/workflows/codeql-analysis.yml/badge.svg
+[CodeQL Link]: https://github.com/beAuthentic/askclass-news-theme/actions/workflows/codeql-analysis.yml

data/_config.yml

@@ -1,5 +1,5 @@
 # Custom fields
-title: "AskClass News"
+title: "AskClass News Template"
 description: >
   Exploring the intersection between education and technology;
   how innovations in cross-disciplinary learning reorients our
@@ -19,6 +19,7 @@ acn:
   logo:
     image: "logo-icon.svg"
     size: 70
+    height: 70
     alt_image: "logo.svg"
     alt_size: 200
     sizes: [ 48, 96, 144, 192, 300, 512 ]
@@ -45,6 +46,9 @@ acn:
     - icon: "copyright"
       href: "https://askclass.com"
       text: "AskClass"
+    - icon: "newspaper"
+      href: "https://news.askclass.com"
+      text: "News"
     - icon: "toys"
       href: "https://app.askclass.com"
       text: "Icebreakers"

data/_includes/foot/mathjax.html

@@ -1,2 +1,2 @@
-<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+<script defer src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+<script async id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

data/_includes/{head → foot}/pwaupdate.html

@@ -1,6 +1,6 @@
 {% assign file = site.static_files | where: "path", "/pwabuilder-sw.js" %}
 {% if file.size != 0 %}
-  <script type="module">
+  <script defer type="module">
     import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
     const el = document.createElement('pwa-update');
     document.body.appendChild(el);

data/_includes/footer.html

@@ -9,4 +9,3 @@
     {%- endfor %}
   </ul>
 </footer>
-{% include foot/mathjax.html -%}

data/_includes/grid.html

@@ -20,7 +20,7 @@
       </div>
       <div class="body">
         {% if post.image %}
-          <img src="{{ post.image }}" alt="{{ post.title }}" />
+          <img src="/assets/loading.svg" data="{{ post.thumb | default: post.image }}" alt="{{ post.title }}" />
         {% endif %}
         <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
         {{ post.excerpt }}
@@ -40,3 +40,12 @@
     </li>
   {% endfor %}
 </ul>
+
+<script defer>
+  const samps = document.querySelectorAll('img');
+  samps.forEach( el => {
+    if (el.src.match(/loading\.svg$/) && el.attributes.data) {
+      el.src = el.attributes.data.value;
+    }
+  } );
+</script>

data/_includes/head/common.html

@@ -27,8 +27,13 @@
   {% endif % %}
 
   <link rel="manifest" href="/assets/site.webmanifest" />
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{ families }}&display=swap" />
+  <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel='preconnect' href="https://fonts.googleapis.com" crossorigin />
+  <link rel="preload" as="style"
+        href="https://fonts.googleapis.com/css2?family={{ families }}&display=swap"
+        onload='this.onload=null;this.rel="stylesheet"' />
   <link rel="shortcut icon" href="/assets/{{ acn.meta.shortcut.favicon }}" />
   <link rel="icon" type="{{ acn.meta.shotcut.type }}" href="/assets/{{ acn.meta.shortcut.image }}" />
   <link rel="icon" type="image/svg+xml" href="/assets/{{ acn.logo.image }}" />

data/_includes/header.html

@@ -1,12 +1,12 @@
 <head>
   {% include head/meta.html %}
   {% include head/common.html %}
-  {% include head/pwaupdate.html %}
   {% if page.collection == 'posts' %}
-  <link href="{{ 'assets/css/md.css' | relative_url }}" rel="stylesheet" />
+  <link rel="preload" as="style" href="{{ 'assets/css/md.css' |  relative_url }}"
+        onload='this.onload=null;this.rel="stylesheet"' />
   {% else %}
-  <link href="{{ 'assets/css/grid.css' |  relative_url }}" rel="stylesheet" />
-  <link href="{{ 'assets/css/tab.css' |  relative_url }}" rel="stylesheet" />
+  <link rel="stylesheet" href="{{ 'assets/css/grid.css' |  relative_url }}" />
+  <link rel="stylesheet" href="{{ 'assets/css/tab.css' |  relative_url }}" />
   {% endif %}
-  <link href="{{ 'assets/css/style.css' |  relative_url }}" rel="stylesheet" />
+  <link rel="stylesheet" href="{{ 'assets/css/style.css' |  relative_url }}" />
 </head>

data/_includes/logo.html

@@ -2,7 +2,12 @@
   <a href="/">
     <img src="/assets/{{ include.image | default: site.acn.logo.image }}"
       width="{{ include.size | default: site.acn.logo.size }}"
+      height="{{ include.height | default: site.acn.logo.height | default: site.acn.logo.size }}"
       title="{{ site.title }}"/>
   </a>
+  {%- if include.href %}
+  <h3 class="special"><a href="{{ include.href }}">{{ include.title | default: site.title }}</a></h3>
+  {% else %}
   <h3 class="special">{{ include.title | default: site.title }}</h3>
+  {% endif -%}
 </section>

data/_layouts/default.html

@@ -4,6 +4,7 @@
   <body>
     {{ content }}
     {% include footer.html %}
+    {% include foot/pwaupdate.html %}
   </body>
 </html>
 

data/_layouts/hashtag.html

@@ -12,14 +12,18 @@
       {%- break -%}
     {%- endfor -%}
 
-    {% include logo.html image=site.acn.logo.alt_image size=site.acn.logo.alt_size title=tag -%}
+    {% include logo.html image=site.acn.logo.alt_image size=site.acn.logo.alt_size title=tag href='/hashtags' -%}
     {%- if posts.size -%}
       {% include grid.html posts=posts %}
     {%- else -%}
+      {%- capture site_tags -%}
+        {% for tag in site.tags %}{{ tag[0] }}{% unless forloop.last %},{% endunless %}{% endfor -%}
+      {% endcapture -%}
+      {% assign tags_list = site_tags | split: ',' | sort_natural -%}
       <article class="tiles">
         <ul>
-          {%- for t in site.tags -%}
-            <li><a href="/hashtags/{{ t[0] }}">{{ t[0] }}<sup>{{ t[1].size }}</sup></a></li>
+          {%- for item in tags_list -%}
+            <li><a href="/hashtags/{{ item }}">{{ item }}<sup>{{ site.tags[item].size }}</sup></a></li>
           {%- endfor -%}
         </ul>
       </article>
@@ -27,5 +31,3 @@
     {%- include footer.html %}
   </body>
 </html>
-
-

data/_layouts/post.html

@@ -12,13 +12,15 @@
           {% endif %}
 
           <h1>{{ page.title }}</h1>
-          <small>{{ page.date | date: site.acn.date_format }}</small>
+          {% assign ymd = page.date | date: "%Y-%M-%D" %}
+          {% assign date = page.date | date: site.acn.date_format %}
+          <time pubdate datetime="{{ ymd }}" title="{{ date }}">{{ date }}</time>
 
           {% include writer.html info=page %}
           {% if writer_url %}
-            <h5><a href="{{ writer_url }}">{{ writer }}</a></h5>
+            <address><a rel="author" href="{{ writer_url }}">{{ writer }}</a></address>
           {% else %}
-            <h5>{{ writer }}</h5>
+            <address rel="author">{{ writer }}</address>
           {% endif %}
         </header>
 
@@ -47,5 +49,6 @@
 
     {% include post/paginator.html %}
     {% include footer.html %}
+    {% include foot/mathjax.html -%}
   </body>
 </html>

data/_sass/_default.scss

@@ -1,39 +1,39 @@
-$mainFont: 'Open Sans', sans-serif;
-$secondaryFont: 'Teko', sans-serif;
-$specialFont: 'Josefin Sans', sans-serif;
-$monoFont: 'Share Tech Mono', monospace;
-$primaryColor: aliceblue;
-$secondaryColor: skyblue;
-$linkColor: deeppink;
-$bgColor: #222;
-$fgColor: ivory;
-$darkColor: gray;
-$contentWidth: 600px;
-$themeColor: #ffc100;
-$tertiaryColor: #2cdd88;
+$font-main: 'Open Sans', sans-serif;
+$font-secondary: 'Teko', sans-serif;
+$font-special: 'Josefin Sans', sans-serif;
+$font-mono: 'Share Tech Mono', monospace;
+$color-primary: aliceblue;
+$color-secondary: skyblue;
+$color-tertiary: #2cdd88;
+$color-bg: #222;
+$color-fg: ivory;
+$color-dark: gray;
+$color-link: deeppink;
+$color-theme: #ffc100;
+$content-width: 600px;
 
 html {
-  --specialFont: #{$specialFont};
-  --mainFont: #{$mainFont};
-  --secondaryFont: #{$secondaryFont};
-  --monoFont: #{$monoFont};
-  --primaryColor: #{$primaryColor};
-  --secondaryColor: #{$secondaryColor};
-  --linkColor: #{$linkColor};
-  --bgColor: #{$bgColor};
-  --fgColor: #{$fgColor};
-  --darkColor: #{$darkColor};
-  --contentWidth: #{$contentWidth};
-  --themeColor: #{$themeColor};
-  --tertiaryColor: #{$tertiaryColor};
+  --specialFont: #{$font-special};
+  --mainFont: #{$font-main};
+  --secondaryFont: #{$font-secondary};
+  --monoFont: #{$font-mono};
+  --primaryColor: #{$color-primary};
+  --secondaryColor: #{$color-secondary};
+  --linkColor: #{$color-link};
+  --bgColor: #{$color-bg};
+  --fgColor: #{$color-fg};
+  --darkColor: #{$color-dark};
+  --contentWidth: #{$content-width};
+  --themeColor: #{$color-theme};
+  --tertiaryColor: #{$color-tertiary};
 }
 
 body {
-  font-family: $mainFont;
+  font-family: $font-main;
   font-size: 17px;
   line-height: 1.6;
-  background-color: $bgColor;
-  color: $fgColor;
+  background-color: $color-bg;
+  color: $color-fg;
   &::-webkit-scrollbar {
     width: 6px;
     height: 6px;
@@ -51,18 +51,18 @@ hr {
   width: 300px;
   margin-bottom: 20px;
   margin-top: 40px;
-  border-color: $bgColor;
+  border-color: $color-bg;
 }
 
 a {
-  color: $linkColor;
+  color: $color-link;
   text-decoration: none;
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: $secondaryFont;
+  font-family: $font-secondary;
   font-weight: normal;
-  color: $secondaryColor;
+  color: $color-secondary;
   line-height: 1;
 }
 
@@ -74,19 +74,20 @@ h5 { font-size: 1.2em }
 h6 { font-size: 1em }
 
 .special {
-  font-family: $specialFont;
+  font-family: $font-special;
   text-align: center;
-  color: $primaryColor;
+  color: $color-primary;
   margin: 10px 0 5px 0;
 }
 
 code, pre {
-  font-family: $specialFont;
+  font-family: $font-mono;
+  font-size: 19px;
 }
 
 code {
   white-space: pre-wrap;
-  color: $primaryColor;
+  color: $color-secondary;
 }
 
 pre {
@@ -156,7 +157,7 @@ sub {
 footer {
   @include margin-top();
   @include align-center();
-  color: $darkColor;
+  color: $color-dark;
   font-size: 14px;
   ul {
     padding: 0;
@@ -165,7 +166,7 @@ footer {
       @include align-middle();
       margin: 0 5px;
       a {
-        color: $darkColor;
+        color: $color-secondary;
       }
     }
   }
@@ -195,13 +196,20 @@ article.tiles {
     grid-gap: 1rem;
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     li {
-      padding: 10px;
+      padding: 5px;
       margin: 5px;
       border-radius: 5px;
       text-align: center;
-      background-color: $secondaryColor;
+      background-color: $color-theme;
+      height: 60px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       a {
-        color: $bgColor;
+        color: $color-bg;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
       }
       sup {
         vertical-align: 3px;

data/_sass/_grid.scss

@@ -1,12 +1,12 @@
-$width: 180px;
-$height: 180px;
+$size-width: 180px;
+$size-height: 180px;
 
 ul.grid {
   list-style-type: none;
   padding-inline-start: unset;
   display: grid;
   grid-gap: 1rem;
-  grid-template-columns: repeat(auto-fit, minmax($width, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax($size-width, 1fr));
   clear: both;
 
   li {
@@ -19,6 +19,6 @@ ul.grid {
   img {
     object-fit: cover;
     width: 100%;
-    height: $height;
+    height: $size-height;
   }
 }

data/_sass/_paginator.scss

@@ -1,4 +1,4 @@
-$width: 150px;
+$size-width: 150px;
 
 .paginator-container {
   max-width: var(--contentWidth);
@@ -8,7 +8,7 @@ $width: 150px;
 }
 
 .paginator {
-  width: $width;
+  width: $size-width;
   a {
     text-align: center;
     display: block;

data/_sass/_post.scss

@@ -9,12 +9,19 @@ article {
   }
   h1 {
     margin-bottom: 0;
-    & + small {
+    & + time {
       color: var(--darkColor);
+      font-size: 15px;
     }
   }
-  h5, h5 a {
-    color: var(--tertiaryColor);
+  address {
+    font-style: normal;
+    font-family: var(--secondaryFont);
+    margin-top: 1.5em;
+    font-size: 1.4em;
+    a {
+      color: var(--tertiaryColor);
+    }
   }
   .text > p:first-child {
     font-size: 25px;

data/_sass/_tab-colors.scss

@@ -1,25 +1,25 @@
-$c1: #005F73;
-$c2: #03989E;
-$c3: #CA6702;
-$c4: #EE9B00;
-$c5: #355691;
-$c6: #4073A0;
-$c7: #3C5A14;
-$c8: #598B2C;
-$c9: #9B2226;
-$c10: #B18FCF;
+$color-1: #005F73;
+$color-2: #03989E;
+$color-3: #CA6702;
+$color-4: #EE9B00;
+$color-5: #355691;
+$color-6: #4073A0;
+$color-7: #3C5A14;
+$color-8: #598B2C;
+$color-9: #9B2226;
+$color-10: #B18FCF;
 
 html {
-  --c1: #{$c1};
-  --c2: #{$c2};
-  --c3: #{$c3};
-  --c4: #{$c4};
-  --c5: #{$c5};
-  --c6: #{$c6};
-  --c7: #{$c7};
-  --c8: #{$c8};
-  --c9: #{$c9};
-  --c10: #{$c10};
+  --c1: #{$color-1};
+  --c2: #{$color-2};
+  --c3: #{$color-3};
+  --c4: #{$color-4};
+  --c5: #{$color-5};
+  --c6: #{$color-6};
+  --c7: #{$color-7};
+  --c8: #{$color-8};
+  --c9: #{$color-9};
+  --c10: #{$color-10};
 }
 
 @mixin paint($color) {
@@ -46,32 +46,32 @@ html {
 }
 
 .c1 {
-  @include paint($c1);
+  @include paint($color-1);
 }
 .c2 {
-  @include paint($c2);
+  @include paint($color-2);
 }
 .c3 {
-  @include paint($c3);
+  @include paint($color-3);
 }
 .c4 {
-  @include paint($c4);
+  @include paint($color-4);
 }
 .c5 {
-  @include paint($c5);
+  @include paint($color-5);
 }
 .c6 {
-  @include paint($c6);
+  @include paint($color-6);
 }
 .c7 {
-  @include paint($c7);
+  @include paint($color-7);
 }
 .c8 {
-  @include paint($c8);
+  @include paint($color-8);
 }
 .c9 {
-  @include paint($c9);
+  @include paint($color-9);
 }
 .c10 {
-  @include paint($c10);
+  @include paint($color-10);
 }

data/_sass/_tab.scss

@@ -1,23 +1,23 @@
-$bg: whitesmoke;
-$fg: #444;
-$fontSize: 16px;
+$color-bg: whitesmoke;
+$color-fg: #444;
+$size-font: 16px;
 
 @mixin special() {
-  color: $bg;
+  color: $color-bg;
   font-family: var(--specialFont);
 }
 
 html {
-  --bg: #{$bg};
-  --fg: #{$fg};
-  --fontSize: #{$fontSize};
+  --bg: #{$color-bg};
+  --fg: #{$color-fg};
+  --fontSize: #{$size-font};
 }
 
 .card-tab {
   display: flex;
   flex-direction: column;
   position: relative;
-  background-image: linear-gradient(225deg, $fg 50%, transparent 50%);
+  background-image: linear-gradient(225deg, $color-fg 50%, transparent 50%);
   background-size: 120px 27px;
   background-repeat: no-repeat;
   background-position: right top;
@@ -25,9 +25,9 @@ html {
   box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
   border-top-width: 22px;
   border-top-style: solid;
-  border-top-color: $fg;
-  background-color: $bg;
-  color: $fg;
+  border-top-color: $color-fg;
+  background-color: $color-bg;
+  color: $color-fg;
   text-transform: none;
   height: calc(100% - 22px);
 }
@@ -85,12 +85,12 @@ html {
   .item {
     margin-bottom: 20px;
     text-align: left;
-    font-size: $fontSize;
+    font-size: $size-font;
     border-top: 3px outset;
     line-height: normal;
     h3 {
       margin: 0 0 0 5px;
-      color: $fg;
+      color: $color-fg;
     }
   }
   pre, code {
@@ -105,14 +105,14 @@ html {
   justify-content: space-between;
   a {
     text-decoration: none;
-    font-size: $fontSize;
+    font-size: $size-font;
     display: contents;
     &.button {
       display: flex;
       border-radius: 5px;
       padding: 5px 10px;
       color: white!important;
-      background-color: $fg;
+      background-color: $color-fg;
     }
   }
   .tags {

data/_sass/_table.scss

@@ -1,16 +1,13 @@
-$odd: #2a2a2a;
-$even: #2f2f2f;
+$color-odd: #2a2a2a;
+$color-even: #2f2f2f;
 
 table {
   table-layout: fixed;
-  th {
-    background-color: $even;
-  }
   tr:nth-child(odd) {
-    background-color: $odd;
+    background-color: $color-odd;
   }
-  tr:nth-child(even) {
-    background-color: $even;
+  th, tr:nth-child(even) {
+    background-color: $color-even;
   }
   td, th {
     vertical-align: top;

data/assets/loading.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+<g transform="translate(50 50)">
+<g>
+<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
+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>
+</svg>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: askclass-news-theme
 version: !ruby/object:Gem::Version
-  version: 0.4.1
+  version: 0.5.0
 platform: ruby
 authors:
 - AskClass
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-06-23 00:00:00.000000000 Z
+date: 2022-06-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -35,11 +35,11 @@ files:
 - README.md
 - _config.yml
 - _includes/foot/mathjax.html
+- _includes/foot/pwaupdate.html
 - _includes/footer.html
 - _includes/grid.html
 - _includes/head/common.html
 - _includes/head/meta.html
-- _includes/head/pwaupdate.html
 - _includes/header.html
 - _includes/logo.html
 - _includes/post/nextprev.html
@@ -64,6 +64,7 @@ files:
 - assets/css/style.scss
 - assets/css/tab.scss
 - assets/favicon.ico
+- assets/loading.svg
 - assets/logo-144.png
 - assets/logo-192.png
 - assets/logo-300.png