type-on-strap 2.5.0 → 2.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c7b245eafb6465e6bd1a012032498fb81901591c09680290587ec232ea579643
-  data.tar.gz: f81e6aaf2e9ef2dc13f6275da54a05143cb305a88dbd4e6b3af6cad085555e2c
+  metadata.gz: ccb4fee6ac8c69a532174663a2a2c0dcfad5725c42a4f31ecf1d109e8319a170
+  data.tar.gz: ca86903243c9c9b1d660b03962853a7db7b156dbd5f76b5af17e2535734f2a7d
 SHA512:
-  metadata.gz: ca5de0fb72854009a6ede7a395e65c572c2100a80d6f338f90dd6cc0b8f08199aca694f54a1be26f01231681673173662caa4b1bc7c277f736b9d14d4569aeef
-  data.tar.gz: 44fe3825598c76e401b010c7b9630b4b7c1a83309c609ef7cff81efaeded6e78242447664e0c567ca88b0cac361fc9ca02da921d944f64a24f6d301d71680c1c
+  metadata.gz: 4de654f0b9e47747ada241f063797864252a72705eb543e252da6c0270e1fcc178328170192095372504095eb05d0f5a1f0132eb55d563049087d27f454a6b6c
+  data.tar.gz: ff886caa5eb1c059b8a9df3e175349f6b701059f09fe8cfa071e688aedb0d8552b98de4229df9417c38292ac6973dabf1984b6515106cbca0ac96af2e378a386

data/README.md

@@ -354,7 +354,7 @@ tags: [sample, markdown, html]                    # [Opt] Add tags to the page
 ```
 
 With `thumbnail`, you can add a smaller image than the `feature-img`. 
-If you don't have a thumbnail, you can still use the same image as the feature one. Or use the gulp task to create it.
+If you don't have a thumbnail, you can still use the same image as the feature one. Or use the npm script to create it.
 
 If you don't use a feature image, but `color`, the transparent background is set comes from [`lineart.png`](assets/img/lineart.png). 
 You can edit it in the config file (`_config.yml > color_image`). If you want another one, put it in `/assets/img` as well. 
@@ -371,7 +371,7 @@ It will respect the page and theme layout, mind the padding on the sides.
 The [excerpt](https://jekyllrb.com/docs/posts/#post-excerpts) is the head of the article rendered in the blog page. 
 The length of the excerpt has a default of around `250` characters or can be manually set in the post using:
 
-in `conflig.yml`:
+in `_config.yml`:
 
 ```yml
 excerpt: true
@@ -516,8 +516,8 @@ This creates the collection for Jekyll, so it can find and display your portfoli
 
 ### Feature: Gallery 🖼
 
