Add a percentage next to the donation goal meter

tildes/scss/modules/_donation.scss

@@ -17,10 +17,23 @@
   header {
     font-weight: bold;
   }
+}
 
-  meter {
+.donation-goal-meter {
   width: 100%;
   height: 0.4rem;
-    margin: 0.4rem 0 0.2rem;
-  }
+}
+
+.donation-goal-progress {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin: 0.2rem 0;
+}
+
+.donation-goal-percentage {
+  font-size: 0.6rem;
+  line-height: 0.6rem;
+  font-weight: bold;
+  margin-left: 0.4rem;
 }

tildes/tildes/templates/home.jinja2

@@ -95,7 +95,9 @@
 {% macro donation_goal(financial_data, current_time) %}
   <div class="donation-goal">
     <header>{{ current_time.strftime("%B %Y") }} donation goal</header>
+    <div class="donation-goal-progress">
       <meter
+        class="donation-goal-meter"
         max="{{ financial_data["goal"] }}"
         low="{{ financial_data["expense"] }}"
         high="{{ financial_data["goal"] // 4 * 3 }}" {# 3/4 of the goal #}
@@ -103,6 +105,8 @@
         value="{{ financial_data["income"] }}"
         title="${{ financial_data["income"] }} / ${{ financial_data["goal"] }} (USD)"
       ></meter>
+      <span class="donation-goal-percentage">{{ financial_data["goal_percentage"] }}%</span>
+    </div>
 
     <p>
       Tildes is a non-profit site with no ads or investors, funded entirely by donations.<br>

tildes/tildes/views/topic.py

@@ -512,4 +512,8 @@ def _get_financial_data(db_session: Session) -> Optional[Dict[str, Decimal]]:
     if any(key not in financial_data for key in ("expense", "goal", "income")):
         return None
 
+    financial_data["goal_percentage"] = round(
+        financial_data["income"] / financial_data["goal"] * 100
+    )
+
     return financial_data