whiteblog-theme 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 38c979633be7410fafccfad24c895c5f95641dcd469da8350aabcb291318bdc5
-  data.tar.gz: b50142446c66d293839b3dea0dfd8147be7788851f0dc87819ae31708e8df6a7
+  metadata.gz: 422e320ab9cb4988ded7dd26db917e6a3ed7322426c4b65ca13b356df46a9f61
+  data.tar.gz: 2c06876ced4cc891039b0680b24e6799338d8efbdb7aaf75f24e9cdd9b691040
 SHA512:
-  metadata.gz: ad5295bd99a265f9d51b9d9d79ae9ec643f86881ef9437d720b9313e9d3ccf2b826d02fb9e5e34465d1e4d267959f5bf7b043c9c71aad18272d8de148fad42ba
-  data.tar.gz: 28a844fc1647e4a39a30c81cb72f06f9b013a9bf3b6440507e4d08fa67af6f7e0571623e5517accaf32468f53a73efa36e012e4ba554efa7269937e6b43c4d18
+  metadata.gz: 454fc210a5bc2d53e7f048ae23c8904e5549d845d427e6b661bc52c6da039bc00f7f737543dabe8c4acd8421900278f19a614565d348461bce1066618d5007a6
+  data.tar.gz: 5ca06af7e36dd982ae5c4b2a9f1b6ffefe2f16b783b85f1d56b1a0d8b3e88ac386ea76cef32b8fa140eab149201c0f9c570b17b3ebd540d589bc30b36a186214

data/_includes/comments-providers/cusdis.html

@@ -0,0 +1,12 @@
+{% if site.comments.disqus.shortname %}
+<!--Every article has a id, but special pages don't unless you set manually.
+This prevents Cusdis from appear everywhere-->
+<div id="cusdis_thread"
+  data-host="https://cusdis.com"
+  data-app-id="{{ site.comments.cusdis.appId }}"
+  data-page-id="{{ page.id }}"
+  data-page-url="{{ site.url }}{{ page.baseurl }}{{ page.url }}"
+  data-page-title="{{ page.title }}"
+></div>
+<script defer src="https://cusdis.com/js/cusdis.es.js"></script>
+{% endif %}

data/_includes/comments.html

@@ -3,5 +3,8 @@
         {% when "disqus" %}
         <h4>Comments</h4>
         <section id="disqus_thread"></section>
+        {% when "cusdis" %}
+        <h4>Comments</h4>
+        {% include comments-providers/cusdis.html %}
     {% endcase %}
 </div>

data/_includes/header.html

@@ -3,7 +3,7 @@
     <a id="blog-title" class="navbar-brand" 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">
+        <svg viewBox="0 0 100 80" width="20" height="20" fill="currentColor">
           <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>
@@ -21,6 +21,7 @@
               {% endif %}
             {% endfor %}
           {% endif %}
+            <li><button id="theme-toggle" aria-label="Change theme" title="Change theme"></button></li>
         </ul>
       </div>
     </div>

data/_includes/scripts.html

@@ -1,3 +1,12 @@
+<script>
+(function() {
+  const saved = localStorage.getItem('whiteblog-theme');
+  const theme = saved || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+  document.documentElement.setAttribute('data-theme', theme);
+})();
+</script>
+
+<script src="{{ '/assets/js/theme-toggle.js' | relative_url }}"></script>
 <script src="{{ '/assets/js/main.js' | relative_url }}"></script>
 
 {% if site.analytics %}

data/_includes/sidebar.html

@@ -12,13 +12,24 @@
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                         <path
                             d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
-                            fill="#000000" />
+                            fill="currentColor" />
                     </svg>
                     <p>{{ site.author.location }}</p>
                 </span>
             </li>
             {% endif %}
             <ul class="horizontal">
