feat(branding): add logo/favicon, rename to Librarian, widen layout

Dockerfile

@@ -29,6 +29,15 @@ RUN pip install --no-cache-dir --no-index --find-links=/wheels /wheels/* \
 COPY --chown=app:app . .
 RUN chmod +x entrypoint.sh
 
+# Materialise the brand asset as a real file. In dev, app/static/brand/logo.svg
+# is a symlink to docs/icon.svg (live editing); here we replace it with a copy
+# so the runtime image is self-contained and doesn't depend on symlink
+# resolution or docs/ surviving in the image. Idempotent: -f removes the
+# symlink (or stale copy) first.
+RUN rm -f app/static/brand/logo.svg \
+    && cp docs/icon.svg app/static/brand/logo.svg \
+    && chown app:app app/static/brand/logo.svg
+
 USER app
 
 ENV FLASK_APP=wsgi.py \

app/about/templates/about/about.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}About — TKC Library{% endblock %}
+{% block title %}About — Librarian{% endblock %}
 
 {% block extra_styles %}
 <style>
@@ -9,7 +9,7 @@
 
 {% block content %}
 <div class="container">
-  <div class="brand">TKC Library</div>
+  {% include "_brand.html" %}
   <div class="card">
     <h1>About</h1>
     <p>This is a digital library platform.</p>

app/admin/templates/admin/borrowers.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}Borrower Dashboard — TKC Library{% endblock %}
+{% block title %}Borrower Dashboard — Librarian{% endblock %}
 
 {% block extra_styles %}
 <style>
@@ -21,7 +21,7 @@
 
 {% block content %}
 <div class="container">
-  <div class="brand">TKC Library</div>
+  {% include "_brand.html" %}
   <div class="card">
     <h1>Borrower Dashboard</h1>
     <p>This page shows every registered account and the books they have borrowed, with borrow date, due date, and return status.</p>

app/admin/templates/admin/dashboard.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}Admin — TKC Library{% endblock %}
+{% block title %}Admin — Librarian{% endblock %}
 
 {% block extra_styles %}
 <style>
@@ -12,7 +12,7 @@
 
 {% block content %}
 <div class="container">
-  <div class="brand">TKC Library</div>
+  {% include "_brand.html" %}
   <div class="card">
     <h1>Admin dashboard</h1>
     <p>Hi <strong>{{ session['username'] }}</strong> — you have admin access.</p>

app/admin/templates/admin/users.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}Manage Users — TKC Library{% endblock %}
+{% block title %}Manage Users — Librarian{% endblock %}
 
 {% block extra_styles %}
 <style>
@@ -74,7 +74,7 @@
 
 {% block content %}
 <div class="container">
-  <div class="brand">TKC Library</div>
+  {% include "_brand.html" %}
   <div class="card">
     <h1>Manage Users</h1>
     <p><a href="{{ url_for('admin.dashboard') }}">← Back to dashboard</a></p>

app/borrower/templates/borrower/borrow_history.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}Borrow History - TKC Library{% endblock %}
+{% block title %}Borrow History - Librarian{% endblock %}
 
 {% block extra_styles %}
 <style>

app/borrower/templates/borrower/dashboard.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}Borrower Dashboard - TKC Library{% endblock %}
+{% block title %}Borrower Dashboard - Librarian{% endblock %}
 
 {% block extra_styles %}
 <style>

app/library/templates/library/add_book.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}Add Book - TKC Library{% endblock %}
+{% block title %}Add Book - Librarian{% endblock %}
 
 {% block extra_styles %}
 <style>
@@ -114,7 +114,7 @@
 {% block content %}
 <div class="container">
   <header>
-    <div class="brand">TKC Library</div>
+    {% include "_brand.html" %}
     <div class="session">
       {% if session.get('username') %}
         Logged in as <strong>{{ session['username'] }}</strong> ({{ session['role'] }})

app/library/templates/library/dashboard.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}My Dashboard — TKC Library{% endblock %}
+{% block title %}My Dashboard — Librarian{% endblock %}
 
 {% block extra_styles %}
 <style>
@@ -21,7 +21,7 @@
 
 {% block content %}
 <div class="container">
-  <div class="brand">TKC Library</div>
+  {% include "_brand.html" %}
   <div class="card">
     <h1>My Borrower Dashboard</h1>
     <p>Here are the books you have borrowed and their current status.</p>

app/library/templates/library/index.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}TKC Library{% endblock %}
+{% block title %}Librarian{% endblock %}
 
 {% block extra_styles %}
 <style>
@@ -272,7 +272,7 @@
 {% block content %}
 <div class="container">
   <header>
-    <div class="brand">TKC Library</div>
+    {% include "_brand.html" %}
     <div class="session">
       {% if session.get('username') %}
         Logged in as <strong>{{ session['username'] }}</strong> ({{ session['role'] }})
@@ -291,8 +291,7 @@
   </header>
 
   <div class="card">
-    <h1>TKC Library</h1>
-    <p class="muted">Flask + PostgreSQL is running.</p>
+    <h1>Librarian</h1>
 
     <form method="GET" action="{{ url_for('library.index') }}" class="search-form" role="search">
       <input

app/static/brand/logo.svg

@@ -0,0 +1 @@
+../../../docs/icon.svg

app/templates/_brand.html

@@ -0,0 +1,7 @@
+{# Brand lockup: logo + wordmark. The logo source is docs/icon.svg, served
+   under static/ (symlink in dev, copied in at build time). Include this
+   instead of hardcoding the brand text so the mark stays consistent. #}
+<div class="brand">
+  <img class="brand-logo" src="{{ url_for('static', filename='brand/logo.svg') }}" alt="Librarian logo" />
+  <span>Librarian</span>
+</div>

app/templates/base.html

@@ -3,7 +3,12 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{% block title %}TKC Library{% endblock %}</title>
+    <title>{% block title %}Librarian{% endblock %}</title>
+    {# Brand asset lives at docs/icon.svg; it's exposed under static/ via a
+       committed symlink in dev and a real copy baked in at Docker build time
+       (see Dockerfile). SVG favicons are honoured by all current browsers. #}
+    <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='brand/logo.svg') }}" />
+    <link rel="apple-touch-icon" href="{{ url_for('static', filename='brand/logo.svg') }}" />
     <style>
       :root {
         --brand: #f17c14;
@@ -28,14 +33,22 @@
         justify-content: center;
         padding: 1rem;
       }
-      .container { max-width: 720px; margin: 0 auto; }
+      .container { max-width: 1080px; margin: 0 auto; }
       .card {
         background: white;
         border-radius: 10px;
         padding: 1.75rem 2rem;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
       }
-      .brand { color: var(--brand); font-weight: 700; font-size: 1.1rem; }
+      .brand {
+        color: var(--brand);
+        font-weight: 700;
+        font-size: 1.1rem;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+      .brand-logo { height: 1.6rem; width: auto; display: block; }
       .muted { color: var(--muted); }
       a { color: var(--brand); text-decoration: none; }
       a:hover { text-decoration: underline; }