whiteblog-theme 0.0.14 → 0.0.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 10bc04709c0ac729b145affc621390fc5b2a06c7f5e6e2c2853cc33db3197b82
-  data.tar.gz: 680363d5dd313280a5e95152f8cada0be0cfc446505a04654b1c16ff2b3a2933
+  metadata.gz: df57117387f42de7cd314d19f7ad1da721d289a3d1387ef72e302f42dc91b071
+  data.tar.gz: f553c90ded41fb834e258b0f995ee5e6db651a00eb3d4efdecb6da28e610b596
 SHA512:
-  metadata.gz: 1adeff909b69796d1e0b8761538b0b21638ef6e21725a8cf33404ca326a4fa533e802e18a1c3503adbbaa2d2794c6a9cc685779ca19a19cb280ce209e2616f45
-  data.tar.gz: 2539e3a5f05aaa6bbe60bc43c712185c2e947db20afcf76b08e971049221b90a45179479ac0d39e750da4572e2c1d098c7d94e914c468c5013c9b68e7a65a674
+  metadata.gz: aa2d9101ea5e3d0cd49c175b372471c3ac1a245920877fdce8939349eceae325b859ec0b3ba2ce578448572f7fe9a7568696514ef7419a4b50a9a8e59bb59b99
+  data.tar.gz: 78cd2a0bae81bbac1ce99e66e09a4d2afe91025dd2f73fa443b1a48ac1b7c77a917cd30bb55fd3dd6daaa55854d73ae3427693df14943833b3b4dbb11443bfcd

data/_includes/analytics/googleAnalytics.html

@@ -0,0 +1,11 @@
+{% if site.analytics %}
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.analytics.google.tracking_id }}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', '{{ site.analytics.google.tracking_id }}');
+</script>
+{% endif %}

data/_includes/backtotop.html

@@ -1,8 +1,5 @@
-<div class="col float-end">
+<div class="float-end">
   <a class="float-end back" href="#">
-    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-chevron-double-up" viewBox="0 1 16 16">
-      <path fill-rule="evenodd" d="M7.646 2.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 3.707 2.354 9.354a.5.5 0 1 1-.708-.708z"/>
-      <path fill-rule="evenodd" d="M7.646 6.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 7.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"/>
-    </svg>
+    <span class="chevron top"></span>
   </a>
 </div>

data/_includes/footer.html

@@ -1,18 +1,16 @@
 <footer id="site-footer">
   <div class="container">  
-    <div class="row">
-      <div class="col-12 col-lg">
-        <p>
-          Made with 
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-suit-heart-fill" viewBox="0 0 16 16">
-            <path d="M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1"/>
-          </svg>
-          and 
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cup-fill" viewBox="0 0 16 16">
-            <path fill-rule="evenodd" d="M.11 3.187A.5.5 0 0 1 .5 3h13a.5.5 0 0 1 .488.608l-.22.991a3.001 3.001 0 0 1-1.3 5.854l-.132.59A2.5 2.5 0 0 1 9.896 13H4.104a2.5 2.5 0 0 1-2.44-1.958L.012 3.608a.5.5 0 0 1 .098-.42Zm12.574 6.288a2 2 0 0 0 .866-3.899z"/>
-          </svg>
-          . Powered by <a class="link" href="https://jekyllrb.com/">Jekyll</a> and <a class="link" href="https://github.com/vmsilvamolina/whiteblog-theme">whiteblog-theme</a>.</p>
-      </div>
+    <div class="footer-text">
+      <p>
+        Made with 
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-suit-heart-fill" viewBox="0 0 16 16">
+          <path d="M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1"/>
+        </svg>
+        and 
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cup-fill" viewBox="0 0 16 16">
+          <path fill-rule="evenodd" d="M.11 3.187A.5.5 0 0 1 .5 3h13a.5.5 0 0 1 .488.608l-.22.991a3.001 3.001 0 0 1-1.3 5.854l-.132.59A2.5 2.5 0 0 1 9.896 13H4.104a2.5 2.5 0 0 1-2.44-1.958L.012 3.608a.5.5 0 0 1 .098-.42Zm12.574 6.288a2 2 0 0 0 .866-3.899z"/>
+        </svg>
+        . Powered by <a class="link" href="https://jekyllrb.com/">Jekyll</a> and <a class="link" href="https://github.com/vmsilvamolina/whiteblog-theme">whiteblog-theme</a> .</p>
     </div>
   </div>
 </footer>

