whiteblog-theme 0.3.2 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d4397217dbd08cf15ad0c4419798e1ef79fe1d213d15291e4f6a9c7fcb3e180d
4
- data.tar.gz: deea0cede86c0bf55fc8a55bf648d86ce142e1b758e235279fd53011b8ed8b4d
3
+ metadata.gz: b5c3a5005e806c67bf000b693ad1aecfdd01c9a78047775205d8b29906f1f8d3
4
+ data.tar.gz: d482ec318c9742de362ede4621f34aa8ea2241c8c29dc182d5572c4a984d0cd7
5
5
  SHA512:
6
- metadata.gz: a9dba8f104672aed6bfb6145f5451728eead5dc286ed6fe22e50815d8fb504499d2648568d6923590771098b8108bfb652373d1b4bc42362c6e2f690cfaf2aca
7
- data.tar.gz: dfcc02a87f30f92e62926a060899d21ebb5782ee0d020773decf48b2baf4d4c4cdd51b8e08376471e95559c69407495db004d8b869ad3d57872835b8280504e4
6
+ metadata.gz: 9f98d68b1762bb8061cd26b99565a8d56d5ee6c277bbd74fd88ac9fa8fedc5a6e1b984d4745a1e919b265528207dd0afe2fc65b2f590ca84430ae98e934c4789
7
+ data.tar.gz: 864ced7612fe1019620c744dd5c9801027d0368c8ffc46bacdf223e815685f59cefc21e8937c7f7bb46829709d83fe38bcc993894226f4b7f1a6c43f12774d58
@@ -1,5 +1,5 @@
1
1
  <div class="float-abajo">
2
- <a class="float-end nav-btn top-btn" href="#">
3
- <span class="chevron up"></span>
2
+ <a class="float-end nav-btn top-btn" href="#main-content" aria-label="Volver al inicio de la página">
3
+ <span class="chevron up" aria-hidden="true"></span>
4
4
  </a>
5
5
  </div>
data/_includes/head.html CHANGED
@@ -1,8 +1,8 @@
1
1
  <head>
2
- <!-- Required meta tags -->
3
2
  <meta charset="utf-8">
4
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
5
3
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
4
+ <meta name="theme-color" media="(prefers-color-scheme: light)" content="#F5F5F5">
5
+ <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#25242f">
6
6
 
7
7
  <title>{% if page.title %}{{ page.title }} | {{ site.title }}{% else %}{{ site.title }}{% endif %}</title>
8
8
  <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
@@ -36,6 +36,9 @@
36
36
  <meta property="og:image" content="{{ site.url }}{{ site.author.avatar }}">
37
37
  {% endif %}
38
38
 
39
+ <link rel="preconnect" href="https://fonts.googleapis.com">
40
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
41
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Space+Grotesk:wght@300..700&display=swap">
39
42
  <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
40
43
  <link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | relative_url }}">
41
44
  <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
@@ -2,13 +2,13 @@
2
2
  <div class="container-nav">
3
3
  <a id="blog-title" class="navbar-brand" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
4
4
  <div class="navbar-links">
5
- <span class="nav-toggle" id="js-nav-toggle">
6
- <svg viewBox="0 0 100 80" width="20" height="20" fill="currentColor">
5
+ <button type="button" class="nav-toggle navbar-toggler" id="js-nav-toggle" aria-expanded="false" aria-controls="js-menu" aria-label="Abrir menú de navegación">
6
+ <svg viewBox="0 0 100 80" width="20" height="20" fill="currentColor" aria-hidden="true">
7
7
  <rect width="100" height="18" rx="8"></rect>
8
8
  <rect y="30" width="100" height="18" rx="8"></rect>
9
9
  <rect y="60" width="100" height="18" rx="8"></rect>
10
10
  </svg>
11
- </span>
11
+ </button>
12
12
  <div id="navbar-nav">
13
13
  <ul class="nav-list" id="js-menu">
14
14
  {% assign default_paths = site.pages | map: "path" %}
@@ -9,6 +9,6 @@
9
9
  <script defer src="{{ '/assets/js/theme-toggle.js' | relative_url }}"></script>
10
10
  <script defer src="{{ '/assets/js/main.js' | relative_url }}"></script>
