From 110a6b3c7b80a91949c3f31c0166c3cc4ce58677 Mon Sep 17 00:00:00 2001
From: Kevin Lozoya <kevinlozoyaginer@gmail.com>
Date: Wed, 6 Nov 2019 17:42:02 +0100
Subject: [PATCH 1/2] Fix 'hr' tags not centered

---
 data/assets/css/components/_event-summary.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/data/assets/css/components/_event-summary.scss b/data/assets/css/components/_event-summary.scss
index d4dba75086b5ac..8ff85e73e05c6a 100644
--- a/data/assets/css/components/_event-summary.scss
+++ b/data/assets/css/components/_event-summary.scss
@@ -21,7 +21,6 @@ $thumbnailSizeMobile: 75px;
   width: 100%;
 
   @include size-medium {
-    width: auto;
     max-width: 300px;
     margin-bottom: $space-large;
     justify-self: center;
@@ -112,6 +111,8 @@ $thumbnailSizeMobile: 75px;
     color: black;
     background-color: black;
     margin: $space-medium auto $space-large auto;
+    clear: both;
+
     @include size-medium {
       margin: $space-large auto $space-larger auto;
     }

From dbbc5cedfd1db9781cadef010c26cb430ebba7f0 Mon Sep 17 00:00:00 2001
From: Kevin Lozoya <kevinlozoyaginer@gmail.com>
Date: Sun, 10 Nov 2019 22:22:49 +0100
Subject: [PATCH 2/2] use flexbox

---
 .../assets/css/components/_event-summary.scss | 77 ++++++++-----------
 data/index.njk                                | 32 ++++----
 2 files changed, 48 insertions(+), 61 deletions(-)

diff --git a/data/assets/css/components/_event-summary.scss b/data/assets/css/components/_event-summary.scss
index 8ff85e73e05c6a..003ce3973edb91 100644
--- a/data/assets/css/components/_event-summary.scss
+++ b/data/assets/css/components/_event-summary.scss
@@ -17,19 +17,47 @@ $thumbnailSizeMobile: 75px;
 .event-summary {
   position: relative;
   justify-self: left;
-  margin-bottom: $space-medium;
   width: 100%;
+  display: flex;
+  flex-wrap: wrap;
 
   @include size-medium {
     max-width: 300px;
     margin-bottom: $space-large;
     justify-self: center;
+    display: block;
   }
 
   @include size-large {
     justify-self: left;
   }
 
+  .logo-event {
+    flex: 0 0 25;
+    max-width: 25%;
+
+    img {
+      width: 100%;
+      outline: 4px solid $black;
+      background-color: whitesmoke;
+      transition: outline 120ms ease-in-out;
+
+      @include size-medium {
+        width: 300px;
+        height: 300px;
+      }
+    }
+    &:hover img {
+      outline: 4px solid $brand-color;
+    }
+  }
+
+  .description-event {
+    flex: 0 0 70%;
+    max-width: 70%;
+    margin-left: 5%;
+  }
+
   h1 {
     text-align: left;
     font-size: 1.1rem;
@@ -53,56 +81,12 @@ $thumbnailSizeMobile: 75px;
         }
       }
     }
-
-    .reset-link {
-      margin-bottom: $space-small;
-      background-image: none;
-      float: left;
-      margin-right: $space-medium;
-      max-width: $thumbnailSizeMobile;
-
-      @include size-medium {
-        float: none;
-        margin-right: 0;
-        max-width: auto;
-      }
-
-      &:hover {
-        background-image: none;
-        padding: 0;
-      }
-    }
-
-    img {
-      width: 100%;
-      min-width: 50px;
-      outline: 4px solid $black;
-      border-radius: 50%;
-
-      background-color: whitesmoke;
-      transition: outline 120ms ease-in-out;
-
-      @include size-medium {
-        max-width: 300px;
-        width: 300px;
-        height: 300px;
-      }
-    }
-    &:hover img {
-      outline: 4px solid $brand-color;
-    }
   }
 
   p {
     text-align: left;
     color: $text-color-secondary;
     font-size: 0.9rem;
-    margin-left: $thumbnailSizeMobile;
-    padding-left: $space-medium;
-    @include size-medium {
-      margin-left: 0;
-      padding-left: 0;
-    }
   }
 
   hr {
@@ -110,8 +94,7 @@ $thumbnailSizeMobile: 75px;
     height: 2px;
     color: black;
     background-color: black;
-    margin: $space-medium auto $space-large auto;
-    clear: both;
+    margin: $space-medium auto $space-medium auto;
 
     @include size-medium {
       margin: $space-large auto $space-larger auto;
diff --git a/data/index.njk b/data/index.njk
index 057dc33966fff3..ac4429895a9362 100644
--- a/data/index.njk
+++ b/data/index.njk
@@ -20,22 +20,26 @@
     <section class="next-events-summary">
       {% for event in collections.events %}
        <article class="event-summary">
-       <h1>
-        {{ dateBadge(event.isToday, event.isThisWeek, event.twitter) }}
-        <a href="events/{{event.slug}}">
-          <section class="reset-link">{{image(event.twitter)}}</section>
-          {{event.title}}
+        <a class="logo-event" href="events/{{event.slug}}">
+          <section >{{image(event.twitter)}}</section>
         </a>
-        </h1>
-        <p>
-          {{ dayOfWeek(event.startDate) }} /
-          {{ shortDate(event.startDate) }} /
-          {{ time(event.startDate) }}
-          {% if event.organizer %}
-            <br>
-            {{event.organizer}}
-          {% endif %}
+        <section class="description-event">
+          <h1>
+            {{ dateBadge(event.isToday, event.isThisWeek, event.twitter) }}
+            <a href="events/{{event.slug}}">
+              {{event.title}}
+            </a>
+          </h1>
+          <p>
+            {{ dayOfWeek(event.startDate) }} /
+            {{ shortDate(event.startDate) }} /
+            {{ time(event.startDate) }}
+            {% if event.organizer %}
+              <br>
+              {{event.organizer}}
+            {% endif %}
           </p>
+        </section>
         <hr>
       </article>
       {% endfor %}