mirror of
https://github.com/Damillora/Yuika
synced 2024-11-01 00:57:32 +00:00
48 lines
1.7 KiB
Handlebars
48 lines
1.7 KiB
Handlebars
|
{{!--
|
||
|
|
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 size='xl'}});
|
||
|
|
}
|
||
|
|
|
||
|
|
@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="h-full responsive-header-img bg-cover bg-center">
|
||
|
|
|
||
|
|
{{else}}
|
||
|
|
|
||
|
|
<div class="h-full no-image">
|
||
|
|
|
||
|
|
{{/if}}
|