data/_includes/head.html

@@ -12,7 +12,7 @@
     content="{{ site.url }}/assets/images/previews/{{ page.slug }}.png">
   
   <!-- Bootstrap CSS -->
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+  <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> -->
 
 
   <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">

data/_includes/header.html

@@ -1,19 +1,23 @@
-<nav class="navbar navbar-expand-lg bg-body-tertiary">
-  <div class="container-fluid container">
-    <a id="blog-title" class="navbar-brand" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
-    <div class="justify-content-end">
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
-        <ul class="navbar-nav">
+<nav class="navbar">
+  <div class="container">
+    <a id="blog-title" class="navbarBrand" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
+    <div class="navbar-links">
+      <span class="nav-toggle" id="js-nav-toggle">
+        <svg viewBox="0 0 100 80" width="20" height="20">
+          <rect width="100" height="18" rx="8"></rect>
+          <rect y="30" width="100" height="18" rx="8"></rect>
+          <rect y="60" width="100" height="18" rx="8"></rect>
+        </svg>
+      </span>
+      <div id="navbarNav">
+        <ul class="lista" id="js-menu">
           {% assign default_paths = site.pages | map: "path" %}
           {% assign page_paths = site.header_pages | default: default_paths %}
           {% if page_paths %}
             {% for path in page_paths %}
               {% assign my_page = site.pages | where: "path", path | first %}
               {% if my_page.title %}
-                <li class="nav-item"><a class="nav-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a></li>
+                <li><a href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a></li>
               {% endif %}
             {% endfor %}
           {% endif %}

data/_includes/scripts.html

@@ -0,0 +1,5 @@
+<script src="{{ '/assets/js/main.js' | relative_url }}"></script>
+
+{% if site.analytics %}
+  {% include /analytics/googleAnalytics.html %}
+{% endif %}

data/_includes/sharepost.html

@@ -1,11 +1,12 @@
-<div class="col text-final" id="share-links">
+<!-- <div class="col text-final" id="share-links"> -->
+<div class="col text-final">
   <h5><i class="bi bi-share"></i></h5>
   <div class="row">
-    <div class="col float-start">
+    <div class="float-start">
       <ul>
         <li>
           <a class="link" href="https://twitter.com/share?text={{ page.title | url_encode }}&url={{ site.url }}{{ page.url }}" target="_blank" rel="noopener" title="X.com">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="social-networks-icons" viewBox="0 0 16 16">
               <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/>
             </svg>
             Share on X
@@ -13,7 +14,7 @@
         </li>
         <li>
           <a class="link" href="https://linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ page.url }}" target="_blank" rel="noopener" title="LinkedIn">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="social-networks-icons" viewBox="0 0 16 16">
               <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
             </svg>
             Share on LinkedIn

data/_layouts/categories.html

@@ -18,8 +18,8 @@ title: Categories
       <table>
       {% for post in site.categories[category_name] %}
         <tr>
-          <th style="padding-right: 10px;">
-              (<time datetime="{{ post.date | date_to_xmlschema }}" class="post-date">{{ post.date | date: "%b %-d, %Y" }}</time>)
+          <th>
+            (<time datetime="{{ post.date | date_to_xmlschema }}" class="post-date">{{ post.date | date: "%b %-d, %Y" }}</time>)
           </th>
         <th>
           <a href="{{ site.baseurl }}{{ post.url }}">{{post.title}}</a>

data/_layouts/default.html

@@ -3,24 +3,24 @@
 <!DOCTYPE html>
 <html lang="{{ page.lang | default: site.lang | default: "en" }}">
 
-  <title>{{ page.title }}</title>
-  <link rel="icon" type="image/x-icon" href="/assets/images/favicon.svg">
-  {% include head.html %}
+<title>{{ site.title }}</title>
+<link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+{% include head.html %}
 
-  <body>
+<body>
 
-    {% include header.html %}
+  {% include header.html %}
 
-    <main>
-      <div class="container" id="post">
-        {{ content }}
-      </div>
-    </main>
+  <main>
+    <div class="container" id="post">
+      {{ content }}
+    </div>
+  </main>
 
-    {% include footer.html %}
+  {% include footer.html %}
 
