improving tj.ganjoor.net design

TajikGanjoor/Pages/Index.cshtml

@@ -86,26 +86,12 @@
         }
         else if (Model.IsCatPage)
         {
-            <a class="tg-poet-badge" href="@Model.GanjoorPage.PoetOrCat.Poet.FullUrl" title="@Model.GanjoorPage.PoetOrCat.Poet.Nickname">
-                <span class="tg-poet-portrait-sm">
-                    <img src="/images/poets/@(Model.GanjoorPage.PoetOrCat.Poet.Id).png" alt="@Model.GanjoorPage.PoetOrCat.Poet.Nickname" loading="lazy"
-                         onerror="this.onerror=null;this.src='/images/poets/999.png';" />
-                </span>
-                <span class="tg-poet-badge-name">@Model.GanjoorPage.PoetOrCat.Poet.Nickname</span>
-            </a>
             <div class="tg-cat-page">
                 @Html.Raw(Model.GanjoorPage.HtmlText)
             </div>
         }
         else if (Model.IsPoemPage)
         {
-            <a class="tg-poet-badge" href="@Model.GanjoorPage.Poem.Category.Poet.FullUrl" title="@Model.GanjoorPage.Poem.Category.Poet.Nickname">
-                <span class="tg-poet-portrait-sm">
-                    <img src="/images/poets/@(Model.GanjoorPage.Poem.Category.Poet.Id).png" alt="@Model.GanjoorPage.Poem.Category.Poet.Nickname" loading="lazy"
-                         onerror="this.onerror=null;this.src='/images/poets/999.png';" />
-                </span>
-                <span class="tg-poet-badge-name">@Model.GanjoorPage.Poem.Category.Poet.Nickname</span>
-            </a>
             @Html.Raw(Model.GanjoorPage.HtmlText)
         }
         else

TajikGanjoor/Pages/Index.cshtml.cs

@@ -221,16 +221,28 @@ namespace TajikGanjoor.Pages
             if (IsPoetPage)
             {
                 ViewData["Title"] = $"Ганҷур - {GanjoorPage?.PoetOrCat.Poet.Nickname}";
-                BreadCrumpUrls += $" - <a href=\"{GanjoorPage?.PoetOrCat.Poet.FullUrl}\">{GanjoorPage?.PoetOrCat.Poet.Nickname}</a>";
+                BreadCrumpUrls += $" - <a href=\"{GanjoorPage?.PoetOrCat.Poet.FullUrl}\" class=\"tg-crumb-poet\"><img src=\"/images/poets/{GanjoorPage?.PoetOrCat.Poet.Id}.png\" alt=\"\" onerror=\"this.onerror=null;this.src='/images/poets/999.png';\" />{GanjoorPage?.PoetOrCat.Poet.Nickname}</a>";
             }
             else
             if (IsCatPage || IsPoemPage)
             {
                 string title = $"Ганҷур - ";
+                bool firstAncestor = true;
                 foreach (var gran in GanjoorPage.PoetOrCat.Cat.Ancestors)
                 {
                     title += $"{gran.Title} - ";
-                    BreadCrumpUrls += $" - <a href=\"{gran.FullUrl}\">{gran.Title}</a>";
+                    if (firstAncestor)
+                    {
+                        // Ancestors[0] is always the poet's own root category (see GanjoorService._GetCatById,
+                        // which walks Parent all the way up) - prefix it with the poet's portrait instead of
+                        // adding a separate crumb, so the image and the poet's name stay a single link.
+                        BreadCrumpUrls += $" - <a href=\"{gran.FullUrl}\" class=\"tg-crumb-poet\"><img src=\"/images/poets/{GanjoorPage.PoetOrCat.Poet.Id}.png\" alt=\"\" onerror=\"this.onerror=null;this.src='/images/poets/999.png';\" />{gran.Title}</a>";
+                        firstAncestor = false;
+                    }
+                    else
+                    {
+                        BreadCrumpUrls += $" - <a href=\"{gran.FullUrl}\">{gran.Title}</a>";
+                    }
                 }
                 title += GanjoorPage.PoetOrCat.Cat.Title;
                 BreadCrumpUrls += $" - <a href=\"{GanjoorPage?.PoetOrCat.Cat.FullUrl}\">{GanjoorPage?.PoetOrCat.Cat.Title}</a>";

TajikGanjoor/wwwroot/css/tajik-ganjoor.css

@@ -98,6 +98,11 @@ html, body {
 .tg-breadcrumb {
     font-family: 'PT Sans', sans-serif;
     font-size: 0.95rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: 4px;
+    row-gap: 2px;
 }
 
 .tg-breadcrumb a:first-child {
@@ -321,47 +326,26 @@ html, body {
     display: block;
 }
 
-/* small inline poet badge, used above category pages and poem pages so
+/* small poet portrait inlined into the breadcrumb, prefixing the poet's
-   readers landing on a poem or a subcategory can still see whose work
+   name wherever it appears there (poet page's own crumb, and the first
-   it is at a glance, without the full bio-page header treatment */
+   ancestor crumb on category/poem pages, which is always the poet's root
-.tg-poet-badge {
+   category - see Index.cshtml.cs) */
+.tg-crumb-poet {
     display: inline-flex;
     align-items: center;
-    gap: 8px;
+    gap: 5px;
-    margin: 4px auto 16px auto;
+    vertical-align: middle;
-    text-decoration: none;
-    color: var(--tg-ink-soft);
 }
 
-.tg-poet-portrait-sm {
+.tg-crumb-poet img {
-    display: block;
+    width: 22px;
-    width: 36px;
+    height: 22px;
-    height: 36px;
     border-radius: 50%;
-    overflow: hidden;
-    border: 2px solid var(--tg-rule);
-    background: #fff;
-    flex: 0 0 auto;
-}
-
-.tg-poet-portrait-sm img {
-    width: 100%;
-    height: 100%;
     object-fit: cover;
-    display: block;
+    border: 1px solid var(--tg-rule);
-}
+    background: #fff;
-
+    vertical-align: middle;
-.tg-poet-badge-name {
+    flex: 0 0 auto;
-    font-family: 'PT Serif', serif;
-    font-size: 0.95rem;
-}
-
-.tg-poet-badge:hover .tg-poet-portrait-sm {
-    border-color: var(--tg-accent);
-}
-
-.tg-poet-badge:hover .tg-poet-badge-name {
-    color: var(--tg-accent-deep);
 }
 
 /* GanjoorPage.HtmlText for poet/cat pages is server-generated plain