11
11
 
12
- {% if site.analytics %}
12
+ {% if site.analytics.google.tracking_id and site.analytics.google.tracking_id != "" %}
13
13
  {% include /analytics/googleAnalytics.html %}
14
14
  {% endif %}
@@ -3,16 +3,16 @@
3
3
  <div>
4
4
  <ul>
5
5
  <li>
6
- <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">
7
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="social-networks-icons" viewBox="0 0 16 16">
6
+ <a class="link" href="https://twitter.com/share?text={{ page.title | url_encode }}&url={{ site.url }}{{ page.url }}" target="_blank" rel="noopener noreferrer" title="X.com">
7
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="social-networks-icons" viewBox="0 0 16 16" aria-hidden="true">
8
8
  <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"/>
9
9
  </svg>
10
10
  Share on X
11
11
  </a>
12
12
  </li>
13
13
  <li>
14
- <a class="link" href="https://linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ page.url }}" target="_blank" rel="noopener" title="LinkedIn">
15
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="social-networks-icons" viewBox="0 0 16 16">
14
+ <a class="link" href="https://linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ page.url }}" target="_blank" rel="noopener noreferrer" title="LinkedIn">
15
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="social-networks-icons" viewBox="0 0 16 16" aria-hidden="true">
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"/>
17
17
  </svg>
18
18
  Share on LinkedIn
@@ -1,6 +1,5 @@
1
1
  <aside>
2
2
  <section class="author-info">
3
- <!-- <h2>Sobre el Autor</h2> -->
4
3
  <picture>
5
4
  <source srcset="{{ site.author.avatar | replace: '.jpg', '.webp' | replace: '.jpeg', '.webp' | replace: '.png', '.webp' }}" type="image/webp">
6
5
  <img class="about-image-small" src="{{ site.author.avatar }}" alt="{{ site.author.name }}" loading="lazy">
@@ -12,7 +11,7 @@
12
11
  {% if site.author.location %}
13
12
  <li>
14
13
  <span>
15
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
14
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
16
15
  <path
17
16
  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"
18
17
  fill="currentColor" />
@@ -24,10 +23,10 @@
24
23
  <ul class="horizontal">
25
24
  {% if site.author.uri %}
26
25
  <li>
27
- <a class="link" href="{{ site.author.uri }}" target="_blank" rel="noopener"
26
+ <a class="link" href="{{ site.author.uri }}" target="_blank" rel="noopener noreferrer"
28
27
  title="Website">
29
28
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
30
- class="social-networks-icons" viewBox="0 0 16 16">
29
+ class="social-networks-icons" viewBox="0 0 16 16" aria-hidden="true">
31
30
  <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"/>
32
31
  </svg>
33
32
  </a>
@@ -35,10 +34,10 @@
35
34
  {% endif %}
36
35
  {% if site.author.x %}
37
36
  <li>
38
- <a class="link" href="https://x.com/{{ site.author.x }}" target="_blank" rel="noopener"
37
+ <a class="link" href="https://x.com/{{ site.author.x }}" target="_blank" rel="noopener noreferrer"
39
38
  title="X.com">
40
39
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
41
- class="social-networks-icons" viewBox="0 0 16 16">
40
+ class="social-networks-icons" viewBox="0 0 16 16" aria-hidden="true">
42
41
  <path
43
42
  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" />
44
43
  </svg>
@@ -48,9 +47,9 @@
48
47
  {% if site.author.linkedin %}
49
48
  <li>
50
49
  <a class="link" href="https://linkedin.com/in/{{ site.author.linkedin }}" target="_blank"
51
- rel="noopener" title="LinkedIn">
50
+ rel="noopener noreferrer" title="LinkedIn">
52
51
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
53
- class="social-networks-icons" viewBox="0 0 16 16">
52
+ class="social-networks-icons" viewBox="0 0 16 16" aria-hidden="true">
54
53
  <path
55
54
  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" />
56
55
  </svg>
@@ -59,9 +58,9 @@
59
58
  {% endif %}
60
59
  {% if site.author.email %}
61
60
  <li>