-    <script src="{{ '/assets/js/main.js' | relative_url }}"></script>
+  {% include scripts.html %}
 
-  </body>
+</body>
 
-</html>
+</html>

data/_layouts/home.html

@@ -7,10 +7,10 @@ layout: default
 
     {% assign posts = site.posts %}
 
-    <ul class="list-unstyled m-0 posts-list">
+    <ul>
       {% assign date_format = "%b %-d, %Y" %}
       {% for post in posts %}
-        <li class="py-2">
+        <li class="post-resume">
           <h1 class="mt-1 mb-3 h3 title-post-resume">
             <a class="title-link" href="{{ post.url | relative_url }}"><span class="underline">{{ post.title | escape }}</span></a>
           </h1>

data/_layouts/page.html

@@ -1,7 +1,7 @@
 ---
 layout: default
 ---
-<article>
+<article class="post">
 
   <header>
     <h1>

data/_layouts/post.html

@@ -3,18 +3,16 @@ layout: default
 ---
 <article class="post">
 
-  <div id="posts-navigation">
-    <div class="row">
-      <div class="previous col">
-        {% if page.previous.url %}
-          <a href="{{page.previous.url}}">&laquo; {{page.previous.title}}</a>
-        {% endif %}
-      </div>
-      <div class="next col">  
-        {% if page.next.url %}
-          <a class="next" href="{{page.next.url}}">{{page.next.title}} &raquo;</a>
-        {% endif %}
-      </div>
+  <div id="posts-navigation" class="row">
+    <div class="previous">
+      {% if page.previous.url %}
+        <a href="{{page.previous.url}}">&laquo; {{page.previous.title}}</a>
+      {% endif %}
+    </div>
+    <div class="next">  
+      {% if page.next.url %}
+        <a href="{{page.next.url}}">{{page.next.title}} &raquo;</a>
+      {% endif %}
     </div>
   </div>
 
@@ -23,7 +21,6 @@ layout: default
       <span class="underline">{{ page.title | escape }}</span>
     </h1>
     <p class="text-secondary">
-      <i class="bi bi-calendar"></i><span style="display:inline-block; width: 3px;"></span>
       <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
         {% assign date_format = site.theme.date_format | default: "%b %-d, %Y" %}
         {{ page.date | date: date_format }}
@@ -35,7 +32,7 @@ layout: default
       {% endif %}
       <h5 id="category-badge">
       {% for category in categories %}
-        <a href="{{site.baseurl}}/categories/#{{category|slugize}}" class="badge badge badge-bounce-in" >{{category}}</a>
+        <a href="{{site.baseurl}}/categories/#{{category|slugize}}" class="badge" >{{category}}</a>
         {% unless forloop.last %}&nbsp;{% endunless %}
       {% endfor %}
       </h5>

data/_pages/about.md

@@ -0,0 +1,15 @@
+---
+title: About
+author: Victor Silva
+layout: page
+permalink: /about/
+---
+
+<div class="row">
+  <div class="center">
+    <p>Hi, I'm Victor Silva, a software engineer with a passion for web development and a love for open source. I'm currently working at <a href="https://www.mercadolibre.com">Mercado Libre</a> as a Frontend Developer. I'm also a contributor to the <a href="blog.victorsilva.dev">Victor Silva Blog</a></p>
+  </div>
+  <div class="center">
+    <img class="about-image" src="/assets/images/bio-photo.jpg">
+  </div>
+</div>

data/_pages/search.md

@@ -1,18 +1,14 @@
 ---
 title: Search
 author: Victor Silva
-layout: default
+layout: page
 permalink: /search/
 ---
-<article class="post">
-  <h1>
-    <span class="underline">Search</span>
-  </h1>
-  <div id="search-container">
-    <input type="text" id="search-input" placeholder="Search for interesting stuff... or maybe not...">
-    <ul id="results-container"></ul>
-  </div>
-</article>
+
+<div id="search-container">
+  <input type="text" id="search-input" placeholder="Search for interesting stuff... or maybe not...">
+  <ul id="results-container"></ul>
+</div>
 
 <script src="/assets/js/jekyll-search.min.js" type="text/javascript"></script>
 <script type="text/javascript">

data/_sass/whiteblog-theme/_layout.scss

@@ -1,321 +1,531 @@
 @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
 
