Update web/templates/stats.html

web/templates/stats.html

@@ -36,35 +36,22 @@
     </div>
   </div>
 
-  <!-- Subject Cloud (no pills) -->
+  <!-- Top subjects -->
   <div class="card" style="padding:16px; margin-bottom:16px;">
-    <div class="meta-label">Subject Cloud</div>
+    <div class="meta-label">Top Subjects</div>
-
+    <div style="display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;">
-    {% if top_subjects %}
-      {% with maxc=top_subjects.0.count|default:1 %}
-      <div class="tag-cloud" aria-label="Subject Tag Cloud">
       {% for s in top_subjects %}
         <a
-            class="tag"
+          class="chip chip-link"
           href="{% url 'search' %}?q={{ s.name|urlencode }}&subject=on"
-            title="{{ s.name }} ({{ s.count }})"
+          title="Search subject: {{ s.name }}"
-            style="
-              /* Size: 12px → 40px */
-              font-size: calc(12px + ({{ s.count }} / {{ maxc }}) * 28px);
-              /* Weight: 350 → 800 */
-              font-weight: calc(350 + ({{ s.count }} / {{ maxc }}) * 450);
-              /* Color: darker as frequency rises */
-              color: rgba(31, 41, 55, calc(.45 + ({{ s.count }} / {{ maxc }}) * .55));
-            "
         >
-            {{ s.name }}
+          {{ s.name }} ({{ s.count }})
         </a>
+      {% empty %}
+        <span class="muted">No subjects.</span>
       {% endfor %}
     </div>
-      {% endwith %}
-    {% else %}
-      <span class="muted">No subjects.</span>
-    {% endif %}
   </div>
 
   <!-- Scripture usage -->
@@ -104,25 +91,4 @@
     </div>
   </div>
 </div>
-
-<style>
-  .tag-cloud{
-    display:flex;
-    flex-wrap:wrap;
-    gap:12px 18px;
-    margin-top:10px;
-    align-items:flex-end;
-  }
-  .tag{
-    line-height:1.1;
-    text-decoration:none;
-    white-space:nowrap;
-    transition: transform .12s ease, text-decoration-color .12s ease, color .12s ease;
-    text-underline-offset: 3px;
-  }
-  .tag:hover{
-    transform: translateY(-2px);
-    text-decoration: underline;
-  }
-</style>
 {% endblock %}