62
- <a class="link" href="mailto: {{ site.author.email}}" target="_blank" rel="noopener" title="Email">
61
+ <a class="link" href="mailto:{{ site.author.email }}" target="_blank" rel="noopener noreferrer" title="Email">
63
62
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
64
- class="social-networks-icons" viewBox="0 0 23 23">
63
+ class="social-networks-icons" viewBox="0 0 23 23" aria-hidden="true">
65
64
  <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"
66
65
  fill="none" stroke="currentColor" stroke-width="2" />
67
66
  <path d="M22 6l-10 7L2 6" fill="none" stroke="currentColor" stroke-width="2"
@@ -72,9 +71,9 @@
72
71
  {% endif %}
73
72
  {% if site.author.github %}
74
73
  <li>
75
- <a class="link" href="https://github.com/{{ site.author.github}}" target="_blank" rel="noopener" title="GitHub">
74
+ <a class="link" href="https://github.com/{{ site.author.github}}" target="_blank" rel="noopener noreferrer" title="GitHub">
76
75
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
77
- class="social-networks-icons" viewBox="0 0 24 24">
76
+ class="social-networks-icons" viewBox="0 0 24 24" aria-hidden="true">
78
77
  <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>
79
78
  </svg>
80
79
  </a>
@@ -82,8 +81,8 @@
82
81
  {% endif %}
83
82
  {% if site.author.stackoverflow %}
84
83
  <li>
85
- <a class="link" href="https://stackoverflow.com/users/{{ site.author.stackoverflow }}" target="_blank" rel="noopener" title="Stack Overflow">
86
- <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="25px" height="25px" viewBox="0 0 35 35">
84
+ <a class="link" href="https://stackoverflow.com/users/{{ site.author.stackoverflow }}" target="_blank" rel="noopener noreferrer" title="Stack Overflow">
85
+ <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="25px" height="25px" viewBox="0 0 35 35" aria-hidden="true">
87
86
  <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"/>
88
87
  </svg>
89
88
  </a>
@@ -17,7 +17,7 @@ layout: page
17
17
  <table>
18
18
  {% endif %}
19
19
 
20
- {% assign date_format = default: "%b %-d" %}
20
+ {% assign date_format = "%b %-d" %}
21
21
  <tr>
22
22
  <td><time datetime="{{ post.date | date:"%Y-%m-%d" }}">{{ post.date | date: date_format }}</time></td>
23
23
  <td>|</td>
@@ -16,10 +16,8 @@ title: Categories
16
16
  {% for category in site.categories %}
17
17
  <div class="archive-group">
18
18
  {% capture category_name %}{{ category | first }}{% endcapture %}
19
- <div id="#{{ category_name | slugize }}"></div>
20
- <p></p>
21
- <h5 style='color:white !important;'><a class="badge badge-{{ category_name }}">{{ category_name }}</a></h5>
22
- <a name="{{ category_name | slugize }}"></a>
19
+ <div id="{{ category_name | slugize }}"></div>
20
+ <h2><a class="badge badge-{{ category_name }}">{{ category_name }}</a></h2>
23
21
  <table>
24
22
  {% for post in site.categories[category_name] %}
25
23
  <tr>
@@ -36,4 +34,4 @@ title: Categories
36
34
  {% endfor %}
37
35
  </div>
38
36
  </article>
39
- </div>
37
+ </div>
@@ -6,11 +6,12 @@
6
6
  {% include head.html %}
7
7
 
8
8
  <body>
9
+ <a href="#main-content" class="skip-link">Saltar al contenido principal</a>
9
10
  {% include header.html %}
10
11
 
11
12
  <div class="main-wrapper">
12
- {% include sidebar.html %}
13
- <main>
13
+ {% include sidebar.html %}
14
+ <main id="main-content">
14
15
  {{ content }}
15
16
  </main>
16
17
  </div>
data/_layouts/home.html CHANGED
@@ -7,15 +7,16 @@ layout: default
7
7
  <article class="post">
8
8
  <div id="content">
9
9
  {% assign posts = site.posts %}
10
+ <h1 class="sr-only">{{ site.title }} — Posts</h1>
10
11
  <ul>
11
12
  {% assign date_format = "%b %-d, %Y" %}
12
13
  {% for post in paginator.posts %}
13
14
  <li class="post-resume">
