Update web/templates/entry_view.html

web/templates/entry_view.html

@@ -34,21 +34,10 @@
 
   <!-- Main card -->
   <div class="result-card">
-    <!-- SUBJECT pills (WOL-linked) -->
+    <!-- SUBJECT as the main title -->
-    <div class="subject-pills">
+    <h1 class="subject-title">
-      {% if subject_list %}
+      {{ entry.subject|default:"(no subject)" }}
-        {% for s in subject_list %}
+    </h1>
-          <a
-            class="chip chip-subject"
-            href="https://wol.jw.org/en/wol/s/r1/lp-e?q={{ s }}"
-            target="_blank" rel="noopener noreferrer"
-            title="Search WOL for {{ s }}"
-          >{{ s }}</a>
-        {% endfor %}
-      {% else %}
-        <span class="chip chip-muted">(no subject)</span>
-      {% endif %}
-    </div>
 
     <!-- ILLUSTRATION -->
     <div class="section">
@@ -70,7 +59,15 @@
     <div class="meta-grid">
       <div class="meta-item">
         <div class="meta-label">Source</div>
-        <div class="meta-value">{{ entry.source|default:"—" }}</div>
+        <div class="meta-value">
+          {% if entry.source %}
+            <a class="chip chip-link chip-lg"
+               href="https://wol.jw.org/en/wol/l/r1/lp-e?q={{ entry.source|urlencode }}"
+               target="_blank" rel="noopener noreferrer">
+              {{ entry.source }}
+            </a>
+          {% else %}—{% endif %}
+        </div>
       </div>
 
       <div class="meta-item">
@@ -113,27 +110,12 @@
 
 </div>
 
+<!-- Tiny style tweak to make the Source pill larger/bold without touching global CSS -->
 <style>
-  .subject-pills{
+  .chip-lg {
-    display:flex;
+    font-weight: 700;
-    flex-wrap:wrap;
+    font-size: 15px;
-    gap:10px;
+    padding: 6px 12px;
-    margin:0 0 10px;
-  }
-  .chip-subject{
-    font-weight:700;
-    font-size:16px;
-    padding:8px 14px;
-    border-radius:999px;
-    background:#eef5fc;
-    border:1px solid #d7e6f7;
-    color:#0f172a;
-    text-decoration:none;
-    text-transform: capitalize; /* Capitalize each word */
-  }
-  .chip-subject:hover{
-    background:#e2effc;
-    border-color:#c9def5;
   }
 </style>
 {% endblock %}