update styling + add iine integration

config.toml

@@ -57,7 +57,7 @@ title = "~/tabi"
 description = "tabi es un tema accesible para Zola con búsqueda, soporte multilingüe, JavaScript opcional, una puntuación perfecta en Lighthouse y documentación exhaustiva. Diseñado para sitios web y blogs personales."
 generate_feeds = true
 taxonomies = [{name = "tags", feed = true}]
-build_search_index = true
+build_search_index = false
 
 [languages.ca]
 title = "~/tabi"
@@ -178,6 +178,8 @@ iine_icon = "thumbs_up"  # See https://iine.to/#customise
 # Unify like counts across all language versions of the same page.
 # When enabled, likes on /es/blog/hello/ will count towards /blog/hello/ (default language).
 iine_unified_languages = true
+# Enable iine like buttons on micro posts.
+micro_iine = true
 
 # Show "Jump to posts" link next to series' title.
 # By default, the link appears automatically when a series description exceeds 2000 characters.

sass/parts/_micro.scss

@@ -1,90 +1,48 @@
-// Micro posts section - force left alignment
 #micro-posts {
     margin-top: 4rem;
-    margin-left: 0;
-    margin-right: auto;
 }
 
-// Card container - left aligned, no centering
+.micro-list {
-.micro-card {
+    .micro-entry {
-    display: grid;
+        border-bottom: 0.5px solid var(--divider-color);
-    grid-template-columns: 200px 1fr;
+        padding: 1.3rem 0;
-    gap: 3rem;
+
-    margin: 2rem 0;
+        &:last-child {
-    margin-left: 0;
+            border-bottom: none;
-    background-color: var(--navbar-color);
+        }
-    border: 1px solid var(--divider-color);
-    border-radius: 8px;
-    padding: 2rem;
     }
 
-// Left column header
+    .micro-date {
-.micro-header {
+        display: inline-block;
-    h2 {
+        transition: color 0.15s;
+        color: var(--meta-color);
+        font-weight: 300;
+        font-size: 0.85rem;
+        text-decoration: none;
+
+        &:hover {
+            background-color: transparent;
+            color: var(--primary-color);
+        }
+    }
+
+    .micro-meta {
         display: flex;
         align-items: center;
         gap: 0.5rem;
-        margin: 0;
+        margin-bottom: 0.35rem;
-        color: var(--text-color-high-contrast);
-        font-family: var(--header-font);
-        font-weight: 550;
-        font-size: 1.5rem;
-        line-height: 1.3;
-    }
 
-    .feed-link {
+        .iine-button {
-        display: inline-flex;
-        align-items: center;
-        text-decoration: none;
-    }
-
-    .feed-icon {
-        display: block;
-        width: 1rem;
-        height: 1rem;
-        fill: var(--meta-color);
-        transition: fill 0.2s ease;
-
-        &:hover {
-            fill: var(--primary-color);
-        }
-    }
-}
-
-// Right column content
-.micro-content-column {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-}
-
-// Individual micro post
-.micro-item {
-    padding-bottom: 1.5rem;
-    border-bottom: 1px solid var(--divider-color);
-
-    &:last-child {
-        padding-bottom: 0;
-        border-bottom: none;
-    }
-
-    time {
-        display: block;
-        margin-bottom: 0.5rem;
             color: var(--meta-color);
-        font-family: var(--sans-serif-font);
-        font-weight: 300;
             font-size: 0.85rem;
         }
     }
 
-// Micro post text
     .micro-text {
         color: var(--text-color);
-    font-family: var(--sans-serif-font);
+        font-weight: 350;
-    font-weight: 400;
+        font-size: 0.95rem;
-    font-size: 0.9rem;
+        line-height: 1.6;
-    line-height: 1.5rem;
 
         p {
             margin: 0.5rem 0 1rem;
@@ -97,42 +55,11 @@
                 margin-bottom: 0;
             }
         }
-
-    a {
-        color: var(--primary-color);
-        text-decoration: none;
-
-        &:hover {
-            color: var(--hover-color);
     }
 }
 
-    strong {
-        font-weight: 580;
-    }
-}
-
-// Mobile responsive
 @media only screen and (max-width: 1100px) {
     #micro-posts {
         margin-top: 3rem;
     }
-
-    .micro-card {
-        grid-template-columns: 1fr;
-        gap: 1.5rem;
-        padding: 1.5rem;
-    }
-
-    .micro-header h2 {
-        font-size: 1.3rem;
-    }
-
-    .micro-content-column {
-        gap: 1.2rem;
-    }
-
-    .micro-item {
-        padding-bottom: 1.2rem;
-    }
 }

templates/partials/content_security_policy.html

@@ -9,6 +9,8 @@ content="default-src 'self'
     {%- set isso_enabled = config.extra.isso.enabled_for_all_posts or page.extra.isso -%}
     {%- if page -%}
         {%- set iine_enabled = macros_settings::evaluate_setting_priority(setting="iine", page=page, default_global_value=false) == "true" -%}
+    {%- elif section and section.extra.show_micro | default(value=false) and config.extra.micro_iine | default(value=false) -%}
+        {%- set iine_enabled = true -%}
     {%- endif -%}
     {%- if page -%}
         {%- set mermaid_enabled = macros_settings::evaluate_setting_priority(setting="mermaid", page=page, default_global_value=false) == "true" -%}

templates/partials/extra_features.html

@@ -86,6 +86,6 @@
 {%- endif -%}
 
 {# Add iine.js for the like button #}
-{%- if page and macros_settings::evaluate_setting_priority(setting="iine", page=page_s, section=section_s, default_global_value=false) == "true" -%}
+{%- if (page and macros_settings::evaluate_setting_priority(setting="iine", page=page_s, section=section_s, default_global_value=false) == "true") or (section and section.extra.show_micro | default(value=false) and config.extra.micro_iine | default(value=false)) -%}
     <script defer src="https://cdn.jsdelivr.net/gh/welpo/iine@main/iine.mini.js"></script>
 {%- endif -%}

templates/partials/main_page_micro_list.html

@@ -1,42 +1,32 @@
-{% if section.extra.show_micro | default(value=true) %}
+{% if section.extra.show_micro | default(value=false) %}
     {% if section.extra.micro_path %}
         {%- set micro_section = get_section(path=section.extra.micro_path) -%}
         {%- if micro_section -%}
             {%- set show_pages = micro_section.pages -%}
             {%- set max_micro = section.extra.max_micro | default(value=5) -%}
             {%- set section_name = section.extra.micro_section_name | default(value="Latest Thoughts") -%}
-            
             <div id="micro-posts">
-                <div class="micro-card">
+                <h1 class="title-container section-title bottom-divider">{{ section_name }}</h1>
-                    <div class="micro-header">
+                <div class="micro-list">
-                        <h2>
-                            {{ section_name }}
-                            {%- if micro_section.generate_feeds -%}
-                                <a href="{{ get_url(path=micro_section.path ~ 'atom.xml', trailing_slash=false) | safe }}" 
-                                   title="RSS Feed" 
-                                   aria-label="RSS Feed">
-                                    <svg class="feed-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                                        <circle cx="6.18" cy="17.82" r="2.18"/>
-                                        <path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
-                                    </svg>
-                                </a>
-                            {%- endif -%}
-                        </h2>
-                    </div>
-                    <div class="micro-content-column">
                     {% for post in show_pages | slice(end=max_micro) %}
-                            <div class="micro-item">
+                        <div class="micro-entry">
-                                <time datetime="{{ post.date | date(format='%Y-%m-%d') }}">
+                            <div class="micro-meta">
-                                    {{ post.date | date(format='%d %b %Y · %H:%M') }}
+                                <a class="micro-date no-hover-padding" href="{{ post.permalink | safe }}">
+                                    <time datetime="{{ post.date | date(format='%Y-%m-%dT%H:%M:%S') }}">
+                                        {{ macros_format_date::format_date(date=post.date, short=true, language_strings=language_strings) }} · {{ post.date | date(format='%H:%M') }}
                                     </time>
+                                </a>
+                                {%- if config.extra.micro_iine | default(value=false) -%}
+                                    {%- set slug = post.path -%}
+                                    {%- include "partials/iine_button.html" -%}
+                                {%- endif -%}
+                            </div>
                             <div class="micro-text">
                                 {{ post.content | safe }}
                             </div>
                         </div>
                     {% endfor %}
                 </div>
-                </div>
-                
                 {%- if show_pages | length > max_micro -%}
                     <div class="all-posts">
                         <a href="{{ get_url(path=micro_section.path, lang=lang) }}/">All {{ section_name | lower }}&nbsp;<span class="arrow">⟶</span></a>

templates/section.html

@@ -55,7 +55,6 @@
 
 {# Add micro posts section #}
 {%- include "partials/main_page_micro_list.html" -%}
-
 </main>
 
 {%- include "partials/extra_features.html" -%}

theme.toml

@@ -124,6 +124,8 @@ iine_icon = "heart"  # See https://iine.to/#customise
 # Unify like counts across all language versions of the same page.
 # When enabled, likes on /es/blog/hello/ will count towards /blog/hello/ (default language).
 iine_unified_languages = true
+# Enable iine like buttons on micro posts.
+micro_iine = false
 
 # Show "Jump to posts" link next to series' title.
 # By default, the link appears automatically when a series description exceeds 2000 characters.