{{ description }}
+diff --git a/README.md b/README.md index ac91487..d4733d0 100644 --- 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. diff --git a/config/statamic/assets.php b/config/statamic/assets.php index 4875408..a8c99d8 100644 --- 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' ], ], /* diff --git a/public/assets/js/main.js b/public/assets/js/main.js index 98f9cfd..2a4ade0 100644 --- 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'; + }) }); }); diff --git a/public/css/site.css b/public/css/site.css index 9b522ef..c60b3d4 100644 --- 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{ diff --git a/resources/js/site.js b/resources/js/site.js index 35cf051..e69de29 100644 --- a/resources/js/site.js +++ b/resources/js/site.js @@ -1 +0,0 @@ -// This is all you. diff --git a/resources/views/_incentiveblock.antlers.html b/resources/views/_incentiveblock.antlers.html index 1d1b5b4..1f80376 100644 --- a/resources/views/_incentiveblock.antlers.html +++ b/resources/views/_incentiveblock.antlers.html @@ -1,6 +1,12 @@ -
{{ description }}
+{{ description }}
+