mirror of
https://github.com/welpo/tabi.git
synced 2026-02-15 23:57:19 +01:00
update styling + add iine integration
This commit is contained in:
welpo
parent
1d9ddb5ccf
commit
63fa698b52
7 changed files with 73 additions and 151 deletions
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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" -%}
|
||||
|
|
|
|||
|
|
@ -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 -%}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<div class="micro-header">
|
||||
<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>
|
||||
<h1 class="title-container section-title bottom-divider">{{ section_name }}</h1>
|
||||
<div class="micro-list">
|
||||
{% for post in show_pages | slice(end=max_micro) %}
|
||||
<div class="micro-entry">
|
||||
<div class="micro-meta">
|
||||
<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>
|
||||
{%- endif -%}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="micro-content-column">
|
||||
{% for post in show_pages | slice(end=max_micro) %}
|
||||
<div class="micro-item">
|
||||
<time datetime="{{ post.date | date(format='%Y-%m-%d') }}">
|
||||
{{ post.date | date(format='%d %b %Y · %H:%M') }}
|
||||
</time>
|
||||
<div class="micro-text">
|
||||
{{ post.content | safe }}
|
||||
</div>
|
||||
{%- if config.extra.micro_iine | default(value=false) -%}
|
||||
{%- set slug = post.path -%}
|
||||
{%- include "partials/iine_button.html" -%}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="micro-text">
|
||||
{{ post.content | safe }}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</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 }} <span class="arrow">⟶</span></a>
|
||||
|
|
@ -45,4 +35,4 @@
|
|||
</div>
|
||||
{%- endif -%}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@
|
|||
|
||||
{# Add micro posts section #}
|
||||
{%- include "partials/main_page_micro_list.html" -%}
|
||||
|
||||
</main>
|
||||
|
||||
{%- include "partials/extra_features.html" -%}
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue