diff --git a/Gemfile b/Gemfile index a5f63fc..8330e0e 100644 --- a/Gemfile +++ b/Gemfile @@ -4,3 +4,4 @@ gem 'jekyll-paginate' gem 'html-proofer' gem 'classifier-reborn' gem 'jekyll-multiple-languages-plugin', :git => 'https://github.com/perrywoodin/jekyll-multiple-languages-plugin.git' +gem 'jekyll-srcset-tag' diff --git a/Gemfile.lock b/Gemfile.lock index 56ee0e3..fd2223c 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -47,6 +47,10 @@ GEM jekyll-paginate (1.1.0) jekyll-sass-converter (1.4.0) sass (~> 3.4) + jekyll-srcset-tag (0.2.0) + jekyll (>= 2.0.0) + mini_magick (~> 4.3) + nokogiri (~> 1.6) jekyll-watch (1.5.0) listen (~> 3.0, < 3.1) json (1.8.3) @@ -56,6 +60,7 @@ GEM rb-fsevent (~> 0.9, >= 0.9.4) rb-inotify (~> 0.9, >= 0.9.7) mercenary (0.3.6) + mini_magick (4.5.1) mini_portile2 (2.1.0) minitest (5.9.0) nokogiri (1.6.8) @@ -87,6 +92,7 @@ DEPENDENCIES jekyll jekyll-multiple-languages-plugin! jekyll-paginate + jekyll-srcset-tag BUNDLED WITH 1.13.1 diff --git a/_config.yml b/_config.yml index bff1914..f2f17cf 100644 --- a/_config.yml +++ b/_config.yml @@ -28,6 +28,7 @@ exclude_from_localizations: ["assets","dist","style-guide"] gems: - jekyll-paginate - jekyll-multiple-languages-plugin + - jekyll-srcset-tag collections: components: # style guide @@ -37,13 +38,20 @@ collections: # https://github.com/kinnetica/jekyll-plugins sitemap: - file: "/sitemap.xml" - exclude: - - "/atom.xml" - - "/feed.xml" - - "/feed/index.xml" - - "/style-guide/index.html" - include_posts: - - "/index.html" - change_frequency_name: "change_frequency" - priority_name: "priority" + file: "/sitemap.xml" + exclude: + - "/atom.xml" + - "/feed.xml" + - "/feed/index.xml" + - "/style-guide/index.html" + include_posts: + - "/index.html" + change_frequency_name: "change_frequency" + priority_name: "priority" + +srcset: + source: assets/img + output: assets/img/resized + +keep_files: + - 'assets/img/resized' diff --git a/_includes/hero/blog.html b/_includes/hero/blog.html index dbbcfbb..89dfad9 100644 --- a/_includes/hero/blog.html +++ b/_includes/hero/blog.html @@ -1,10 +1,8 @@
-
- +
+ {% if pages.blog.hero-image %} + + {% endif %}
diff --git a/_includes/hero/community.html b/_includes/hero/community.html index 2ffdb1e..3b17873 100644 --- a/_includes/hero/community.html +++ b/_includes/hero/community.html @@ -1,10 +1,9 @@
-
- +
+ {% srcset hero/community.jpg ppi:1,2 class="hero__background-image" %} + {% srcset_source width:1920 %} + {% srcset_source width:960 %} + {% endsrcset %}
diff --git a/_includes/hero/currency.html b/_includes/hero/currency.html index 5ac62a9..d67ccd1 100644 --- a/_includes/hero/currency.html +++ b/_includes/hero/currency.html @@ -1,10 +1,9 @@
-
- +
+ {% srcset hero/currency.jpg ppi:1,2 class="hero__background-image" %} + {% srcset_source width:1920 %} + {% srcset_source width:960 %} + {% endsrcset %}
diff --git a/_includes/hero/get-dash.html b/_includes/hero/get-dash.html index 83942b5..85c7d42 100644 --- a/_includes/hero/get-dash.html +++ b/_includes/hero/get-dash.html @@ -1,10 +1,10 @@
-
- +
+ {% capture heroimage %}hero/{% t pages.get-dash.hero-image %}{% endcapture %} + {% srcset hero/get-dash-n.jpg ppi:1,2 class="hero__background-image" %} + {% srcset_source width:1920 %} + {% srcset_source width:960 %} + {% endsrcset %}
diff --git a/_includes/hero/home.html b/_includes/hero/home.html index c7ea228..631d095 100644 --- a/_includes/hero/home.html +++ b/_includes/hero/home.html @@ -1,10 +1,11 @@
-
- +
+ {% srcset home/stock-photo-90982809-the-monthly-finances.jpg ppi:1,2 class="hero__background-image" %} + {% srcset_source width:1920 %} + {% srcset_source width:1280 %} + {% srcset_source width:1024 %} + {% srcset_source width:800 %} + {% endsrcset %}
diff --git a/_includes/hero/participate.html b/_includes/hero/participate.html index b83f386..cb5169e 100644 --- a/_includes/hero/participate.html +++ b/_includes/hero/participate.html @@ -1,12 +1,4 @@
- -
diff --git a/_includes/hero/post.html b/_includes/hero/post.html index 0913586..aea66af 100644 --- a/_includes/hero/post.html +++ b/_includes/hero/post.html @@ -1,13 +1,8 @@
-
- - +
+ {% if page.image %} + + {% endif %}
diff --git a/_includes/hero/team.html b/_includes/hero/team.html index 3faa5a2..e2a5904 100644 --- a/_includes/hero/team.html +++ b/_includes/hero/team.html @@ -1,10 +1,9 @@
-
- +
+ {% srcset dashorg-nodes.jpg ppi:1,2 class="hero__background-image" %} + {% srcset_source width:1920 %} + {% srcset_source width:960 %} + {% endsrcset %}
diff --git a/src/scss/_hero.scss b/src/scss/_hero.scss index c996bd3..e23e47a 100644 --- a/src/scss/_hero.scss +++ b/src/scss/_hero.scss @@ -26,7 +26,7 @@ } } - #background-video { + &__background { z-index: 1; } @@ -121,7 +121,7 @@ text-shadow: none; } } - #background-video::after { + .hero__background::after { background: none; } } diff --git a/src/scss/_video.scss b/src/scss/_video.scss index 2fcea93..4f49fc5 100644 --- a/src/scss/_video.scss +++ b/src/scss/_video.scss @@ -1,11 +1,10 @@ -#background-video { +.hero__background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; - z-index: -100; height: 100%; overflow: hidden; &:after { @@ -17,35 +16,14 @@ bottom: 0; left: 0; } - .background-video { - position: relative; - top: 20%; - transform: translateY(-20%); - width: 100%; - height: auto; - min-height: 100%; - } } - -@media (min-aspect-ratio: 16/9) { - .background-video { - width: 100%; - height: auto; - } -} - -@media (max-aspect-ratio: 16/9) { - .background-video { - width: auto; - height: 100%; - } -} - -@media (max-width: 1024px) { - #background-video { - // background: url('../img/Home-BG.jpg') center center / cover no-repeat; - .background-video { - display: none; - } - } +.hero__background-image { + position: relative; + top: 20%; + transform: translateY(-20%); + width: 100%; + height: auto; + min-height: 100%; + object-fit: cover; + object-position: 50% 20%; }