From 034b7375e8b50c0cd1a86ac6efeec44f79730aa9 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 21 Feb 2017 18:48:34 +0000
Subject: [PATCH] Use background images for experience items.

---
 assets/sass/pages/_experience.sass    | 14 ++++++++++----
 source/_partials/experience-item.twig | 10 +++-------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/assets/sass/pages/_experience.sass b/assets/sass/pages/_experience.sass
index f889190f..30ff5863 100644
--- a/assets/sass/pages/_experience.sass
+++ b/assets/sass/pages/_experience.sass
@@ -27,8 +27,14 @@
             max-width: 15%
 
 .experience.has-logo
-    display: flex
-    justify-content: flex-start
+    background:
+        position: 100% (20px + 3px)
+        repeat: no-repeat
+        size: 90px
+    +tablet
+        background-size: 120px
 
-    .inner
-        flex: 1
+.experience.has-logo .inner
+    padding-right: calc(90px + 1em)
+    +tablet
+        padding-right: calc(120px + 1em)
diff --git a/source/_partials/experience-item.twig b/source/_partials/experience-item.twig
index 85b7fe12..d4cd3b77 100644
--- a/source/_partials/experience-item.twig
+++ b/source/_partials/experience-item.twig
@@ -4,7 +4,9 @@
     experience.featured ? 'is-featured',
 ] %}
 
-<div class="{{ classes|sort|join(' ') }}">
+{% set logo_path = company.logo ? site.images_url ~ '/assets/images/experience/' ~ company.logo : null %}
+
+<div class="{{ classes|sort|join(' ')|trim }}"{% if logo_path %} style="background-image: url('{{ logo_path }}')"{% endif %}>
     <div class="inner">
         <h2>{{ company.name }}</h2>
 
@@ -27,10 +29,4 @@
             {{ experience.description|raw }}
         </div>
     </div>{# /.inner #}
-
-    {% if company.logo %}
-        <div class="experience__logo">
-            <img src="{{ site.images_url }}/assets/images/experience/{{ company.logo }}" alt="{{ company.name }} logo">
-        </div>
-    {% endif %}
 </div>