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 %}
+      {% for s in top_subjects %}
-      {% with maxc=top_subjects.0.count|default:1 %}
+        <a
-      <div class="tag-cloud" aria-label="Subject Tag Cloud">
+          class="chip chip-link"
-        {% for s in top_subjects %}
+          href="{% url 'search' %}?q={{ s.name|urlencode }}&subject=on"
-          <a
+          title="Search subject: {{ s.name }}"
-            class="tag"
+        >
-            href="{% url 'search' %}?q={{ s.name|urlencode }}&subject=on"
+          {{ s.name }} ({{ s.count }})
-            title="{{ s.name }} ({{ s.count }})"
+        </a>
-            style="
+      {% empty %}
-              /* Size: 12px → 40px */
+        <span class="muted">No subjects.</span>
-              font-size: calc(12px + ({{ s.count }} / {{ maxc }}) * 28px);
+      {% endfor %}
-              /* Weight: 350 → 800 */
+    </div>
-              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 }}
-          </a>
-        {% 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 %}