Skip to content

Commit 99287a8

Browse files
duranmladuranmla
committed
As we want to optimize the hash labs website we start the implementation
of AMP in order to meet its guidelines, however, along this way we found some block as the bootstrap size within the css and the complexity of do not use the JS components and amp components instead, so this PR contains support in order to use amp-img component which comes handy for images handling and besides optimization removing no needed code. * Add basic markup for AMP * Add brand to client list and fix brand section * Add amp component to image what-we-do section * Better naming for background url on CTA * Make sure logo uses amp-img tag * Minor update to footer section to use amp-img * Make sure section-how use amp components and renders properly * Fix technology section * Add poster to video on template lead * Depurate stylesheet
1 parent 360cf48 commit 99287a8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+201
-231
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
## [Unreleased]
2+
### Added
3+
* Second Release!
24

35
### Fixed
46
* Node JS link ([@orlando](https://github.com/orlando))

‎_data/brands.yml

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,19 @@
11
- name: yummly
2-
logo: /images/logo_yummly.png
32
link: https://www.yummly.com
43
alt: Yummly logo
54

6-
- name: realscout
7-
logo: /images/logo_real_scout.png
5+
- name: real-scout
86
link: https://www.realscout.com
97
alt: Real Scout logo
108

11-
- name: save1
12-
logo: /images/logo_save_1.png
13-
link: https://www.save1.com
14-
alt: Save1 logo
15-
16-
- name: fundingcircle
17-
logo: /images/logo_funding_circle.png
9+
- name: funding-circle
1810
link: https://www.fundingcircle.com
1911
alt: Funding Circle logo
2012

2113
- name: wobe
22-
logo: /images/logo_wobe.png
2314
link: http://www.wobe.io
2415
alt: Wobe logo
16+
17+
- name: rxspeed
18+
link: http://www.rxspeed.com
19+
alt: Rxspeed logo

‎_data/section-footer.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
copyright: Hash Labs <i class="fa fa-copyright" aria-hidden="true"></i> LLC All Rights Reserved
2-
note: Made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Hash Labs
1+
copyright: Hash Labs &copy; LLC All Rights Reserved
2+
note: Made with &hearts; by Hash Labs
33

44
menus:
55
- hire_developers:

‎_includes/head.html

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
<head>
22
<meta charset="utf-8">
3+
34
<meta http-equiv="X-UA-Compatible" content="IE=edge">
4-
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
6+
<script async src="https://cdn.ampproject.org/v0.js"></script>
57

68
<title>{% if page.page_title %}{{ page.page_title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
9+
710
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
811

9-
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
1012
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
13+
1114
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
1215

13-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
16+
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
17+
18+
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
1419

15-
<!--load amimate.css for animation-->
16-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
20+
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
1721
</head>

‎_includes/navbar.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<div class="col-2">
99
<a href="/" class="site-logo text-center">
10-
<img src="/images/logo_orange.svg" alt="Hash Labs logo">
10+
<amp-img src="/images/logo_orange.svg" alt="Hash Labs logo" width="44" height="44">
1111
</a>
1212
</div>
1313

‎_includes/section-brands.html

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
<section class="site-brands-container">
2-
<div class="container">
3-
<ul class="site-brands">
2+
<div class="container-extended">
3+
<div class="row justify-content-md-center site-brands">
44
{% for brand in site.data.brands %}
5-
<li class="site-brand">
6-
<a href="{{ brand.link }}" target="_blank">
7-
<img class="img-fluid" src="{{ brand.logo }}" alt="{{ brand.alt }}" />
8-
</a>
9-
</li>
5+
<div class="col-brand">
6+
<div class="site-brand">
7+
<a class="d-block brand-logo" href="{{ brand.link }}" target="_blank">
8+
<amp-img class="images-fluid" src="/images/logo-{{ brand.name }}.png"
9+
srcset="/images/logo-{{ brand.name }}@2x.png 2x, /images/logo-{{ brand.name }}@3x.png 3x"
10+
alt="{{ brand.alt }}" width="120" height="68" layout="responsive"/>
11+
</a>
12+
</div>
13+
</div>
1014
{% endfor %}
11-
</ul>
15+
</div>
1216
</div>
1317
</section>

‎_includes/section-footer.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22

33
{% assign section = site.data.section-footer %}
44

5-
<a href="#" class="footer-logo-small hidden-lg-up">
6-
<img src="/images/logo_grey.svg" alt="Hash Labs Logo">
5+
<a href="/" class="footer-logo-small hidden-lg-up">
6+
<amp-img src="/images/logo_grey.svg" alt="Hash Labs Logo" width="51" height="51">
77
</a>
88

99
<div class="container">
1010
<div class="row">
1111
<div class="col-3 col-xs-3 col-md-2">
12-
<a href="#" class="hidden-md-down">
13-
<img src="/images/logo_grey.svg" alt="Hash Labs Logo">
12+
<a href="/" class="hidden-md-down">
13+
<amp-img src="/images/logo_grey.svg" alt="Hash Labs Logo" width="64" height="65">
1414
</a>
1515
</div>
1616

‎_includes/section-how.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,13 @@ <h2 class="text-center prevent-orphan">{{ section.title }}</h2>
1212
<div class="row">
1313
{% for item in section.groups %}
1414
<section class="col-xs-12 col-md-4 section-how">
15-
<img class="img-fluid" src="{{ item.image }}" alt="{{ item.alt }}">
16-
<h3 class="prevent-orphan">{{ item.title }}</h3>
17-
<p class="prevent-orphan">{{ item.content }}</p>
15+
<div class="how-image">
16+
<amp-img class="img-fluid" src="{{ item.image }}" alt="{{ item.alt }}" width="90" height="90" />
17+
</div>
18+
<div class="how-info">
19+
<h3 class="prevent-orphan">{{ item.title }}</h3>
20+
<p class="prevent-orphan">{{ item.content }}</p>
21+
</div>
1822
</section>
1923
{% endfor %}
2024
</div>

‎_includes/section-what-we-do.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div class="container">
66
<div class="row site-what">
77
<div class="col-xs-12 col-md-6 site-what-content">
8-
<img src="{{ section.image }}" class="img-fluid mx-auto" alt="">
8+
<amp-img src="{{ section.image }}" class="img-fluid mx-auto" alt="" width="320" height="284">
99
</div>
1010
<div class="col-xs-12 col-md-6 site-what-content">
1111
<h2 class="prevent-orphan">{{ section.title }}</h2>

‎_includes/template-lead.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,15 @@ <h1 class="prevent-orphan">{{ title }}</h1>
3636
<div class="col-xs-12 col-md-6 col-lg-6">
3737

3838
<div class="section-lead-video embed-responsive embed-responsive-16by9 hidden-md-down">
39-
<video class="embed-responsive-item" id="lead-video" autoplay>
39+
<video class="embed-responsive-item" id="lead-video" autoplay
40+
width="540" height="300" layout="responsive" poster="/images/conversation_react_ruby_aws.png">
4041
{% if include.video %}
4142
{% assign video_name = include.video %}
4243
{% else %}
4344
{% assign video_name = section.video %}
4445
{% endif %}
45-
<source src="/videos/{{video_name}}.mp4" type="video/mp4" />
46-
<source src="/videos/{{video_name}}.webm" type="video/webm" />
46+
<source src="https://www.hashlabs.com/videos/{{video_name}}.mp4" type="video/mp4" />
47+
<source src="https://www.hashlabs.com/videos/{{video_name}}.webm" type="video/webm" />
4748
Your browser does not support the video tag.
4849
</video>
4950
</div>

‎_includes/template-technologies.html

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,19 @@ <h2 class="text-center site-technologies-title prevent-orphan">
99
</div>
1010
</div>
1111

12-
<div class="row">
13-
<ul class="site-technologies">
14-
{% for tech in include.technologies %}
15-
<li class="{{ include.technology_class }}">
16-
<a href="{{ tech.href }}">
17-
<img class="img-fluid" src="{{ tech.image }}" alt="{{ tech.alt }}">
18-
<h3 class="text-center">{{ tech.name }}</h3>
12+
<div class="row justify-content-md-center site-technologies">
13+
{% for tech in include.technologies %}
14+
<div class="col-technology">
15+
<div class="{{ include.technology_class }}">
16+
<a class="d-block technology-logo" href="{{ tech.href }}">
17+
<amp-img class="img-fluid" src="{{ tech.image }}" alt="{{ tech.alt }}" width="99" height="74" />
18+
</a>
19+
<a class="d-block" href="{{ tech.href }}">
20+
<h3 class="technology-name">{{ tech.name }}</h3>
1921
</a>
20-
</li>
21-
{% endfor %}
22-
</ul>
22+
</div>
23+
</div>
24+
{% endfor %}
2325
</div>
2426

2527
</div>

‎_layouts/default.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html amp lang="en">
33

44
{% include head.html %}
55

‎_layouts/services.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html amp lang="en">
33

44
{% include head.html %}
55

‎_sass/_components--brands.scss

Lines changed: 31 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,45 @@
1-
$size--brands-per-row: 5;
2-
$size--brands-per-row-tablet: 3;
3-
$size--brand-width: 100% / $size--brands-per-row;
4-
$size--brand-width-tablet: 100% / $size--brands-per-row-tablet;
5-
$size--brand-width-small: 100%;
6-
$size--item-width: 70%;
7-
$size--item-width-tablet: 80%;
8-
$size--item-width-small: 40%;
1+
.container-extended {
2+
@extend .container-fluid;
93

10-
.site-brands-container {
11-
background-color: $hint-of-red;
12-
padding: $space*2.5 0;
4+
@media #{$from-medium-resolutions} {
5+
max-width: $bootstrap-md;
6+
}
137

14-
@media #{$just-medium-resolutions} {
15-
padding: $space*2 0;
8+
@media #{$from-large-resolutions} {
9+
max-width: $bootstrap-lg;
1610
}
1711
}
1812

19-
.site-brands {
20-
display: flex;
21-
justify-content: center;
22-
flex-direction: row;
23-
flex-wrap: wrap;
24-
list-style: none;
25-
padding: 0;
26-
margin: 0;
27-
width: 100%;
28-
29-
li {
30-
display: inline-block;
31-
width: $size--brand-width;
13+
.site-brands-container {
14+
background-color: $hint-of-red;
15+
padding: $space*2 0 0;
3216

33-
a {
34-
display: block;
35-
width: $size--item-width;
36-
margin: 0 auto;
37-
cursor: pointer;
38-
}
17+
@media #{$from-medium-resolutions} {
18+
padding: $space*2.25 0;
19+
}
20+
}
3921

40-
img {
41-
width: 100%;
42-
display: block;
43-
margin: 0 auto;
44-
}
22+
.brand-logo {
23+
img {
24+
object-fit: contain;
4525
}
26+
}
4627

47-
@media #{$just-medium-resolutions} {
48-
li {
49-
width: $size--brand-width;
28+
.col-brand {
29+
width: 100%;
5030

51-
a {
52-
width: $size--item-width-tablet;
53-
}
54-
}
31+
@media #{$from-small-resolutions} {
32+
width: 20%;
5533
}
34+
}
5635

57-
@media #{$just-very-small-resolutions} {
58-
li {
59-
width: $size--brand-width-small;
60-
61-
a {
62-
width: $size--item-width-small;
63-
}
36+
.site-brand {
37+
margin: 0 auto $space*2;
38+
text-align: center;
39+
width: 120px;
6440

65-
& + li {
66-
margin-top: $space;
67-
}
68-
}
41+
@media #{$from-medium-resolutions} {
42+
width: 140px;
43+
margin-bottom: 0;
6944
}
70-
71-
}
45+
}

‎_sass/_components--cta.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ $size--title-line-height-mobile: 1.33;
77
text-align: center;
88
background: {
99
color: $turquoise-blue;
10-
image: url('/images/bgn_CTA.png');
10+
image: url('/images/background_cta.png');
1111
repeat: no-repeat;
1212
size: cover;
1313
}

‎_sass/_components--footer.scss

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -65,20 +65,16 @@ $size--title-font-size: 1.1rem;
6565
padding: 0;
6666
}
6767

68-
// Basically applying same padding left to footer logo
69-
// than the one being applied to header logo, in order
70-
// to keep them both aligned on mobile devices.
68+
/*
69+
Basically applying same padding left to footer logo
70+
than the one being applied to header logo, in order
71+
to keep them both aligned on mobile devices.
72+
*/
7173
.footer-logo-small {
7274
display: block;
7375
position: absolute;
7476
left: $space-triple;
7577

76-
img {
77-
// This is the logo image size to match the
78-
// header logo.
79-
width: $size--logo-width;
80-
}
81-
8278
@media #{$just-small-resolutions} {
8379
left: $size--logo-padding-left;
8480
}

0 commit comments

Comments
 (0)