From 3fdb15f5cd52fd9f7c05689487b7d9facfc3b827 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 4 Sep 2018 20:42:56 +0100
Subject: [PATCH] Update testimonial styling

---
 assets/sass/components/markdown.sass |  4 ++++
 source/testimonials.html.twig        | 28 ++++++++++++++++------------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/assets/sass/components/markdown.sass b/assets/sass/components/markdown.sass
index 0b4bd3d4..a24c2bad 100644
--- a/assets/sass/components/markdown.sass
+++ b/assets/sass/components/markdown.sass
@@ -14,6 +14,10 @@
       @apply .bg-grey-lighter .inline-block .font-mono .text-xs
       padding: 1px 3px
 
+
+  p:last-child
+    @apply .mb-0
+
   pre code,
   .hljs
     @apply .bg-grey-lighter
diff --git a/source/testimonials.html.twig b/source/testimonials.html.twig
index 44a98193..8b8a6866 100644
--- a/source/testimonials.html.twig
+++ b/source/testimonials.html.twig
@@ -69,28 +69,32 @@ testimonials:
 {% block content %}
     <div class="listing">
         {% for testimonial in page.testimonials|reverse %}
-            <article class="mb-12">
+            <article class="flex flex-row-reverse items-center mb-12">
                 {% if testimonial.image %}
-                    <div class="float-right mb-4 ml-4">
+                    <div class="flex-none">
                         <img
                             src="{{ site.url }}/images/testimonials/{{ testimonial.image }}"
                             alt="{{ testimonial.name }}"
-                            class="with-border with-padding rounded-full w-16 h-16"
+                            class="with-border with-padding rounded-full w-16 h-16 ml-4"
                         >
                     </div>
                 {% endif %}
 
-                <div class="mb-2">
-                    <h2 class="mb-1 leading-none">{{ testimonial.name }}</h2>
+                <div class="flex-1">
+                    <div class="mb-2">
+                        <h2 class="mb-1 leading-none">{{ testimonial.name }}</h2>
 
-                    {% if testimonial.role %}
-                        <div class="text-grey-dark">
-                            {{ testimonial.role|raw }}
-                        </div>
-                    {% endif %}
+                        {% if testimonial.role %}
+                            <div class="text-grey-dark">
+                                {{ testimonial.role|raw }}
+                            </div>
+                        {% endif %}
+                    </div>
+
+                    <div class="markdown">
+                        {{ testimonial.text|markdown }}
+                    </div>
                 </div>
-
-                {{ testimonial.text|markdown }}
             </article>
         {% endfor %}
     </div>