Render chemical formulas with proper subscript notation
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

Adds a template filter that cleans up spaced-out formulas from scraping
and wraps subscript numbers in <sub> tags for proper display.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-30 22:13:19 +03:00
parent 44e2420c29
commit 6695e7e8ab
3 changed files with 42 additions and 3 deletions

View File

@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
{% load chem %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% if mineral %}{{ mineral.name }} — Daily Stone{% else %}Daily Stone{% endif %}</title>
@@ -98,10 +99,17 @@
.formula {
font-size: 1.15rem;
font-family: 'Courier New', monospace;
font-family: 'Georgia', serif;
color: var(--text-secondary);
margin-bottom: 0.5rem;
letter-spacing: 0.02em;
letter-spacing: 0.03em;
}
.formula sub {
font-size: 0.7em;
vertical-align: baseline;
position: relative;
top: 0.3em;
}
/* Photo gallery */
@@ -312,7 +320,7 @@
</a>
<div class="label">{% if is_random %}Random Stone{% else %}Daily Stone{% endif %}</div>
<h1 class="mineral-name">{{ mineral.name }}</h1>
{% if mineral.formula %}<div class="formula">{{ mineral.formula }}</div>{% endif %}
{% if mineral.formula %}<div class="formula">{{ mineral.formula|chem_formula }}</div>{% endif %}
<div class="date">{{ today|date:"F j, Y" }}</div>
</header>