type-on-strap 2.4.13 → 2.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2420c122c17be2f45cf263d4e7339bd1bb193f985446014de4d8aab3f23bd8be
-  data.tar.gz: 26de41669add59557ccfed11db3a3b0ef67ff18d348132c3f703d06fd31f6ff3
+  metadata.gz: c7b245eafb6465e6bd1a012032498fb81901591c09680290587ec232ea579643
+  data.tar.gz: f81e6aaf2e9ef2dc13f6275da54a05143cb305a88dbd4e6b3af6cad085555e2c
 SHA512:
-  metadata.gz: f3b2c6aca18ecf499017e741cf309ec687f971b1a93668d6ecd9caebe038fcd1707d240d2d351c12466982480c05bfaf75830862c78451a9b5760902f5d4fc5f
-  data.tar.gz: c26e9a0672a93316ec4b305fe567ba9769ad40a15eb78eb2cc3899817676aabd7dc88a97584fe1cd2e034498dcf61106d2ba51420678c65983784e9492e61c8b
+  metadata.gz: ca5de0fb72854009a6ede7a395e65c572c2100a80d6f338f90dd6cc0b8f08199aca694f54a1be26f01231681673173662caa4b1bc7c277f736b9d14d4569aeef
+  data.tar.gz: 44fe3825598c76e401b010c7b9630b4b7c1a83309c609ef7cff81efaeded6e78242447664e0c567ca88b0cac361fc9ca02da921d944f64a24f6d301d71680c1c

data/README.md