14
- <h1 class="post-resume-title">
15
+ <h2 class="post-resume-title">
15
16
  <a href="{{ post.url | relative_url }}">
16
17
  <span class="underline">{{ post.title | escape }}</span>
17
18
  </a>
18
- </h1>
19
+ </h2>
19
20
  <span class="text-secondary">{{ post.date | date: date_format }}</span>
20
21
  <div>
21
22
  {{ post.excerpt }}
@@ -24,76 +25,75 @@ layout: default
24
25
  {% endfor %}
25
26
  </ul>
26
27
  {% if paginator.total_pages > 1 %}
27
- <nav class="pagination">
28
+ <nav class="pagination" aria-label="Paginación de posts">
28
29
  {% assign first_page_path = site.paginate_path | replace: 'page:num', '' | replace: '//', '/' | absolute_url %}
29
30
  <ul>
30
31
  {% comment %} Link for previous page {% endcomment %}
31
32
  {% if paginator.previous_page %}
32
- {% if paginator.previous_page == 1 %}
33
- <li>
34
- <a href="{{ first_page_path }}">
35
- <span class="chevron left"></span>
36
- </a>
37
- </li>
38
- {% else %}
39
- <li>
40
- <a href="{{ site.paginate_path | replace: ':num', paginator.previous_page | replace: '//', '/' | absolute_url }}">
41
- <span class="chevron left"></span>
42
- </a>
43
- </li>
44
- {% endif %}
33
+ {% if paginator.previous_page == 1 %}
34
+ <li>
35
+ <a href="{{ first_page_path }}" aria-label="Página anterior">
36
+ <span class="chevron left" aria-hidden="true"></span>
37
+ </a>
38
+ </li>
39
+ {% else %}
40
+ <li>
41
+ <a href="{{ site.paginate_path | replace: ':num', paginator.previous_page | replace: '//', '/' | absolute_url }}" aria-label="Página anterior">
42
+ <span class="chevron left" aria-hidden="true"></span>
43
+ </a>
44
+ </li>
45
+ {% endif %}
45
46
  {% else %}
46
- <li><a href="#" class="disabled"><span id="previous-page" aria-hidden="true"></span></a></li>
47
+ <li><span class="pagination-item disabled" aria-hidden="true"><span class="chevron left" aria-hidden="true"></span></span></li>
47
48
  {% endif %}
49
+
48
50
  {% comment %} First page {% endcomment %}
49
51
  {% if paginator.page == 1 %}
50
- <li><a href="#" class="disabled current">1</a></li>
52
+ <li><span class="pagination-item current" aria-current="page">1</span></li>
51
53
  {% else %}
52
54
  <li><a href="{{ first_page_path }}">1</a></li>
53
55
  {% endif %}
56
+
54
57
  {% assign page_start = 2 %}
55
58
  {% if paginator.page > 4 %}
56
59
  {% assign page_start = paginator.page | minus: 2 %}
57
- {% comment %} Ellipsis for truncated links {% endcomment %}
58
- <li><a href="#" class="disabled">&hellip;</a></li>
60
+ <li><span class="pagination-item disabled" aria-hidden="true">&hellip;</span></li>
59
61
  {% endif %}
62
+
60
63
  {% assign page_end = paginator.total_pages | minus: 1 %}
61
64
  {% assign pages_to_end = paginator.total_pages | minus: paginator.page %}
62
65
  {% if pages_to_end > 4 %}
63
66
  {% assign page_end = paginator.page | plus: 2 %}
64
67
  {% endif %}
68
+
65
69
  {% for index in (page_start..page_end) %}
