Skip to content

Commit ebe7ceb

Browse files
TWiStErRobTWiStErRob
committed
Extract duplicate frontpage widget code and a little animation
1 parent 200c298 commit ebe7ceb

3 files changed

Lines changed: 44 additions & 30 deletions

File tree

‎_includes/frontpage-widget.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div class="medium-4 columns frontpage-widget">
2+
{% capture widget_url %}{% if include.widget.url contains 'http' %}{{ include.widget.url }}{% else %}{{ site.baseurl }}{{ include.widget.url }}{% endif %}{% endcapture %}
3+
<a href="{{ widget_url }}">
4+
{% if include.widget.image %}
5+
{%comment%}TODO lazy loading{%endcomment%}
6+
{%comment%}<img class="lazy" data-src="{{ site.urlimg }}{{ include.widget.image }}" width="100%" alt="" />{%endcomment%}
7+
{%comment%}<noscript>{%endcomment%}
8+
<img src="{{ site.urlimg }}{{ include.widget.image }}" width="100%" alt="" />
9+
{%comment%}</noscript>{%endcomment%}
10+
{% endif %}
11+
{% if include.widget.video %}{{ include.widget.video }}{% endif %}
12+
</a>
13+
<h2 class="font-size-h3 t10">{{ include.widget.title }}</h2>
14+
<p>{{ include.widget.text }}</p>
15+
<p><a class="button tiny radius" href="{% if include.widget.url contains 'http' %}{{ include.widget.url }}{% else %}{{ site.baseurl }}{{ include.widget.url }}{% endif %}">{{ site.data.language.more }}</a></p>
16+
</div>

‎_layouts/frontpage.html‎

Lines changed: 13 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -16,35 +16,19 @@
1616
*
1717
{% endcomment %}
1818
<div class="row t60">
19-
{% if page.widget-1.title %}
20-
<div class="medium-4 columns">
21-
<a href="{% if page.widget-1.url contains 'http' %}{{ page.widget-1.url }}{% else %}{{ site.url }}{{ site.baseurl }}/{{ page.widget-1.url }}{% endif %}">{% if page.widget-1.image %}<img src="{{ site.urlimg }}/{{ page.widget-1.image }}" width="302" height="182" alt="" />{% endif %}{% if page.widget-1.video %}{{ page.widget-1.video }}{% endif %}</a>
22-
<h2 class="font-size-h3 t10">{{ page.widget-1.title }}</h2>
23-
<p>{{ page.widget-1.text }}</p>
24-
<p><a class="button tiny radius" href="{% if page.widget-1.url contains 'http' %}{{ page.widget-1.url }}{% else %}{{ site.url }}{{ site.baseurl }}/{{ page.widget-1.url }}{% endif %}">{{ site.data.language.more }}</a></p>
25-
</div><!-- /.medium-4.columns -->
26-
{% endif %}
27-
28-
29-
{% if page.widget-2.title %}
30-
<div class="medium-4 columns">
31-
<a href="{% if page.widget-2.url contains 'http' %}{{ page.widget-2.url }}{% else %}{{ site.url }}{{ site.baseurl }}/{{ page.widget-2.url }}{% endif %}">{% if page.widget-2.image %}<img src="{{ site.urlimg }}/{{ page.widget-2.image }}" width="302" height="182" alt="" />{% endif %}{% if page.widget-2.video %}{{ page.widget-2.video }}{% endif %}</a>
32-
<h2 class="font-size-h3 t10">{{ page.widget-2.title }}</h2>
33-
<p>{{ page.widget-2.text }}</p>
34-
<p><a class="button tiny radius" href="{% if page.widget-2.url contains 'http' %}{{ page.widget-2.url }}{% else %}{{ site.url }}{{ site.baseurl }}/{{ page.widget-2.url }}{% endif %}">{{ site.data.language.more }}</a></p>
35-
</div><!-- /.medium-4.columns -->
36-
{% endif %}
37-
38-
39-
{% if page.widget-3.title %}
40-
<div class="medium-4 columns">
41-
<a href="{% if page.widget-3.url contains 'http' %}{{ page.widget-3.url }}{% else %}{{ site.url }}{{ site.baseurl }}/{{ page.widget-3.url }}{% endif %}">{% if page.widget-3.image %}<img src="{{ site.urlimg }}/{{ page.widget-3.image }}" width="302" height="182" alt="" />{% endif %}{% if page.widget-3.video %}{{ page.widget-3.video }}{% endif %}</a>
42-
<a href="{{ page.widget-3.url }}">{% if page.widget-3.image %}<img class="lazy" data-src="{{ site.urlimg }}/{{ page.widget-3.image }}" width="302" height="182" alt="" />{% endif %}{% if page.widget-3.video %}{{ page.widget-3.video }}{% endif %}</a>
43-
<h2 class="font-size-h3 t10">{{ page.widget-3.title }}</h2>
44-
<p>{{ page.widget-3.text }}</p>
45-
<p><a class="button tiny radius" href="{% if page.widget-3.url contains 'http' %}{{ page.widget-3.url }}{% else %}{{ site.url }}{{ site.baseurl }}/{{ page.widget-3.url }}{% endif %}">{{ site.data.language.more }}</a></p>
46-
</div><!-- /.medium-4.columns -->
47-
{% endif %}
19+
{% if page.widget1.title %}
20+
{% include frontpage-widget.html widget=page.widget1 %}
21+
{% endif %}
22+
23+
24+
{% if page.widget2.title %}
25+
{% include frontpage-widget.html widget=page.widget2 %}
26+
{% endif %}
27+
28+
29+
{% if page.widget3.title %}
30+
{% include frontpage-widget.html widget=page.widget3 %}
31+
{% endif %}
4832
</div><!-- /.row -->
4933

5034

‎_sass/_09_elements.scss‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
- Side-Nav
1010
- Accordion
1111
- Lazy Load XT
12+
- Frontpage Widget
1213
1314
*/
1415

@@ -143,4 +144,17 @@ img.lazy {
143144
-o-transition: opacity 0.7s;
144145
transition: opacity 0.7s;
145146
opacity: 1;
146-
}
147+
}
148+
149+
/* Frontpage Widget
150+
------------------------------------------------------------------- */
151+
.frontpage-widget img {
152+
transition-duration: .5s;
153+
transition-property: all;
154+
transform-origin: 50% 50%;
155+
&:hover {
156+
transform: scale(1.1) rotate(2deg) translateZ(0);
157+
position: relative;
158+
z-index: 1;
159+
}
160+
}

0 commit comments

Comments
 (0)