whiteblog-theme 0.0.13 → 0.0.15

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: bf7739d3efd1f44653467fd7244334f09fb84e47fa61a00b22a3f78da3f182b6
4
- data.tar.gz: 9754f8d9f86bdfd016b586154c109ac86b748c05a9f4276b00fb66fad19d3fae
3
+ metadata.gz: ddb4ce05cfdb8446e1a75f05599ae3855e646cbb8b2dc39ce74d35d3dfeaf55c
4
+ data.tar.gz: f7f051c314763e2cb588d38511b71aa367e5b5934237da319bb00380812db092
5
5
  SHA512:
6
- metadata.gz: 2aca0a17e4a40e01c8ac419f94882de2f4fe02b3473d9af14464e1677bb82d2a78bb226f19329073a8a4d3be72a6d470280d7414d693d0f5179172f46de989ef
7
- data.tar.gz: 5fb0275efbba935ca86c97d7937e044712b4a2d27223e7caedae86b3349374374f520f56de2319b07c70c8b44fc04587e28faa78a39fa1aef3c5450eec4fda17
6
+ metadata.gz: 997d00f727a11f0c93f3c42413acaecfb69d85982f035dd1dacc8a134d79be26d013ab02686328d6afcc747d5f63b3eca0499946e89944524874187009cb9317
7
+ data.tar.gz: b4feacbccd8c9f9acc1bcaae8fa0e6a50ee1aeec4b2e5784266645b4f8ed84121a5e283fb4d8221c1907d75e6d1f693dfb022067f703472224047f4e0d00cd1a
@@ -0,0 +1,11 @@
1
+ {% if site.analytics %}
2
+ <!-- Google tag (gtag.js) -->
3
+ <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.analytics.google.tracking_id }}"></script>
4
+ <script>
5
+ window.dataLayer = window.dataLayer || [];
6
+ function gtag(){dataLayer.push(arguments);}
7
+ gtag('js', new Date());
8
+
9
+ gtag('config', '{{ site.analytics.google.tracking_id }}');
10
+ </script>
11
+ {% endif %}
@@ -1,3 +1,5 @@
1
- <div class="col float-end">
2
- <a class="float-end back" href="#"><i class="bi bi-chevron-double-up"></i></a>
1
+ <div class="float-end">
2
+ <a class="float-end back" href="#">
3
+ <span class="chevron top"></span>
4
+ </a>
3
5
  </div>
@@ -1,9 +1,16 @@
1
1
  <footer id="site-footer">
2
2
  <div class="container">
3
- <div class="row">
4
- <div class="col-12 col-lg">
5
- <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>
6
- </div>
3
+ <div class="footer-text">
4
+ <p>
5
+ Made with
6
+ <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">
7
+ <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"/>
8
+ </svg>
9
+ and
10
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cup-fill" viewBox="0 0 16 16">
11
+ <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"/>
12
+ </svg>
13
+ . 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>
7
14
  </div>
8
15
  </div>
9
16
  </footer>
data/_includes/head.html CHANGED
@@ -12,7 +12,7 @@
12
12
  content="{{ site.url }}/assets/images/previews/{{ page.slug }}.png">
13
13
 
14
14
  <!-- Bootstrap CSS -->
15
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
15
+ <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> -->
16
16
 
17
17
 
18
18
  <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
@@ -1,19 +1,23 @@
1
- <nav class="navbar navbar-expand-lg bg-body-tertiary">
2
- <div class="container-fluid container">
3
- <a id="blog-title" class="navbar-brand" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
4
- <div class="justify-content-end">
5
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
6
- <span class="navbar-toggler-icon"></span>
7
- </button>
8
- <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
9
- <ul class="navbar-nav">
1
+ <nav class="navbar">
2
+ <div class="container">
3
+ <a id="blog-title" class="navbarBrand" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
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">
7
+ <rect width="100" height="18" rx="8"></rect>
8
+ <rect y="30" width="100" height="18" rx="8"></rect>
9
+ <rect y="60" width="100" height="18" rx="8"></rect>
10
+ </svg>
11
+ </span>
12
+ <div id="navbarNav">
13
+ <ul class="lista" id="js-menu">
10
14
  {% assign default_paths = site.pages | map: "path" %}
11
15
  {% assign page_paths = site.header_pages | default: default_paths %}
12
16
  {% if page_paths %}
13
17
  {% for path in page_paths %}
14
18
  {% assign my_page = site.pages | where: "path", path | first %}
15
19
  {% if my_page.title %}
16
- <li class="nav-item"><a class="nav-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a></li>
20
+ <li><a href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a></li>
17
21
  {% endif %}
18
22
  {% endfor %}
19
23
  {% endif %}