-You can create a gallery using [Masonry JS](https://masonry.desandro.com/) which will placing the pictures at the optimal position 
-based on available vertical space. 
+You can create a gallery using a column layout which will place the pictures at the optimal position
+based on available vertical space.
 You need to specify the `gallery_path` which will be used to find the pictures to render. 
 It will take all the pictures under that directory. Then use the `include` to add it in your page. 
 
@@ -586,51 +586,20 @@ Jekyll works with [liquid](https://shopify.github.io/liquid/) tags usually repre
 These are useful to render your jekyll files. 
 You can learn more about them on [shopify's doc](https://help.shopify.com/themes/liquid/basics)
 
-### Gulp toolbox
+### npm scripts toolbox
 
-#### Requirements
+If you are not familiar with npm scripts, check the [CONTRIBUTING.md](.github/CONTRIBUTING.md) for setup instructions.
 
-Before you need to have *node* and `npm` installed:
-
-- Windows: https://nodejs.org/
-- Ubuntu/Debian: `apt-get install nodejs npm libgl1 libxi6`
-- Fedora (dnf) / RHEL/CentOS (yum): `dnf install node npm libglvnd-glx libXi`
-
-Then you need to install [`gulp-cli`](https://gulpjs.com/) and its dependencies:
-
-```bash
-cd assets/
-sudo npm install gulp-cli -g
-npm install
-```
-
-#### Minimizing and optimizing: css, js and images
-
-You can run the default task that will compress the js, css and images and create the thumbnails for the supported image
-formats:
+To create a new post with today's date:
 
 ```bash
-cd assets/
-gulp default
-gulp thumbnails-all # to create all of the images thumbnails
-gulp thumbnails     # to create thumbnails for the feature-img/ only
-# tip: run a git status to see the changes
-git status
+npm run post 'title of the post'
 ```
 
-You can find more about the gulp tasks in the [gulpfile.js](assets/gulpfile.js).
-
-#### Create a post
-
-To create a `.md` file in the *_posts/* section with the jekyll format of today's date.
-Use this command with the title you'd like to create the very basic post.
-
-```bash
-gulp post -n 'title of the post'
-```
+A file `_posts/YYYY-MM-DD-title-of-the-post.md` will be created with default frontmatter.
+Nothing will happen if the file already exists.
 
-A file will be created following the format `yyyy-mm-dd-title-of-the-post.md` with default post attributes inside.
-Nothing will happen if the file exists already.
+For build scripts, image optimization, and the full development setup, see [CONTRIBUTING.md](.github/CONTRIBUTING.md).
 
 ### Use as Ruby Gem 💎
 

data/_includes/blog/post_nav.liquid

@@ -1,7 +1,7 @@
 <div id="post-nav">
     {% if page.next.url %}
     <div id="previous-post">
-        <a alt="{{ page.next.title }}" href="{{ page.next.url | relative_url | default: 'none' }}">
+        <a href="{{ page.next.url | relative_url | default: 'none' }}">
             <p>{{ site.data.language.str_previous_post | default: "Previous post" }}</p>
             {{ page.next.title }}
         </a>
@@ -10,7 +10,7 @@
 
     {% if page.previous.url %}
     <div id="next-post">
-        <a alt="{{ page.previous.title }}" href="{{ page.previous.url | relative_url | default: 'none' }}">
+        <a href="{{ page.previous.url | relative_url | default: 'none' }}">
             <p>{{ site.data.language.str_next_post | default: "Next post"}}</p>
             {{ page.previous.title }}
         </a>

data/_includes/default/head.liquid

@@ -15,7 +15,7 @@
         }
     </script>
 
-    <!-- Main JS (navbar.js, katex_init.js and masonry_init.js)-->
+    <!-- Main JS (navbar.js, katex_init.js)-->
     <script defer src="{{ '/assets/js/main.min.js' | relative_url }}"></script>
 
     <!-- CSS -->
@@ -30,28 +30,28 @@
     {% 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 }}">
-    <!-- JQuery 3.3.1 -->
-    <script defer src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-    <!-- Bootstrap 4.1.3 compiled and minified JavaScript -->
-    <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
-    <!-- Popper, a dependency of Bootstrap-->
-    <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>
+    <!-- Bootstrap 4.6.2 CSS CDN -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
+    <!-- jQuery 3.5.1 CDN -->
+    <script defer src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <!-- Popper.js 1.16.1 CDN -->
+    <script defer src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+    <!-- Bootstrap 4.6.2 JS CDN -->
+    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbZUBVs2mbGk8cFoTfurqEOk6sD3+6VUuY3" crossorigin="anonymous"></script>
     {% endif %}
 
-    <!-- KaTeX 0.16.28 -->
+    <!-- KaTeX 0.16.38 -->
     {% 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.2 -->
+    <!-- Mermaid 11.13.0 -->
     {% if site.mermaid %}
     <script defer src="{{ '/assets/js/vendor/mermaid.min.js' | relative_url }}"></script>
     {% endif %}
 
-    <!-- Simple Jekyll Search 2.1.1 -->
+    <!-- Simple-Jekyll-Search 2.1.3 -->
     <script src="{{ '/assets/js/vendor/simple-jekyll-search.min.js' | relative_url }}" type="text/javascript"></script>
 
     <!-- Google Analytics / Cookie Consent -->

data/_includes/default/navbar.liquid

@@ -30,7 +30,7 @@
             <li>
                 <a class="clear" aria-label="{{ page.title }}" title="{{ page.title }}" href="{{ page.url | relative_url }}">
                     {% if page.icon %} <i class="navbar-icon fas {{ page.icon }}" aria-hidden="true"></i>{% endif %}
-                    <span class="navbar-label {% if page.icon %}navbar-label-with-icon{% endif%}">{{ page.title }}</span>
+                    <span class="navbar-label {% if page.icon %}navbar-label-with-icon{% endif %}">{{ page.title }}</span>
                 </a>
             </li>
         {% endunless %}
@@ -39,7 +39,7 @@
 
         {% if site.color_theme == 'auto' %}
         <li class="separator"> | </li>
-        <li><a id="theme-toggle" title="{{ page.title }} " aria-label="{{ page.title }}" onclick="themeToggle()"></a></li>
+        <li><a id="theme-toggle" title="{{ site.data.language.str_dark | default: 'Toggle theme' }}" aria-label="{{ site.data.language.str_dark | default: 'Toggle theme' }}" onclick="themeToggle()"></a></li>
         {% endif %}
     </ul>
 

data/_includes/gallery.html

@@ -6,17 +6,15 @@ html { overflow-y: scroll; }
 /* article {padding:2%;} */
 </style>
 
-<div id='masonry' class="grid">
-<div class="grid-sizer"></div>
-<div class="gutter-sizer"></div>
+<div id="gallery-grid" class="grid">
+<div class="grid-col grid-col--1"></div>
+<div class="grid-col grid-col--2"></div>
+<div class="grid-col grid-col--3"></div>
 {% for image in site.static_files %}
   {% if image.path contains include.gallery_path %}
     {% unless image.path contains '.md' %}
-        <img src="{{ image.path | relative_url }}" alt="" class="grid-item" style="padding: 0;">
+        <img src="{{ image.path | relative_url }}" alt="" class="grid-item" loading="lazy" style="padding: 0;">
     {% endunless %}
   {% endif %}
 {% endfor %}
 </div>
-
-<script src="{{ '/assets/js/vendor/imagesloaded.pkgd.min.js' | relative_url }}" type="text/javascript"></script>
-<script src="{{ '/assets/js/vendor/masonry.pkgd.min.js' | relative_url }}" type="text/javascript"></script>

data/_includes/portfolio.html

@@ -8,7 +8,7 @@
                     <i class="fas fa-search-plus fa-3x"></i>
                 </div>
             </div>
-            <img alt="" class="" data-testid="portfolio-item-image" src="{{ item.img | relative_url }}">
+            <img alt="{{ item.title }}" class="" data-testid="portfolio-item-image" loading="lazy" src="{{ item.img | relative_url }}">
         </a>
     </div>
     {% endfor %}

data/_includes/social/share_buttons.liquid

@@ -13,7 +13,7 @@
         <li class="meta">Share</li>
         {% if site.data.social.share.facebook or site.theme_settings.share_buttons.facebook %}
         <li>
-            <a href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | absolute_url }}" target="_blank"
+            <a href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | absolute_url }}" target="_blank" rel="noopener noreferrer"
                title="{{ site.data.social.language.str_share_on }} Facebook">
                 <i class="fab fa-facebook-square fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_share_on | default: "Share on" }} Facebook</span>
