Update web/templates/base.html

trying to get the gradient working

web/templates/base.html

@@ -5,82 +5,38 @@
   <meta charset="utf-8">
   <title>{% block title %}Illustrations{% endblock %}</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <!-- Your global stylesheet (keep if you already have one) -->
   <link rel="stylesheet" href="{% static 'app.css' %}">
   {% block extra_head %}{% endblock %}
   <style>
-    /* Scoped navbar polish only — leaves your existing look intact */
     :root{
-      --nav-bg: #f8fafc;
+      --nav-bg:#f8fafc; --nav-border:#e5e7eb; --nav-ink:#1f2937; --nav-ink-muted:#6b7280;
-      --nav-border: #e5e7eb;
+      --nav-brand:#2f6cab; --nav-brand-hover:#1f4c7a; --btn-bg:#fff; --btn-border:#d1d5db; --btn-hover:#eef2f7;
-      --nav-ink: #1f2937;
-      --nav-ink-muted: #6b7280;
-      --nav-brand: #2f6cab;   /* soft blue */
-      --nav-brand-hover: #1f4c7a;
-      --btn-bg: #ffffff;
-      --btn-border: #d1d5db;
-      --btn-hover: #eef2f7;
-    }
-    .topbar-wrap{
-      border-bottom:1px solid var(--nav-border);
-      background:var(--nav-bg);
-    }
-    .topbar{
-      max-width:1100px; margin:0 auto; padding:14px 16px;  /* thicker bar */
-      display:flex; align-items:center; gap:14px; justify-content:space-between;
-      font-size:17px; /* slightly larger */
-    }
-    .brand{
-      display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--nav-ink);
-      font-weight:600; letter-spacing:.2px;
     }
+    .topbar-wrap{border-bottom:1px solid var(--nav-border); background:var(--nav-bg);}
+    .topbar{max-width:1100px; margin:0 auto; padding:14px 16px; display:flex; align-items:center; gap:14px; justify-content:space-between; font-size:17px;}
+    .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--nav-ink); font-weight:600; letter-spacing:.2px;}
     .brand .tagline{color:var(--nav-ink-muted); font-weight:500; font-size:15px}
     .nav-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
-
+    .nav-btn{display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:10px; background:var(--btn-bg); border:1px solid var(--btn-border); color:var(--nav-ink); text-decoration:none; cursor:pointer; line-height:1; transition:background .12s, border-color .12s, box-shadow .12s;}
-    /* Rectangular buttons with subtle separation + hover */
+    .nav-btn:hover{background:var(--btn-hover)}
-    .nav-btn{
+    .nav-btn.primary{background:var(--nav-brand); border-color:var(--nav-brand); color:#fff}
-      display:inline-flex; align-items:center; justify-content:center;
+    .nav-btn.primary:hover{background:var(--nav-brand-hover); border-color:var(--nav-brand-hover)}
-      padding:8px 12px; border-radius:10px;
+    .nav-btn.danger{background:#b91c1c; border-color:#b91c1c; color:#fff}
-      background:var(--btn-bg); border:1px solid var(--btn-border); color:var(--nav-ink);
+    .nav-btn.danger:hover{filter:brightness(.95)}
-      text-decoration:none; cursor:pointer; line-height:1;
+    .user-chip{padding:6px 10px; border-radius:999px; border:1px solid var(--nav-border); background:#fff; color:var(--nav-ink-muted); font-size:14px}
-      transition:background .12s ease, border-color .12s ease, box-shadow .12s ease;
+    .page{max-width:1100px; margin:18px auto; padding:0 16px}
-      white-space:nowrap;
-    }
-    .nav-btn:hover{ background:var(--btn-hover); }
-    .nav-btn.primary{ background:var(--nav-brand); border-color:var(--nav-brand); color:#fff; }
-    .nav-btn.primary:hover{ background:var(--nav-brand-hover); border-color:var(--nav-brand-hover); }
-    .nav-btn.danger{ background:#b91c1c; border-color:#b91c1c; color:#fff; }
-    .nav-btn.danger:hover{ filter:brightness(.95); }
-
-    .user-chip{
-      padding:6px 10px; border-radius:999px; border:1px solid var(--nav-border); background:#fff;
-      color:var(--nav-ink-muted); font-size:14px;
-    }
-
-    /* Page frame */
-    .page{
-      max-width:1100px; margin:18px auto; padding:0 16px;
-    }
-
-    /* Messages (Django messages framework) */
     .messages{margin:12px 0; display:grid; gap:8px}
-    .msg{padding:10px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff;}
+    .msg{padding:10px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff}
-    .msg.info{border-color:#dbeafe; background:#eff6ff;}
+    .msg.info{border-color:#dbeafe; background:#eff6ff}
-    .msg.success{border-color:#bbf7d0; background:#ecfdf5;}
+    .msg.success{border-color:#bbf7d0; background:#ecfdf5}
-    .msg.warning{border-color:#fde68a; background:#fffbeb;}
+    .msg.warning{border-color:#fde68a; background:#fffbeb}
-    .msg.error{border-color:#fecaca; background:#fef2f2;}
+    .msg.error{border-color:#fecaca; background:#fef2f2}
-
+    @media (max-width:780px){ .topbar{gap:10px; padding:12px 12px} .nav-right{gap:8px} .nav-btn{padding:8px 10px} }
-    @media (max-width:780px){
-      .topbar{gap:10px; padding:12px 12px}
-      .nav-right{gap:8px}
-      .nav-btn{padding:8px 10px}
-    }
   </style>
 </head>
-<body>
+
-<!-- in <body> tag -->
+<!-- ✅ single body tag with block for page-specific classes -->
 <body class="{% block body_class %}{% endblock %}">
-  <!-- Top navigation -->
   <div class="topbar-wrap">
     <div class="topbar">
       <a href="{% url 'search' %}" class="brand">
@@ -89,7 +45,6 @@
       </a>
 
       <div class="nav-right">
-        <!-- Left group: main pages -->
         <a class="nav-btn" href="{% url 'search' %}">Search</a>
         <a class="nav-btn" href="{% url 'stats' %}">Statistics</a>
 
@@ -98,11 +53,9 @@
           <a class="nav-btn" href="{% url 'export_csv' %}">Backup (CSV)</a>
         {% endif %}
 
-        <!-- Right group: user -->
         {% if user.is_authenticated %}
           <span class="user-chip">Signed in: {{ user.username }}</span>
-          <form method="post" action="{% url 'logout' %}" style="display:inline;">
+          <form method="post" action="{% url 'logout' %}" style="display:inline;">{% csrf_token %}
-            {% csrf_token %}
             <button class="nav-btn">Logout</button>
           </form>
         {% else %}
@@ -112,7 +65,6 @@
     </div>
   </div>
 
-  <!-- Messages -->
   <div class="page">
     {% if messages %}
       <div class="messages">
@@ -123,7 +75,6 @@
     {% endif %}
   </div>
 
-  <!-- Main content -->
   <main class="page">
     {% block content %}{% endblock %}
   </main>