feat: tags style

Author: Tony-Rome

theme/static/css/style.css

@@ -85,7 +85,7 @@ body, html, root {
 }
 
 .navbar-menu a:hover {
-    background-color: #000;
+    background-color: #E22914;
     color: #f8f1ee;
 }
 
@@ -178,16 +178,21 @@ body, html, root {
 }
 
 .preview-date {
+    font-style: italic;
     display: flex;
-    justify-content: end;
-    margin-right: 1rem;
+    position: absolute;
+    bottom: 16%;
+    justify-content: start;
+    margin-left: 1rem;
 }
 
 .preview-author {
     font-style: italic;
     display: flex;
-    justify-content: end;
-    margin-right: 1rem;
+    position: absolute;
+    bottom: 12%;
+    justify-content: start;
+    margin-left: 1rem;
     font-size: 90%;
 }
 
@@ -207,7 +212,15 @@ body, html, root {
     background-color: #f8f1ee;
     border-radius: 5px;
     padding: 2px;
-    border: 2px solid #000
+    border: 2px solid #000;
+    text-decoration: none;
+    color: black;
+    transition: all 0.2s ease-in-out;
+}
+
+.preview-tag:hover {
+    background-color: #578FCA;
+    color: #f8f1ee;
 }
 
 /* Paginación */
@@ -229,6 +242,7 @@ body, html, root {
     position: relative;
     transition: all 0.2s ease-in-out;
     box-shadow: 0 0 0 #000;
+    color: black;
 }
 
 .pagination a:hover {
@@ -255,6 +269,11 @@ body, html, root {
     padding: 1rem;
 }
 
+.post a {
+    text-decoration: none;
+    color: black;
+}
+
 /* imágenes que están en el contenido del post */
 .post-img {
     margin: 1rem auto !important;

theme/templates/article.html

@@ -3,16 +3,17 @@
 
 {% block content %}
 <article class="post">
-  <div class="meta">Por {{ article.author }} — {{ article.date.strftime('%Y-%m-%d') }}</div>
-  <h2>{{ article.title }}</h2>
-  <h3>{{ article.summary }}</h3>
-  <div>Tags:
-    {% for tag in article.tags %}
-      <a href="{{ SITEURL }}/tag/{{ tag.slug }}.html">{{ tag.name }}</a>{% if not loop.last %}, {% endif %}
-    {% endfor %}
-  </div>
-  <div class="content">
+    <div>🗓️ {{ article.date.strftime('%Y-%m-%d') }}</div>
+    <div>✏️ {{ article.author }}</div>
+    <h2>{{ article.title }}</h2>
+    <h3>{{ article.summary }}</h3>
+    <div>Tags:
+        {% for tag in article.tags %}
+        <a href="{{ SITEURL }}/tag/{{ tag.slug }}.html">{{ tag.name }}</a>{% if not loop.last %}, {% endif %}
+        {% endfor %}
+    </div>
+    <div class="content">
     {{ article.content }}
-  </div>
+    </div>
 </article>
 {% endblock %}

theme/templates/base.html

@@ -79,13 +79,13 @@
                     li.innerHTML = `
                         <a class="preview-link" href="${article.url}">
                             <img class="preview-img" src="${article.image || '{{ SITEURL }}/img/otros/default.webp'}" alt="">
-                            <div class="preview-title">${article.title}</div>
-                            <div class="preview-summary">${article.summary || ""}</div>
-                            <div class="preview-date">${article.date || ""}</div>
-                            <div class="preview-author">${article.author ? "Por " + article.author : ""}</div>
                         </a>
+                        <div class="preview-title">${article.title}</div>
+                        <div class="preview-summary">${article.summary || ""}</div>
+                        <div class="preview-date">🗓️ ${article.date.split(' ')[0] || ""}</div>
+                        <div class="preview-author">✏️ ${article.author ? "Por " + article.author : ""}</div>
                         <div class="preview-tags-container">
-                            ${(article.tags || []).map(tag => `<div class="preview-tag">${tag}</div>`).join("")}
+                            ${(article.tags || []).map(tag => `<a class="preview-tag" href="{{ SITEURL }}/tag/${tag}.html">${tag}</a>`).join("")}
                         </div>
                     `;
                     previewContainer.appendChild(li);

theme/templates/index.html

@@ -21,14 +21,14 @@ <h1 class="welcome-msg-title">¡Hola Pythonista!</h1>
             <li class="preview-post">
                 <a class="preview-link" href="{{ SITEURL }}/{{ article.url }}">
                     <img class="preview-img" src="{{ SITEURL }}/{{ article.image }}" alt="">
-                    <div class="preview-title">{{ article.title }}</div>
-                    <div class="preview-summary">{{ article.summary }}</div>
-                    <div class="preview-date">{{ article.date.strftime('%Y-%m-%d') }}</div>
-                    <div class="preview-author">Por {{ article.author }}</div>
                 </a>
+                <div class="preview-title">{{ article.title }}</div>
+                <div class="preview-summary">{{ article.summary }}</div>
+                <div class="preview-date">🗓️ {{ article.date.strftime('%Y-%m-%d') }}</div>
+                <div class="preview-author">✏️ {{ article.author }}</div>
                 <div class="preview-tags-container">
                     {% for tag in article.tags %}
-                        <div class="preview-tag"> {{ tag.name }} </div>
+                        <a class="preview-tag" href="{{ SITEURL }}/tag/{{ tag.slug }}.html">{{ tag.name }}</a>
                     {% endfor %}
                 </div>
             </li>
@@ -39,7 +39,6 @@ <h1 class="welcome-msg-title">¡Hola Pythonista!</h1>
     {% if articles_page.has_previous() %}
         <a href="{{ SITEURL }}/{{ articles_previous_page.url }}">Previous</a>
     {% endif %}
-
     {% if articles_page.has_next() %}
         <a href="{{ SITEURL }}/{{ articles_next_page.url }}">Next</a>
     {% endif %}