+                {% if site.author.uri %}
+                <li>
+                    <a class="link" href="{{ site.author.uri }}" target="_blank" rel="noopener"
+                        title="Website">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
+                            class="social-networks-icons" viewBox="0 0 16 16">
+                            <path fill-rule="evenodd" clip-rule="evenodd"  fill="currentColor" d="M8 14.5c.23 0 .843-.226 1.487-1.514.306-.612.563-1.37.742-2.236H5.771c.179.866.436 1.624.742 2.236C7.157 14.274 7.77 14.5 8 14.5ZM5.554 9.25a14.444 14.444 0 0 1 0-2.5h4.892a14.452 14.452 0 0 1 0 2.5H5.554Zm6.203 1.5c-.224 1.224-.593 2.308-1.066 3.168a6.525 6.525 0 0 0 3.2-3.168h-2.134Zm2.623-1.5h-2.43a16.019 16.019 0 0 0 0-2.5h2.429a6.533 6.533 0 0 1 0 2.5Zm-10.331 0H1.62a6.533 6.533 0 0 1 0-2.5h2.43a15.994 15.994 0 0 0 0 2.5Zm-1.94 1.5h2.134c.224 1.224.593 2.308 1.066 3.168a6.525 6.525 0 0 1-3.2-3.168Zm3.662-5.5h4.458c-.179-.866-.436-1.624-.742-2.236C8.843 1.726 8.23 1.5 8 1.5c-.23 0-.843.226-1.487 1.514-.306.612-.563 1.37-.742 2.236Zm5.986 0h2.134a6.526 6.526 0 0 0-3.2-3.168c.473.86.842 1.944 1.066 3.168ZM5.31 2.082c-.473.86-.842 1.944-1.066 3.168H2.109a6.525 6.525 0 0 1 3.2-3.168ZM8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Z"/>
+                        </svg>
+                    </a>
+                </li>
+                {% endif %}
                 {% if site.author.x %}
                 <li>
                     <a class="link" href="https://x.com/{{ site.author.x }}" target="_blank" rel="noopener"
@@ -47,10 +58,10 @@
                 <li>
                     <a class="link" href="mailto: {{ site.author.email}}" target="_blank" rel="noopener" title="Email">
                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
-                            class="social-networks-icons" viewBox="0 0 24 24">
+                            class="social-networks-icons" viewBox="0 0 23 23">
                             <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
-                                fill="none" stroke="#000000" stroke-width="2" />
-                            <path d="M22 6l-10 7L2 6" fill="none" stroke="#000000" stroke-width="2"
+                                fill="none" stroke="currentColor" stroke-width="2" />
+                            <path d="M22 6l-10 7L2 6" fill="none" stroke="currentColor" stroke-width="2"
                                 stroke-linecap="round" />
                         </svg>
                     </a>
@@ -59,13 +70,22 @@
                 {% if site.author.github %}
                 <li>
                     <a class="link" href="https://github.com/{{ site.author.github}}" target="_blank" rel="noopener" title="GitHub">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000"
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                             class="social-networks-icons" viewBox="0 0 24 24">
                             <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path>
                         </svg>
                     </a>
                 </li>
                 {% endif %}
+                {% if site.author.stackoverflow %}
+                <li>
+                    <a class="link" href="https://stackoverflow.com/users/{{ site.author.stackoverflow }}" target="_blank" rel="noopener" title="Stack Overflow">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="25px" height="25px" viewBox="0 0 35 35">
+                            <path d="M 19.59375 2.84375 L 17.96875 3.96875 L 23.5625 12.1875 L 25.1875 11.0625 Z M 15.375 6.53125 L 14.0625 8.03125 L 21.5625 14.53125 L 22.875 13.03125 Z M 12.375 10.90625 L 11.46875 12.6875 L 20.3125 17.1875 L 21.21875 15.40625 Z M 10.65625 15.4375 L 10.21875 17.375 L 19.875 19.65625 L 20.3125 17.71875 Z M 6 18 L 6 29 L 24 29 L 24 18 L 22 18 L 22 27 L 8 27 L 8 18 Z M 10.09375 19.6875 L 9.96875 21.6875 L 19.875 22.25 L 20 20.25 Z M 10 23 L 10 25 L 19.9375 25 L 19.9375 23 Z"/>
+                        </svg>
+                    </a>
+                </li>
+                {% endif %}
             </ul>
         </ul>
     </section>

data/_layouts/home.html

@@ -2,7 +2,7 @@
 layout: default
 ---
 <div class="container">
-  <div id="navigation-space" class="row">
+  <div id="navigation-space" class="row-grid">
   </div>
   <article class="post">
     <div id="content">
