joshua/dash-website
1
0
Fork 0
mirror of https://github.com/seigler/dash-website synced 2025-07-27 07:16:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: responsive hero header images (#23)

Browse source
This commit is contained in:
Joshua Seigler 2016-10-21 13:27:19 -04:00 • committed by Perry Woodin
parent c7d3adfb19
commit d96ca70bac
13 changed files with 73 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Gemfile
View file

@ -4,3 +4,4 @@ gem 'jekyll-paginate'
gem 'html-proofer' gem 'html-proofer'
gem 'classifier-reborn' gem 'classifier-reborn'
gem 'jekyll-multiple-languages-plugin', :git => 'https://github.com/perrywoodin/jekyll-multiple-languages-plugin.git' gem 'jekyll-multiple-languages-plugin', :git => 'https://github.com/perrywoodin/jekyll-multiple-languages-plugin.git'
gem 'jekyll-srcset-tag'

6
Gemfile.lock
View file

@ -47,6 +47,10 @@ GEM
jekyll-paginate (1.1.0) jekyll-paginate (1.1.0)
jekyll-sass-converter (1.4.0) jekyll-sass-converter (1.4.0)
sass (~> 3.4) 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) jekyll-watch (1.5.0)
listen (~> 3.0, < 3.1) listen (~> 3.0, < 3.1)
json (1.8.3) json (1.8.3)
@ -56,6 +60,7 @@ GEM
rb-fsevent (~> 0.9, >= 0.9.4) rb-fsevent (~> 0.9, >= 0.9.4)
rb-inotify (~> 0.9, >= 0.9.7) rb-inotify (~> 0.9, >= 0.9.7)
mercenary (0.3.6) mercenary (0.3.6)
mini_magick (4.5.1)
mini_portile2 (2.1.0) mini_portile2 (2.1.0)
minitest (5.9.0) minitest (5.9.0)
nokogiri (1.6.8) nokogiri (1.6.8)
@ -87,6 +92,7 @@ DEPENDENCIES
jekyll jekyll
jekyll-multiple-languages-plugin! jekyll-multiple-languages-plugin!
jekyll-paginate jekyll-paginate
jekyll-srcset-tag
BUNDLED WITH BUNDLED WITH
1.13.1 1.13.1

28
_config.yml
View file

@ -28,6 +28,7 @@ exclude_from_localizations: ["assets","dist","style-guide"]
gems: gems:
- jekyll-paginate - jekyll-paginate
- jekyll-multiple-languages-plugin - jekyll-multiple-languages-plugin
- jekyll-srcset-tag
collections: collections:
components: # style guide components: # style guide
@ -37,13 +38,20 @@ collections:
# https://github.com/kinnetica/jekyll-plugins # https://github.com/kinnetica/jekyll-plugins
sitemap: sitemap:
file: "/sitemap.xml" file: "/sitemap.xml"
exclude: exclude:
- "/atom.xml" - "/atom.xml"
- "/feed.xml" - "/feed.xml"
- "/feed/index.xml" - "/feed/index.xml"
- "/style-guide/index.html" - "/style-guide/index.html"
include_posts: include_posts:
- "/index.html" - "/index.html"
change_frequency_name: "change_frequency" change_frequency_name: "change_frequency"
priority_name: "priority" priority_name: "priority"
srcset:
source: assets/img
output: assets/img/resized
keep_files:
- 'assets/img/resized'

10
_includes/hero/blog.html
View file

@ -1,10 +1,8 @@
<div class="hero hero--blog" id="hero"> <div class="hero hero--blog" id="hero">
<div id="background-video"> <div class="hero__background">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.blog.hero-image %}" class="background-video"> {% if pages.blog.hero-image %}
<!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4"> <img src="{{ base }}/assets/img/hero/{% t pages.blog.hero-image %}" alt="" class="hero__background-image">
<source src="assets/videos/Home-BG.webm" type="video/webm"> {% endif %}
<source src="assets/videos/Home-BG" type="video/ogg"> -->
</video>
</div> </div>
<!-- Navigation --> <!-- Navigation -->

11
_includes/hero/community.html
View file

@ -1,10 +1,9 @@
<div class="hero" id="hero"> <div class="hero" id="hero">
<div id="background-video"> <div class="hero__background">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.community.hero-image %}" class="background-video"> {% srcset hero/community.jpg ppi:1,2 class="hero__background-image" %}
<!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4"> {% srcset_source width:1920 %}
<source src="assets/videos/Home-BG.webm" type="video/webm"> {% srcset_source width:960 %}
<source src="assets/videos/Home-BG" type="video/ogg"> --> {% endsrcset %}
</video>
</div> </div>
<!-- Navigation --> <!-- Navigation -->

11
_includes/hero/currency.html
View file