@@ -0,0 +1,5 @@
1
+ <script src="{{ '/assets/js/main.js' | relative_url }}"></script>
2
+
3
+ {% if site.analytics %}
4
+ {% include /analytics/googleAnalytics.html %}
5
+ {% endif %}
@@ -1,13 +1,24 @@
1
- <div class="col text-final" id="share-links">
1
+ <!-- <div class="col text-final" id="share-links"> -->
2
+ <div class="col text-final">
2
3
  <h5><i class="bi bi-share"></i></h5>
3
4
  <div class="row">
4
- <div class="col float-start">
5
+ <div class="float-start">
5
6
  <ul>
6
7
  <li>
7
- <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>
8
+ <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">
9
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="social-networks-icons" viewBox="0 0 16 16">
10
+ <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"/>
11
+ </svg>
12
+ Share on X
13
+ </a>
8
14
  </li>
9
15
  <li>
10
- <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>
16
+ <a class="link" href="https://linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ page.url }}" target="_blank" rel="noopener" title="LinkedIn">
17
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="social-networks-icons" viewBox="0 0 16 16">
18
+ <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"/>
19
+ </svg>
20
+ Share on LinkedIn
21
+ </a>
11
22
  </li>
12
23
  </ul>
13
24
 
@@ -15,11 +15,18 @@ title: Categories
15
15
  <p></p>
16
16
  <h5 style='color:white !important;'><a class="badge badge-{{ category_name }}">{{ category_name }}</a></h5>
17
17
  <a name="{{ category_name | slugize }}"></a>
18
+ <table>
18
19
  {% for post in site.categories[category_name] %}
19
- <article class="archive-item">
20
- <p><a href="{{ site.baseurl }}{{ post.url }}">{{post.title}}</a></p>
21
- </article>
20
+ <tr>
21
+ <th>
22
+ (<time datetime="{{ post.date | date_to_xmlschema }}" class="post-date">{{ post.date | date: "%b %-d, %Y" }}</time>)
23
+ </th>
24
+ <th>
25
+ <a href="{{ site.baseurl }}{{ post.url }}">{{post.title}}</a>
26
+ </th>
27
+ </tr>
22
28
  {% endfor %}
29
+ </table>
23
30
  </div>
24
31
  {% endfor %}
25
32
  </div>
@@ -3,27 +3,24 @@
3
3
  <!DOCTYPE html>
4
4
  <html lang="{{ page.lang | default: site.lang | default: "en" }}">
5
5
 
6
- <title>{{ page.title }}</title>
6
+ <title>{{ site.title }}</title>
7
+ <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
8
+ {% include head.html %}
7
9
 
8
- {% include head.html %}
10
+ <body>
9
11
 
10
- <body>
12
+ {% include header.html %}
11
13
 
12
- {% include header.html %}
14
+ <main>
15
+ <div class="container" id="post">
16
+ {{ content }}
17
+ </div>
18
+ </main>
13
19
 
14
- <main>
15
- <div class="container" id="post">
16
- {{ content }}
17
- </div>
18
- </main>
20
+ {% include footer.html %}
19
21
 
20
- {% include footer.html %}
22
+ {% include scripts.html %}
21
23
 
22
- <!-- jQuery, Popper.js, Bootstrap JS -->
23
- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
24
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
25
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
24
+ </body>
26
25
 
27
- </body>
28
-
29
- </html>
26
+ </html>
data/_layouts/home.html CHANGED
@@ -7,10 +7,10 @@ layout: default
7
7
 
8
8
  {% assign posts = site.posts %}
9
9
 
10
- <ul class="list-unstyled m-0 posts-list">
10
+ <ul>
11
11
  {% assign date_format = "%b %-d, %Y" %}
12
12
  {% for post in posts %}
13
- <li class="py-2">
13
+ <li class="post-resume">
14
14
  <h1 class="mt-1 mb-3 h3 title-post-resume">
15
15
  <a class="title-link" href="{{ post.url | relative_url }}"><span class="underline">{{ post.title | escape }}</span></a>
16
16
  </h1>
data/_layouts/page.html CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  layout: default
3
3
  ---
4
- <article>
4
+ <article class="post">
5
5
 
6
6
  <header>
7
7
  <h1>
data/_layouts/post.html CHANGED
@@ -3,18 +3,16 @@ layout: default
3
3
  ---
4
4
  <article class="post">
5
5
 
6
- <div id="posts-navigation">
7
- <div class="row">
8
- <div class="previous col">
9
- {% if page.previous.url %}
10
- <a href="{{page.previous.url}}">&laquo; {{page.previous.title}}</a>
11
- {% endif %}
12
- </div>
13
- <div class="next col">
14
- {% if page.next.url %}
15
- <a class="next" href="{{page.next.url}}">{{page.next.title}} &raquo;</a>
16
- {% endif %}
17
- </div>
6
+ <div id="posts-navigation" class="row">
7
+ <div class="previous">
8
+ {% if page.previous.url %}
9
+ <a href="{{page.previous.url}}">&laquo; {{page.previous.title}}</a>
10
+ {% endif %}
11
+ </div>
12
+ <div class="next">
13
+ {% if page.next.url %}
14
+ <a href="{{page.next.url}}">{{page.next.title}} &raquo;</a>
15
+ {% endif %}
18
16
  </div>