@@ -10,17 +10,17 @@ layout: default
       <ul>
         {% assign date_format = "%b %-d, %Y" %}
         {% for post in paginator.posts %}
-          <li class="post-resume">
-            <h1 class="post-resume-title">
-              <a href="{{ post.url | relative_url }}">
-                <span class="underline">{{ post.title | escape }}</span>
-              </a>
-            </h1>
-            <span class="text-secondary">{{ post.date | date: date_format }}</span>
-            <div>
-              {{ post.excerpt }}
-            </div>
-          </li>
+        <li class="post-resume">
+          <h1 class="post-resume-title">
+            <a href="{{ post.url | relative_url }}">
+              <span class="underline">{{ post.title | escape }}</span>
+            </a>
+          </h1>
+          <span class="text-secondary">{{ post.date | date: date_format }}</span>
+          <div>
+            {{ post.excerpt }}
+          </div>
+        </li>
         {% endfor %}
       </ul>
       {% if paginator.total_pages > 1 %}
@@ -29,71 +29,71 @@ layout: default
         <ul>
           {% comment %} Link for previous page {% endcomment %}
           {% if paginator.previous_page %}
-            {% if paginator.previous_page == 1 %}
-              <li>
-                <a href="{{ first_page_path }}">
-                  <span class="chevron left"></span>
-                </a>
-              </li>
-            {% else %}
-              <li>
-                <a href="{{ site.paginate_path | replace: ':num', paginator.previous_page | replace: '//', '/' | absolute_url }}">
-                  <span class="chevron left"></span>
-                </a>
-              </li>
-            {% endif %}
+          {% if paginator.previous_page == 1 %}
+          <li>
+            <a href="{{ first_page_path }}">
+              <span class="chevron left"></span>
+            </a>
+          </li>
+          {% else %}
+          <li>
+            <a href="{{ site.paginate_path | replace: ':num', paginator.previous_page | replace: '//', '/' | absolute_url }}">
+              <span class="chevron left"></span>
+            </a>
+          </li>
+          {% endif %}
           {% else %}
           <li><a href="#" class="disabled"><span id="previous-page" aria-hidden="true"></span></a></li>
           {% endif %}
           {% comment %} First page {% endcomment %}
           {% if paginator.page == 1 %}
-            <li><a href="#" class="disabled current">1</a></li>
+          <li><a href="#" class="disabled current">1</a></li>
           {% else %}
-            <li><a href="{{ first_page_path }}">1</a></li>
+          <li><a href="{{ first_page_path }}">1</a></li>
           {% endif %}
           {% assign page_start = 2 %}
           {% if paginator.page > 4 %}
-            {% assign page_start = paginator.page | minus: 2 %}
-            {% comment %} Ellipsis for truncated links {% endcomment %}
-            <li><a href="#" class="disabled">&hellip;</a></li>
+          {% assign page_start = paginator.page | minus: 2 %}
+          {% comment %} Ellipsis for truncated links {% endcomment %}
+          <li><a href="#" class="disabled">&hellip;</a></li>
           {% endif %}
           {% assign page_end = paginator.total_pages | minus: 1 %}
           {% assign pages_to_end = paginator.total_pages | minus: paginator.page %}
           {% if pages_to_end > 4 %}
-            {% assign page_end = paginator.page | plus: 2 %}
+          {% assign page_end = paginator.page | plus: 2 %}
           {% endif %}
           {% for index in (page_start..page_end) %}
-            {% if index == paginator.page %}
-              <li><a href="{{ site.paginate_path | replace: ':num', index | replace: '//', '/' | absolute_url }}" class="disabled current">{{ index }}</a></li>
-            {% else %}
-              {% comment %} Distance from current page and this link {% endcomment %}
-              {% assign dist = paginator.page | minus: index %}
-              {% if dist < 0 %}
-                {% comment %} Distance must be a positive value {% endcomment %}
-                {% assign dist = 0 | minus: dist %}
-              {% endif %}
-              <li><a href="{{ site.paginate_path | replace: ':num', index | absolute_url }}">{{ index }}</a></li>
+          {% if index == paginator.page %}
+          <li><a href="{{ site.paginate_path | replace: ':num', index | replace: '//', '/' | absolute_url }}" class="disabled current">{{ index }}</a></li>
+          {% else %}
+          {% comment %} Distance from current page and this link {% endcomment %}
+          {% assign dist = paginator.page | minus: index %}
+          {% if dist < 0 %}
+            {% comment %} Distance must be a positive value {% endcomment %}
+            {% assign dist = 0 | minus: dist %}
+          {% endif %}
+          <li><a href="{{ site.paginate_path | replace: ':num', index | absolute_url }}">{{ index }}</a></li>
             {% endif %}
