joshlaymon/Illustrations
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update web/templates/stats.html

Browse Source
This commit is contained in:
Joshua Laymon 2025-08-20 03:01:58 +00:00
parent 529d284050
commit f2a90746ab
1 changed files with 14 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/templates/stats.html
View File

@ -36,22 +36,26 @@
</div> </div>
</div> </div>
<!-- Tag Cloud (replaces Top Subjects) --> <!-- Subject Cloud (no pills) -->
<div class="card" style="padding:16px; margin-bottom:16px;"> <div class="card" style="padding:16px; margin-bottom:16px;">
<div class="meta-label">Subject Cloud</div> <div class="meta-label">Subject Cloud</div>
{% if top_subjects %} {% if top_subjects %}
{# max count is the first item because list is sorted desc in the view #}
{% with maxc=top_subjects.0.count|default:1 %} {% with maxc=top_subjects.0.count|default:1 %}
<div class="tag-cloud" aria-label="Subject Tag Cloud"> <div class="tag-cloud" aria-label="Subject Tag Cloud">
{% for s in top_subjects %} {% for s in top_subjects %}
{# font-size from 14px up to 32px based on weight #}
<a <a
class="tag" class="tag"
href="{% url 'search' %}?q={{ s.name|urlencode }}&subject=on" href="{% url 'search' %}?q={{ s.name|urlencode }}&subject=on"
title="{{ s.name }} ({{ s.count }})" title="{{ s.name }} ({{ s.count }})"
style="font-size: calc(14px + ({{ s.count }} / {{ maxc }}) * 18px); style="
opacity: calc(.6 + ({{ s.count }} / {{ maxc }}) * .4);" /* 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 }}
</a> </a>
@ -105,25 +109,20 @@
.tag-cloud{ .tag-cloud{
display:flex; display:flex;
flex-wrap:wrap; flex-wrap:wrap;
gap:10px 14px; gap:12px 18px;
margin-top:10px; margin-top:10px;
align-items:flex-end; align-items:flex-end;
} }
.tag{ .tag{
line-height:1.1; line-height:1.1;
padding:6px 10px;
border-radius:12px;
text-decoration:none; text-decoration:none;
color:#0f172a;
background:#eef5fc;
border:1px solid #d7e6f7;
transition: transform .1s ease, background .12s ease, border-color .12s ease;
white-space:nowrap; white-space:nowrap;
transition: transform .12s ease, text-decoration-color .12s ease, color .12s ease;
text-underline-offset: 3px;
} }
.tag:hover{ .tag:hover{
transform: translateY(-1px); transform: translateY(-2px);
background:#e2effc; text-decoration: underline;
border-color:#c9def5;
} }
</style> </style>
{% endblock %} {% endblock %}