type-on-strap 2.4.13 → 2.5.1

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.1
     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

@@ -15,16 +15,16 @@ layout: default
         </div>
     </header>
     <section class="post-content">
-    {% if page.bootstrap %}
-        <div class="bootstrap-iso">
-            {% endif %}
-            {{ content }}
-            {% if page.bootstrap %}
-        </div>
-        {% endif %}
+        {{ content }}
     </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

@@ -14,17 +14,22 @@ layout: default
     </header>
 
     <section class="post-content">
-    {% if page.bootstrap %}<div class="bootstrap-iso">{% endif %}
-            {{ content }}
-    {% if page.bootstrap %}</div>{% endif %}
+        {{ content }}
     </section>
 
     <!-- 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/base/_global.scss

@@ -17,10 +17,6 @@ html {
   background: var(--selection);
 }
 
-::-moz-selection {
-  background: var(--selection);
-}
-
 body {
   color: var(--text);
   font-family: $font-family-main;
@@ -141,7 +137,7 @@ summary {
 }
 
 blockquote {
-  border-left: 2px solid #9fd2e3;
+  border-left: 2px solid var(--blockquote-border);
   margin: 1em 1em;
   padding: 0.75em 1em;
   background-color: var(--blockquote);
@@ -215,7 +211,7 @@ ul {
 hr {
   border: 0;
   border-top: 1px solid var(--border);
-  border-bottom: 1px solid #fff;
+  border-bottom: 1px solid var(--background);
   margin: 1em 0;
 }
 
@@ -225,11 +221,11 @@ a {
 }
 
 kbd {
-  background-color: #eee;
+  background-color: var(--kbd-background);
   border-radius: 3px;
-  border: 1px solid #b4b4b4;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
-  color: #333;
+  border: 1px solid var(--kbd-border);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
+  color: var(--kbd-color);
   display: inline-block;
   font-size: .85em;
   font-weight: 700;
@@ -259,7 +255,7 @@ details {
   width: 100%;
   background: rgba(2, 2, 2, 0.85);
   color: lightgray;
-  z-index: 1000;
+  z-index: $z-index-cookie;
 
   & a {
     display: inline-block;

data/_sass/base/_utility.scss

@@ -1,35 +1,14 @@
 // Mix-ins
-%padding-nav {
-  padding: $padding-small $padding-x-large;
-  @media (max-width: $xl-break) {
-    padding: $padding-small ($padding-large * 2);
-  }
-  @media (max-width: $l-break) {
-    padding: $padding-small $padding-large;
-  }
-  @media (max-width: $m-break) {
-    padding: $padding-small $padding-medium;
-  }
-  @media (max-width: $sm-break) {
-    padding: $padding-small $padding-x-small;
-  }
+@mixin responsive-padding($v, $sm-h) {
+  padding: $v $padding-x-large;
+  @media (max-width: $xl-break) { padding: $v ($padding-large * 2); }
+  @media (max-width: $l-break)  { padding: $v $padding-large; }
+  @media (max-width: $m-break)  { padding: $v $padding-medium; }
+  @media (max-width: $sm-break) { padding: $v $sm-h; }
 }
 
-%padding-post {
-  padding: $padding-x-small $padding-x-large;
-  @media (max-width: $xl-break) {
-    padding: $padding-x-small ($padding-large * 2);
-  }
-  @media (max-width: $l-break) {
-    padding: $padding-x-small $padding-large;
-  }
-  @media (max-width: $m-break) {
-    padding: $padding-x-small $padding-medium;
-  }
-  @media (max-width: $sm-break) {
-    padding: $padding-x-small $padding-small;
-  }
-}
+%padding-nav  { @include responsive-padding($padding-small, $padding-x-small); }
+%padding-post { @include responsive-padding($padding-x-small, $padding-small); }
 
 %padding-header {
   padding: $padding-medium $padding-large;

data/_sass/base/_variables.scss

@@ -25,6 +25,37 @@ $m-break: 1000px;
 $break: 768px;
 $sm-break: 576px;
 $x-sm-break: 320px;
+$xs-l-break: 450px;
+$xs-m-break: 400px;
+$xs-s-break: 380px;
+
+/* TRANSITIONS */
+$transition-fast: 0.15s;
+$transition-base: 0.2s;
+$transition-slow: 0.5s;
+
+/* Z-INDEX */
+$z-index-cookie: 1000;
+
+/* COMPONENT SIZES */
+$post-img-height: 250px;
+$post-img-height-mobile: 150px;
+$portfolio-max-width: 400px;
+$gallery-item-width: 32.6%;
+$gallery-gutter: 1%;
+
+/* MIXINS */
+@mixin respond-to($breakpoint) {
+  @if $breakpoint == 'xl'    { @media screen and (max-width: $xl-break)   { @content; } }
+  @if $breakpoint == 'l'     { @media screen and (max-width: $l-break)    { @content; } }
+  @if $breakpoint == 'm'     { @media screen and (max-width: $m-break)    { @content; } }
+  @if $breakpoint == 'break' { @media screen and (max-width: $break)      { @content; } }
+  @if $breakpoint == 'sm'    { @media screen and (max-width: $sm-break)   { @content; } }
+  @if $breakpoint == 'x-sm'  { @media screen and (max-width: $x-sm-break) { @content; } }
+  @if $breakpoint == 'xs-l'  { @media screen and (max-width: $xs-l-break) { @content; } }
+  @if $breakpoint == 'xs-m'  { @media screen and (max-width: $xs-m-break) { @content; } }
+  @if $breakpoint == 'xs-s'  { @media screen and (max-width: $xs-s-break) { @content; } }
+}
 
 
 /* THEME COLOR SCHEMES */
@@ -47,7 +78,12 @@ html, html[data-theme="light"] {
   --h4: #262626;
   --h5: #262626;
   --h6: #262626;
-  --border: rgba(0, 0, 0, 0.2);
+  --border: rgb(229, 229, 229);
+  --blockquote-border: #9fd2e3;
+  --kbd-background:    #eee;
+  --kbd-border:        #b4b4b4;
+  --kbd-color:         #333;
+  --search-highlight:  rgba(255, 221, 76, 0.5);
 }
 
 html[data-theme="dark"] {
@@ -69,7 +105,12 @@ html[data-theme="dark"] {
   --h4: #00af9e;
   --h5: #6bac00;
   --h6: #ff5c00;
-  --border: rgba(255, 255, 255, 0.5); // border
+  --border: rgba(255, 255, 255, 0.15);
+  --blockquote-border: #546e7a;
+  --kbd-background:    #3a3f4b;
+  --kbd-border:        #5a6070;
+  --kbd-color:         #cdd9e5;
+  --search-highlight:  rgba(167, 139, 250, 0.5);
   --cusdis--color-text-default: var(--text);
   --cusdis--color-comment-username-text: var(--link);
 }

data/_sass/external/_font-awesome.scss

@@ -1,5 +1,5 @@
 /*!
- * Type-on-strap Font Awesome kit v6.7.1
+ * Type-on-strap Font Awesome kit v6.7.2
  * Find the version and license of the included Font Awesome here: _sass/external/font-awesome/fontawesome.scss
  */
 $fa-inverse: var(--background);

data/_sass/external/_katex.scss

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

data/_sass/external/_pacifico.scss

@@ -6,12 +6,9 @@ $pacifico-font-path: "../../assets/fonts/Pacifico" !default;
 
 @font-face {
     font-family: 'Pacifico';
-    src: url('#{$pacifico-font-path}/Pacifico.eot'); /* IE9 Compat Modes */
-    src: url('#{$pacifico-font-path}/Pacifico.eot?#iefix') format('embedded-opentype'),
-         url('#{$pacifico-font-path}/Pacifico.woff2') format('woff2'),
-         url('#{$pacifico-font-path}/Pacifico.woff') format('woff'),/* Modern Browsers */
-         url('#{$pacifico-font-path}/Pacifico.ttf') format('truetype'),/* Safari, Android, iOS */
-         url('#{$pacifico-font-path}/Pacifico.svg#Pacifico') format('svg');/* Legacy iOS */
+    src: url('#{$pacifico-font-path}/Pacifico.woff2') format('woff2'),
+         url('#{$pacifico-font-path}/Pacifico.woff') format('woff');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }

data/_sass/external/font-awesome/_core.scss

@@ -28,7 +28,7 @@
 .#{$fa-css-prefix}-solid::before,
 .#{$fa-css-prefix}-regular::before,
 .#{$fa-css-prefix}-brands::before,
-.fa::before {
+.#{$fa-css-prefix}::before {
   content: var(#{$fa-icon-property});
 }
 

data/_sass/external/font-awesome/_icons.scss

@@ -7,7 +7,6 @@ readers do not read off random characters that represent icons */
 @each $name, $icon in $fa-icons {
   .#{$fa-css-prefix}-#{$name} {
     #{$fa-icon-property}: unquote("\"#{ $icon }\"");
-    #{$fa-duotone-icon-property}: unquote("\"#{$icon}#{$icon}\"");
   }
 }
 

data/_sass/external/font-awesome/brands.scss

@@ -1,5 +1,5 @@
 /*!
- * Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  * Copyright 2024 Fonticons, Inc.
  */

data/_sass/external/font-awesome/fontawesome.scss

@@ -1,5 +1,5 @@
 /*!
- * Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  * Copyright 2024 Fonticons, Inc.
  */

data/_sass/external/font-awesome/regular.scss

@@ -1,5 +1,5 @@
 /*!
- * Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  * Copyright 2024 Fonticons, Inc.
  */

data/_sass/external/font-awesome/solid.scss

@@ -1,5 +1,5 @@
 /*!
- * Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  * Copyright 2024 Fonticons, Inc.
  */

data/_sass/external/font-awesome/v4-shims.scss

@@ -1,5 +1,5 @@
 /*!
- * Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  * Copyright 2024 Fonticons, Inc.
  */