19
17
  </div>
20
18
 
@@ -23,7 +21,6 @@ layout: default
23
21
  <span class="underline">{{ page.title | escape }}</span>
24
22
  </h1>
25
23
  <p class="text-secondary">
26
- <i class="bi bi-calendar"></i><span style="display:inline-block; width: 3px;"></span>
27
24
  <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
28
25
  {% assign date_format = site.theme.date_format | default: "%b %-d, %Y" %}
29
26
  {{ page.date | date: date_format }}
@@ -35,7 +32,7 @@ layout: default
35
32
  {% endif %}
36
33
  <h5 id="category-badge">
37
34
  {% for category in categories %}
38
- <a href="{{site.baseurl}}/categories/#{{category|slugize}}" class="badge badge badge-bounce-in" >{{category}}</a>
35
+ <a href="{{site.baseurl}}/categories/#{{category|slugize}}" class="badge" >{{category}}</a>
39
36
  {% unless forloop.last %}&nbsp;{% endunless %}
40
37
  {% endfor %}
41
38
  </h5>
data/_pages/about.md ADDED
@@ -0,0 +1,15 @@
1
+ ---
2
+ title: About
3
+ author: Victor Silva
4
+ layout: page
5
+ permalink: /about/
6
+ ---
7
+
8
+ <div class="row">
9
+ <div class="center">
10
+ <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>
11
+ </div>
12
+ <div class="center">
13
+ <img class="about-image" src="/assets/images/bio-photo.jpg">
14
+ </div>
15
+ </div>
data/_pages/search.md CHANGED
@@ -1,18 +1,14 @@
1
1
  ---
2
2
  title: Search
3
3
  author: Victor Silva
4
- layout: default
4
+ layout: page
5
5
  permalink: /search/
6
6
  ---
7
- <article class="post">
8
- <h1>
9
- <span class="underline">Search</span>
10
- </h1>
11
- <div id="search-container">
12
- <input type="text" id="search-input" placeholder="Search for interesting stuff... or maybe not...">
13
- <ul id="results-container"></ul>
14
- </div>
15
- </article>
7
+
8
+ <div id="search-container">
9
+ <input type="text" id="search-input" placeholder="Search for interesting stuff... or maybe not...">
10
+ <ul id="results-container"></ul>
11
+ </div>
16
12
 
17
13
  <script src="/assets/js/jekyll-search.min.js" type="text/javascript"></script>
18
14
  <script type="text/javascript">
@@ -1,306 +1,531 @@
1
1
  @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
2
- @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
3
-
4
- //Color palette variables:
5
- // $firstColor: #FFF;
6
- $firstColor: #F5F5F5;
7
- // $secondColor: #19E9E0;
8
- $secondColor: #44cdd5;
9
- // $thirdColor: #A64AC9;
10
- $thirdColor: #614bc3;
11
- // $fourthColor: #000;
12
- $fourthColor: #212529;
13
- $fifthColor: #6C757D;
14
- // $sixthColor: #FF8484;
15
- // $sixthColor: #26C485;
16
- $sixthColor: #25E498;
17
2
 
3
+ :root {
4
+ --color-bg: #F5F5F5;
5
+ --color-accent: #44cdd5;
6
+ --color-primary: #614bc3;
7
+ --color-text: #212529;
8
+ --color-dark: #313638;
9
+ --color-highlight: #25E498;
10
+ --color-code: rgb(214, 51, 132);
11
+ --font-main: 'Space Grotesk', system-ui, -apple-system, sans-serif;
12
+ --container-width: 80%;
13
+ --transition-default: all 0.3s ease-in-out;
14
+ }
15
+
16
+ *,
17
+ *::before,
18
+ *::after {
19
+ // box-sizing: border-box;
20
+ margin: 0;
21
+ padding: 0;
22
+ }
18
23
 
19
24
  html {
20
25
  scroll-behavior: smooth;
26
+ font-size: 16px;
27
+ background-color: var(--color-bg);
21
28
  }
22
29
 
23
30
  body {
24
- background-color: $firstColor;
25
- color: $fourthColor;
26
- font-family: "Space Grotesk";
27
- overflow-y: scroll;
28
- position: relative;
31
+ font-family: var(--font-main);
32
+ font-size: 1rem;
33
+ font-weight: 400;
34
+ line-height: 1.5;
35
+ color: var(--color-text);
36
+ background-color: var(--color-bg);
29
37
  min-height: 100vh;
38
+ position: relative;
39
+ overflow-y: scroll;
30
40
  }
31
41
 
