Switch all pics to webp, + stuphs

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.

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 ],
+            'thumbnail' => [ 'w' => 300,  'h' => 300, 'q' => 75, 'fm' => 'webp' ],
-            'logo' => [ 'w' => 200,  'h' => 200, 'q' => 80, 'fit' => 'contain' ],
+            'logo' => [ 'w' => 200,  'h' => 200, 'q' => 80, 'fit' => 'contain', 'fm' => 'webp' ],
-            'logo_large' => [ 'w' => 400,  'h' => 400, 'q' => 80, 'fit' => 'contain' ],
+            'logo_large' => [ 'w' => 400,  'h' => 400, 'q' => 80, 'fit' => 'contain', 'fm' => 'webp' ],
         ],
 
         /*

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';
+            })
         });
     });
 

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{
+.photo-full{
-    position:fixed;
+    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{

resources/js/site.js

@@ -1 +0,0 @@
-// This is all you.

resources/views/_incentiveblock.antlers.html

@@ -1,6 +1,12 @@
-<div class="incentive-block" >
+<div class="incentive-block block py-3 fixed-grid has-1-cols has-2-cols-tablet">
-{{#     <img src="{{ glide:photo preset='thumbnail' }}" alt="{{ icon:alt }}"> #}}
+    {{ isOdd = index % 2 }}
-    <div class="squircle" style="background-image:url('{{ glide:photo }}');"></div>
+    <div class="bg" style="background-image:url('{{ glide:photo q="80" width="1344" fm="webp"}}')"></div>
-    <h3 class="is-size-3 has-text-primary">{{ title }}</h3>
+    <div class="grid text-content py-3">
-    <p>{{ description }}</p>
+        {{ 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>

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>

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" style="background-image:url('{{ glide:backdrop preset='thumbnail' fm="webp"}}');"></div>
-    <div class="bg active" style="background-image:url('{{ glide:backdrop preset='thumbnail'}}');"></div>
+    <div class="bg active" style="background-image:url('{{ glide:backdrop preset='thumbnail' fm="webp"}}');"></div>
-    <img src="{{ glide:logo preset='logo' }}" alt="title">
+    <img src="{{ glide:logo preset='logo' fm="webp"}}" alt="title">
 </a>
 {{ /if }}

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>

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>

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">