git » homepage.git » commit 2304480

Improve homepage Explore layout on phones

author Alan Dipert
2026-07-17 00:03:02 UTC
committer Alan Dipert
2026-07-17 00:03:02 UTC
parent 0258ad8c578ffab68749190356d71d7a1b7119cb

Improve homepage Explore layout on phones

tests/test_sitegen.py +1 -1
tools/sitegen.py +6 -1
tpl/style.css +25 -2

diff --git a/tests/test_sitegen.py b/tests/test_sitegen.py
index 74cf0a5..183cfe8 100644
--- a/tests/test_sitegen.py
+++ b/tests/test_sitegen.py
@@ -131,7 +131,7 @@ class SitegenTests(unittest.TestCase):
             body = "<h2>Explore</h2>\n<!-- latest-works:6 -->\n<h2>Updates</h2>"
             rendered = sitegen.enhance_homepage(body, [update], home, src)
             self.assertIn('href="./Work.html"', rendered)
-            self.assertIn("Lisp:Work &amp; Play", rendered)
+            self.assertIn("Lisp:<wbr>Work &amp; Play", rendered)
             self.assertIn('<time datetime="2026-07-15">15 Jul 2026</time>', rendered)
             self.assertIn('<span class="work-excerpt">Work…</span>', rendered)
             self.assertIn('<p class="explore-more"><a href="#updates">More</a></p>', rendered)
diff --git a/tools/sitegen.py b/tools/sitegen.py
index bfaee64..789bb90 100644
--- a/tools/sitegen.py
+++ b/tools/sitegen.py
@@ -421,6 +421,11 @@ def latest_local_works(updates: list[Update], home: Path, src: Path, limit: int
     return selected
 
 
+def breakable_title(title: str) -> str:
+    parts = re.split(r"(?<=:)|(?<=[a-z])(?=[A-Z])", title)
+    return "<wbr>".join(html.escape(part) for part in parts)
+
+
 def render_latest_works(updates: list[Update], home: Path, src: Path) -> str:
     works = latest_local_works(updates, home, src)
     if not works:
@@ -441,7 +446,7 @@ def render_latest_works(updates: list[Update], home: Path, src: Path) -> str:
             "  <li>"
             f'<a href="{html.escape(href, quote=True)}">'
             f'<time datetime="{update.date.date().isoformat()}">{visible_date}</time>'
-            f'<span class="work-title">{html.escape(title)}</span>'
+            f'<span class="work-title">{breakable_title(title)}</span>'
             f'<span class="work-excerpt">{html.escape(excerpt)}</span>'
             "</a></li>"
         )
diff --git a/tpl/style.css b/tpl/style.css
index d0c9fba..692bf0c 100644
--- a/tpl/style.css
+++ b/tpl/style.css
@@ -498,8 +498,21 @@ img[src*="200px"]{width:200px;}
     margin:0;
   }
   .page-home .content>ul:not(.latest-work-tiles){grid-template-columns:repeat(2,minmax(0,1fr));}
-  .page-home .content>.latest-work-tiles{grid-template-columns:1fr;}
-  .page-home .latest-work-tiles a{min-height:0;}
+  .page-home .content>.latest-work-tiles{
+    grid-template-columns:repeat(2,minmax(0,1fr));
+    gap:.55rem;
+  }
+  .page-home .latest-work-tiles a{
+    min-height:148px;
+    padding:.7rem .72rem .75rem;
+  }
+  .page-home .latest-work-tiles .work-title{font-size:1rem;}
+  .page-home .latest-work-tiles .work-excerpt{
+    display:-webkit-box;
+    overflow:hidden;
+    -webkit-box-orient:vertical;
+    -webkit-line-clamp:3;
+  }
   .page-home .content>table,
   .page-home .content>table tbody,
   .page-home .content>table tr,
@@ -532,6 +545,16 @@ img[src*="200px"]{width:200px;}
   .content table:not(.definition-table){overflow-x:auto;}
 }
 
+@media (max-width:359px){
+  .page-home .content>p:first-of-type{
+    width:100px;
+    margin:0 0 .65rem .8rem;
+  }
+  .page-home img[src*="float_right"]{width:100px;}
+  .page-home .content>.latest-work-tiles{grid-template-columns:1fr;}
+  .page-home .latest-work-tiles a{min-height:0;}
+}
+
 @media (prefers-reduced-motion:reduce){
   .page-home .latest-work-tiles a,
   .page-home .content>ul:not(.latest-work-tiles) a{transition:none;}