Use background images for experience items.
This commit is contained in:
parent
2dbee9e739
commit
034b7375e8
|
@ -27,8 +27,14 @@
|
||||||
max-width: 15%
|
max-width: 15%
|
||||||
|
|
||||||
.experience.has-logo
|
.experience.has-logo
|
||||||
display: flex
|
background:
|
||||||
justify-content: flex-start
|
position: 100% (20px + 3px)
|
||||||
|
repeat: no-repeat
|
||||||
|
size: 90px
|
||||||
|
+tablet
|
||||||
|
background-size: 120px
|
||||||
|
|
||||||
.inner
|
.experience.has-logo .inner
|
||||||
flex: 1
|
padding-right: calc(90px + 1em)
|
||||||
|
+tablet
|
||||||
|
padding-right: calc(120px + 1em)
|
||||||
|
|
|
@ -4,7 +4,9 @@
|
||||||
experience.featured ? 'is-featured',
|
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">
|
<div class="inner">
|
||||||
<h2>{{ company.name }}</h2>
|
<h2>{{ company.name }}</h2>
|
||||||
|
|
||||||
|
@ -27,10 +29,4 @@
|
||||||
{{ experience.description|raw }}
|
{{ experience.description|raw }}
|
||||||
</div>
|
</div>
|
||||||
</div>{# /.inner #}
|
</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>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue