feat: responsive hero header images (#23)

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

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

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

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

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

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

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>

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

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