Switch all pics to webp, + stuphs

2026-01-29 12:35:41 +01:00
parent 87b5105f3f
commit 67189dd7ee
11 changed files with 90 additions and 27 deletions
--- a/README.md
+++ b/README.md
@ -23,3 +23,11 @@ Statamic has extensive [documentation][docs].
 CP is available under /cp. Credentials are:
 - user: `summercms@hfsplay.fr`
 - password: `0NRG4k7Qx1bG9Qj5Fh8Iu1JH6j`
+
+## Remote access
+To access from remote clients use :
+```bash
+php artisan serve --host=localhost
+ssh -R 80:localhost:8000 serveo.net
+```
+Serveo will provide a public URL to access the application.
--- a/config/statamic/assets.php
+++ b/config/statamic/assets.php
@ -82,6 +82,7 @@ return [
        */

        'defaults' => [
+            'fm' => 'webp',
            // 'quality' => 50,
        ],

@ -99,9 +100,9 @@ return [

        'presets' => [
            // 'small' => ['w' => 200, 'h' => 200, 'q' => 75, 'fit' => 'crop'],
-            'thumbnail' => [ 'w' => 300,  'h' => 300, 'q' => 75 ],
-            'logo' => [ 'w' => 200,  'h' => 200, 'q' => 80, 'fit' => 'contain' ],
-            'logo_large' => [ 'w' => 400,  'h' => 400, 'q' => 80, 'fit' => 'contain' ],
+            'thumbnail' => [ 'w' => 300,  'h' => 300, 'q' => 75, 'fm' => 'webp' ],
+            'logo' => [ 'w' => 200,  'h' => 200, 'q' => 80, 'fit' => 'contain', 'fm' => 'webp' ],
+            'logo_large' => [ 'w' => 400,  'h' => 400, 'q' => 80, 'fit' => 'contain', 'fm' => 'webp' ],
        ],

        /*
--- a/public/assets/js/main.js
+++ b/public/assets/js/main.js
@ -99,7 +99,13 @@ document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.photo').forEach(photoEl => {
        photoEl.addEventListener('click', () => {
            console.log('Photo clicked');
-            photoEl.classList.toggle('full');
+            // get next photo-full element inside the parent div
+            let fullPhoto = photoEl.parentElement.querySelector('.photo-full');
+            if (!fullPhoto) return;
+            fullPhoto.style.display = 'block';
+            fullPhoto.addEventListener('click', () => {
+                fullPhoto.style.display = 'none';
+            })
        });
    });

--- a/public/css/site.css
+++ b/public/css/site.css
@ -16,6 +16,9 @@
 .card{
    --bulma-card-shadow: none !important;
 }
+.box{
+    --bulma-box-shadow: none !important;
+}
 .has-text-weight-bold {
    font-weight: 600 !important;
 }
@ -88,6 +91,33 @@ video{
    corner-shape: squircle;
    aspect-ratio: 1;
 }
+
+/*INCENTIVES*/
+.incentive-block{
+    position: relative;
+    aspect-ratio: 16/9;
+}
+
+.incentive-block .bg{
+    position: absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    background-size: cover;
+    background-position: center;
+    /*mix-blend-mode: overlay; !* overlay? *!*/
+    z-index:1;
+    box-shadow: 0 0 5px 16px var(--bulma-black) inset;
+    border-radius: var(--bulma-box-radius);
+}
+
+.incentive-block .text-content{
+    position: relative;
+    z-index:2;
+}
+
+/*GALLERY*/
 #gallery{
    position:relative;
 }
@ -103,13 +133,21 @@ video{
 .photo:hover{
    transform: rotate(0deg) !important;
 }
-.photo.full{
-    position:fixed;
+.photo-full{
+    position:absolute;
+    cursor:pointer;
+    display:none;
+    background:var(--bulma-white);
+    padding:10px;
+    width:100%;
    top:0;
-    height:calc(100vh - 4rem);
+    left:0;
+    /*height:calc(100vh - 4rem);*/
    transform: rotate(0deg) !important;
    z-index:100;
    margin:2rem;
+    border-radius: 5px;
+    box-shadow: 0 4px 6px hsla(0,0%,6%,0.3);
 }
 /*#tournaments*/
 .tournament-block{
--- a/resources/js/site.js
+++ b/resources/js/site.js
@ -1 +0,0 @@
-// This is all you.
--- a/resources/views/_incentiveblock.antlers.html
+++ b/resources/views/_incentiveblock.antlers.html
@ -1,6 +1,12 @@
-<div class="incentive-block" >
-{{#     <img src="{{ glide:photo preset='thumbnail' }}" alt="{{ icon:alt }}"> #}}
-    <div class="squircle" style="background-image:url('{{ glide:photo }}');"></div>
-    <h3 class="is-size-3 has-text-primary">{{ title }}</h3>
-    <p>{{ description }}</p>
+<div class="incentive-block block py-3 fixed-grid has-1-cols has-2-cols-tablet">
+    {{ isOdd = index % 2 }}
+    <div class="bg" style="background-image:url('{{ glide:photo q="80" width="1344" fm="webp"}}')"></div>
+    <div class="grid text-content py-3">
+        {{ if isOdd }} <div></div> {{ /if }}
+        <div class="has-background-black {{ isOdd ? 'has-text-right' : '' }} px-p-5 box">
+            <div class="is-size-3 has-text-primary is-uppercase block has-text-weight-bold">{{ title }}</div>
+            <p class="is-size-5">{{ description }}</p>
+        </div>
+        {{ if !isOdd }}<div></div>{{ /if }}
+    </div>
 </div>
--- a/resources/views/_photoblock.antlers.html
+++ b/resources/views/_photoblock.antlers.html
@ -1,6 +1,9 @@
 <div class="cell">
    {{? $angle = rand(-15,15); ?}}
-    <img src="{{ glide:url preset="thumbnail" }}" alt="{{ alt }}" class="photo"
+    <img src="{{ glide:url preset="thumbnail" fm="webp"}}"
+        data-url-full="{{ glide:url }}"
+        alt="{{ alt }}"
+        class="photo"
        style="transform: rotate({{ $angle }}deg);">
-{{#     <img src="{{ glide:url }}" alt="{{ alt }}" class="photo full"> #}}
+    <img src="{{ glide:url w="1280" q="70" fm="webp"}}" alt="{{ alt }}" class="photo-full">
 </div>
--- a/resources/views/_tournamentblock.antlers.html
+++ b/resources/views/_tournamentblock.antlers.html
@ -2,8 +2,8 @@
 <a class="custom-cell"
   href="{{ url }}"
 >
-    <div class="bg" style="background-image:url('{{ glide:backdrop preset='thumbnail'}}');"></div>
-    <div class="bg active" style="background-image:url('{{ glide:backdrop preset='thumbnail'}}');"></div>
-    <img src="{{ glide:logo preset='logo' }}" alt="title">
+    <div class="bg" style="background-image:url('{{ glide:backdrop preset='thumbnail' fm="webp"}}');"></div>
+    <div class="bg active" style="background-image:url('{{ glide:backdrop preset='thumbnail' fm="webp"}}');"></div>
+    <img src="{{ glide:logo preset='logo' fm="webp"}}" alt="title">
 </a>
 {{ /if }}
--- a/resources/views/home.antlers.html
+++ b/resources/views/home.antlers.html
@ -15,7 +15,7 @@
    </video>
 </section>

-<section class="section has-background-primary has-text-black ink top" id="catch">
+<section class="section has-background-primary has-text-black ink bottom" id="catch">
    <div class="is-size-1 has-text-weight-bold is-uppercase container">
        {{ content | widont }}
    </div>
@ -114,8 +114,9 @@
            {{ collection:prices sort="order asc" limit="3" }}
                <div class="cell block has-text-centered">
                    <h3 class="is-size-4 has-text-weight-bold is-uppercase mb-2">{{ title }}</h3>
+                    {{ if sold_out }}<span class="tag is-primary has-text-weight-bold">ÉPUISÉ</span>{{ /if }}
+                    <p>{{ content }}</p>
                    <p class="is-size-1 has-text-weight-bold mb-3">{{ price }} €</p>
-{{#                     <a href="{{ hfs:lien_billetterie }}" class="button is-primary is-rounded" target="_blank" aria-label="Acheter {{ title }}">Acheter</a> #}}
                </div>
            {{ /collection:prices }}
        </div>
@ -126,7 +127,7 @@
    </div>
 </section>

-<section class="section has-background-primary has-text-black" id="sponsors">
+<section class="section has-background-primary has-text-black ink bottom" id="sponsors">
    <div class="container">
        <h2 class="is-size-2 has-text-weight-bold is-uppercase block">Sponsors & partenaires</h2>

@ -139,7 +140,7 @@
                    <div class="partner-link" style="">
                    {{ /if }}
                    <div class="partner-box">
-                        <img src="{{ glide:logo preset='logo' }}" alt="{{ logo:alt }}" style="max-width:100%;max-height:100%;object-fit:contain;display:block;">
+                        <img src="{{ glide:logo preset='logo' fm="webp"}}" alt="{{ logo:alt }}" style="max-width:100%;max-height:100%;object-fit:contain;display:block;">
                    </div>
                    {{ if link }}
                        </a>
--- a/resources/views/layout.antlers.html
+++ b/resources/views/layout.antlers.html
@ -31,7 +31,7 @@

        {{ template_content }}

-        <footer class="footer">
+        <footer class="footer has-background-black">
        <div class="grid is-col-min-9">
            <div class="cell has-text-centered has-text-primary">
                <a class="footer-logo has-text-primary" href="https://www.hfsplay.fr" target="_blank">
@ -53,6 +53,7 @@
    <script src="https://unpkg.com/lenis@1.3.17/dist/lenis.min.js"></script>
    <script src="/assets/js/main.js"></script>

-    {{ vite src="resources/js/app.js|resources/css/app.css" }}
+    {{ vite src="public/assets/js/main.js|public/assets/css/site.css" }}
+{{#     {{ vite src="resources/js/site.js|resources/css/site.css" }} #}}

 </html>
--- a/resources/views/tournaments/show.antlers.html
+++ b/resources/views/tournaments/show.antlers.html
@ -1,8 +1,8 @@
-<section style="background-image: url('{{ glide:backdrop blur="20" }}');"
+<section style="background-image: url('{{ glide:backdrop blur="20" fm="webp"}}');"
         class="has-text-centered"
         id="tournament-header"
 >
-    <img src="{{ glide:logo preset="logo_large" }}" class="my-6" alt="{{ logo:alt }}" />
+    <img src="{{ glide:logo preset="logo_large" fm="webp"}}" class="my-6" alt="{{ logo:alt }}" />
 </section>
 <section class="grid is-col-min-16 is-gap-4 my-6 container" id="tournament-info">
    <div class="cell">