svemagie.net/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-05-14 22:48:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: render footer as responsive 3-column grid

Browse Source 
Wraps footer items in a CSS grid that's 1 column on mobile, 2 on tablet,
3 on desktop. Each custom-html block fills one column.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ricardo
2026-02-09 17:12:31 +01:00
parent b8ad6dbb25
commit dd454bf4ce
1 changed files with 21 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/components/homepage-footer.njk
+21 -18
View File
@@ -1,23 +1,26 @@
{# Homepage Builder Footer — renders footer items from homepageConfig.footer #} {# Homepage Builder Footer — renders footer items in a responsive 3-column grid #}
{% if homepageConfig.footer and homepageConfig.footer.length %} {% if homepageConfig.footer and homepageConfig.footer.length %}
<footer class="homepage-footer mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-surface-200 dark:border-surface-700"> <footer class="homepage-footer mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-surface-200 dark:border-surface-700">
{% for section in homepageConfig.footer %} <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{% if section.type == "custom-html" %} {% for section in homepageConfig.footer %}
{% set sectionConfig = section.config or {} %} {% if section.type == "custom-html" %}
<div class="mb-6"> {% set sectionConfig = section.config or {} %}
{% if sectionConfig.title %} <div>
<h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-3">{{ sectionConfig.title }}</h3> {% if sectionConfig.title %}
{% endif %} <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-3">{{ sectionConfig.title }}</h3>
{% if sectionConfig.content %} {% endif %}
<div class="prose dark:prose-invert max-w-none"> {% if sectionConfig.content %}
{{ sectionConfig.content | safe }} <div class="prose dark:prose-invert prose-sm max-w-none">
{{ sectionConfig.content | safe }}
</div>
{% endif %}
</div> </div>
{% endif %} {% else %}
</div> <div>
{% else %} {% include "components/homepage-section.njk" %}
{# For non-custom sections, use the section dispatcher #} </div>
{% include "components/homepage-section.njk" %} {% endif %}
{% endif %} {% endfor %}
{% endfor %} </div>
</footer> </footer>
{% endif %} {% endif %}