@@ -22,7 +22,7 @@
         {% endif %} {% if site.data.social.share.twitter or site.theme_settings.twitter %}
         <li>
             <a href="https://twitter.com/intent/tweet?text={{ page.title | strip_html | url_encode }}%20{{ page.url | absolute_url | url_encode }}"
-               target="_blank" title="{{ site.data.social.language.str_tweet }}">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_tweet }}">
                 <i class="fab fa-twitter-square fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_tweet | default: "Tweet" }}</span>
             </a>
@@ -30,7 +30,7 @@
         {% endif %} {% if site.data.social.share.tumblr or site.theme_settings.tumblr %}
         <li>
             <a href="https://www.tumblr.com/share?v=3&u={{ page.url | absolute_url }}&quote={{ page.title | url_encode }}%20%7C%20{{ site.title | strip_html | url_encode }}&s="
-               target="_blank" title="{{ site.data.social.language.str_share_on }} Tumblr">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_share_on }} Tumblr">
                 <i class="fab fa-tumblr-square fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_share_on | default: "Share on" }} Tumblr</span>
             </a>
@@ -38,7 +38,7 @@
         {% endif %} {% if site.data.social.share.pinterest or site.theme_settings.pinterest %}
         <li>
             <a href="https://pinterest.com/pin/create/button/?url={{ page.url | absolute_url }}&media={{ page.feature-img | absolute_url }}$description={{ page.excerpt | strip_html | url_encode }}"