@@ -40,8 +40,6 @@ Based on Rohan Chandra [type-theme](https://github.com/rohanchandra/type-theme)
 
 Check out this tutorial: [Use as Ruby Gem](#use-as-ruby-gem-)
 
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#/https://github.com/sylhare/Type-On-Strap)
-
 ## Structure
 
 Here are the main files of the template

data/_includes/blog/blog.liquid

@@ -1,9 +1,9 @@
-<div class="posts">
+<div class="posts" data-testid="blog-posts">
     {% unless paginator.posts %}
     <article><section class="post-content"><p>There are no blog posts</p></section></article>
     {% endunless %}
     {% for post in paginator.posts %}
-    <div class="post-teaser">
+    <div class="post-teaser" data-testid="blog-post-teaser">
         {% if post.thumbnail %}
         <div class="post-img">
             <a aria-label="{{ post.title }}" href="{{ post.url | relative_url }}">
@@ -14,7 +14,7 @@
         <span>
           <header>
             <h1>
-              <a aria-label="{{ post.title }}" class="post-link" href="{{ post.url | relative_url }}">
+              <a aria-label="{{ post.title }}" class="post-link" data-testid="blog-post-link" href="{{ post.url | relative_url }}">
                 {{ post.title }}
               </a>
             </h1>

data/_includes/blog/blog_nav.liquid

@@ -1,5 +1,5 @@
 {% if paginator.total_pages > 1 %}
-<div class="pagination">
+<div class="pagination" data-testid="blog-pagination">
     <div class="previous">
         
         {% if paginator.previous_page and paginator.previous_page != 1%}

data/_includes/blog/post_footer.liquid

@@ -13,6 +13,7 @@
         .post-content a { color: {{ color }} !important; }
         .share-buttons a { color: {{ color }} !important; }
         .tag-list a:not(:hover) { color: {{ color }} !important; }
+        .category-list a:not(:hover) { color: {{ color }} !important; }
         div#post-nav a { color: {{ color }} !important; }
         footer a { color: {{ color }} !important; }
         .site-header nav a:hover {  color: {{ color }} !important; }

data/_includes/default/category_list.liquid

@@ -0,0 +1,22 @@
+{% assign categories = include.categories | split:'|' | sort | uniq %}
+
+{% if categories.size > 0 %}
+  <div class="category-list" data-testid="category-list">
+    <ul>
+      {% if categories.size == 1 %}
+        <li class="meta">Category</li>
+      {% else %}
+        <li class="meta">Categories</li>
+      {% endif %}
+
+      {% for category in categories %}
+        <li><a class="button" data-testid="category-link" href="{{ site.baseurl }}/categories#{{ category | cgi_escape }}">
+          <p><i class="fas fa-folder fa-fw fa-sm"></i> {{ category }}</p>
+        </a></li>
+      {% endfor %}
+    </ul>
+  </div>
+{% else %}
+  <div class="category-list"></div>
+{% endif %}
+

data/_includes/default/head.liquid

@@ -24,6 +24,11 @@
     <!--Favicon-->
     <link rel="shortcut icon" href="{{ site.favicon | relative_url }}" type="image/x-icon">
 
+    <!-- Preconnect to Cusdis for faster loading when comments become visible -->
+    {% if site.data.comments.cusdis.app_id or site.comments.cusdis_app_id or site.cusdis_app_id %}
+    <link rel="preconnect" href="https://cusdis.com">
+    {% endif %}
+
     {% if page.bootstrap %}
     <!-- Bootstrap-4.1.3 isolation CSS -->
     <link rel="stylesheet" type="text/css" href="{{ '/assets/css/vendor/bootstrap-iso.min.css' | relative_url }}">
@@ -35,18 +40,18 @@
     <script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
     {% endif %}
 
-    <!-- KaTeX 0.16.25 -->
+    <!-- KaTeX 0.16.28 -->
     {% if site.katex or site.theme_settings.katex %}
     <script defer src="{{ '/assets/js/vendor/katex.min.js' | relative_url }}"></script>
     <script defer src="{{ '/assets/js/vendor/katex.auto-render.min.js' | relative_url }}" onload="renderMathInElement(document.body);"></script>
     {% endif %}
 
-    <!-- Mermaid 11.12.0 -->
+    <!-- Mermaid 11.12.2 -->
     {% if site.mermaid %}
     <script defer src="{{ '/assets/js/vendor/mermaid.min.js' | relative_url }}"></script>
     {% endif %}
 
-    <!-- Simple Jekyll Search 1.10.0 -->
+    <!-- Simple Jekyll Search 2.1.1 -->
     <script src="{{ '/assets/js/vendor/simple-jekyll-search.min.js' | relative_url }}" type="text/javascript"></script>
 
     <!-- Google Analytics / Cookie Consent -->

data/_includes/default/tags_list.liquid

@@ -1,7 +1,7 @@
 {% assign tags = include.tags | split:'|' | sort | uniq %}
 
 {% if tags.size > 0 %}
-  <div class="tag-list">
+  <div class="tag-list" data-testid="tag-list">
     <ul>
       {% if tags.size == 1 %}
         <li class="meta">Tag</li>
@@ -10,7 +10,7 @@
       {% endif %}
 
       {% for tag in tags %}
-        <li><a class="button" href="{% unless 'Tags' == page.title %}{{ site.baseurl }}/tags{% endunless %}#{{ tag | cgi_escape }}">
+        <li><a class="button" data-testid="tag-link" href="{% unless 'Tags' == page.title %}{{ site.baseurl }}/tags{% endunless %}#{{ tag | cgi_escape }}">
           <p><i class="fas fa-tag fa-fw fa-sm"></i> {{ tag }}</p>
         </a></li>
       {% endfor %}

data/_includes/portfolio.html

@@ -1,14 +1,14 @@
 <!-- Portfolio Grid Section -->
-<div class="portfolio-grid">
+<div class="portfolio-grid" data-testid="portfolio-grid">
     {% for item in site.portfolio %}
-    <div class="portfolio-cell">
-        <a class="portfolio-link" data-keyboard="true" href="{{ item.url | relative_url }}">
-            <div class="caption" title="{{ item.title }}">
+    <div class="portfolio-cell" data-testid="portfolio-item">
+        <a class="portfolio-link" data-testid="portfolio-item-link" data-keyboard="true" href="{{ item.url | relative_url }}">
+            <div class="caption" data-testid="portfolio-item-caption" title="{{ item.title }}">
                 <div class="caption-content">
                     <i class="fas fa-search-plus fa-3x"></i>
                 </div>
             </div>
-            <img alt="" class="" src="{{ item.img | relative_url }}">
+            <img alt="" class="" data-testid="portfolio-item-image" src="{{ item.img | relative_url }}">
         </a>
     </div>
     {% endfor %}

data/_includes/social/cusdis.liquid

@@ -5,9 +5,9 @@
   data-page-url="{{ page.url | absolute_url }}"
   data-page-title="{{ page.title }}"
   data-theme="{{ site.color_theme }}"
+  data-lazy-load="true"
+  {% if site.data.comments.cusdis.lang or site.data.language.cusdis_lang %}
+  data-lang="{% if site.data.comments.cusdis.lang %}{{ site.data.comments.cusdis.lang }}{% else %}{{ site.data.language.cusdis_lang }}{% endif %}"
+  {% endif %}
 ></div>
-
-{% if site.data.comments.cusdis.lang or site.data.language.cusdis_lang %}
-<script defer src="https://cusdis.com/js/widget/lang/{% if site.data.comments.cusdis.lang %}{{ site.data.comments.cusdis.lang }}{% else %}{{ site.data.language.cusdis_lang }}{% endif %}.js"></script>
-{% endif %}
-<script defer src="https://cusdis.com/js/cusdis.es.js"></script>
+<script defer src="{{ '/assets/js/comments-lazy-load.min.js' | relative_url }}"></script>

data/_includes/social/disqus.liquid

@@ -1,12 +1,7 @@
-<div class="comments">
-    <div id="disqus_thread"></div>
-    <script type="text/javascript">
-      var disqus_shortname = '{{ site.data.comments.disqus.shortname }}' || '{{ site.comments.disqus_shortname }}' || '{{ site.disqus_shortname }}';
-      (function() {
-        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-      })();
-    </script>
-    <noscript>{{ site.data.language.str_javascript_required_disqus | default: "Please enable JavaScript to view comments." }}</noscript>
+<div class="comments" id="disqus_thread"
+  data-lazy-load="true"
+  data-shortname="{% if site.data.comments.disqus.shortname %}{{ site.data.comments.disqus.shortname }}{% elsif site.comments.disqus_shortname %}{{ site.comments.disqus_shortname }}{% else %}{{ site.disqus_shortname }}{% endif %}"
+>
+  <noscript>{{ site.data.language.str_javascript_required_disqus | default: "Please enable JavaScript to view comments." }}</noscript>
 </div>
+<script defer src="{{ '/assets/js/comments-lazy-load.min.js' | relative_url }}"></script>

data/_includes/social/giscus.liquid

@@ -1,17 +1,17 @@
-<script src="https://giscus.app/client.js"
-        data-repo="{{ site.data.comments.giscus.repo }}"
-        data-repo-id="{{ site.data.comments.giscus.repo-id }}"
-        {% if site.data.comments.giscus.category %}data-category="{{ site.data.comments.giscus.category }}"{% endif %}
-        data-category-id="{{ site.data.comments.giscus.category-id }}"
-        data-mapping="{{ site.data.comments.giscus.mapping }}"
-        {% if site.data.comments.giscus.term %}data-term="{{ site.data.comments.giscus.term }}"{% endif %}
-        data-strict="{% if site.data.comments.giscus.strict %}{{ site.data.comments.giscus.strict }}{% else %}0{% endif %}"
-        data-reactions-enabled="{% if site.data.comments.giscus.reactions-enabled %}{{ site.data.comments.giscus.reactions-enabled }}{% else %}1{% endif %}"
-        data-emit-metadata="{% if site.data.comments.giscus.emit-metadata %}{{ site.data.comments.giscus.emit-metadata }}{% else %}0{% endif %}"
-        data-input-position="{% if site.data.comments.giscus.input-position %}{{ site.data.comments.giscus.input-position }}{% else %}bottom{% endif %}"
-        data-theme="{% if site.data.comments.giscus.theme %}{{ site.data.comments.giscus.theme }}{% elsif site.color_theme == 'dark' %}dark{% else %}light{% endif %}"
-        data-lang="{% if site.data.comments.giscus.lang %}{{ site.data.comments.giscus.lang }}{% else %}en{% endif %}"
-        {% if site.data.comments.giscus.loading %}data-loading="{{ site.data.comments.giscus.loading }}"{% endif %}
-        crossorigin="anonymous"
-        async>
-</script>
+<div id="giscus_thread"
+  data-lazy-load="true"
+  data-repo="{{ site.data.comments.giscus.repo }}"
+  data-repo-id="{{ site.data.comments.giscus.repo-id }}"
+  {% if site.data.comments.giscus.category %}data-category="{{ site.data.comments.giscus.category }}"{% endif %}
+  data-category-id="{{ site.data.comments.giscus.category-id }}"
+  data-mapping="{{ site.data.comments.giscus.mapping }}"
+  {% if site.data.comments.giscus.term %}data-term="{{ site.data.comments.giscus.term }}"{% endif %}
+  data-strict="{% if site.data.comments.giscus.strict %}{{ site.data.comments.giscus.strict }}{% else %}0{% endif %}"
+  data-reactions-enabled="{% if site.data.comments.giscus.reactions-enabled %}{{ site.data.comments.giscus.reactions-enabled }}{% else %}1{% endif %}"
+  data-emit-metadata="{% if site.data.comments.giscus.emit-metadata %}{{ site.data.comments.giscus.emit-metadata }}{% else %}0{% endif %}"
+  data-input-position="{% if site.data.comments.giscus.input-position %}{{ site.data.comments.giscus.input-position }}{% else %}bottom{% endif %}"
+  data-theme="{% if site.data.comments.giscus.theme %}{{ site.data.comments.giscus.theme }}{% elsif site.color_theme == 'dark' %}dark{% else %}light{% endif %}"
+  data-lang="{% if site.data.comments.giscus.lang %}{{ site.data.comments.giscus.lang }}{% else %}en{% endif %}"
+  {% if site.data.comments.giscus.loading %}data-loading="{{ site.data.comments.giscus.loading }}"{% endif %}
+></div>
+<script defer src="{{ '/assets/js/comments-lazy-load.min.js' | relative_url }}"></script>

data/_includes/social/utterances.liquid

@@ -1,8 +1,8 @@
-<script src="https://utteranc.es/client.js"
-        repo='{% if site.data.comments.utterances.repo %}{{ site.data.comments.utterances.repo }}{% else %}{{ site.comments.utterances.repo }}{% endif %}'
-        issue-term="{% if site.data.comments.utterances.issue-term %}{{ site.data.comments.utterances.issue-term }}{% else %}{{ site.comments.utterances.issue-term }}{% endif %}"
-        theme="{% if site.data.comments.utterances.theme %}{{ site.data.comments.utterances.theme }}{% elsif site.comments.utterances.theme %}{{ site.comments.utterances.theme }}{% elsif site.color_theme == 'dark' %}github-dark{% else %}github-light{% endif %}"
-		{% if site.data.comments.utterances.label or site.comments.utterances.label %}label="{% if site.data.comments.utterances.label %}{{ site.data.comments.utterances.label }}{% else %}{{ site.comments.utterances.label }}{% endif %}"{% endif %}
-        crossorigin="anonymous"
-        async>
-</script>
+<div id="utterances_thread"
+  data-lazy-load="true"
+  data-repo="{% if site.data.comments.utterances.repo %}{{ site.data.comments.utterances.repo }}{% else %}{{ site.comments.utterances.repo }}{% endif %}"
+  data-issue-term="{% if site.data.comments.utterances.issue-term %}{{ site.data.comments.utterances.issue-term }}{% else %}{{ site.comments.utterances.issue-term }}{% endif %}"
+  data-theme="{% if site.data.comments.utterances.theme %}{{ site.data.comments.utterances.theme }}{% elsif site.comments.utterances.theme %}{{ site.comments.utterances.theme }}{% elsif site.color_theme == 'dark' %}github-dark{% else %}github-light{% endif %}"
+  {% if site.data.comments.utterances.label or site.comments.utterances.label %}data-label="{% if site.data.comments.utterances.label %}{{ site.data.comments.utterances.label }}{% else %}{{ site.comments.utterances.label }}{% endif %}"{% endif %}
+></div>
+<script defer src="{{ '/assets/js/comments-lazy-load.min.js' | relative_url }}"></script>

data/_layouts/categories.liquid

@@ -5,17 +5,24 @@ layout: page
 <div class="home">
     <div id="categories">
         <section class="bg"></section>
-        <ul class="category-clouds">
-            {% for category in site.categories %}
-                <a href="#{{ category | first | cgi_escape }}" class="category-anchor">
-                    <li>
-                        {{ category | first }} 
-                        <!-- {{ category | last | size | times: 100 | divided_by: site.tags.size | plus: 50 | divided_by: 100.0 }} -->
-                        <!-- <span class="category-number">{{ category | last | size }}</span> -->
-                    </li>
-                </a>
-            {% endfor %}
-        </ul>
+        <div class="category-list">
+            <p class="category-links">
+                {% for category in site.categories %}
+                    <a href="#{{ category | first | cgi_escape }}" class="category-link">{{ category | first }}</a> {{ category | last | size }}{% unless forloop.last %}<span class="separator"> / </span>{% endunless %}
+                {% endfor %}
+
+                {% assign uncategorized_count = 0 %}
+                {% for post in site.posts %}
+                    {% if post.categories.size == 0 %}
+                        {% assign uncategorized_count = uncategorized_count | plus: 1 %}
+                    {% endif %}
+                {% endfor %}
+                {% if uncategorized_count > 0 %}
+                    <span class="separator"> / </span>
+                    <a href="#uncategorized" class="category-link">Uncategorized</a> {{ uncategorized_count }}
+                {% endif %}
+            </p>
+        </div>
         <div class="category-groups">
             {% for category in site.categories %}
                 <div class="category-group">
@@ -28,16 +35,71 @@ layout: page
                     </h4>
                     <div class="items">
                         {% for post in site.categories[group] %}
-                            <a href="{{ post.url | relative_url }}" class="category-post-link">
-                                <div class="item">
-                                    <p class="meta">{{ post.date | date: site.data.language.str_date_format | default: '%B %-d, %Y' }}</p>
-                                    <p class="title">{{ post.title }}</p>
-                                </div>
-                            </a>
+                            <div class="item-wrapper">
+                                <a href="{{ post.url | relative_url }}" class="category-post-link">
+                                    <div class="item">
+                                        <div class="item-content">
+                                            <p class="meta">{{ post.date | date: site.data.language.str_date_format | default: '%B %-d, %Y' }}</p>
+                                            <p class="title">{{ post.title }}</p>
+                                        </div>
+                                    </div>
+                                </a>
+                                {% if post.tags.size > 0 %}
+                                    <div class="item-tags">
+                                        {% for tag in post.tags %}
+                                            <a href="{{ site.baseurl }}/tags#{{ tag | cgi_escape }}" class="tag-link">
+                                                <span class="tag">{{ tag }}</span>
+                                            </a>
+                                        {% endfor %}
+                                    </div>
+                                {% endif %}
+                            </div>
                         {% endfor %}
                     </div>
                 </div>
             {% endfor %}
+
+            <!-- Uncategorized posts -->
+            {% assign uncategorized_posts = "" | split: "" %}
+            {% for post in site.posts %}
+                {% if post.categories.size == 0 %}
+                    {% assign uncategorized_posts = uncategorized_posts | push: post %}
+                {% endif %}
+            {% endfor %}
+
+            {% if uncategorized_posts.size > 0 %}
+                <div class="category-group">
+                    <h4 id="uncategorized" class="title">
+                        Uncategorized
+                        {% if page.showCounts %}
+                            ({{uncategorized_posts.size}})
+                        {% endif %}
+                    </h4>
+                    <div class="items">
+                        {% for post in uncategorized_posts %}
+                            <div class="item-wrapper">
+                                <a href="{{ post.url | relative_url }}" class="category-post-link">
+                                    <div class="item">
+                                        <div class="item-content">
+                                            <p class="meta">{{ post.date | date: site.data.language.str_date_format | default: '%B %-d, %Y' }}</p>
+                                            <p class="title">{{ post.title }}</p>
+                                        </div>
+                                    </div>
+                                </a>
+                                {% if post.tags.size > 0 %}
+                                    <div class="item-tags">
+                                        {% for tag in post.tags %}
+                                            <a href="{{ site.baseurl }}/tags#{{ tag | cgi_escape }}" class="tag-link">
+                                                <span class="tag">{{ tag }}</span>
+                                            </a>
+                                        {% endfor %}
+                                    </div>
+                                {% endif %}
+                            </div>
+                        {% endfor %}
+                    </div>
+                </div>
+            {% endif %}
         </div>
     </div>
 </div>

data/_layouts/default.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!--
-    Type on Strap jekyll theme v2.4.13
+    Type on Strap jekyll theme v2.5.0
     Theme free for personal and commercial use under the MIT license
     https://github.com/sylhare/Type-on-Strap/blob/master/LICENSE
 -->
@@ -10,9 +10,9 @@
   <body>
     {% capture _navbar %}{% include default/navbar.liquid %}{% endcapture %}
     {{ _navbar | split: " " | join: " "}}
-    <div class="content">
+    <main class="content">
       {{ content }}
-    </div>
+    </main>
     {% capture _footer %}{% include default/footer.liquid %}{% endcapture %}
     {{ _footer | split: " " | join: " "}}
   </body>

data/_layouts/page.liquid

@@ -23,8 +23,14 @@ layout: default
         </div>
         {% endif %}
     </section>
-    <!-- Tag list for portfolio -->
-    {% capture tag_list %}{{ page.tags | join: "|" }}{% endcapture %}
-    {% capture _tags %}{% include default/tags_list.liquid tags=tag_list %}{% endcapture %}
-    {{ _tags | split: " " | join: " " }}
+    <!-- Category and Tag list -->
+    <div class="tag-category-container">
+        <!-- Category list -->
+        {% capture category_list %}{{ page.categories | join: "|" }}{% endcapture %}
+        {% include default/category_list.liquid categories=category_list %}
+
+        <!-- Tag list for portfolio -->
+        {% capture tag_list %}{{ page.tags | join: "|" }}{% endcapture %}
+        {% include default/tags_list.liquid tags=tag_list %}
+    </div>
 </article>

data/_layouts/post.liquid

@@ -22,9 +22,16 @@ layout: default
     <!-- Social media shares -->
     {% include social/share_buttons.liquid %}
 
-    <!-- Tag list -->
-    {% capture tag_list %}{{ page.tags | join: "|" }}{% endcapture %}
-    {% include default/tags_list.liquid tags=tag_list %}
+    <!-- Category and Tag list -->
+    <div class="tag-category-container">
+        <!-- Category list -->
+        {% capture category_list %}{{ page.categories | join: "|" }}{% endcapture %}
+        {% include default/category_list.liquid categories=category_list %}
+
+        <!-- Tag list -->
+        {% capture tag_list %}{{ page.tags | join: "|" }}{% endcapture %}
+        {% include default/tags_list.liquid tags=tag_list %}
+    </div>
 
 </article>
 

data/_layouts/search.liquid

@@ -14,11 +14,18 @@ layout: page
             searchInput: document.getElementById('search-input'),
             resultsContainer: document.getElementById('results-container'),
             json: '{{ "/assets/data/search.liquid" | relative_url }}',
-            searchResultTemplate: '<div class="search-title"><a href="{url}"><h3> {title}</h3></a><div class="meta">{date} <div class="right"><i class="fas fa-tag"></i> {tags}</div></div><p>{excerpt}</p></div><hr> ',
+            searchResultTemplate: '<div class="search-title" data-testid="search-result-item"><a href="{url}" data-testid="search-result-link"><h3>{title}</h3></a><div class="meta">{date} <div class="right"><i class="fas fa-tag"></i> {tags}</div></div><p>{content}</p></div><hr>',
             noResultsText: '{{ site.data.language.str_no_result_found | default: "No result found" }}',
             limit: 10,
-            strategy: 'wildcard',
-            exclude: []
+            strategy: {
+                type: 'hybrid',
+            },
+            exclude: [],
+            templateMiddleware: window.createHighlightTemplateMiddleware({
+                className: 'search-highlight',
+                maxLength: 100,
+                contextLength: 150
+            })
         })
     </script>
 </section>