66
- {% if index == paginator.page %}
67
- <li><a href="{{ site.paginate_path | replace: ':num', index | replace: '//', '/' | absolute_url }}" class="disabled current">{{ index }}</a></li>
68
- {% else %}
69
- {% comment %} Distance from current page and this link {% endcomment %}
70
- {% assign dist = paginator.page | minus: index %}
71
- {% if dist < 0 %}
72
- {% comment %} Distance must be a positive value {% endcomment %}
73
- {% assign dist = 0 | minus: dist %}
74
- {% endif %}
75
- <li><a href="{{ site.paginate_path | replace: ':num', index | absolute_url }}">{{ index }}</a></li>
76
- {% endif %}
77
- {% endfor %}
78
- {% comment %} Ellipsis for truncated links {% endcomment %}
79
- {% if pages_to_end > 3 %}
80
- <li><a href="#" class="disabled">&hellip;</a></li>
81
- {% endif %}
82
- {% if paginator.page == paginator.total_pages %}
83
- <li><a href="#" class="disabled current">{{ paginator.page }}</a></li>
84
- {% else %}
85
- <li><a href="{{ site.paginate_path | replace: ':num', paginator.total_pages | replace: '//', '/' | absolute_url }}">{{ paginator.total_pages }}</a></li>
86
- {% endif %}
87
- {% comment %} Link next page {% endcomment %}
88
- {% if paginator.next_page %}
89
- <li>
90
- <a href="{{ site.paginate_path | replace: ':num', paginator.next_page | replace: '//', '/' | absolute_url }}">
91
- <span class="chevron right"></span>
92
- </a>
93
- </li>
70
+ {% if index == paginator.page %}
71
+ <li><span class="pagination-item current" aria-current="page">{{ index }}</span></li>
94
72
  {% else %}
95
- <li><a href="#" class="disabled"><span class="chevron right" aria-hidden="true"></span></a></li>
73
+ <li><a href="{{ site.paginate_path | replace: ':num', index | replace: '//', '/' | absolute_url }}">{{ index }}</a></li>
96
74
  {% endif %}
75
+ {% endfor %}
76
+
77
+ {% if pages_to_end > 3 %}
78
+ <li><span class="pagination-item disabled" aria-hidden="true">&hellip;</span></li>
79
+ {% endif %}
80
+
81
+ {% if paginator.page == paginator.total_pages %}
82
+ <li><span class="pagination-item current" aria-current="page">{{ paginator.page }}</span></li>
83
+ {% else %}
84
+ <li><a href="{{ site.paginate_path | replace: ':num', paginator.total_pages | replace: '//', '/' | absolute_url }}">{{ paginator.total_pages }}</a></li>
85
+ {% endif %}
86
+
87
+ {% comment %} Link next page {% endcomment %}
88
+ {% if paginator.next_page %}
89
+ <li>
90
+ <a href="{{ site.paginate_path | replace: ':num', paginator.next_page | replace: '//', '/' | absolute_url }}" aria-label="Página siguiente">
91
+ <span class="chevron right" aria-hidden="true"></span>
92
+ </a>
93
+ </li>
94
+ {% else %}
95
+ <li><span class="pagination-item disabled" aria-hidden="true"><span class="chevron right" aria-hidden="true"></span></span></li>
96
+ {% endif %}
97
97
  </ul>
98
98
  </nav>
99
99
  {% endif %}
@@ -102,4 +102,4 @@ layout: default
102
102
  {% endif %}
103
103
  </div>
104
104
  </article>
105
- </div>
105
+ </div>
data/_layouts/post.html CHANGED
@@ -27,16 +27,15 @@ layout: default
27
27
  <div id="navigation-space" class="row-grid">
28
28
  <div class="previous">
29
29
  {% if page.previous.url %}
30
- <a href="{{page.previous.url}}" class="nav-btn prev-btn" title="{{page.previous.title}}">
31
- <span class="chevron left"></span>
32
-
30
+ <a href="{{page.previous.url}}" class="nav-btn prev-btn" title="{{page.previous.title}}" aria-label="Post anterior: {{page.previous.title}}">
31
+ <span class="chevron left" aria-hidden="true"></span>
33
32
  </a>
34
33
  {% endif %}
35
34
  </div>
36
- <div class="next">
35
+ <div class="next">
37
36
  {% if page.next.url %}
38
- <a href="{{page.next.url}}" class="nav-btn next-btn" title="{{page.next.title}}">
39
- <span class="chevron right"></span>
37
+ <a href="{{page.next.url}}" class="nav-btn next-btn" title="{{page.next.title}}" aria-label="Siguiente post: {{page.next.title}}">
38
+ <span class="chevron right" aria-hidden="true"></span>
40
39
  </a>
41
40
  {% endif %}
42
41
  </div>
