phil/plcom
0
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

using rocket instead of astro

Browse source
This commit is contained in:
Philippe Loctaux 2023-12-01 10:54:31 +01:00
parent eb72400722
commit e61ef1d4c3
79 changed files with 4406 additions and 8501 deletions
Download patch file Download diff file Expand all files Collapse all files

70
templates/pages/root/hero-image.html Normal file
View file

@ -0,0 +1,70 @@
<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"
>
<!-- 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>