From 63fa698b5237469ae45e46e031608a0a079582cd Mon Sep 17 00:00:00 2001 From: welpo Date: Mon, 2 Feb 2026 01:33:11 +0100 Subject: [PATCH] update styling + add iine integration --- config.toml | 4 +- sass/parts/_micro.scss | 163 +++++------------- .../partials/content_security_policy.html | 2 + templates/partials/extra_features.html | 2 +- templates/partials/main_page_micro_list.html | 50 +++--- templates/section.html | 1 - theme.toml | 2 + 7 files changed, 73 insertions(+), 151 deletions(-) diff --git a/config.toml b/config.toml index 9a6a90e7..e484a44c 100644 --- a/config.toml +++ b/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. diff --git a/sass/parts/_micro.scss b/sass/parts/_micro.scss index 8f41db3e..ca04e557 100644 --- a/sass/parts/_micro.scss +++ b/sass/parts/_micro.scss @@ -1,138 +1,65 @@ -// Micro posts section - force left alignment #micro-posts { margin-top: 4rem; - margin-left: 0; - margin-right: auto; } -// Card container - left aligned, no centering -.micro-card { - display: grid; - grid-template-columns: 200px 1fr; - gap: 3rem; - margin: 2rem 0; - margin-left: 0; - background-color: var(--navbar-color); - border: 1px solid var(--divider-color); - border-radius: 8px; - padding: 2rem; -} +.micro-list { + .micro-entry { + border-bottom: 0.5px solid var(--divider-color); + padding: 1.3rem 0; -// Left column header -.micro-header { - h2 { + &:last-child { + border-bottom: none; + } + } + + .micro-date { + display: inline-block; + 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; - color: var(--text-color-high-contrast); - font-family: var(--header-font); - font-weight: 550; - font-size: 1.5rem; - line-height: 1.3; + margin-bottom: 0.35rem; + + .iine-button { + color: var(--meta-color); + font-size: 0.85rem; + } } - .feed-link { - display: inline-flex; - align-items: center; - text-decoration: none; - } + .micro-text { + color: var(--text-color); + font-weight: 350; + font-size: 0.95rem; + line-height: 1.6; - .feed-icon { - display: block; - width: 1rem; - height: 1rem; - fill: var(--meta-color); - transition: fill 0.2s ease; + p { + margin: 0.5rem 0 1rem; - &:hover { - fill: var(--primary-color); + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } } } } -// 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: 400; - font-size: 0.9rem; - line-height: 1.5rem; - - p { - margin: 0.5rem 0 1rem; - - &:first-child { - margin-top: 0; - } - - &:last-child { - 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; - } -} \ No newline at end of file +} diff --git a/templates/partials/content_security_policy.html b/templates/partials/content_security_policy.html index e8fa0623..5efb8685 100644 --- a/templates/partials/content_security_policy.html +++ b/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" -%} diff --git a/templates/partials/extra_features.html b/templates/partials/extra_features.html index 6a085c08..f38c2d9e 100644 --- a/templates/partials/extra_features.html +++ b/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)) -%} {%- endif -%} diff --git a/templates/partials/main_page_micro_list.html b/templates/partials/main_page_micro_list.html index ff60b251..dc4f2129 100644 --- a/templates/partials/main_page_micro_list.html +++ b/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") -%} -
-
-
-

- {{ section_name }} - {%- if micro_section.generate_feeds -%} - - - - - +

{{ section_name }}

+
+ {% for post in show_pages | slice(end=max_micro) %} +
+
+ + - {%- endif -%} -

-
-
- {% for post in show_pages | slice(end=max_micro) %} -
- -
- {{ post.content | safe }} -
+ {%- if config.extra.micro_iine | default(value=false) -%} + {%- set slug = post.path -%} + {%- include "partials/iine_button.html" -%} + {%- endif -%}
- {% endfor %} -
+
+ {{ post.content | safe }} +
+
+ {% endfor %}
- {%- if show_pages | length > max_micro -%}
All {{ section_name | lower }} ⟶ @@ -45,4 +35,4 @@
{%- endif -%} {% endif %} -{% endif %} \ No newline at end of file +{% endif %} diff --git a/templates/section.html b/templates/section.html index bfe1c9ba..4d996650 100644 --- a/templates/section.html +++ b/templates/section.html @@ -55,7 +55,6 @@ {# Add micro posts section #} {%- include "partials/main_page_micro_list.html" -%} - {%- include "partials/extra_features.html" -%} diff --git a/theme.toml b/theme.toml index c48f287c..c19d4599 100644 --- a/theme.toml +++ b/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.