@@ -51,6 +50,9 @@ layout: default
51
50
  {% assign date_format = site.theme.date_format | default: "%b %-d, %Y" %}
52
51
  {{ page.date | date: date_format }}
53
52
  </time>
53
+ {% assign words = content | number_of_words %}
54
+ {% assign reading_minutes = words | divided_by: 200 | plus: 1 %}
55
+ <span aria-label="{{ reading_minutes }} minutos de lectura">{{ reading_minutes }} min read</span>
54
56
  {% if site.addons.old_post_warning %}
55
57
  {% assign current_timestamp = 'now' | date: '%s' | plus: 0 %}
56
58
  {% assign one_year_ago = current_timestamp | minus: 31536000 %}
data/_pages/search.md CHANGED
@@ -6,11 +6,12 @@ permalink: /search/
6
6
  ---
7
7
 
8
8
  <div id="search-container">
9
+ <label for="search-input" class="sr-only">Buscar en el blog</label>
9
10
  <input type="text" id="search-input" placeholder="Search for interesting stuff... or maybe not...">
10
- <ul id="results-container"></ul>
11
+ <ul id="results-container" aria-live="polite" aria-label="Resultados de búsqueda"></ul>
11
12
  </div>
12
13
 
13
- <script src="/assets/js/jekyll-search.min.js" type="text/javascript"></script>
14
+ <script defer src="{{ '/assets/js/jekyll-search.min.js' | relative_url }}"></script>
14
15
  <script type="text/javascript">