-               target="_blank" title="{{ site.data.social.language.str_pin_it }}">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_pin_it }}">
                 <i class="fab fa-pinterest-square fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_pin_it | default: "Pin it" }}</span>
             </a>
@@ -46,7 +46,7 @@
         {% endif %} {% if site.data.social.share.pocket or site.theme_settings.pocket %}
         <li>
             <a href="https://getpocket.com/save?url={{ page.url | absolute_url }}&title={{ page.title | strip_html | url_encode }}%20%7C%20{{ site.title | strip_html | url_encode }}"
-               target="_blank" title="{{ site.data.social.language.str_add_to }} Pocket">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_add_to }} Pocket">
             <span class="fa-stack fa-1x" style="vertical-align: top">
               <i class="fas fa-square fa-stack-2x" aria-hidden="true"></i>
               <i class="fab fa-get-pocket fa-stack-1x fa-inverse" aria-hidden="true"></i>
@@ -57,7 +57,7 @@
         {% endif %} {% if site.data.social.share.reddit or site.theme_settings.reddit %}
         <li>
             <a href="https://www.reddit.com/submit?url={{ page.url | absolute_url }}&title={{ page.title | strip_html | url_encode }}%20%7C%20{{ site.title | strip_html | url_encode }}"
-               target="_blank" title="{{ site.data.social.language.str_share_on }} Reddit">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_share_on }} Reddit">
                 <i class="fab fa-reddit-square fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_share_on | default: "Share on" }} Reddit</span>
             </a>
@@ -65,7 +65,7 @@
         {% endif %} {% if site.data.social.share.linkedin or site.theme_settings.linkedin %}
         <li>
             <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ page.url | absolute_url }}&title={{ page.title | strip_html | url_encode }}%20%7C%20{{ site.title | strip_html | url_encode }}&summary=&source={{ page.url | absolute_url }}"
-               target="_blank" title="{{ site.data.social.language.str_share_on }} LinkedIn">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_share_on }} LinkedIn">
                 <i class="fab fa-linkedin fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_share_on | default: "Share on" }} LinkedIn</span>
             </a>
@@ -73,7 +73,7 @@
         {% endif %} {% if site.data.social.share.wordpress or site.theme_settings.wordpress %}
         <li>
             <a href="https://wordpress.com/press-this.php?u={{ page.url | absolute_url }}&quote={{ page.title | strip_html | url_encode }}%20%7C%20{{ site.title | strip_html | url_encode }}&s="
-               target="_blank" title="{{ site.data.social.language.str_share_on }} WordPress">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_share_on }} WordPress">
                 <i class="fab fa-wordpress fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_share_on | default: "Share on" }} WordPress</span>
             </a>
@@ -81,7 +81,7 @@
         {% endif %} {% if site.data.social.share.email or site.theme_settings.email %}
         <li>
             <a href="mailto:?subject={{ page.title }}%20%7C%20{{ site.title  }}&body={{ page.url | absolute_url }}"
-               target="_blank" title="{{ site.data.social.language.str_email }}">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_email }}">
                 <i class="fas fa-envelope-square fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_email | default: "Email" }}</span></a>
         </li>

data/_layouts/default.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!--
-    Type on Strap jekyll theme v2.5.0
+    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
 -->

data/_layouts/page.liquid

@@ -15,13 +15,7 @@ layout: default
         </div>
     </header>
     <section class="post-content">
-    {% if page.bootstrap %}
-        <div class="bootstrap-iso">
-            {% endif %}
-            {{ content }}
-            {% if page.bootstrap %}
-        </div>
-        {% endif %}
+        {{ content }}
     </section>
     <!-- Category and Tag list -->
     <div class="tag-category-container">

data/_layouts/post.liquid

@@ -14,9 +14,7 @@ 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 -->

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.28
+ * 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.
  */