From 9599a3e7932d67442f17b394fd3a2f7b45b0f4bc Mon Sep 17 00:00:00 2001
From: Jason Ernst <ernstjason1@gmail.com>
Date: Fri, 2 Oct 2026 23:33:39 -0700
Subject: [PATCH] Home: stop clipping the site tags line at 355px

The wrapper was a fixed 355px and the typewriter animation ended at
350px, so a site_tags value longer than ~40 characters was cut off.
The wrapper now sizes to the text and the animation runs to 100% of
it. Below 600px the line wraps instead of typing.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 themes/default/static/css/goblog.css | 5 ++++-
 themes/default/templates/home.html   | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/themes/default/static/css/goblog.css b/themes/default/static/css/goblog.css
index a619766a..2b158e8a 100644
--- a/themes/default/static/css/goblog.css
+++ b/themes/default/static/css/goblog.css
@@ -33,7 +33,10 @@ body { font-family: 'Source Code Pro', monospace; min-height:100vh; display:flex
 .bottom { min-height: 200px; width: 100%; background-color: #333333; color: #EEE; }
 .bottom a { color: #EEE; }
 /* text animation */
-@keyframes animated-text{  from{width: 0;} to{width: 350px;} }
+/* percentages of the fit-content wrapper, so the line types out to the full length of whatever site_tags holds */
+@keyframes animated-text{  from{width: 0%;} to{width: 100%;} }
+/* too narrow for one line: wrap instead of typing, which would clip */
+@media (max-width: 600px) { .keywords { white-space: normal; animation: none; border-right: 0; } }
 /* cursor animations */
 @keyframes animated-cursor{ from{border-right-color: rgba(0,0,0,.75);} to{border-right-color: transparent;}  }
 
diff --git a/themes/default/templates/home.html b/themes/default/templates/home.html
index 03fd4fa8..cbf17a9d 100644
--- a/themes/default/templates/home.html
+++ b/themes/default/templates/home.html
@@ -4,7 +4,7 @@
       <a href="/posts" title="Read posts by {{ .settings.site_title.Value }}"><img src="{{ .settings.landing_page_image.Value }}" class="rounded-circle img-responsive profile" style="max-width:300px;" alt="{{ .settings.site_title.Value }}"/></a>
       <h1>{{ .settings.site_title.Value }}</h1>
       <h4>{{ .settings.site_subtitle.Value }}</h4>
-      <div style="width: 355px; margin: auto;">
+      <div style="width: fit-content; max-width: 100%; margin: auto;">
         <p class="keywords">
           {{ .settings.site_tags.Value }}
         </p>