whiteblog-theme 0.0.13 → 0.0.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bf7739d3efd1f44653467fd7244334f09fb84e47fa61a00b22a3f78da3f182b6
-  data.tar.gz: 9754f8d9f86bdfd016b586154c109ac86b748c05a9f4276b00fb66fad19d3fae
+  metadata.gz: ddb4ce05cfdb8446e1a75f05599ae3855e646cbb8b2dc39ce74d35d3dfeaf55c
+  data.tar.gz: f7f051c314763e2cb588d38511b71aa367e5b5934237da319bb00380812db092
 SHA512:
-  metadata.gz: 2aca0a17e4a40e01c8ac419f94882de2f4fe02b3473d9af14464e1677bb82d2a78bb226f19329073a8a4d3be72a6d470280d7414d693d0f5179172f46de989ef
-  data.tar.gz: 5fb0275efbba935ca86c97d7937e044712b4a2d27223e7caedae86b3349374374f520f56de2319b07c70c8b44fc04587e28faa78a39fa1aef3c5450eec4fda17
+  metadata.gz: 997d00f727a11f0c93f3c42413acaecfb69d85982f035dd1dacc8a134d79be26d013ab02686328d6afcc747d5f63b3eca0499946e89944524874187009cb9317
+  data.tar.gz: b4feacbccd8c9f9acc1bcaae8fa0e6a50ee1aeec4b2e5784266645b4f8ed84121a5e283fb4d8221c1907d75e6d1f693dfb022067f703472224047f4e0d00cd1a

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,3 +1,5 @@
-<div class="col float-end">
-  <a class="float-end back" href="#"><i class="bi bi-chevron-double-up"></i></a>
+<div class="float-end">
+  <a class="float-end back" href="#">
+    <span class="chevron top"></span>
+  </a>
 </div>

data/_includes/footer.html

@@ -1,9 +1,16 @@
 <footer id="site-footer">
   <div class="container">  
-    <div class="row">
-      <div class="col-12 col-lg">
-        <p>Made with <i class="bi bi-suit-heart-fill"></i> and <i class="bi bi-cup-fill"></i>. 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,13 +1,24 @@
-<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"><i class="bi bi-twitter-x"></i> Share on X</a>
+          <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="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
+          </a>
         </li>
         <li>
-          <a class="link" href="https://linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ page.url }}" target="_blank" rel="noopener" title="LinkedIn"><i class="bi bi-linkedin"></i> Share on LinkedIn</a>
+          <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="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
+          </a>
         </li>
       </ul>
 

data/_layouts/categories.html

@@ -15,11 +15,18 @@ title: Categories
       <p></p>
       <h5 style='color:white !important;'><a class="badge badge-{{ category_name }}">{{ category_name }}</a></h5>
       <a name="{{ category_name | slugize }}"></a>
+      <table>
       {% for post in site.categories[category_name] %}
-      <article class="archive-item">
-        <p><a href="{{ site.baseurl }}{{ post.url }}">{{post.title}}</a></p>
-      </article>
+        <tr>
+          <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>
+        </th>
+      </tr>
       {% endfor %}
+    </table>
     </div>
 {% endfor %}
   </div>

data/_layouts/default.html

@@ -3,27 +3,24 @@
 <!DOCTYPE html>
 <html lang="{{ page.lang | default: site.lang | default: "en" }}">
 
-  <title>{{ page.title }}</title>
+<title>{{ site.title }}</title>
+<link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+{% include head.html %}
 
-  {% 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 %}
+  {% include scripts.html %}
 
-    <!-- jQuery, Popper.js, Bootstrap JS -->
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+</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,306 +1,531 @@
 @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
-@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
-
-//Color palette variables:
-// $firstColor: #FFF;
-$firstColor: #F5F5F5;
-// $secondColor: #19E9E0;
-$secondColor: #44cdd5;
-// $thirdColor: #A64AC9;
-$thirdColor: #614bc3;
-// $fourthColor: #000;
-$fourthColor: #212529;
-$fifthColor: #6C757D;
-// $sixthColor: #FF8484;
-// $sixthColor: #26C485;
-$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 {
-  //   font-weight: 600;
-  //   // color: $firstColor !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;
 }
 
