Refactor experience, use flexbox
This commit is contained in:
parent
255faf5cf2
commit
19655ad09c
|
@ -1,30 +1,34 @@
|
||||||
.experience
|
.experience
|
||||||
margin-bottom: $padding-large-vertical * 3
|
margin-bottom: $padding-large-vertical * 3
|
||||||
position: relative
|
|
||||||
+clearfix
|
+clearfix
|
||||||
|
|
||||||
+breakpoint(max-width $screen-tablet)
|
|
||||||
h2
|
|
||||||
font-size: 1.5em
|
|
||||||
margin-top: 0
|
|
||||||
|
|
||||||
p:last-of-type
|
|
||||||
margin-bottom: 0
|
|
||||||
|
|
||||||
&__website
|
&__website
|
||||||
display: inline-block
|
display: inline-block
|
||||||
margin-bottom: 2px
|
margin-bottom: 2px
|
||||||
|
|
||||||
&__role
|
&__role
|
||||||
color: $gray-light
|
color: $gray-light
|
||||||
margin-bottom: 10px
|
margin-bottom: .625rem
|
||||||
|
|
||||||
.experience--with-logo
|
&__logo
|
||||||
.experience
|
margin-left: 1.5em
|
||||||
|
margin-top: 25px
|
||||||
|
max-width: 25%
|
||||||
|
|
||||||
|
img
|
||||||
|
height: auto
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
p:last-of-type
|
||||||
|
margin-bottom: 0
|
||||||
|
|
||||||
|
+breakpoint(30rem)
|
||||||
&__logo
|
&__logo
|
||||||
@extend .pull-right
|
max-width: 15%
|
||||||
margin: 0 0 0 2em
|
|
||||||
max-width: 20%
|
|
||||||
|
|
||||||
@include breakpoint($screen-md-min)
|
.experience.has-logo
|
||||||
max-width: 15%
|
display: flex
|
||||||
|
justify-content: flex-start
|
||||||
|
|
||||||
|
.inner
|
||||||
|
flex: 1
|
||||||
|
|
36
source/_partials/experience-item.html.twig
Normal file
36
source/_partials/experience-item.html.twig
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
{% set classes = [
|
||||||
|
'experience',
|
||||||
|
company.logo ? 'has-logo',
|
||||||
|
experience.featured ? 'is-featured',
|
||||||
|
] %}
|
||||||
|
|
||||||
|
<div class="{{ classes|sort|join(' ') }}">
|
||||||
|
<div class="inner">
|
||||||
|
<h2>{{ company.name }}</h2>
|
||||||
|
|
||||||
|
{% if company.website %}
|
||||||
|
<a href="{{ company.website }}" class="experience__website">
|
||||||
|
{{ company.website }}
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<div class="experience__role">
|
||||||
|
{% spaceless %}
|
||||||
|
{{ experience.role ~ ' from ' ~ experience.start ~ ' to ' ~ experience.end|default('Present') }}
|
||||||
|
{% if experience.location %}
|
||||||
|
({{ experience.location }})
|
||||||
|
{% endif %}
|
||||||
|
{% endspaceless %}.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="experience__description">
|
||||||
|
{{ 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>
|
|
@ -6,7 +6,7 @@ experiences:
|
||||||
location: Cardiff, Wales
|
location: Cardiff, Wales
|
||||||
role: Senior Drupal Developer
|
role: Senior Drupal Developer
|
||||||
start: May 2016
|
start: May 2016
|
||||||
end: ~
|
featured: true
|
||||||
description: |
|
description: |
|
||||||
<p>Drupal website development.</p>
|
<p>Drupal website development.</p>
|
||||||
|
|
||||||
|
@ -14,7 +14,7 @@ experiences:
|
||||||
location: Remote
|
location: Remote
|
||||||
role: 'Web Developer & System Administrator'
|
role: 'Web Developer & System Administrator'
|
||||||
start: 2007
|
start: 2007
|
||||||
end: ~
|
featured: true
|
||||||
description: |
|
description: |
|
||||||
<p>Working on Drupal and Symfony development, maintenance and support projects in my spare time.</p>
|
<p>Working on Drupal and Symfony development, maintenance and support projects in my spare time.</p>
|
||||||
<p>Administration of Debian, Ubuntu and CentOS servers, and configuration using Puppet, or more recently, Ansible.</p>
|
<p>Administration of Debian, Ubuntu and CentOS servers, and configuration using Puppet, or more recently, Ansible.</p>
|
||||||
|
@ -84,30 +84,8 @@ experiences:
|
||||||
<h1>Experience</h1>
|
<h1>Experience</h1>
|
||||||
|
|
||||||
{% for experience in page.experiences %}
|
{% for experience in page.experiences %}
|
||||||
{% set company = site.companies[experience.company] %}
|
{% include "experience-item" with {
|
||||||
|
experience: experience,
|
||||||
<div class="experience experience--{{ company.logo ? 'with-logo' : 'no-logo' }}">
|
company: site.companies[experience.company]
|
||||||
<h2 class="experience__title">{{ company.name }}</h2>
|
} %}
|
||||||
|
|
||||||
{% if company.website %}
|
|
||||||
<a href="{{ company.website }}" class="experience__website">{{ company.website }}</a>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if company.logo %}
|
|
||||||
<img class="experience__logo" src="{{ site.images_url }}/assets/images/experience/{{ company.logo }}" alt="{{ company.name }} logo">
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<div class="experience__role">
|
|
||||||
{% spaceless %}
|
|
||||||
{{ experience.role ~ ' from ' ~ experience.start ~ ' to ' ~ experience.end|default('Present') }}
|
|
||||||
{% if experience.location %}
|
|
||||||
({{ experience.location }})
|
|
||||||
{% endif %}
|
|
||||||
{% endspaceless %}.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="experience__description">
|
|
||||||
{{ experience.description|raw }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
Loading…
Reference in a new issue