@ -1,10 +1,9 @@
<div class="hero" id="hero"> <div class="hero" id="hero">
<div id="background-video"> <div class="hero__background">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.currency.hero-image %}" class="background-video"> {% srcset hero/currency.jpg ppi:1,2 class="hero__background-image" %}
<!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4"> {% srcset_source width:1920 %}
<source src="assets/videos/Home-BG.webm" type="video/webm"> {% srcset_source width:960 %}
<source src="assets/videos/Home-BG" type="video/ogg"> --> {% endsrcset %}
</video>
</div> </div>
<!-- Navigation --> <!-- Navigation -->

12
_includes/hero/get-dash.html
View file

@ -1,10 +1,10 @@
<div class="hero hero--light" id="hero"> <div class="hero hero--light" id="hero">
<div id="background-video"> <div class="hero__background">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.get-dash.hero-image %}" class="background-video"> {% capture heroimage %}hero/{% t pages.get-dash.hero-image %}{% endcapture %}
<!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4"> {% srcset hero/get-dash-n.jpg ppi:1,2 class="hero__background-image" %}
<source src="assets/videos/Home-BG.webm" type="video/webm"> {% srcset_source width:1920 %}
<source src="assets/videos/Home-BG" type="video/ogg"> --> {% srcset_source width:960 %}
</video> {% endsrcset %}
</div> </div>
<!-- Navigation --> <!-- Navigation -->

13
_includes/hero/home.html
View file

@ -1,10 +1,11 @@
<div class="hero" id="hero"> <div class="hero" id="hero">
<div id="background-video"> <div class="hero__background">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/home/stock-photo-90982809-the-monthly-finances.jpg" class="background-video"> {% srcset home/stock-photo-90982809-the-monthly-finances.jpg ppi:1,2 class="hero__background-image" %}
<!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4"> {% srcset_source width:1920 %}
<source src="assets/videos/Home-BG.webm" type="video/webm"> {% srcset_source width:1280 %}
<source src="assets/videos/Home-BG" type="video/ogg"> --> {% srcset_source width:1024 %}
</video> {% srcset_source width:800 %}
{% endsrcset %}
</div> </div>
<!-- Navigation --> <!-- Navigation -->

8
_includes/hero/participate.html
View file

@ -1,12 +1,4 @@
<div class="hero hero--space" id="hero"> <div class="hero hero--space" id="hero">
<!-- <div id="background-video">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.participate.hero-image %}" class="background-video">
<source src="assets/videos/Home-BG.m4v" type="video/mp4">
<source src="assets/videos/Home-BG.webm" type="video/webm">
<source src="assets/videos/Home-BG" type="video/ogg">
</video>
</div> -->
<!-- Boids / Particle.js --> <!-- Boids / Particle.js -->
<div id="boids"></div> <div id="boids"></div>

13
_includes/hero/post.html
View file

@ -1,13 +1,8 @@
<div class="hero hero--post" id="hero"> <div class="hero hero--post" id="hero">
<div id="background-video"> <div class="hero__background">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.blog.hero-image %}" class="background-video"> {% if page.image %}
<!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4"> <img src="{{ base }}/assets/img/hero/{% t pages.blog.hero-image %}" alt="" class="hero__background-image">
<source src="assets/videos/Home-BG.webm" type="video/webm"> {% endif %}
<source src="assets/videos/Home-BG" type="video/ogg"> -->
</video>
<!-- {% if page.image %}
<img src="{{ page.image }}" class="hero-image">
{% endif %} -->
</div> </div>
<!-- Navigation --> <!-- Navigation -->

11
_includes/hero/team.html
View file

@ -1,10 +1,9 @@
<div class="hero" id="hero"> <div class="hero" id="hero">
<div id="background-video"> <div class="hero__background">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/dashorg-nodes.jpg" class="background-video"> {% srcset dashorg-nodes.jpg ppi:1,2 class="hero__background-image" %}
<!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4"> {% srcset_source width:1920 %}
<source src="assets/videos/Home-BG.webm" type="video/webm"> {% srcset_source width:960 %}
<source src="assets/videos/Home-BG" type="video/ogg"> --> {% endsrcset %}
</video>
</div> </div>
<!-- Navigation --> <!-- Navigation -->

4
src/scss/_hero.scss
View file

@ -26,7 +26,7 @@
} }
} }
#background-video { &__background {
z-index: 1; z-index: 1;
} }
@ -121,7 +121,7 @@
text-shadow: none; text-shadow: none;
} }
} }
#background-video::after { .hero__background::after {
background: none; background: none;
} }
} }

42
src/scss/_video.scss
View file

@ -1,11 +1,10 @@
#background-video { .hero__background {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
overflow: hidden; overflow: hidden;
z-index: -100;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
&:after { &:after {
@ -17,35 +16,14 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.background-video {
position: relative;
top: 20%;
transform: translateY(-20%);
width: 100%;
height: auto;
min-height: 100%;
}
} }
.hero__background-image {
@media (min-aspect-ratio: 16/9) { position: relative;
.background-video { top: 20%;
width: 100%; transform: translateY(-20%);
height: auto; width: 100%;
} height: auto;
} min-height: 100%;
object-fit: cover;
@media (max-aspect-ratio: 16/9) { object-position: 50% 20%;
.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;
}
}
} }