mirror of
https://github.com/seigler/dash-website
synced 2025-07-27 07:16:10 +00:00
feat: responsive hero header images (#23)
This commit is contained in:
parent
c7d3adfb19
commit
d96ca70bac
13 changed files with 73 additions and 97 deletions
|
@ -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 -->
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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 -->
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue