feat(title): add title log (#166)

* feat(title): add title log
* style: change card background

---------

Signed-off-by: Akshay Mestry <xa@mes3.dev>

Author: xames3

docs/source/conf.py

@@ -4,7 +4,7 @@
 
 Author: Akshay Mestry <xa@mes3.dev>
 Created on: 22 February, 2025
-Last updated on: 07 February, 2026
+Last updated on: 10 February, 2026
 
 This file contains the configuration settings for building my static
 website using Sphinx, a popular Python documentation tool. Sphinx is a
@@ -105,7 +105,7 @@
 smartquotes: bool = False
 
 html_theme: t.Final[str] = "theme"
-html_title: str = ""
+html_title: str = "amestry"
 html_baseurl: t.Final[str] = "https://xa.mes3.dev/"
 html_context: dict[str, t.Any] = {
     "add_copy_to_headerlinks": True,

theme/base/static/code.css

@@ -57,15 +57,6 @@ span.linenos.special {
     width: calc(100% + 1rem);
 }
 
-@media (max-width: 768px) {
-
-    .highlight .hll {
-        padding-right: 100vw;
-        margin-right: -100vw;
-        display: inline;
-    }
-}
-
 .highlight .hll::before {
     content: " ";
     position: absolute;
@@ -78,6 +69,20 @@ span.linenos.special {
     background: linear-gradient(to right, #47a8ff, rgb(92, 174, 255) 16.81%, hsl(var(--highlight)) 16.81%);
 }
 
+@media (max-width: 768px) {
+
+    .highlight .hll {
+        padding-right: 100vw;
+        margin-right: -100vw;
+        display: inline;
+    }
+
+    .highlight .hll::before {
+        height: 17px !important;
+        top: 0;
+    }
+}
+
 .highlight {
     background: hsl(var(--background));
 }

theme/base/static/sphinx-design.css

@@ -17,7 +17,7 @@
     border: 1px solid hsl(var(--border));
     color: hsl(var(--foreground));
     margin: 2rem 0 !important;
-    background-color: hsl(var(--background));
+    background-color: hsl(var(--code-background));
 }
 
 .sd-card-body {

theme/base/static/theme.css

@@ -356,7 +356,7 @@ samp {
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
     transform: translateX(-100%);
     transition: transform var(--duration-fast) var(--ease-in-out);
-    padding: 1rem 1.5rem;
+    padding: 1rem;
     display: flex;
     flex-direction: column;
     overscroll-behavior: contain;
@@ -1808,6 +1808,8 @@ html[data-theme="dark"] .site-header {
     min-height: 3.5rem;
     gap: 1rem;
     padding-inline: 1rem;
+    max-width: 1180px;
+    margin-inline: auto;
 }
 
 .site-header__primary {
@@ -1823,8 +1825,6 @@ html[data-theme="dark"] .site-header {
 
 .site-header__logo {
     display: inline-flex;
-    border: 1px solid hsl(var(--border));
-    border-radius: 0.5rem;
     cursor: pointer;
 }
 
@@ -1860,29 +1860,27 @@ html[data-theme="dark"] .site-header__logo-image--light {
     display: none;
 }
 
+/* Desktop view */
 .site-sidebar__brand-title,
 .site-header__title {
-    font-size: 0.85rem;
-    font-family: "Geist Mono", monospace;
-    width: 2rem;
-    height: 2rem;
-    position: relative;
-    font: var(--fa-font-regular);
+    font-size: 1.5rem;
+    font-weight: 600;
+    letter-spacing: -2.36px;
+    margin-bottom: 0.5rem;
 }
 
-.site-sidebar__brand-title::before,
-.site-header__title::before {
-    content: "\f015";
+.site-sidebar__brand-title::after,
+.site-header__title::after {
+    content: "\f336";
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
-    display: inline-block;
-    visibility: visible;
-    position: absolute;
-    transform: translate(-50%, -50%);
-    left: 50%;
-    top: 50%;
+    font: var(--fa-font-solid);
+    font-size: 1rem;
+    color: hsl(var(--green-color));
+    margin-left: 0.25rem;
 }
 
+/* Mobile view */
 @media (max-width: 768px) {
 
     .site-sidebar__brand-title::before,
@@ -1897,6 +1895,11 @@ html[data-theme="dark"] .site-header__logo-image--light {
         margin-left: 0.5rem;
         border-radius: 0.5rem;
     }
+    .site-sidebar__brand-title,
+    .site-header__title {
+        margin-bottom: 1rem;
+    }
+
 }
 
 .site-header__title {
@@ -2045,13 +2048,9 @@ html[data-theme="dark"] .site-header__logo-image--light {
 
 .site-header__menu-toggle {
     display: inline-flex;
-    border: none;
     background-color: transparent;
-    border: 1px solid hsl(var(--border));
-    border-radius: 0.5rem;
-    margin: 0;
-    cursor: pointer;
     cursor: pointer;
+    margin-top: 1rem;
 }
 
 @media (min-width: 768px) {
@@ -2999,17 +2998,13 @@ a[data-tooltip].show-tooltip::after {
 }
 
 .site-github-repository__name {
-    color: hsl(var(--muted-foreground)) !important;
-}
-
-.site-github-repository__name:hover {
     color: hsl(var(--foreground)) !important;
 }
 
 .site-github-repository__name::before {
     content: "\f09b";
     text-rendering: auto;
-    color: hsl(var(--muted-foreground)) !important;
+    color: hsl(var(--foreground)) !important;
     -webkit-font-smoothing: antialiased;
     font: var(--fa-font-brands);
     margin-right: 0.5rem;
@@ -3247,3 +3242,11 @@ a[data-tooltip].show-tooltip::after {
     text-decoration: line-through;
     text-decoration-thickness: 1px;
 }
+
+.accent-bg {
+    background-color: hsl(var(--accent));
+}
+
+.code-bg {
+    background-color: hsl(var(--code-background));
+}

theme/base/templates/header.html.jinja

@@ -4,12 +4,12 @@ Header Template
 
 Author: Akshay Mestry <xa@mes3.dev>
 Created on: 21 February, 2025
-Last updated on: 26 December, 2025
+Last updated on: 10 February, 2026
 -->
 <header class="site-header">
     {%- block header_before %}
     {% endblock header_before -%}
-    <div class="site-header__inner container">
+    <div class="site-header__inner">
         {%- block header_left %}
             <div class="site-header__primary">
                 {%- block website_logo %}