Standardise experience item classes

assets/sass/base/_layout.sass

@@ -3,3 +3,6 @@
 
 .is-half
     width: 50%
+
+.flex
+    flex: 1

assets/sass/components/_page-experience.sass

@@ -1,28 +1,25 @@
-.experience
+.experience-item
     margin-bottom: $padding-large-vertical * 3
     +clearfix
 
-    .inner
+.experience-item-website
-        flex: 1
+    display: inline-block
+    margin-bottom: 2px
 
-    &__website
+.experience-item-role
-        display: inline-block
+    color: $gray-light
-        margin-bottom: 2px
+    margin-bottom: .625rem
 
-    &__role
+.experience-item-logo
-        color: $gray-light
+    margin-left: 1.5em
-        margin-bottom: .625rem
+    margin-top: 25px
-
+    max-width: 25%
-    &__logo
+    +desktop
-        margin-left: 1.5em
+        max-width: 15%
-        margin-top: 25px
-        max-width: 25%
-        +desktop
-            max-width: 15%
 
     img
         height: auto
         width: 100%
 
-    p:last-of-type
+.experience-item-description p:last-of-type
-        margin-bottom: 0
+    margin-bottom: 0

source/_partials/experience/description.twig

@@ -1,3 +1,5 @@
-<div class="experience__description">
+{% if experience.description %}
-    {{ experience.description|markdown }}
+    <div class="experience-item-description">
-</div>
+        {{ experience.description|markdown }}
+    </div>
+{% endif %}

source/_partials/experience/item.twig

@@ -1,12 +1,11 @@
 {% set classes = [
-    'experience',
+    'experience-item',
     'is-flex',
     company.logo ? 'has-logo',
-    experience.featured ? 'is-featured',
 ] %}
 
-<div class="{{ classes|sort|join(' ') }}">
+<div class="{{ classes|join(' ')|trim }}">
-    <div class="inner">
+    <div class="experience-item-inner flex">
         <h2>{{ company.name }}</h2>
 
         {{ include('experience/website') }}

source/_partials/experience/logo.twig

@@ -1,5 +1,5 @@
 {% if company.logo %}
-    <div class="experience__logo">
+    <div class="experience-item-logo">
         <img src="{{ site.images_url }}/assets/images/experience/{{ company.logo }}" alt="{{ company.name }} logo">
     </div>
 {% endif %}

source/_partials/experience/role.twig

@@ -1,8 +1,4 @@
-<div class="experience__role">
+<div class="experience-item-role">
-    {% spaceless %}
+    {{- experience.role ~ ' from ' ~ experience.start ~ ' to ' ~ experience.end|default('Present') -}}
-        {{ experience.role ~ ' from ' ~ experience.start ~ ' to ' ~ experience.end|default('Present') }}
+    {%- if experience.location %} ({{ experience.location }}){% endif %}.
-        {% if experience.location %}
-            ({{ experience.location }})
-        {% endif %}
-    {% endspaceless %}.
 </div>

source/_partials/experience/website.twig

@@ -1,5 +1,5 @@
-{% if company.url %}
+{% if company.url -%}
-    <a href="{{ company.url }}" class="experience__website">
+    <a class="experience-item-website" href="{{ company.url }}">
-        {{ company.url }}
+        {{- company.url -}}
     </a>
-{% endif %}
+{%- endif %}