-//Color palette variables:
-$firstColor: #F5F5F5;
-$secondColor: #44cdd5;
-$thirdColor: #614bc3;
-$fourthColor: #212529;
-$fifthColor: #6C757D;
-$sixthColor: #25E498;
-
+:root {
+  --color-bg: #F5F5F5;
+  --color-accent: #44cdd5;
+  --color-primary: #614bc3;
+  --color-text: #212529;
+  --color-dark: #313638;
+  --color-highlight: #25E498;
+  --color-code: rgb(214, 51, 132);
+  --font-main: 'Space Grotesk', system-ui, -apple-system, sans-serif;
+  --container-width: 80%;
+  --transition-default: all 0.3s ease-in-out;
+}
+
+*,
+*::before,
+*::after {
+  // box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
 
 html {
   scroll-behavior: smooth;
+  font-size: 16px;
+  background-color: var(--color-bg);
 }
 
 body {
-  background-color: $firstColor;
-  color: $fourthColor;
-  font-family: "Space Grotesk";
-  overflow-y: scroll;
-  position: relative;
+  font-family: var(--font-main);
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--color-text);
+  background-color: var(--color-bg);
   min-height: 100vh;
+  position: relative;
+  overflow-y: scroll;
 }
 
-main {
-  padding-bottom: 2.5rem;
+.container {
+  max-width: var(--container-width);
+  margin: 0 auto;
 }
 
-.container {
-  padding: 0em; 
-  max-width: 80% !important;
+main {
+  padding-bottom: 4rem;
 }
 
 .navbar {
-  background-color: $firstColor !important;
-  padding: 30px 0px !important;
-  
-  a#blog-title{
-    position: relative;
-    font-weight: bold;
-    font-weight: 600;
-    z-index: 0;
-    &::before {
-      content: '';
-      background-color: $sixthColor;
-      left: -10px;
-      position: absolute;
-      bottom: 1px;
-      width: 100%;
-      height: 8px;
-      z-index: -1;
-      transition: all .3s ease-in-out;
-    }
-    
-    &:hover::before {
-      left: -10px;
-      bottom: 0;
-      height: 100%;
-      width: calc(110% + 5px);
-    }
+  width: 100%;
+  background-color: var(--color-bg);
+  padding: 1.9rem 0;
+  position: relative;
+}
+
+.navbar .container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+}
+
+.navbar-links > * {
+  margin-right: 10px;
+
+  ul li {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    font-size: 1rem;
   }
 }
 
+.navbarBrand {
+  padding: 0.3125rem 0;
+  margin-right: 1rem;
+  font-size: 1.25rem;
+  color: var(--color-text);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.link {
+  position: relative;
+  font-weight: bold;
+  text-decoration: none;
+  color: var(--color-text);
+  z-index: 1;
+}
+
+.link::before {
+  content: '';
+  background-color: var(--color-highlight);
+  position: absolute;
+  left: 3%;
+  bottom: 1px;
+  width: 100%;
+  height: 8px;
+  z-index: -1;
+  transition: var(--transition-default);
+}
+
+.link:hover::before,
+.link:focus::before {
+  left: -2px;
+  bottom: 0;
+  height: 100%;
+  width: calc(100% + 2px);
+}
+
+.underline {
+  position: relative;
+  text-decoration: none;
+  color: inherit;
+  overflow: hidden;
+}
+
+h1 > .underline {
+  box-shadow: inset 0 -19px 0 var(--color-accent), 0 0 0 var(--color-accent);
+  transition: box-shadow 0.3s;
+  font-size: 2rem;
+}
+
+a > .underline {
+  box-shadow: inset 0 -14px 0 var(--color-accent), 0 0 0 var(--color-accent);
+  transition: box-shadow 0.3s;
+}
+
+.underline:hover,
+.underline:focus {
+  box-shadow: inset 0 -45px 0 var(--color-accent), 0 0 0 var(--color-accent);
+}
+
+a#blog-title {
+  position: relative;
+  font-weight: 600;
+  z-index: 1;
+  margin-left: 10px;
+}
+
+a#blog-title::before {
+  content: '';
+  background-color: var(--color-highlight);
+  position: absolute;
+  left: -10px;
+  bottom: -2px;
+  width: 100%;
+  height: 8px;
+  z-index: -1;
+  transition: var(--transition-default);
+}
+
+a#blog-title:hover::before,
+a#blog-title:focus::before {
+  height: 110%;
+  width: calc(110% + 5px);
+}
+
 .navbar-toggler {
   border: none;
-  background: transparent !important;
-  
-  &:hover {
-    background: transparent !important;
-  }
+  background: transparent;
+  cursor: pointer;
+  padding: 0.5rem;
+  display: none;
+}
 
-  .icon-bar {
-    width: 22px;
-    transition: all 0.2s;
-  }
+.navbar-toggler:hover,
+.navbar-toggler:focus {
+  background: transparent;
+}
 
-  .top-bar {
-    transform: rotate(45deg);
-    transform-origin: 10% 10%;
-  }
+.icon-bar {
+  width: 22px;
+  height: 2px;
+  background-color: var(--color-text);
+  display: block;
+  transition: var(--transition-default);
+  margin: 4px 0;
+}
 
-  .middle-bar {
-    opacity: 0;
-  }
+.navbar-toggler .top-bar {
+  transform: rotate(0);
+}
 
-  .bottom-bar {
-    transform: rotate(-45deg);
-    transform-origin: 10% 90%;
-  }
+.navbar-toggler .middle-bar {
+  opacity: 1;
+}
 
-  &.collapsed {
-    .top-bar {
-      transform: rotate(0);      
-    }
-    .middle-bar {
-      opacity: 1;
-    }
-    .bottom-bar {
-      transform: rotate(0);
-    }
-  }
+.navbar-toggler .bottom-bar {
+  transform: rotate(0);
 }
 
-#nav-header {
-  border-bottom: 1px solid $firstColor !important;
+.navbar-toggler:not(.collapsed) .top-bar {
+  transform: rotate(45deg);
+  transform-origin: 10% 10%;
 }
 
-#nav-container {
-  height: 3.5rem;
+.navbar-toggler:not(.collapsed) .middle-bar {
+  opacity: 0;
 }
 
-.divider {
-  background: $thirdColor;
-  color: $thirdColor;
-  margin: 0px;
-  max-width: 80%;
+.navbar-toggler:not(.collapsed) .bottom-bar {
+  transform: rotate(-45deg);
+  transform-origin: 10% 90%;
+}
+
+#navbarNav a {
+  position: relative;
+  text-decoration: none;
+  z-index: 1;
+}
+
+#navbarNav a::before {
+  content: '';
+  position: absolute;
+  width: 100%;
   height: 4px;
-  margin: 0 auto;
-  opacity: 1;
+  background-color: var(--color-primary);
+  bottom: -4px;
+  left: 0;
+  transform-origin: center;
+  transform: scaleX(0);
+  transition: transform .3s ease-in-out;
+  z-index: -1;
 }
 
-.title-link {
-  text-decoration: none !important;
+#navbarNav a:hover::before {
+  transform-origin: left;
+  transform: scaleX(1);
 }
 
-.title-post-resume a {
-  color: $fourthColor !important;
+
+.post-resume {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
 }
 
-.text-justify {
-  margin-top: 35px !important;
+.lista {
+  display: flex;
+  align-items: center;
+  z-index: 1;
 }
 
-.text-final {
-  margin-top: 45px !important;
+.lista li {
+  list-style: none;
+}
+
+.lista li a {
+  color: var(--color-text);
+  text-decoration: none;
+  transition: opacity 0.2s ease;
 }
 
 .post {
-  padding-top: 3rem!important;
-  height: 100%;
-  padding-bottom: 6em;
+  padding: 3rem 0 6rem;
+  width: 100%;
 }
 
-#content .py-2 {
-  padding-top: 1.5rem!important;
+#posts-navigation {
+  padding-bottom: 1.5rem;
+  bottom: 0;
 }
 
-blockquote {
-  background: #f9f9f9;
-  border-left: 10px solid #F39237;
-  margin: 1.5em 0px;
-  padding: 0.5em 10px;
-  quotes: "\201C""\201D""\2018""\2019";
-  p {
-    display: inline;
+p {
+  margin-bottom: 1rem;
+}
+
+.row {
+  display: grid;
+  flex-wrap: wrap;
+  grid-template-columns: 1fr 1fr;
+  font-size: 20px;
+  * {
+    color: var(--color-dark);
   }
 }
 
-.highlight pre {
-  border: 1px solid;
-  border-radius: .25rem;
-  padding: 0.75rem;
-  margin-bottom: 1rem;
-  white-space: pre-wrap;
+.next {
+  text-align: right;
+}
 
-  position: relative;
-  overflow: auto;
+.previous {
+  text-align: left;
+}
 
-  margin: 5px 0;
-  padding: 1.75rem 0 1.75rem 1rem;
-  border-radius: 10px;
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
-  button {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    color: $firstColor;
-    background: none; 
-    border: none; 
+.title-post-resume {
+  margin-top: 0.25rem;
+  margin-bottom: 0.75rem;
+  a {
+    color: var(--color-text);
+    text-decoration: none;
   }
+}
 
-  button:hover {
-    cursor: pointer;
-  }
+.text-secondary {
+  font-weight: 700;
+  margin-bottom: 8px !important;
 }
 
-#search-input {
-  margin: 2em 0em;
-  width: 50%;
+.text-justify {
+  margin-top: 2.1875rem;
 }
 
-input {
-  font-family: "Space Grotesk" !important;
+.text-final {
+  margin-top: 2.8125rem;
 }
 
-.post .text-secondary {
-  margin-bottom: 8px !important;
-  color: $fifthColor;
-  font-weight: bold;
+code {
+  font-size: .9em;
+  color: var(--color-code);
+  word-wrap: break-word;
 }
 
-.row .previous, .row .next {
-  font-size: 20px;
-  text-align: right;
-  a {
-    color: $fourthColor !important;
-  }
+blockquote {
+  background: #f9f9f9;
+  border-left: 10px solid #F39237;
+  margin: 1.5em 0;
+  padding: 0.5em 1.25em;
+  border-radius: 0.25rem;
 }
 
-.previous {
-  text-align: left !important;
+blockquote p {
+  display: inline;
 }
 
-#post {
-  flex-grow: 1;
+.highlight pre {
+  border: 1px solid var(--color-text);
+  border-radius: 0.625rem;
+  padding: 1.75rem 1rem;
+  margin: 0.3125rem 0;
   position: relative;
+  overflow: auto;
+  white-space: pre-wrap;
 }
 
-#posts-navigation {
-  padding-bottom: 1.5rem;
-  bottom: 0;
+.highlight pre button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  color: var(--color-bg);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+}
+
+.back {
+  margin-top: 2.8125rem;
+  font-size: 1.875rem;
+  color: var(--color-primary);
+  border-radius: 0.625rem;
+  border: 2px solid var(--color-primary);
+  padding: 0.0625rem 0.625rem;
+  text-decoration: none;
+  transition: var(--transition-default);
+}
+
+.back:hover,
+.back:focus {
+  background-color: var(--color-primary);
+  .chevron::before {
+    color: var(--color-bg);
+  }
+}
+
+ul {
+  list-style: none;
+}
+
+.archive-group th {
+  text-align: start !important;
+  padding-right: 0.5rem;
 }
 
 #site-footer {
-  color: $fourthColor !important;
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 4rem;
-  a {
-    color: $fourthColor;
-    font-weight: bold;
-    text-decoration: none;
-  }
+  color: var(--color-text);
+  background-color: var(--color-bg);
 }
 
-a.badge {
-  color: $firstColor;
-  background-color: $thirdColor;
+#site-footer a {
+  color: var(--color-text);
+  font-weight: bold;
   text-decoration: none;
+  transition: color 0.2s ease;
 }
 
-.back {
-  margin-top: 45px !important;
-  font-size: 30px;
-  color: $thirdColor;
-  border-radius: 10px;
-  border: 2px solid $thirdColor;
-  padding: 1px 10px;
+#site-footer a:hover,
+#site-footer a:focus {
+  color: var(--color-text);
 }
 
 svg {
-  vertical-align: sub !important;
-}
-
-#share-links ul {
-  list-style-type: none;
-  padding-left: 0px;
-  li {
-    padding-top: 5px;
-    padding-bottom: 5px;
-    a {
-      color: $fourthColor;
-      font-weight: bold;
-      text-decoration: none;
-    }
-  }
+  vertical-align: sub;
 }
 
-/* Effects */
+.social-networks-icons {
+  vertical-align: unset !important
+}
 
-#category-badge a:hover, #category-badge a:focus, #category-badge a:active {
-  color: $firstColor;
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
+.float-end {
+  float: right;
 }
 
-h1 > .underline {
-  text-decoration: none;
-  box-shadow: inset 0 -19px 0 $secondColor, 0 0px 0 $secondColor;
-  transition: box-shadow .3s;
-  color: inherit;
-  overflow: hidden;
-  font-size: 2rem;
+.chevron::before {
+  border-style: solid;
+  border-width: 0.15em 0.15em 0 0;
+  content: '';
+  display: inline-block;
+  height: 0.7em;
+  position: relative;
+  transform: rotate(-45deg);
+  vertical-align: middle;
+  width: 0.7em;
+  color: var(--color-primary);
 }
 
-a > .underline {
+.divider {
+  background: var(--color-primary);
+  height: 4px;
+  margin: 0 auto;
+  max-width: var(--container-width);
+  opacity: 1;
+}
+
+.about-image {
+  border-radius: 50%;
+  width: 280px;
+  height: 280px;
+  margin: 1.25rem;
+  object-fit: cover;
+}
+
+.badge {
+  color: var(--color-bg);
+  background-color: var(--color-primary);
   text-decoration: none;
-  box-shadow: inset 0 -14px 0 $secondColor, 0 0px 0 $secondColor;
-  transition: box-shadow .3s;
-  color: inherit;
-  overflow: hidden;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  transition: transform 0.2s ease;
+  display: inline-block;
 }
 
-.underline:hover {
-  box-shadow: inset 0 -45px 0 $secondColor, 0 0px 0 $secondColor;
+.badge:hover,
+.badge:focus {
+  -webkit-transform:scale(1.1);
+  transform: scale(1.1);
 }
 
-.link {
-	position: relative;
-	font-weight: bold;
-	
-	&::before {
-		content: '';
-		background-color: $sixthColor;
-		position: absolute;
-		left: 3%;
-		bottom: 1px;
-		width: 100%;
-		height: 8px;
-		z-index: -1;
-		transition: all .3s ease-in-out;
-	}
-	
-	&:hover::before {
-		left: -2px;
-		bottom: 0;
-		height: 100%;
-		width: calc(100% + 2px);
-	}	
+#search-input {
+  margin: 2em 0em;
+  width: 50%;
+  font-size: 16px;
+  line-height: 24px;
+  padding: 0.2em;
+}
+
+@media screen and (max-width: 949px) {
+  .navbar-toggler {
+    display: block;
+  }
+
+  .lista {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background-color: var(--color-bg);
+    padding: 1rem 0;
+  }
+
+  .lista.active {
+    display: flex;
+  }
+
+  .lista li {
+    width: 100%;
+    text-align: center;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid #ccc;
+  }
+  
+  .container {
+    padding: 0 1rem;
+  }
+
+  h1 {
+    font-size: 1.25rem;
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
+}
+
+@media screen and (min-width: 950px) {
+  .nav-toggle {
+    display: none;
+  }
+
+  .lista {
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: row;
+  }
+
+  h1 {
+    font-size: 1.75rem;
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }

data/_sass/whiteblog-theme.scss

@@ -1,5 +1,4 @@
 @charset "utf-8";
 
-@import
-  "whiteblog-theme/layout",
-  "whiteblog-theme/syntax-highlighting";
+@use "whiteblog-theme/layout";
+@use "whiteblog-theme/syntax-highlighting";

data/assets/js/main.js

@@ -41,4 +41,11 @@ async function copyCode(block, button) {
     button.style.backgroundColor = "";
     button.style.color = "";
   }, 1000);
-}
+}
+
+let mainNav = document.getElementById("js-menu");
+let navBarToggle = document.getElementById("js-nav-toggle");
+
+navBarToggle.addEventListener("click", function() {
+  mainNav.classList.toggle("active");
+});

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: whiteblog-theme
 version: !ruby/object:Gem::Version
-  version: 0.0.14
+  version: 0.0.16
 platform: ruby
 authors:
 - Victor Silva
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-08-28 00:00:00.000000000 Z
+date: 2025-01-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -66,7 +66,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '0.16'
-description: 
+description:
 email:
 - vmsilvamolina@gmail.com
 executables: []
@@ -75,11 +75,13 @@ extra_rdoc_files: []
 files:
 - LICENSE.txt
 - README.md
+- _includes/analytics/googleAnalytics.html
 - _includes/backtotop.html
 - _includes/comments-providers/disqus.html
 - _includes/footer.html
 - _includes/head.html
 - _includes/header.html
+- _includes/scripts.html
 - _includes/sharepost.html
 - _layouts/allposts.html
 - _layouts/categories.html
@@ -87,6 +89,7 @@ files:
 - _layouts/home.html
 - _layouts/page.html
 - _layouts/post.html
+- _pages/about.md
 - _pages/categories.md
 - _pages/github.md
 - _pages/search.md
@@ -95,7 +98,8 @@ files:
 - _sass/whiteblog-theme/_syntax-highlighting.scss
 - assets/css/main.scss
 - assets/css/previews.css
-- assets/images/favicon.svg
+- assets/images/bio-photo.jpg
+- assets/images/favicon.ico
 - assets/images/previews/hello-world.png
 - assets/images/previews/otro-post.png
 - assets/images/previews/test-post.png
@@ -108,7 +112,7 @@ licenses:
 - MIT
 metadata:
   plugin_type: theme
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -124,7 +128,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubygems_version: 3.2.3
-signing_key: 
+signing_key:
 specification_version: 4
 summary: Minimal, wide and white blogging theme for Jekyll
 test_files: []

data/assets/images/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 508 508"><path d="M425.6 6H390v192c0 9.6-5.6 20-15.6 20H70c-10 0-20-10-20-20V6H22.4C14.4 6 6 10.4 6 18v467.6c0 7.6 8.8 16.4 16.4 16.4H50V268c0-1.2.8-2 2-2h404c1.2 0 2 .8 2 2v234h32c7.6 0 12-8.4 12-16.4V82.8z" style="fill:#2884a9"/><path d="M54 266h400v236H54z" style="fill:#73badd"/><path d="M54 6v192c0 7.6 8.4 16 16 16h304.4c7.6 0 11.6-8.4 11.6-16V6z" style="fill:#e8e3e3"/><path d="M282 38h72v144h-72z" style="fill:#2884a9"/><path d="M278 184v2h2c-1.2 0-2-.8-2-2" style="fill:#c99"/><path d="M490 508H22.4C11.2 508 0 496.8 0 485.6V18C0 6.8 11.6 0 22.4 0h404c1.2 0 2 .4 2.8 1.2l77.6 78c.8.8 1.2 1.6 1.2 2.8v404c0 10.8-6.8 22-18 22M22.4 8C15.6 8 8 12 8 18v467.6C8 492 16 500 22.4 500H490c6 0 10-7.6 10-14.4v-402L424.8 8z"/><path d="M456 506c-2.4 0-4-1.6-4-4V268h-18c-2.4 0-4-1.6-4-4s1.6-4 4-4h22c2.4 0 4 1.6 4 4v238c0 2.4-1.6 4-4 4m-404 0c-2.4 0-4-1.6-4-4V264c0-2.4 1.6-4 4-4h350c2.4 0 4 1.6 4 4s-1.6 4-4 4H56v234c0 2.4-1.6 4-4 4m322.4-286H70c-10.8 0-22-11.2-22-22V6c0-2.4 1.6-4 4-4s4 1.6 4 4v192c0 6.8 7.6 14 14 14h304.4c6 0 9.6-7.2 9.6-14V6c0-2.4 1.6-4 4-4s4 1.6 4 4v192c0 10.4-6 22-17.6 22"/><path d="M158.4 220c-11.2 0-22.4-11.2-22.4-22V6c0-2.4 1.6-4 4-4s4 1.6 4 4v192c0 6.4 8 14 14.4 14 2.4 0 4 1.6 4 4s-1.6 4-4 4M356 188h-76c-2.4 0-4-1.6-4-4V36c0-2.4 1.6-4 4-4h38c2.4 0 4 1.6 4 4s-1.6 4-4 4h-34v140h68V40h-2c-2.4 0-4-1.6-4-4s1.6-4 4-4h6c2.4 0 4 1.6 4 4v148c0 2.4-1.6 4-4 4m54 136H102c-2.4 0-4-1.6-4-4s1.6-4 4-4h308c2.4 0 4 1.6 4 4s-1.6 4-4 4m0 64H102c-2.4 0-4-1.6-4-4s1.6-4 4-4h308c2.4 0 4 1.6 4 4s-1.6 4-4 4m0 64H102c-2.4 0-4-1.6-4-4s1.6-4 4-4h308c2.4 0 4 1.6 4 4s-1.6 4-4 4"/></svg>