data/_sass/external/_katex.scss

@@ -1,5 +1,5 @@
 /*!
- * KaTeX v0.16.25
+ * KaTeX v0.16.28
  * Plus added customizations for the theme
  */
 

data/_sass/external/katex/katex.scss

@@ -154,7 +154,7 @@ $katex-font-path: "../../assets/fonts/katex" !default;
   border-color: currentColor;
 }
 .katex .katex-version::after {
-  content: "0.16.25";
+  content: "0.16.28";
 }
 .katex .katex-mathml {
   /* Accessibility hack to only show to screen readers

data/_sass/layouts/_categories.scss

@@ -1,41 +1,29 @@
 #archive,
 #categories {
-  .archive-clouds,
-  .category-clouds {
-    margin: 30px 0 30px;
+  .category-list {
+    width: 100%;
+    padding-bottom: $padding-x-small;
+    text-align: center;
 
-    li {
-      background-color: var(--link);
-      display: inline-block;
-      margin-bottom: 10px;
-      margin-right: 3px;
-      padding: 0 15px;
-      border-radius: 20px;
-      color: var(--header-text);
-      font-weight: 600;
-      font-size: 0.8rem;
-      line-height: 35px;
-      letter-spacing: -0.03rem;
-
-      .category-number {
-        vertical-align: super;
-        font-size: 0.625rem;
-      }
-
-      .p {
-        opacity: 1;
-      }
+    .category-links {
+      margin: 30px 0;
+      color: var(--meta);
+      font-size: 0.9em;
     }
 
-    li:hover {
-      background-color: var(--header-background) !important;
-      color: var(--header-text);
+    .category-link {
+      color: var(--meta);
+      text-decoration: underline;
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: var(--link);
+        text-decoration: underline;
+      }
     }
 
-    .archive-anchor:hover,
-    .category-anchor:hover {
-      text-decoration: none !important;
-      filter: none;
+    .separator {
+      color: var(--meta);
     }
   }
 
@@ -50,9 +38,26 @@
     .items {
       padding-left: $padding-medium;
 
-      .item {
+      .item-wrapper {
         position: relative;
         margin: 25px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 15px;
+      }
+
+      .category-post-link {
+        flex: 1;
+        min-width: 0;
+        text-decoration: none;
+      }
+
+      .item {
+        .item-content {
+          flex: 1;
+          min-width: 0;
+        }
 
         .meta {
           color: var(--meta);
@@ -65,7 +70,32 @@
         }
       }
 
-      .item::before {
+      .item-tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 5px;
+        align-items: center;
+        justify-content: flex-end;
+
+        .tag-link {
+          text-decoration: none;
+        }
+
+        .tag {
+          background-color: var(--selection);
+          color: var(--text);
+          padding: 3px 10px;
+          border-radius: 12px;
+          font-size: 0.75rem;
+          font-weight: 500;
+          white-space: nowrap;
+          transition: background-color 0.2s ease, color 0.2s ease, border 0.2s ease;
+          cursor: pointer;
+          border: 1px solid transparent;
+        }
+      }
+
+      .item-wrapper::before {
         content: "";
         position: absolute;
         left: -5%;
@@ -75,17 +105,28 @@
         height: 100%;
       }
 
-      .archive-post-link:hover,
+      .item-wrapper:hover::before {
+        background-color: var(--link);
+      }
+
       .category-post-link:hover {
         text-decoration: none;
 
         .meta, .title {
-          color: var(--header-background);
+          color: var(--link);
         }
+      }
 
-        .item::before {
-          background-color: var(--link);
-        }
+      .item-wrapper:hover .tag {
+        background-color: var(--link);
+        color: var(--header-text);
+        border-color: transparent;
+      }
+
+      .item-wrapper:hover .tag:hover {
+        background-color: var(--page-background);
+        color: var(--link);
+        border-color: var(--link);
       }
     }
   }