-.post {
-  padding-top: 3rem!important;
-  height: 100%;
-  padding-bottom: 6em;
+.lista li a {
+  color: var(--color-text);
+  text-decoration: none;
+  transition: opacity 0.2s ease;
 }
 
-#content .py-2 {
-  padding-top: 1.5rem!important;
+.post {
+  padding: 3rem 0 6rem;
+  width: 100%;
 }
 
-blockquote {
-  background: #f9f9f9;
-  border-left: 10px solid #F39237;
-  margin: 1.5em 0px;
-  padding: 0.5em 10px;
-  quotes: "\201C""\201D""\2018""\2019";
-  p {
-    display: inline;
-  }
+#posts-navigation {
+  padding-bottom: 1.5rem;
+  bottom: 0;
 }
 
-.highlight pre {
-  border: 1px solid;
-  border-radius: .25rem;
-  padding: 0.75rem;
+p {
   margin-bottom: 1rem;
-  white-space: pre-wrap;
 }
 
-#search-input {
-  margin: 2em 0em;
-  width: 50%;
+.row {
+  display: grid;
+  flex-wrap: wrap;
+  grid-template-columns: 1fr 1fr;
+  font-size: 20px;
+  * {
+    color: var(--color-dark);
+  }
 }
 
-input {
-  font-family: "Space Grotesk" !important;
+.next {
+  text-align: right;
 }
 
-.post .text-secondary {
-  margin-bottom: 8px !important;
-  color: $fifthColor;
-  font-weight: bold;
+.previous {
+  text-align: left;
 }
 
-.row .previous, .row .next {
-  font-size: 20px;
-  text-align: right;
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.title-post-resume {
+  margin-top: 0.25rem;
+  margin-bottom: 0.75rem;
   a {
-    color: $fourthColor !important;
+    color: var(--color-text);
+    text-decoration: none;
   }
 }
 
-.previous {
-  text-align: left !important;
+.text-secondary {
+  font-weight: 700;
+  margin-bottom: 8px !important;
+}
+
+.text-justify {
+  margin-top: 2.1875rem;
+}
+
+.text-final {
+  margin-top: 2.8125rem;
 }
 
-#post {
-  flex-grow: 1;
+code {
+  font-size: .9em;
+  color: var(--color-code);
+  word-wrap: break-word;
+}
+
+blockquote {
+  background: #f9f9f9;
+  border-left: 10px solid #F39237;
+  margin: 1.5em 0;
+  padding: 0.5em 1.25em;
+  border-radius: 0.25rem;
+}
+
+blockquote p {
+  display: inline;
+}
+
+.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;
-}
-
-#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;
-    }
-  }
+#site-footer a:hover,
+#site-footer a:focus {
+  color: var(--color-text);
 }
 
-/* Effects */
+svg {
+  vertical-align: sub;
+}
 
-#category-badge a:hover, #category-badge a:focus, #category-badge a:active {
-  color: $firstColor;
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
+.social-networks-icons {
+  vertical-align: unset !important
 }
 
-h1 > .underline {
-  text-decoration: none;
-  box-shadow: inset 0 -19px 0 $secondColor, 0 0px 0 $secondColor;
-  transition: box-shadow .3s;
-  color: inherit;
-  overflow: hidden;
+.float-end {
+  float: right;
 }
 
-a > .underline {
+.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);
+}
+
+.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: -5px;
-		bottom: 0;
-		height: 100%;
-		width: calc(100% + 5px);
-	}	
+#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/assets/js/main.js

@@ -0,0 +1,51 @@
+const copyButtonSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-copy" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/>
+</svg>`;
+
+const checkmarkSVG = `Copied <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16">
+  <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/>
+</svg>`;
+
+// use a class selector if available
+let blocks = document.querySelectorAll("pre");
+
+blocks.forEach((block) => {
+  // only add button if browser supports Clipboard API
+  if (navigator.clipboard) {
+    let button = document.createElement("button");
+    button.innerHTML = copyButtonSVG;
+    button.style.position = "absolute";
+    button.style.top = "5px";
+    button.style.right = "5px";
+    block.style.position = "relative";
+    block.appendChild(button);
+    button.addEventListener("click", async () => {
+      await copyCode(block, button);
+    });
+  }
+});
+
+async function copyCode(block, button) {
+  let code = block.querySelector("code");
+  let text = code.innerText;
+  await navigator.clipboard.writeText(text);
+  
+  // visual feedback that task is completed
+  button.innerHTML = checkmarkSVG; // Checkmark symbol
+  button.style.backgroundColor = "green";
+  button.style.color = "white";
+  button.style.borderRadius = "4px";
+
+  setTimeout(() => {
+    button.innerHTML = copyButtonSVG;
+    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.13
+  version: 0.0.15
 platform: ruby
 authors:
 - Victor Silva
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-05 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,18 +98,21 @@ files:
 - _sass/whiteblog-theme/_syntax-highlighting.scss
 - assets/css/main.scss
 - assets/css/previews.css
+- 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
 - assets/images/previews/welcome-jekyll.png
 - assets/images/previews/yet-another-post.png
 - assets/js/jekyll-search.min.js
+- assets/js/main.js
 homepage: https://github.com/vmsilvamolina/whiteblog-theme
 licenses:
 - MIT
 metadata:
   plugin_type: theme
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -122,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: []