fix: tags layout and overflow

This commit is contained in:
Konstantin 2025-05-06 19:34:10 +02:00
parent 00c7db9bec
commit 9d5f6bc5fb
Signed by: konstantin
GPG key ID: A128B78773E41ACE
4 changed files with 7 additions and 6 deletions

View file

@ -1,5 +1,5 @@
.PHONY: help build publish .PHONY: help build publish
VERSION = 1.9.4 VERSION = 1.9.6
help: help:
@perl -nle'print $& if m{^[a-zA-Z_-]+:.*?## .*$$}' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}' @perl -nle'print $& if m{^[a-zA-Z_-]+:.*?## .*$$}' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'

View file

@ -54,12 +54,12 @@
{% with tags=page.tags.all %} {% with tags=page.tags.all %}
{% if tags %} {% if tags %}
<div class="flex items-center gap-x-4 text-xs my-6"> <div class="flex items-center justify-center gap-x-4 text-xs my-6">
<div class="tags"> <div class="tags">
<h2 class="sr-only">Tags</h2> <h2 class="sr-only">Tags</h2>
<ul class="flex"> <ul class="flex">
{% for tag in tags %} {% for tag in tags %}
<li class="space-x-2"><span class="emoji">🏷</span> <li><span class="emoji">🏷</span>
<a class="pr-2" href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a> <a class="pr-2" href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a>
</li> </li>
{% endfor %} {% endfor %}

View file

@ -4,6 +4,7 @@
<html lang="en" class="h-full antialiased"> <html lang="en" class="h-full antialiased">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<meta name="fediverse:creator" content="@iamkonstantin@mastodon.social" /> <meta name="fediverse:creator" content="@iamkonstantin@mastodon.social" />
{% include "wagtailseo/meta.html" %} {% include "wagtailseo/meta.html" %}
<title> <title>

View file

@ -124,11 +124,11 @@
} }
.tags ul { .tags ul {
@apply flex space-x-2 text-center text-sm; @apply flex-col sm:flex-row sm:space-x-2 text-center text-sm;
} }
.tags li { .tags li {
@apply p-3 inline-flex items-center rounded-2xl px-2 py-1 text-sm text-black dark:text-white ring-1 ring-inset ring-orange-700/20 dark:ring-white bg-orange-50 dark:bg-transparent; @apply p-3 inline-flex items-center rounded-2xl px-2 py-1 text-sm text-black dark:text-white ring-1 ring-inset ring-orange-700/20 dark:ring-white bg-orange-50 dark:bg-transparent;
} }
.tags ul li::before { .tags ul li::before {
@ -137,7 +137,7 @@
} }
.tags a { .tags a {
@apply border-b-0 w-full; @apply border-b-0 w-full m-0;
} }
.blog-pages a { .blog-pages a {