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 'classifier-reborn'
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-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

8
_config.yml
View file

@ -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
@ -47,3 +48,10 @@ sitemap:
- "/index.html"
change_frequency_name: "change_frequency"
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 id="background-video">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.blog.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 class="hero__background">
{% if pages.blog.hero-image %}
<img src="{{ base }}/assets/img/hero/{% t pages.blog.hero-image %}" alt="" class="hero__background-image">
{% endif %}
</div>
<!-- Navigation -->

11
_includes/hero/community.html
View file

@ -1,10 +1,9 @@
<div class="hero" id="hero">
<div id="background-video">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.community.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 class="hero__background">
{% srcset hero/community.jpg ppi:1,2 class="hero__background-image" %}
{% srcset_source width:1920 %}
{% srcset_source width:960 %}
{% endsrcset %}
</div>
<!-- Navigation -->

11
_includes/hero/currency.html
View file

@ -1,10 +1,9 @@
<div class="hero" id="hero">
<div id="background-video">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.currency.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 class="hero__background">
{% srcset hero/currency.jpg ppi:1,2 class="hero__background-image" %}
{% srcset_source width:1920 %}
{% srcset_source width:960 %}
{% endsrcset %}
</div>
<!-- Navigation -->

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

@ -1,10 +1,10 @@
<div class="hero hero--light" id="hero">
<div id="background-video">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.get-dash.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 class="hero__background">
{% 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 %}
</div>
<!-- Navigation -->

13
_includes/hero/home.html
View file

@ -1,10 +1,11 @@
<div class="hero" id="hero">
<div id="background-video">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/home/stock-photo-90982809-the-monthly-finances.jpg" 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 class="hero__background">
{% 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 %}
</div>
<!-- Navigation -->

8
_includes/hero/participate.html
View file

@ -1,12 +1,4 @@
<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 -->
<div id="boids"></div>

13
_includes/hero/post.html
View file

@ -1,13 +1,8 @@
<div class="hero hero--post" id="hero">
<div id="background-video">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.blog.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>
<!-- {% if page.image %}
<img src="{{ page.image }}" class="hero-image">
{% endif %} -->
<div class="hero__background">
{% if page.image %}
<img src="{{ base }}/assets/img/hero/{% t pages.blog.hero-image %}" alt="" class="hero__background-image">
{% endif %}
</div>
<!-- Navigation -->

11
_includes/hero/team.html
View file

@ -1,10 +1,9 @@
<div class="hero" id="hero">
<div id="background-video">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/dashorg-nodes.jpg" 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 class="hero__background">
{% srcset dashorg-nodes.jpg ppi:1,2 class="hero__background-image" %}
{% srcset_source width:1920 %}
{% srcset_source width:960 %}
{% endsrcset %}
</div>
<!-- Navigation -->

4
src/scss/_hero.scss
View file

@ -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;
}
}

32
src/scss/_video.scss
View file

@ -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 {
}
.hero__background-image {
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;
}
}
object-fit: cover;
object-position: 50% 20%;
}