15
16
  SimpleJekyllSearch({
16
17
  searchInput: document.getElementById('search-input'),
@@ -1,17 +1,21 @@
1
- @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
2
-
3
1
  :root {
4
2
  --color-bg: #F5F5F5;
5
3
  --color-accent: #17E9E0;
6
- --color-primary: #A64AC9;
4
+ --color-primary: #923DB5;
7
5
  --color-text: #212529;
8
6
  --color-dark: #313638;
9
7
  --color-highlight: #25E498;
10
- --color-code: #D63384;
8
+ --color-code: #C01979;
11
9
  --color-code-bg: #282a36;
12
10
  --color-notice: #CFBAE1;
13
11
  --color-success: #28a745;
12
+ --color-blockquote: #F39237;
13
+ --color-warning-bg: #fff3cd;
14
+ --color-warning-text: #856404;
15
+ --color-warning-border: #ffeaa7;
16
+ --color-warning-icon: #ffc107;
14
17
  --font-main: 'Space Grotesk', system-ui, -apple-system, sans-serif;
18
+ --font-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif;
15
19
  --container-width: 90%;
16
20
  --transition-default: all 0.3s ease-in-out;
17
21
  }
@@ -19,16 +23,47 @@
19
23
  [data-theme="dark"] {
20
24
  --color-bg: rgb(37,36,47);
21
25
  --color-accent: #44318D;
22
- --color-primary: #C266E8;
26
+ --color-primary: #CE80EF;
23
27
  --color-text: #E8E8E8;
24
28
  --color-dark: #CCCCCC;
25
29
  --color-highlight: #D83F87;
26
30
  --color-code: #FF6B9D;
27
31
  --color-code-bg: #282a36;
28
32
  --color-notice: #4A3B5C;
29
- --font-main: 'Space Grotesk', system-ui, -apple-system, sans-serif;
30
- --container-width: 90%;
31
- --transition-default: all 0.3s ease-in-out;
33
+ --color-blockquote: #F39237;
34
+ --color-warning-bg: #3a2e10;
35
+ --color-warning-text: #f0c040;
36
+ --color-warning-border: #5a4820;
37
+ --color-warning-icon: #f0c040;
38
+ }
39
+
40
+ .sr-only {
41
+ position: absolute;
42
+ width: 1px;
43
+ height: 1px;
44
+ padding: 0;
45
+ margin: -1px;
46
+ overflow: hidden;
47
+ clip: rect(0, 0, 0, 0);
48
+ white-space: nowrap;
49
+ border: 0;
50
+ }
51
+
52
+ .skip-link {
53
+ position: absolute;
54
+ top: -100%;
55
+ left: 1rem;
56
+ padding: 0.5rem 1rem;
57
+ background: var(--color-primary);
58
+ color: var(--color-bg);
59
+ z-index: 9999;
60
+ text-decoration: none;
61
+ border-radius: 0 0 0.25rem 0.25rem;
62
+ font-weight: 600;
63
+
64
+ &:focus {
65
+ top: 0;
66
+ }
32
67
  }
33
68
 
34
69
  *,
@@ -57,6 +92,11 @@ body {
57
92
  overflow-y: scroll;
58
93
  }
59
94
 
95
+ h1, h2, h3, h4, h5, h6 {
96
+ font-family: var(--font-heading);
97
+ scroll-margin-top: 1.5rem;
98
+ }
99
+
60
100
  .main-wrapper {
61
101
  display: flex;
62
102
  flex: 1;
@@ -144,8 +184,8 @@ main {
144
184
  width: 30px;
145
185
  height: 30px;
146
186
  font-size: 20px;
147
- padding-bottom: 5px;
148
187
  cursor: pointer;
188
+ display: flex;
149
189
  align-items: center;
150
190
  justify-content: center;
151
191
  transition: var(--transition-default);
@@ -197,7 +237,7 @@ main {
197
237
  }
198
238
 
199
239
  .link:hover::before,
200
- .link:focus::before {
240
+ .link:focus-visible::before {
201
241
  left: -2px;
202
242
  bottom: 0;
203
243
  height: 100%;
@@ -223,7 +263,7 @@ a>.underline {
223
263
  }
224
264
 
225
265
  .underline:hover,
226
- .underline:focus {
266
+ .underline:focus-visible {
227
267
  box-shadow: inset 0 -45px 0 var(--color-accent), 0 0 0 var(--color-accent);
228
268
  }
229
269
 
@@ -247,7 +287,7 @@ a#blog-title::before {
247
287
  }
248
288
 
249
289
  a#blog-title:hover::before,
250
- a#blog-title:focus::before {
290
+ a#blog-title:focus-visible::before {
251
291
  height: 110%;
252
292
  width: calc(110% + 5px);
253
293
  }
@@ -320,7 +360,8 @@ a#blog-title:focus::before {
320
360
  z-index: -1;
321
361
  }
322
362
 
323
- #navbar-nav a:hover::before {
363
+ #navbar-nav a:hover::before,
364
+ #navbar-nav a:focus-visible::before {
324
365
  transform-origin: left;
325
366
  transform: scaleX(1);
326
367
  }
@@ -333,6 +374,8 @@ a#blog-title:focus::before {
333
374
  .post-resume-title {
334
375
  margin-top: 0.25rem;
335
376
  margin-bottom: 0.75rem;
377
+ font-size: 1.75rem;
378
+ font-weight: 500;
336
379
 
337
380
  a {
338
381
  color: var(--color-text);
@@ -384,11 +427,8 @@ img {
384
427
  }
385
428
 
386
429
  figure {
387
- display: -webkit-box;
388
430
  display: flex;
389
- -webkit-box-pack: justify;
390
431
  justify-content: space-between;
391
- -webkit-box-align: start;
392
432
  align-items: flex-start;
393
433
  flex-wrap: wrap;
394
434
  margin: 2em 0;
@@ -504,10 +544,9 @@ code {
504
544
  }
505
545
 
506
546
  blockquote {
507
- border-top: 1px solid #F39237;
508
- margin: 1.5em 0;
547
+ border-top: 1px solid var(--color-blockquote);
509
548
  padding: 0.5em 1.25em;
510
- border-bottom: 1px solid #F39237;
549
+ border-bottom: 1px solid var(--color-blockquote);
511
550
  font-style: italic;
512
551
  font-weight: 700;
513
552
  font-size: 1.1rem;
@@ -534,7 +573,8 @@ blockquote p {
534
573
  min-width: 100%;
535
574
  }
536
575
 
537
- .highlight pre button {
576
+ .highlight pre button,
577
+ .copy-btn {
538
578
  position: absolute;
539
579
  top: 0.5rem;
540
580
  right: 0.5rem;
@@ -682,10 +722,10 @@ svg {
682
722
  display: flex;
683
723
  align-items: center;
684
724
  gap: 4px;
685
- background-color: #fff3cd;
686
- color: #856404;
725
+ background-color: var(--color-warning-bg);
726
+ color: var(--color-warning-text);
687
727
  padding: 4px 8px;
688
- border: 1px solid #ffeaa7;
728
+ border: 1px solid var(--color-warning-border);
689
729
  border-radius: 4px;
690
730
  font-size: 12px;
691
731
  font-weight: 500;
@@ -698,7 +738,7 @@ svg {
698
738
  display: block;
699
739
  width: 12px;
700
740
  height: 12px;
701
- background-color: #ffc107;
741
+ background-color: var(--color-warning-icon);
702
742
  border-radius: 50%;
703
743
  position: relative;
704
744
  flex-shrink: 0;
@@ -812,10 +852,31 @@ svg {
812
852
 
813
853
  .pagination a.disabled {
814
854
  opacity: 0.5;
815
- cursor: none;
855
+ cursor: not-allowed;
816
856
  pointer-events: none;
817
857
  }
818
858
 
859
+ .pagination .pagination-item {
860
+ display: inline-flex;
861
+ align-items: center;
862
+ justify-content: center;
863
+ min-width: 45px;
864
+ height: 45px;
865
+ padding: 0 10px;
866
+ color: var(--color-primary);
867
+ border-radius: 25px;
868
+
869
+ &.disabled {
870
+ opacity: 0.5;
871
+ cursor: default;
872
+ }
873
+
874
+ &.current {
875
+ background: var(--color-primary);
876
+ color: white;
877
+ }
878
+ }
879
+
819
880
  .about-image {
820
881
  border-radius: 50%;
821
882
  width: 280px;
@@ -849,7 +910,8 @@ svg {
849
910
 
850
911
  #search-input {
851
912
  margin: 2em 0em;
852
- width: 50%;
913
+ max-width: 600px;
914
+ width: 100%;
853
915
  font-size: 16px;
854
916
  line-height: 30px;
855
917
  padding: 0.2em;
data/assets/js/main.js CHANGED
@@ -14,9 +14,8 @@ blocks.forEach((block) => {
14
14
  if (navigator.clipboard) {
15
15
  let button = document.createElement("button");
16
16
  button.innerHTML = copyButtonSVG;
17
- button.style.position = "absolute";
18
- button.style.top = "5px";
19
- button.style.right = "5px";
17
+ button.setAttribute("aria-label", "Copiar código");
18
+ button.classList.add("copy-btn");
20
19
  block.style.position = "relative";
21
20
  block.appendChild(button);
22
21
  button.addEventListener("click", async () => {
@@ -32,10 +31,12 @@ async function copyCode(block, button) {
32
31
  try {
33
32
  await navigator.clipboard.writeText(text);
34
33
  button.innerHTML = checkmarkSVG;
34
+ button.setAttribute("aria-label", "Copiado");
35
35
  button.classList.add("copy-success");
36
36
 
37
37
  setTimeout(() => {
38
38
  button.innerHTML = copyButtonSVG;
39
+ button.setAttribute("aria-label", "Copiar código");
39
40
  button.classList.remove("copy-success");
40
41
  }, 1000);
41
42
  } catch (err) {
@@ -47,6 +48,9 @@ async function copyCode(block, button) {
47
48
  let mainNav = document.getElementById("js-menu");
48
49
  let navBarToggle = document.getElementById("js-nav-toggle");
49
50
 
50
- navBarToggle.addEventListener("click", function() {
51
- mainNav.classList.toggle("active");
52
- });
51
+ if (navBarToggle) {
52
+ navBarToggle.addEventListener("click", function() {
53
+ const isExpanded = mainNav.classList.toggle("active");
54
+ navBarToggle.setAttribute("aria-expanded", isExpanded);
55
+ });
56
+ }
@@ -63,7 +63,4 @@
63
63
  } else {
64
64
  init();
65
65
  }
66
-
67
- const initialTheme = getThemePreference();
68
- document.documentElement.setAttribute('data-theme', initialTheme);
69
66
  })();
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: whiteblog-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.3.2
4
+ version: 0.4.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Victor Silva
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2026-06-14 00:00:00.000000000 Z
11
+ date: 2026-06-19 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll