76 lines
2.4 KiB
HTML
76 lines
2.4 KiB
HTML
<style>
|
|
/* Fixed background when scrolling in tailwind
|
|
* Disabled on iOS devices
|
|
|
|
* https://tailwindcss.com/docs/background-attachment
|
|
* https://stackoverflow.com/a/60220757/4809297
|
|
*/
|
|
|
|
@supports (-webkit-touch-callout: none) {
|
|
/* CSS specific to iOS devices */
|
|
#wallpaper {
|
|
background-attachment: scroll;
|
|
}
|
|
}
|
|
|
|
@supports not (-webkit-touch-callout: none) {
|
|
/* CSS for other than iOS devices */
|
|
#wallpaper {
|
|
background-attachment: fixed;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="bg-gradient-to-r from-red-900 via-teal-900 to-fuchsia-900">
|
|
{% let wallpaper_uri -%}
|
|
{% match wallpaper %}
|
|
{% when Some with (wallpaper) %}
|
|
{% let wallpaper_uri = wallpaper.file -%}
|
|
{% when None %}
|
|
{% let wallpaper_uri = "" -%}
|
|
{% endmatch %}
|
|
|
|
<div
|
|
id="wallpaper"
|
|
class="relative text-white w-full h-almostscreen bg-center bg-cover"
|
|
style="background-image: url({{ wallpaper_uri }});"
|
|
>
|
|
<!-- Content inside -->
|
|
{% include "pages/root/hero-content.html" %}
|
|
|
|
{% match wallpaper %}
|
|
{% when Some with (wallpaper) %}
|
|
<!-- Exif info -->
|
|
<div
|
|
class="absolute bottom-3 sm:bottom-5 left-2 sm:left-5 inline-block backdrop-blur-lg backdrop-brightness-75 rounded-xl shadow-2xl p-2 space-y-0.5 sm:space-y-2"
|
|
>
|
|
<!-- See more -->
|
|
<div class="flex">
|
|
<div class="inline-flex items-center">
|
|
{% include "icons/map.html" %}
|
|
<a class="ml-1 text-sm underline" href="/wallpapers">See more!</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location -->
|
|
<div class="flex">
|
|
<div class="inline-flex items-center">
|
|
{% include "icons/location.html" %}
|
|
<span class="ml-1 text-sm">
|
|
{{ wallpaper.location.precise }}<span class="hidden md:inline">, {{ wallpaper.location.broad }}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Date -->
|
|
<div class="flex">
|
|
<div class="inline-flex items-center">
|
|
{% include "icons/calendar.html" %}
|
|
<span class="ml-1 text-sm">{{ wallpaper.date }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% when None %}
|
|
{% endmatch %}
|
|
</div>
|
|
</div>
|