Add a percentage next to the donation goal meter

tildes/scss/modules/_donation.scss

@@ -17,10 +17,23 @@
   header {
     font-weight: bold;
   }
+}
 
-  meter {
-    width: 100%;
-    height: 0.4rem;
-    margin: 0.4rem 0 0.2rem;
-  }
+.donation-goal-meter {
+  width: 100%;
+  height: 0.4rem;
+}
+
+.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,14 +95,18 @@
 {% macro donation_goal(financial_data, current_time) %}
   <div class="donation-goal">
     <header>{{ current_time.strftime("%B %Y") }} donation goal</header>
-    <meter
-      max="{{ financial_data["goal"] }}"
-      low="{{ financial_data["expense"] }}"
-      high="{{ financial_data["goal"] // 4 * 3 }}" {# 3/4 of the goal #}
-      optimum="{{ financial_data["goal"] - 1 }}" {# just needs to be between high and max #}
-      value="{{ financial_data["income"] }}"
-      title="${{ financial_data["income"] }} / ${{ financial_data["goal"] }} (USD)"
-    ></meter>
+    <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 #}
+        optimum="{{ financial_data["goal"] - 1 }}" {# just needs to be between high and max #}
+        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