Skip to content

Commit 4e5f7bc

Browse files
duranmladuranmla
authored
Merge pull request #61 from hashlabs/ad/amp_and_fixes
Optimization for Hash Labs site
2 parents 360cf48 + 99287a8 commit 4e5f7bc

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

+2
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

+6-11
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

+2-2
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

+9-5
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

+1-1
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

+12-8
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

+4-4
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

+7-3
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

+1-1
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

+4-3
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

+12-10
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

+1-1
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

+1-1
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

+31-57
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

+1-1
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

+5-9
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)