improving tj.ganjoor.net design

TajikGanjoor/Pages/Index.cshtml.cs

@@ -257,7 +257,9 @@ namespace TajikGanjoor.Pages
             ViewData["TrackingScript"] = Configuration["TrackingScript"] != null && string.IsNullOrEmpty(Request.Cookies["Token"]) ? Configuration["TrackingScript"].Replace("loggedon", "") : Configuration["TrackingScript"];
             ViewData["GoogleTranslateLink"] = $"https://translate.google.com/translate?hl=fa&sl=fa&tl=tg&u={Uri.EscapeDataString(stringToEscape: $"https://ganjoor.net{Request.Path}")}";
             ViewData["NextUrl"] = NextUrl;
+            ViewData["NextTitle"] = NextTitle;
             ViewData["PreviousUrl"] = PreviousUrl;
+            ViewData["PreviousTitle"] = PreviousTitle;
             return Page();
         }
 

TajikGanjoor/Pages/Shared/_Layout.cshtml

@@ -4,6 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@ViewData["Title"]</title>
+    <link rel="icon" href="~/favicon.ico" sizes="any" />
+    <meta name="theme-color" content="#6b3f1d" />
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/css/tajik-ganjoor.css" asp-append-version="true" />
@@ -25,19 +27,40 @@
         <main role="main" class="pb-3">
             @RenderBody()
         </main>
+        @if (!string.IsNullOrEmpty(ViewData["PreviousUrl"]?.ToString()) || !string.IsNullOrEmpty(ViewData["NextUrl"]?.ToString()))
+        {
+            <nav class="tg-poem-nav">
+                @if (!string.IsNullOrEmpty(ViewData["PreviousUrl"]?.ToString()))
+                {
+                    <a class="tg-poem-nav-link tg-poem-nav-prev" href="@ViewData["PreviousUrl"]" title="@ViewData["PreviousTitle"]">
+                        <span class="tg-poem-nav-arrow">←</span>
+                        <span class="tg-poem-nav-text">
+                            <span class="tg-poem-nav-caption">қаблӣ</span>
+                            <span class="tg-poem-nav-title">@ViewData["PreviousTitle"]</span>
+                        </span>
+                    </a>
+                }
+                else
+                {
+                    <span></span>
+                }
+                @if (!string.IsNullOrEmpty(ViewData["NextUrl"]?.ToString()))
+                {
+                    <a class="tg-poem-nav-link tg-poem-nav-next" href="@ViewData["NextUrl"]" title="@ViewData["NextTitle"]">
+                        <span class="tg-poem-nav-text">
+                            <span class="tg-poem-nav-caption">баъдӣ</span>
+                            <span class="tg-poem-nav-title">@ViewData["NextTitle"]</span>
+                        </span>
+                        <span class="tg-poem-nav-arrow">→</span>
+                    </a>
+                }
+            </nav>
+        }
     </div>
 
     <footer class="border-top footer text-muted">
         <span>Ба неруии <a href="http://persian-tajik.ir/FarsiTotajiki.aspx" target="_blank">пиршяни тоҷик</a></span>
         <span><a href="@ViewData["GoogleTranslateLink"]" target="_blank">Дар ганҷури форсӣ</a></span>
-        @if (ViewData["PreviousUrl"] != null && !string.IsNullOrEmpty(ViewData["PreviousUrl"].ToString()))
-        {
-            <span><a href="@ViewData["PreviousUrl"]">қаблӣ</a></span>
-        }
-        @if (ViewData["NextUrl"] != null && !string.IsNullOrEmpty(ViewData["NextUrl"].ToString()))
-        {
-            <span><a href="@ViewData["NextUrl"]">баъдӣ</a></span>
-        }
     </footer>
 
     <script src="~/lib/jquery/dist/jquery.min.js"></script>

TajikGanjoor/wwwroot/css/tajik-ganjoor.css

@@ -74,6 +74,7 @@
 :root {
     --tg-paper: #faf6ee;
     --tg-paper-edge: #efe6d3;
+    --tg-surface: #ffffff;
     --tg-ink: #2b2620;
     --tg-ink-soft: #5b5346;
     --tg-accent: #8a5a2b;
@@ -81,6 +82,30 @@
     --tg-rule: #d9cdb2;
 }
 
+@media (prefers-color-scheme: dark) {
+    :root {
+        --tg-paper: #211d18;
+        --tg-paper-edge: #2c2620;
+        --tg-surface: #2c2620;
+        --tg-ink: #ece6d9;
+        --tg-ink-soft: #bfb6a4;
+        --tg-accent: #d1a06a;
+        --tg-accent-deep: #e3b988;
+        --tg-rule: #453d32;
+    }
+
+    /* poet portrait circles keep a light backing regardless of theme -
+       the portraits are illustrations on a light background, and a
+       pure-white disc reads as a deliberate frame against the dark
+       page rather than a mismatched surface */
+    .tg-poet-portrait,
+    .tg-poet-portrait-lg,
+    .sitem-poet-portrait,
+    .tg-crumb-poet img {
+        background: #f4efe4;
+    }
+}
+
 html, body {
     background-color: var(--tg-paper);
     color: var(--tg-ink);
@@ -117,7 +142,8 @@ html, body {
 .navbar input[type="search"] {
     font-family: 'PT Sans', sans-serif;
     border: 1px solid var(--tg-rule);
-    background: #fff;
+    background: var(--tg-surface);
+    color: var(--tg-ink);
 }
 
 .footer {
@@ -125,6 +151,70 @@ html, body {
     font-size: 0.85rem;
 }
 
+.footer a {
+    color: var(--tg-accent-deep);
+}
+
+/* ---------- poem prev/next navigation ---------- */
+
+.tg-poem-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    gap: 12px;
+    max-width: 720px;
+    margin: 24px auto 8px auto;
+    padding-top: 14px;
+    border-top: 1px solid var(--tg-rule);
+}
+
+.tg-poem-nav-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    max-width: 46%;
+    padding: 6px 10px;
+    text-decoration: none;
+    color: var(--tg-ink-soft);
+    border-radius: 6px;
+}
+
+.tg-poem-nav-link:hover {
+    background-color: var(--tg-paper-edge);
+    color: var(--tg-accent-deep);
+}
+
+.tg-poem-nav-next {
+    margin-inline-start: auto;
+    text-align: end;
+    flex-direction: row-reverse;
+}
+
+.tg-poem-nav-arrow {
+    font-size: 1.1rem;
+    flex: 0 0 auto;
+}
+
+.tg-poem-nav-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.tg-poem-nav-caption {
+    font-family: 'PT Sans', sans-serif;
+    font-size: 0.72rem;
+    opacity: 0.75;
+}
+
+.tg-poem-nav-title {
+    font-family: 'PT Serif', serif;
+    font-size: 0.95rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 /* ---------- poem page: printed-book feel ---------- */
 
 .container {