-          {% endfor %}
-          {% comment %} Ellipsis for truncated links {% endcomment %}
-          {% if pages_to_end > 3 %}
+            {% endfor %}
+            {% comment %} Ellipsis for truncated links {% endcomment %}
+            {% if pages_to_end > 3 %}
             <li><a href="#" class="disabled">&hellip;</a></li>
-          {% endif %}
-          {% if paginator.page == paginator.total_pages %}
+            {% endif %}
+            {% if paginator.page == paginator.total_pages %}
             <li><a href="#" class="disabled current">{{ paginator.page }}</a></li>
-          {% else %}
+            {% else %}
             <li><a href="{{ site.paginate_path | replace: ':num', paginator.total_pages | replace: '//', '/' | absolute_url }}">{{ paginator.total_pages }}</a></li>
-          {% endif %}
-          {% comment %} Link next page {% endcomment %}
-          {% if paginator.next_page %}
+            {% endif %}
+            {% comment %} Link next page {% endcomment %}
+            {% if paginator.next_page %}
             <li>
               <a href="{{ site.paginate_path | replace: ':num', paginator.next_page | replace: '//', '/' | absolute_url }}">
                 <span class="chevron right"></span>
               </a>
             </li>
-          {% else %}
+            {% else %}
             <li><a href="#" class="disabled"><span class="chevron right" aria-hidden="true"></span></a></li>
-          {% endif %}
+            {% endif %}
         </ul>
       </nav>
       {% endif %}

data/_layouts/page-wide.html

@@ -13,7 +13,7 @@
   <div class="main-wrapper">    
     <main>
       <div class="container">
-        <div id="navigation-space" class="row">
+        <div id="navigation-space" class="row-grid">
         </div>
         <article class="post">
           <header>

data/_layouts/page.html

@@ -3,7 +3,7 @@ layout: default
 ---
 <div class="container">
   <article class="post">
-    <div id="navigation-space" class="row">
+    <div id="navigation-space" class="row-grid">
     </div>
     <header>
       <h1>

data/_layouts/post.html

@@ -4,7 +4,7 @@ layout: default
 <div class="container">
   <article class="post">
 
-    <div id="navigation-space" class="row">
+    <div id="navigation-space" class="row-grid">
       <div class="previous">
         {% if page.previous.url %}
           <a href="{{page.previous.url}}" class="nav-btn prev-btn" title="{{page.previous.title}}">

data/_pages/about.md

@@ -5,9 +5,9 @@ layout: page-wide
 permalink: /about/
 ---
 
-<div class="row">
+<div class="row-grid">
   <div class="center">
-    <p>Hi, I'm Victor Silva, a software engineer with a passion for development and security. I'm currently working at <a href="https://www.mercadolibre.com">Mercado Libre</a> as a Cloud Security Engineer. You can check out my personal blog at <a href="https://blog.victorsilva.com.uy">Victor Silva Blog</a></p>
+    <p>Hi, I'm <b><i>Victor Silva</i></b>, a software engineer with a passion for development and security. I'm currently working at <a class="bounce-link" href="https://www.mercadolibre.com">Mercado Libre</a> as a Cloud Security Engineer. You can check out my personal blog <a class="bounce-link" href="https://blog.victorsilva.com.uy">$blogTopics | % {echo $_}</a></p>
   </div>
   <div class="center">
     <img class="about-image" src="{{ site.author.avatar }}" alt="{{ site.author.name }}" />

data/_sass/whiteblog-theme/_layout.scss

@@ -15,6 +15,21 @@
   --transition-default: all 0.3s ease-in-out;
 }
 
