Fix formatting issue on blog post (#314)

Prior to this changes, the class prose was fixing a specific width and break the responsiveness with the blog container. This change also add the class text-right in order to align the text on the right side when the image is on the right.class
djangonaut-space · Mar 13, 2024 · c6097fa · c6097fa
1 parent 11b9867
commit c6097fa
Show file tree

Hide file tree

Showing 9 changed files with 11 additions and 11 deletions.
diff --git a/indymeet/templates/blocks/left-image-right-text.html b/indymeet/templates/blocks/left-image-right-text.html
@@ -1,7 +1,7 @@
 {% load wagtailimages_tags %}
 
 <div class="block-image">
-    <div class="mt-3 prose prose-slate">
+    <div class="mt-3 ">
         <div class="flex flex-row">
             <div class="basis-1/4">{% image value.image width-1000 %}</div>
             <div class="basis-3/4">

diff --git a/indymeet/templates/blocks/quote-block.html b/indymeet/templates/blocks/quote-block.html
@@ -1,5 +1,5 @@
 <figure class="block-person-quote">
-    <div class="mt-3 prose prose-slate"></div>
+    <div class="mt-3 "></div>
         <div class="flex flex-row">
             <blockquote class="border-l-4 border-gray-400 pl-4">
                 <p>{{ value.quote|safe }}</p>

diff --git a/indymeet/templates/blocks/quote-left-image.html b/indymeet/templates/blocks/quote-left-image.html
@@ -1,7 +1,7 @@
 {% load wagtailimages_tags %}
 
 <figure class="block-person-quote">
-    <div class="mt-3 prose prose-slate">
+    <div class="mt-3 ">
     <div class="flex flex-row">
         <div class="basis-1/4">{% image value.image fill-600x600-c50 %}</div>
         <div class="basis-3/4">

diff --git a/indymeet/templates/blocks/rich_text.html b/indymeet/templates/blocks/rich_text.html
@@ -1,3 +1,3 @@
-<div class="mt-3 prose prose-slate">
+<div class="mt-3 ">
   {{ value.text|safe }}
 </div>
diff --git a/indymeet/templates/blocks/right-image-left-text.html b/indymeet/templates/blocks/right-image-left-text.html
@@ -1,10 +1,10 @@
 {% load wagtailimages_tags %}
 
 <div class="block-image">
-    <div class="mt-3 prose prose-slate">
+    <div class="mt-3 ">
         <div class="flex flex-row">
             <div class="basis-3/4">
-                    <p class="pr-4">
+                    <p class="pr-4 text-right">
                         {{ value.text|safe }}
                     </p>
                 </div>

diff --git a/indymeet/templates/blocks/text-image-heading.html b/indymeet/templates/blocks/text-image-heading.html
@@ -2,7 +2,7 @@
 
 <div class="block-image">
     <h2 class="mt-4 text-4xl blog-heading">{{ value.heading|safe }}</h2>
-    <div class="prose prose-slate">
+    <div class="">
         <div class="flex flex-row">
             <div class="basis-1/4">{% image value.image width-1000 %}</div>
             <div class="basis-3/4">

diff --git a/indymeet/templates/blocks/text-with-heading-left-image.html b/indymeet/templates/blocks/text-with-heading-left-image.html
@@ -2,7 +2,7 @@
 
 <div class="block-image">
     <h2 class="mt-4 text-4xl blog-heading">{{ value.heading|safe }}</h2>
-    <div class="prose prose-slate">
+    <div class="">
         <div class="flex flex-row">
             <div class="basis-1/4">{% image value.image width-1000 %}</div>
             <div class="basis-3/4">

diff --git a/indymeet/templates/blocks/text-with-heading-right-image.html b/indymeet/templates/blocks/text-with-heading-right-image.html
@@ -2,10 +2,10 @@
 
 <div class="block-image">
     <h2 class="mt-4 text-4xl blog-heading">{{ value.heading|safe }}</h2>
-    <div class="prose prose-slate">
+    <div class="">
         <div class="flex flex-row">
             <div class="basis-3/4">
-                <p class="pr-4">
+                <p class="pr-4 text-right">
                 {{ value.text|safe }}
                 </p>
             </div>

diff --git a/indymeet/templates/blocks/text-with-heading.html b/indymeet/templates/blocks/text-with-heading.html
@@ -1,7 +1,7 @@
 <div class="text-with-heading">
     <h2 class="mt-4 text-4xl blog-heading">{{ value.heading }}</h2>
     <div class="text-container">
-        <div class="prose prose-slate">
+        <div class="">
             <p>
             {{ value.text|safe }}
             </p>