32
- main {
33
- padding-bottom: 2.5rem;
42
+ .container {
43
+ max-width: var(--container-width);
44
+ margin: 0 auto;
34
45
  }
35
46
 
36
- .container {
37
- padding: 0em;
38
- max-width: 80% !important;
47
+ main {
48
+ padding-bottom: 4rem;
39
49
  }
40
50
 
41
51
  .navbar {
42
- background-color: $firstColor !important;
43
- padding: 30px 0px !important;
44
- // a {
45
- // font-weight: 600;
46
- // // color: $firstColor !important;
47
- // }
48
- a#blog-title{
49
- position: relative;
50
- font-weight: bold;
51
- font-weight: 600;
52
- z-index: 0;
53
- &::before {
54
- content: '';
55
- background-color: $sixthColor;
56
- left: -10px;
57
- position: absolute;
58
- bottom: 1px;
59
- width: 100%;
60
- height: 8px;
61
- z-index: -1;
62
- transition: all .3s ease-in-out;
63
- }
64
-
65
- &:hover::before {
66
- left: -10px;
67
- bottom: 0;
68
- height: 100%;
69
- width: calc(110% + 5px);
70
- }
52
+ width: 100%;
53
+ background-color: var(--color-bg);
54
+ padding: 1.9rem 0;
55
+ position: relative;
56
+ }
57
+
58
+ .navbar .container {
59
+ display: flex;
60
+ align-items: center;
61
+ justify-content: space-between;
62
+ flex-wrap: nowrap;
63
+ }
64
+
65
+ .navbar-links > * {
66
+ margin-right: 10px;
67
+
68
+ ul li {
69
+ padding-left: 0.5rem;
70
+ padding-right: 0.5rem;
71
+ font-size: 1rem;
71
72
  }
72
73
  }
73
74
 
75
+ .navbarBrand {
76
+ padding: 0.3125rem 0;
77
+ margin-right: 1rem;
78
+ font-size: 1.25rem;
79
+ color: var(--color-text);
80
+ text-decoration: none;
81
+ white-space: nowrap;
82
+ }
83
+
84
+ .link {
85
+ position: relative;
86
+ font-weight: bold;
87
+ text-decoration: none;
88
+ color: var(--color-text);
89
+ z-index: 1;
90
+ }
91
+
92
+ .link::before {
93
+ content: '';
94
+ background-color: var(--color-highlight);
95
+ position: absolute;
96
+ left: 3%;
97
+ bottom: 1px;
98
+ width: 100%;
99
+ height: 8px;
100
+ z-index: -1;
101
+ transition: var(--transition-default);
102
+ }
103
+
104
+ .link:hover::before,
105
+ .link:focus::before {
106
+ left: -2px;
107
+ bottom: 0;
108
+ height: 100%;
109
+ width: calc(100% + 2px);
110
+ }
111
+
112
+ .underline {
113
+ position: relative;
114
+ text-decoration: none;
115
+ color: inherit;
116
+ overflow: hidden;
117
+ }
118
+
119
+ h1 > .underline {
120
+ box-shadow: inset 0 -19px 0 var(--color-accent), 0 0 0 var(--color-accent);
121
+ transition: box-shadow 0.3s;
122
+ font-size: 2rem;
123
+ }
124
+
125
+ a > .underline {
126
+ box-shadow: inset 0 -14px 0 var(--color-accent), 0 0 0 var(--color-accent);
127
+ transition: box-shadow 0.3s;
128
+ }
129
+
130
+ .underline:hover,
131
+ .underline:focus {
132
+ box-shadow: inset 0 -45px 0 var(--color-accent), 0 0 0 var(--color-accent);
133
+ }
134
+
135
+ a#blog-title {
136
+ position: relative;
137
+ font-weight: 600;
138
+ z-index: 1;
139
+ margin-left: 10px;
140
+ }
141
+
142
+ a#blog-title::before {
143
+ content: '';
144
+ background-color: var(--color-highlight);
145
+ position: absolute;
146
+ left: -10px;
147
+ bottom: -2px;
148
+ width: 100%;
149
+ height: 8px;
150
+ z-index: -1;
151
+ transition: var(--transition-default);
152
+ }
153
+
154
+ a#blog-title:hover::before,
155
+ a#blog-title:focus::before {
156
+ height: 110%;
157
+ width: calc(110% + 5px);
158
+ }
159
+
74
160
  .navbar-toggler {
75
161
  border: none;
76
- background: transparent !important;
77
-
78
- &:hover {
79
- background: transparent !important;
80
- }
162
+ background: transparent;
163
+ cursor: pointer;
164
+ padding: 0.5rem;
165
+ display: none;
166
+ }
81
167
 
82
- .icon-bar {
83
- width: 22px;
84
- transition: all 0.2s;
85
- }
168
+ .navbar-toggler:hover,
169
+ .navbar-toggler:focus {
170
+ background: transparent;
171
+ }
86
172
 