+[data-theme="dark"] {
+  --color-bg: #231633;
+  --color-accent: #44318D;
+  --color-primary: #C266E8;
+  --color-text: #E8E8E8;
+  --color-dark: #CCCCCC;
+  --color-highlight: #D83F87;
+  --color-code: #FF6B9D;
+  --color-code-bg: #2a2a2a;
+  --color-notice: #4A3B5C;
+  --font-main: 'Space Grotesk', system-ui, -apple-system, sans-serif;
+  --container-width: 90%;
+  --transition-default: all 0.3s ease-in-out;
+}
+
 *,
 *::before,
 *::after {
@@ -120,6 +135,57 @@ main {
   white-space: nowrap;
 }
 
+#theme-toggle {
+  z-index: 1000;
+  background: var(--color-bg);
+  border: none;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  font-size: 20px;
+  padding-bottom: 5px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  transition: var(--transition-default);
+  color: var(--color-text);
+}
+
+#theme-toggle:hover {
+  background: var(--color-primary);
+  color: var(--color-bg);
+  transform: scale(1.1);
+}
+
+#theme-toggle:active {
+  transform: scale(0.95);
+}
+
+.bounce-link {
+  font-weight: bold;
+  position: relative;
+  overflow: hidden;
+  text-decoration: none;
+  color: var(--color-primary) !important;
+  &::after {
+    content: "";
+    background: #ec407a40;
+    position: absolute;
+    left: 10px;
+    bottom: -5px;
+    width: calc(100% - 8px);
+    height: calc(100% - 8px);
+    // z-index: -1;
+    transition: 0.35s cubic-bezier(0.25, 0.1, 0, 2.05);
+  }
+  &:hover:after {
+    left: 0;
+    bottom: -2px;
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .link {
   position: relative;
   font-weight: bold;
@@ -287,7 +353,8 @@ a#blog-title:focus::before {
 .nav-list {
   display: flex;
   align-items: center;
-  z-index: 1;
+  z-index: 2;
+  padding-bottom: 0rem;
 }
 
 .nav-list li {
@@ -325,11 +392,76 @@ a#blog-title:focus::before {
   min-height: 4rem;
 }
 
+img {
+  max-width: 85%;
+  height: auto;
+}
+
+figure {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+  -webkit-box-align: start;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  margin: 2em 0;
+}
+
+figure img,
+figure iframe,
+figure .fluid-width-video-wrapper {
+  margin-bottom: 1em
+}
+
+figure img {
+  width: 100%;
+  border-radius: 4px;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out
+}
+
+figure>a {
+  display: block
+}
+
+@media (min-width: 37.5em) {
+  figure.half > a,
+  figure.half > img {
+    width: calc(50% - 0.5em)
+  }
+}
+
+figure.half figcaption {
+  width: 100%
+}
+
+@media (min-width: 37.5em) {
+  figure.third > a,
+  figure.third > img {
+    width: calc(33.3333% - 0.5em);
+  }
+}
+
+figure.third figcaption {
+  width: 100%
+}
+
+figcaption {
+  margin-bottom: 0.5em;
+  font-size: 1em;
+}
+
+figcaption a {
+  -webkit-transition:all 0.2s ease-in-out;
+  transition:all 0.2s ease-in-out
+}
+
 p {
   margin-bottom: 1rem;
 }
 
-.row {
+.row-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   font-size: 20px;
@@ -339,6 +471,14 @@ p {
   }
 }
 
+.row {
+  font-size: 20px;
+
+  * {
+    color: var(--color-dark);
+  }
+}
+
 .next {
   text-align: right;
 }
@@ -368,6 +508,7 @@ p {
 
 code {
   font-size: .9em;
+  font-family: 'Fira Code', monospace;
   color: var(--color-code);
   word-wrap: break-word;
 }
@@ -379,7 +520,7 @@ blockquote {
   border-bottom: 1px solid #F39237;
   font-style: italic;
   font-weight: 700;
-  font-size: 1.5rem;
+  font-size: 1.1rem;
   width: 85%;
   margin: 2rem auto;
   height: 80px;
@@ -391,20 +532,25 @@ blockquote p {
   margin-bottom: 0;
 }
 
+.highlight {
+  margin: 1.3rem 0;
+}
+
 .highlight pre {
   border-radius: 0.25rem;
   padding: 1rem 1rem;
-  margin: 0.75rem 0;
+  // margin: 0.75rem 0;
   overflow: auto;
   white-space: pre-wrap;
-  background-color: var(--color-code-bg) !important;
+  background-color: #fafafa !important;
+  min-width: 100%;
 }
 
 .highlight pre button {
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
-  color: var(--color-bg);
+  // color: var(--color-bg);
   background: none;
   border: none;
   cursor: pointer;
@@ -413,6 +559,7 @@ blockquote p {
 
 ul {
   list-style: none;
+  padding-bottom: 1rem;
 }
 
 .archive-group th {
@@ -650,6 +797,7 @@ svg {
   font-size: 16px;
   line-height: 30px;
   padding: 0.2em;
+  font-family: var(--font-main);
 }
 
 @media screen and (max-width: 949px) {
@@ -677,6 +825,9 @@ svg {
     text-align: center;
     padding: 0.5rem 0;
     border-bottom: 1px solid #ccc;
+    a {
+      display: block;
+    }
   }
 
   .main-wrapper {
@@ -738,4 +889,4 @@ svg {
     transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
   }
-}
+}

data/assets/js/theme-toggle.js

@@ -0,0 +1,69 @@
+// Theme Toggle Script
+(function() {
+  'use strict';
+  
+  const THEME_KEY = 'whiteblog-theme';
+  const LIGHT_THEME = 'light';
+  const DARK_THEME = 'dark';
+  
+  function getThemePreference() {
+    const saved = localStorage.getItem(THEME_KEY);
+    if (saved) return saved;
+    
+    return window.matchMedia('(prefers-color-scheme: dark)').matches 
+      ? DARK_THEME 
+      : LIGHT_THEME;
+  }
+  
+  function applyTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem(THEME_KEY, theme);
+    
+    updateToggleButton(theme);
+  }
+  
+  function updateToggleButton(theme) {
+    const toggle = document.getElementById('theme-toggle');
+    if (!toggle) return;
+    
+    const isDark = theme === DARK_THEME;
+    const moonIcon = '<svg id="moon" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path></svg>';
+    const sunIcon = '<svg id="sun" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>';
+    toggle.innerHTML = isDark ? moonIcon : sunIcon;
+
+    toggle.setAttribute('aria-label', `Cambiar a tema ${isDark ? 'claro' : 'oscuro'}`);
+    toggle.title = `Cambiar a tema ${isDark ? 'claro' : 'oscuro'}`;
+  }
+  
+  function toggleTheme() {
+    const current = document.documentElement.getAttribute('data-theme') || LIGHT_THEME;
+    const newTheme = current === LIGHT_THEME ? DARK_THEME : LIGHT_THEME;
+    applyTheme(newTheme);
+  }
+  
+  function init() {
+    const preference = getThemePreference();
+    applyTheme(preference);
+    
+    const toggle = document.getElementById('theme-toggle');
+    if (toggle) {
+      toggle.addEventListener('click', toggleTheme);
+    }
+    
+    window.matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', (e) => {
+        if (!localStorage.getItem(THEME_KEY)) {
+          applyTheme(e.matches ? DARK_THEME : LIGHT_THEME);
+        }
+      });
+  }
+  
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+  
+  const initialTheme = getThemePreference();
+  document.documentElement.setAttribute('data-theme', initialTheme);
+})();

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: whiteblog-theme
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Victor Silva
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-08 00:00:00.000000000 Z
+date: 2025-07-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -83,6 +83,7 @@ files:
 - README.md
 - _includes/analytics/googleAnalytics.html
 - _includes/backtotop.html
+- _includes/comments-providers/cusdis.html
 - _includes/comments-providers/disqus.html
 - _includes/comments.html
 - _includes/footer.html
@@ -109,15 +110,17 @@ files:
 - _sass/whiteblog-theme/_syntax-highlighting.scss
 - assets/css/main.scss
 - assets/css/previews.css
+- assets/images/avatar.jpg
 - assets/images/bio-photo.jpg
 - assets/images/favicon.ico
+- assets/images/ko-fi.png
 - 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
+- assets/js/theme-toggle.js
 homepage: https://github.com/vmsilvamolina/whiteblog-theme
 licenses:
 - MIT