|
|
@ -0,0 +1,47 @@ |
|
|
|
{{!-- |
|
|
|
Wow what the hell is going on in here even? |
|
|
|
|
|
|
|
Ok so, several templates use this big header with a giant BG image. Nice idea, but big images |
|
|
|
have a heavy impact on performance, so it's a good idea to make them responsive. Because we |
|
|
|
can only get the image dynamically using Handlebars, and we can only set the image to properly |
|
|
|
be a background image using CSS, we end up with a handful of inline styles. |
|
|
|
|
|
|
|
If the template in question has a background image, then we render responsive image styles |
|
|
|
for it, and apply those styles to the <header> tag. Else, we just output a <header> tag |
|
|
|
with a `no-image` class so we can style it accordingly. |
|
|
|
--}} |
|
|
|
|
|
|
|
{{#if background}} |
|
|
|
|
|
|
|
<style type="text/css"> |
|
|
|
.responsive-header-img { |
|
|
|
background-image: url({{img_url background}}); |
|
|
|
} |
|
|
|
|
|
|
|
@media(max-width: 1000px) { |
|
|
|
.responsive-header-img { |
|
|
|
background-image: url({{img_url background size='l'}}); |
|
|
|
background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x, |
|
|
|
url({{img_url background size='xl'}}) 2x); |
|
|
|
background-image: image-set(url({{img_url background size='l'}}) 1x, |
|
|
|
url({{img_url background size='xl'}}) 2x); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@media(max-width: 600px) { |
|
|
|
.responsive-header-img { |
|
|
|
background-image: url({{img_url background size='m'}}); |
|
|
|
background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x, |
|
|
|
url({{img_url background size='l'}}) 2x); |
|
|
|
background-image: image-set(url({{img_url background size='m'}}) 1x, |
|
|
|
url({{img_url background size='l'}}) 2x); |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
<div class="outer site-header-background responsive-header-img"> |
|
|
|
|
|
|
|
{{else}} |
|
|
|
|
|
|
|
<div class="outer site-header-background no-image"> |
|
|
|
|
|
|
|
{{/if}} |