87
- .top-bar {
88
- transform: rotate(45deg);
89
- transform-origin: 10% 10%;
90
- }
173
+ .icon-bar {
174
+ width: 22px;
175
+ height: 2px;
176
+ background-color: var(--color-text);
177
+ display: block;
178
+ transition: var(--transition-default);
179
+ margin: 4px 0;
180
+ }
91
181
 
92
- .middle-bar {
93
- opacity: 0;
94
- }
182
+ .navbar-toggler .top-bar {
183
+ transform: rotate(0);
184
+ }
95
185
 
96
- .bottom-bar {
97
- transform: rotate(-45deg);
98
- transform-origin: 10% 90%;
99
- }
186
+ .navbar-toggler .middle-bar {
187
+ opacity: 1;
188
+ }
100
189
 
101
- &.collapsed {
102
- .top-bar {
103
- transform: rotate(0);
104
- }
105
- .middle-bar {
106
- opacity: 1;
107
- }
108
- .bottom-bar {
109
- transform: rotate(0);
110
- }
111
- }
190
+ .navbar-toggler .bottom-bar {
191
+ transform: rotate(0);
112
192
  }
113
193
 
114
- #nav-header {
115
- border-bottom: 1px solid $firstColor !important;
194
+ .navbar-toggler:not(.collapsed) .top-bar {
195
+ transform: rotate(45deg);
196
+ transform-origin: 10% 10%;
116
197
  }
117
198
 
118
- #nav-container {
119
- height: 3.5rem;
199
+ .navbar-toggler:not(.collapsed) .middle-bar {
200
+ opacity: 0;
120
201
  }
121
202
 
122
- .divider {
123
- background: $thirdColor;
124
- color: $thirdColor;
125
- margin: 0px;
126
- max-width: 80%;
203
+ .navbar-toggler:not(.collapsed) .bottom-bar {
204
+ transform: rotate(-45deg);
205
+ transform-origin: 10% 90%;
206
+ }
207
+
208
+ #navbarNav a {
209
+ position: relative;
210
+ text-decoration: none;
211
+ z-index: 1;
212
+ }
213
+
214
+ #navbarNav a::before {
215
+ content: '';
216
+ position: absolute;
217
+ width: 100%;
127
218
  height: 4px;
128
- margin: 0 auto;
129
- opacity: 1;
219
+ background-color: var(--color-primary);
220
+ bottom: -4px;
221
+ left: 0;
222
+ transform-origin: center;
223
+ transform: scaleX(0);
224
+ transition: transform .3s ease-in-out;
225
+ z-index: -1;
130
226
  }
131
227
 
132
- .title-link {
133
- text-decoration: none !important;
228
+ #navbarNav a:hover::before {
229
+ transform-origin: left;
230
+ transform: scaleX(1);
134
231
  }
135
232
 
136
- .title-post-resume a {
137
- color: $fourthColor !important;
233
+
234
+ .post-resume {
235
+ padding-top: 1.5rem;
236
+ padding-bottom: 0.5rem;
138
237
  }
139
238
 
140
- .text-justify {
141
- margin-top: 35px !important;
239
+ .lista {
240
+ display: flex;
241
+ align-items: center;
242
+ z-index: 1;
142
243
  }
143
244
 
144
- .text-final {
145
- margin-top: 45px !important;
245
+ .lista li {
246
+ list-style: none;
146
247
  }
147
248
 
148
- .post {
149
- padding-top: 3rem!important;
150
- height: 100%;
151
- padding-bottom: 6em;
249
+ .lista li a {
250
+ color: var(--color-text);
251
+ text-decoration: none;
252
+ transition: opacity 0.2s ease;
152
253
  }
153
254
 
154
- #content .py-2 {
155
- padding-top: 1.5rem!important;
255
+ .post {
256
+ padding: 3rem 0 6rem;
257
+ width: 100%;
156
258
  }
157
259
 
158
- blockquote {
159
- background: #f9f9f9;
160
- border-left: 10px solid #F39237;
161
- margin: 1.5em 0px;
162
- padding: 0.5em 10px;
163
- quotes: "\201C""\201D""\2018""\2019";
164
- p {
165
- display: inline;
166
- }
260
+ #posts-navigation {
261
+ padding-bottom: 1.5rem;
262
+ bottom: 0;
167
263
  }
168
264
 
169
- .highlight pre {
170
- border: 1px solid;
171
- border-radius: .25rem;
172
- padding: 0.75rem;
265
+ p {
173
266
  margin-bottom: 1rem;
174
- white-space: pre-wrap;
175
267
  }
176
268
 
177
- #search-input {
178
- margin: 2em 0em;
179
- width: 50%;
269
+ .row {
270
+ display: grid;
271
+ flex-wrap: wrap;
272
+ grid-template-columns: 1fr 1fr;
273
+ font-size: 20px;
274
+ * {
275
+ color: var(--color-dark);
276
+ }
180
277
  }
181
278
 
182
- input {
183
- font-family: "Space Grotesk" !important;
279
+ .next {
280
+ text-align: right;
184
281
  }
185
282
 
186
- .post .text-secondary {
187
- margin-bottom: 8px !important;
188
- color: $fifthColor;
189
- font-weight: bold;
283
+ .previous {
284
+ text-align: left;
190
285
  }
191
286
 
192
- .row .previous, .row .next {
193
- font-size: 20px;
194
- text-align: right;
287
+ .center {
288
+ display: flex;
289
+ justify-content: center;
290
+ align-items: center;
291
+ }
292
+
293
+ .title-post-resume {
294
+ margin-top: 0.25rem;
295
+ margin-bottom: 0.75rem;
195
296
  a {
196
- color: $fourthColor !important;
297
+ color: var(--color-text);
298
+ text-decoration: none;
197
299
  }
198
300
  }
199
301
 
200
- .previous {
201
- text-align: left !important;
302
+ .text-secondary {
303
+ font-weight: 700;
304
+ margin-bottom: 8px !important;
305
+ }
306
+
307
+ .text-justify {
308
+ margin-top: 2.1875rem;
309
+ }
310
+
311
+ .text-final {
312
+ margin-top: 2.8125rem;
202
313
  }
203
314
 
204
- #post {
205
- flex-grow: 1;
315
+ code {
316
+ font-size: .9em;
317
+ color: var(--color-code);
318
+ word-wrap: break-word;
319
+ }
320
+
321
+ blockquote {
322
+ background: #f9f9f9;
323
+ border-left: 10px solid #F39237;
324
+ margin: 1.5em 0;
325
+ padding: 0.5em 1.25em;
326
+ border-radius: 0.25rem;
327
+ }
328
+
329
+ blockquote p {
330
+ display: inline;
331
+ }
332
+
333
+ .highlight pre {
334
+ border: 1px solid var(--color-text);
335
+ border-radius: 0.625rem;
336
+ padding: 1.75rem 1rem;
337
+ margin: 0.3125rem 0;
206
338
  position: relative;
339
+ overflow: auto;
340
+ white-space: pre-wrap;
207
341
  }
208
342
 
209
- #posts-navigation {
210
- padding-bottom: 1.5rem;
211
- bottom: 0;
343
+ .highlight pre button {
344
+ position: absolute;
345
+ top: 0.5rem;
346
+ right: 0.5rem;
347
+ color: var(--color-bg);
348
+ background: none;
349
+ border: none;
350
+ cursor: pointer;
351
+ padding: 0.25rem;
352
+ }
353
+
354
+ .back {
355
+ margin-top: 2.8125rem;
356
+ font-size: 1.875rem;
357
+ color: var(--color-primary);
358
+ border-radius: 0.625rem;
359
+ border: 2px solid var(--color-primary);
360
+ padding: 0.0625rem 0.625rem;
361
+ text-decoration: none;
362
+ transition: var(--transition-default);
363
+ }
364
+
365
+ .back:hover,
366
+ .back:focus {
367
+ background-color: var(--color-primary);
368
+ .chevron::before {
369
+ color: var(--color-bg);
370
+ }
371
+ }
372
+
373
+ ul {
374
+ list-style: none;
375
+ }
376
+
377
+ .archive-group th {
378
+ text-align: start !important;
379
+ padding-right: 0.5rem;
212
380
  }
213
381
 
214
382
  #site-footer {
215
- color: $fourthColor !important;
216
383
  position: absolute;
217
384
  bottom: 0;
218
385
  width: 100%;
219
386
  height: 4rem;
220
- a {
221
- color: $fourthColor;
222
- font-weight: bold;
223
- text-decoration: none;
224
- }
387
+ color: var(--color-text);
388
+ background-color: var(--color-bg);
225
389
  }
226
390
 
227
- a.badge {
228
- color: $firstColor;
229
- background-color: $thirdColor;
391
+ #site-footer a {
392
+ color: var(--color-text);
393
+ font-weight: bold;
230
394
  text-decoration: none;
395
+ transition: color 0.2s ease;
231
396
  }
232
397
 
233
- .back {
234
- margin-top: 45px !important;
235
- font-size: 30px;
236
- color: $thirdColor;
237
- border-radius: 10px;
238
- border: 2px solid $thirdColor;
239
- padding: 1px 10px;
240
- }
241
-
242
- #share-links ul {
243
- list-style-type: none;
244
- padding-left: 0px;
245
- li {
246
- padding-top: 5px;
247
- padding-bottom: 5px;
248
- a {
249
- color: $fourthColor;
250
- font-weight: bold;
251
- text-decoration: none;
252
- }
253
- }
398
+ #site-footer a:hover,
399
+ #site-footer a:focus {
400
+ color: var(--color-text);
254
401
  }
255
402
 
256
- /* Effects */
403
+ svg {
404
+ vertical-align: sub;
405
+ }
257
406
 
258
- #category-badge a:hover, #category-badge a:focus, #category-badge a:active {
259
- color: $firstColor;
260
- -webkit-transform: scale(1.1);
261
- transform: scale(1.1);
407
+ .social-networks-icons {
408
+ vertical-align: unset !important
262
409
  }
263
410
 
264
- h1 > .underline {
265
- text-decoration: none;
266
- box-shadow: inset 0 -19px 0 $secondColor, 0 0px 0 $secondColor;
267
- transition: box-shadow .3s;
268
- color: inherit;
269
- overflow: hidden;
411
+ .float-end {
412
+ float: right;
270
413
  }
271
414
 
272
- a > .underline {
415
+ .chevron::before {
416
+ border-style: solid;
417
+ border-width: 0.15em 0.15em 0 0;
418
+ content: '';
419
+ display: inline-block;
420
+ height: 0.7em;
421
+ position: relative;
422
+ transform: rotate(-45deg);
423
+ vertical-align: middle;
424
+ width: 0.7em;
425
+ color: var(--color-primary);
426
+ }
427
+
428
+ .divider {
429
+ background: var(--color-primary);
430
+ height: 4px;
431
+ margin: 0 auto;
432
+ max-width: var(--container-width);
433
+ opacity: 1;
434
+ }
435
+
436
+ .about-image {
437
+ border-radius: 50%;
438
+ width: 280px;
439
+ height: 280px;
440
+ margin: 1.25rem;
441
+ object-fit: cover;
442
+ }
443
+
444
+ .badge {
445
+ color: var(--color-bg);
446
+ background-color: var(--color-primary);
273
447
  text-decoration: none;
274
- box-shadow: inset 0 -14px 0 $secondColor, 0 0px 0 $secondColor;
275
- transition: box-shadow .3s;
276
- color: inherit;
277
- overflow: hidden;
448
+ padding: 0.25rem 0.5rem;
449
+ border-radius: 0.25rem;
450
+ transition: transform 0.2s ease;
451
+ display: inline-block;
278
452
  }
279
453
 
280
- .underline:hover {
281
- box-shadow: inset 0 -45px 0 $secondColor, 0 0px 0 $secondColor;
454
+ .badge:hover,
455
+ .badge:focus {
456
+ -webkit-transform:scale(1.1);
457
+ transform: scale(1.1);
282
458
  }
283
459
 
284
- .link {
285
- position: relative;
286
- font-weight: bold;
287
-
288
- &::before {
289
- content: '';
290
- background-color: $sixthColor;
291
- position: absolute;
292
- left: 3%;
293
- bottom: 1px;
294
- width: 100%;
295
- height: 8px;
296
- z-index: -1;
297
- transition: all .3s ease-in-out;
298
- }
299
-
300
- &:hover::before {
301
- left: -5px;
302
- bottom: 0;
303
- height: 100%;
304
- width: calc(100% + 5px);
305
- }
460
+ #search-input {
461
+ margin: 2em 0em;
462
+ width: 50%;
463
+ font-size: 16px;
464
+ line-height: 24px;
465
+ padding: 0.2em;
466
+ }
467
+
468
+ @media screen and (max-width: 949px) {
469
+ .navbar-toggler {
470
+ display: block;
471
+ }
472
+
473
+ .lista {
474
+ display: none;
475
+ flex-direction: column;
476
+ position: absolute;
477
+ top: 100%;
478
+ left: 0;
479
+ width: 100%;
480
+ background-color: var(--color-bg);
481
+ padding: 1rem 0;
482
+ }
483
+
484
+ .lista.active {
485
+ display: flex;
486
+ }
487
+
488
+ .lista li {
489
+ width: 100%;
490
+ text-align: center;
491
+ padding: 0.5rem 0;
492
+ border-bottom: 1px solid #ccc;
493
+ }
494
+
495
+ .container {
496
+ padding: 0 1rem;
497
+ }
498
+
499
+ h1 {
500
+ font-size: 1.25rem;
501
+ font-weight: 500;
502
+ margin-bottom: 8px;
503
+ }
504
+ }
505
+
506
+ @media screen and (min-width: 950px) {
507
+ .nav-toggle {
508
+ display: none;
509
+ }
510
+
511
+ .lista {
512
+ display: flex;
513
+ justify-content: flex-end;
514
+ flex-direction: row;
515
+ }
516
+
517
+ h1 {
518
+ font-size: 1.75rem;
519
+ font-weight: 500;
520
+ margin-bottom: 8px;
521
+ }
522
+ }
523
+
524
+ @media (prefers-reduced-motion: reduce) {
525
+ * {
526
+ animation-duration: 0.01ms !important;
527
+ animation-iteration-count: 1 !important;
528
+ transition-duration: 0.01ms !important;
529
+ scroll-behavior: auto !important;
530
+ }
306
531
  }
Binary file
Binary file
data/assets/js/main.js ADDED
@@ -0,0 +1,51 @@
1
+ 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">
2
+ <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"/>
3
+ </svg>`;
4
+
5
+ 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">
6
+ <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"/>
7
+ </svg>`;
8
+
9
+ // use a class selector if available
10
+ let blocks = document.querySelectorAll("pre");
11
+
12
+ blocks.forEach((block) => {
13
+ // only add button if browser supports Clipboard API
14
+ if (navigator.clipboard) {
15
+ let button = document.createElement("button");
16
+ button.innerHTML = copyButtonSVG;
17
+ button.style.position = "absolute";
18
+ button.style.top = "5px";
19
+ button.style.right = "5px";
20
+ block.style.position = "relative";
21
+ block.appendChild(button);
22
+ button.addEventListener("click", async () => {
23
+ await copyCode(block, button);
24
+ });
25
+ }
26
+ });
27
+
28
+ async function copyCode(block, button) {
29
+ let code = block.querySelector("code");
30
+ let text = code.innerText;
31
+ await navigator.clipboard.writeText(text);
32
+
33
+ // visual feedback that task is completed
34
+ button.innerHTML = checkmarkSVG; // Checkmark symbol
35
+ button.style.backgroundColor = "green";
36
+ button.style.color = "white";
37
+ button.style.borderRadius = "4px";
38
+
39
+ setTimeout(() => {
40
+ button.innerHTML = copyButtonSVG;
41
+ button.style.backgroundColor = "";
42
+ button.style.color = "";
43
+ }, 1000);
44
+ }
45
+
46
+ let mainNav = document.getElementById("js-menu");
47
+ let navBarToggle = document.getElementById("js-nav-toggle");
48
+
49
+ navBarToggle.addEventListener("click", function() {
50
+ mainNav.classList.toggle("active");
51
+ });
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.0.13
4
+ version: 0.0.15
5
5
  platform: ruby
6
6
  authors:
7
7
  - Victor Silva
8
- autorequire:
8
+ autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2024-07-05 00:00:00.000000000 Z
11
+ date: 2025-01-18 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -66,7 +66,7 @@ dependencies:
66
66
  - - "~>"
67
67
  - !ruby/object:Gem::Version
68
68
  version: '0.16'
69
- description:
69
+ description:
70
70
  email:
71
71
  - vmsilvamolina@gmail.com
72
72
  executables: []
@@ -75,11 +75,13 @@ extra_rdoc_files: []
75
75
  files:
76
76
  - LICENSE.txt
77
77
  - README.md
78
+ - _includes/analytics/googleAnalytics.html
78
79
  - _includes/backtotop.html
79
80
  - _includes/comments-providers/disqus.html
80
81
  - _includes/footer.html
81
82
  - _includes/head.html
82
83
  - _includes/header.html
84
+ - _includes/scripts.html
83
85
  - _includes/sharepost.html
84
86
  - _layouts/allposts.html
85
87
  - _layouts/categories.html
@@ -87,6 +89,7 @@ files:
87
89
  - _layouts/home.html
88
90
  - _layouts/page.html
89
91
  - _layouts/post.html
92
+ - _pages/about.md
90
93
  - _pages/categories.md
91
94
  - _pages/github.md
92
95
  - _pages/search.md
@@ -95,18 +98,21 @@ files:
95
98
  - _sass/whiteblog-theme/_syntax-highlighting.scss
96
99
  - assets/css/main.scss
97
100
  - assets/css/previews.css
101
+ - assets/images/bio-photo.jpg
102
+ - assets/images/favicon.ico
98
103
  - assets/images/previews/hello-world.png
99
104
  - assets/images/previews/otro-post.png
100
105
  - assets/images/previews/test-post.png
101
106
  - assets/images/previews/welcome-jekyll.png
102
107
  - assets/images/previews/yet-another-post.png
103
108
  - assets/js/jekyll-search.min.js
109
+ - assets/js/main.js
104
110
  homepage: https://github.com/vmsilvamolina/whiteblog-theme
105
111
  licenses:
106
112
  - MIT
107
113
  metadata:
108
114
  plugin_type: theme
109
- post_install_message:
115
+ post_install_message:
110
116
  rdoc_options: []
111
117
  require_paths:
112
118
  - lib
@@ -122,7 +128,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
122
128
  version: '0'
123
129
  requirements: []
124
130
  rubygems_version: 3.2.3
125
- signing_key:
131
+ signing_key:
126
132
  specification_version: 4
127
133
  summary: Minimal, wide and white blogging theme for Jekyll
128
134
  test_files: []