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
-        flex: 1
+.experience-item-website
+    display: inline-block
+    margin-bottom: 2px
 
-    &__website
-        display: inline-block
-        margin-bottom: 2px
+.experience-item-role
+    color: $gray-light
+    margin-bottom: .625rem
 
-    &__role
-        color: $gray-light
-        margin-bottom: .625rem
-
-    &__logo
-        margin-left: 1.5em
-        margin-top: 25px
-        max-width: 25%
-        +desktop
-            max-width: 15%
+.experience-item-logo
+    margin-left: 1.5em
+    margin-top: 25px
+    max-width: 25%
+    +desktop
+        max-width: 15%
 
     img
         height: auto
         width: 100%
 
-    p:last-of-type
-        margin-bottom: 0
+.experience-item-description p:last-of-type
+    margin-bottom: 0

source/_partials/experience/description.twig

@@ -1,3 +1,5 @@
-<div class="experience__description">
-    {{ experience.description|markdown }}
-</div>
+{% if experience.description %}
+    <div class="experience-item-description">
+        {{ 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="inner">
+<div class="{{ classes|join(' ')|trim }}">
+    <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">
-    {% spaceless %}
-        {{ experience.role ~ ' from ' ~ experience.start ~ ' to ' ~ experience.end|default('Present') }}
-        {% if experience.location %}
-            ({{ experience.location }})
-        {% endif %}
-    {% endspaceless %}.
+<div class="experience-item-role">
+    {{- experience.role ~ ' from ' ~ experience.start ~ ' to ' ~ experience.end|default('Present') -}}
+    {%- if experience.location %} ({{ experience.location }}){% endif %}.
 </div>

source/_partials/experience/website.twig

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