Fix formatting for prose and icons on index page and forecast page

kellpossible · Jan 1, 2024 · 7a4487e · 7a4487e
1 parent c70b167
commit 7a4487e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/src/templates/forecast.html b/src/templates/forecast.html
@@ -160,7 +160,7 @@ <h3 class="text-3xl text-center pt-2">{{ fl("problem-type-" ~ problem.kind) }}</
                     <div class="hyphens-auto md:hyphens-none md:text-justify pt-2 italic">
                         {{ fl("problem-type-" ~ problem.kind ~ "-about") }}
                     </div>
-                    <div class="prose prose-p:leading-normal text-black pb-2">{{ translated_string(problem.description) | md }}</div>
+                    <div class="prose leading-normal max-w-full text-black pb-2">{{ translated_string(problem.description) | md }}</div>
                     <div class="py-2">
                         <table class="w-full">
                             <tr class="odd:bg-gray-100">
@@ -211,13 +211,13 @@ <h3 class="text-3xl text-center pt-2">{{ fl("problem-type-" ~ problem.kind) }}</
                 <h2 class="text-4xl text-center py-4">
                     {{ fl("recent-relevant-observations-heading") }}
                 </h2>
-                <div class="pb-2 prose leading-normal text-black">
+                <div class="pb-2 prose max-w-full leading-normal text-black">
                     {{ translated_string(recent_observations) | md }}
                 </div>
                 <h2 class="text-4xl text-center py-2">
                     {{ fl("weather-forecast-heading") }}
                 </h2>
-                <div class="pb-2 prose leading-normal text-black">
+                <div class="pb-2 prose max-w-full leading-normal text-black">
                     {{ translated_string(weather_forecast) | md }}
                 </div>
             </div>

diff --git a/src/templates/index.html b/src/templates/index.html
@@ -8,13 +8,15 @@
                 <h2 class="text-4xl font-bold text-blue-600">{{ fl("current-forecast-heading") }}</h2>
             </a>
             {% with forecast = current_forecast.forecast %}
-                {{ forecast_intro(
-                overall_hazard=forecast.hazard_ratings.overall.value,
-                description=forecast.description,
-                formatted_time=forecast.formatted_time,
-                formatted_valid_until=forecast.formatted_valid_until,
-                forecaster_name=forecast.forecaster.name
-                ) }}
+                <div class="text-left">
+                    {{ forecast_intro(
+                    overall_hazard=forecast.hazard_ratings.overall.value,
+                    description=forecast.description,
+                    formatted_time=forecast.formatted_time,
+                    formatted_valid_until=forecast.formatted_valid_until,
+                    forecaster_name=forecast.forecaster.name
+                    ) }}
+                </div>
             {% endwith %}
             <div>
                 <a class="text-xl font-bold text-blue-600 hover:text-blue-800"
@@ -31,14 +33,14 @@ <h2 class="text-4xl font-bold">{{ fl("no-current-forecast-heading") }}</h2>
     </div>
 {% endmacro %}
 {% macro forecast_archive_block(forecast, emphasize=false) %}
-    <p>
+    <p class="py-0.5">
         <a class="text-xl font-bold text-blue-600 hover:text-blue-800 visited:text-purple-600 {% if emphasize %}text-xl font-bold{% endif %}"
            href="/forecasts/{{ forecast.file.file.name | urlencode }}">
             <span class="inline-flex items-baseline">
                 {% if forecast.forecast %}
                     {% set hazard_rating = forecast.forecast.hazard_ratings.overall.value %}
                     <img src="/static/images/icons/hazard-rating/{{ hazard_rating }}.png"
-                         class="self-center w-8 h-8 mx-1"/>
+                         class="self-center h-8 mx-1"/>
                 {% endif %}
                 <span>{{ forecast.details.formatted_time }}</span>
             </span>