From c41eec0385a2b7682862906127c90c108233c230 Mon Sep 17 00:00:00 2001 From: isUnknown Date: Mon, 9 Mar 2026 11:57:28 +0100 Subject: [PATCH] style button and earth icon variant --- site/blueprints/pages/portfolio.yml | 44 +++++++++++++++++------- site/templates/portfolio.json.php | 1 + src/styles/buttons.css | 53 +++++++++++++++-------------- src/views/Portfolio.svelte | 18 +++++++--- 4 files changed, 74 insertions(+), 42 deletions(-) diff --git a/site/blueprints/pages/portfolio.yml b/site/blueprints/pages/portfolio.yml index 74bf948..6716f2e 100644 --- a/site/blueprints/pages/portfolio.yml +++ b/site/blueprints/pages/portfolio.yml @@ -11,16 +11,34 @@ tabs: content: label: Contenu icon: text - sections: - # Projets - projects_list: - type: pages - headline: Liste des projets - layout: cards - size: medium - image: - query: page.thumbnail.toFile - cover: true - template: project - info: "{{ page.catchphrase }}" - create: project + columns: + - width: 1/3 + sections: + meta_fields: + type: fields + fields: + backgroundImage: + label: Image d'arrière-plan + type: files + layout: cards + multiple: false + uploads: + accept: image/* + size: huge + image: + cover: true + ratio: 15/9 + - width: 2/3 + sections: + projects_list: + type: pages + headline: Liste des projets + layout: cards + size: small + image: + query: page.thumbnail.toFile + cover: true + back: #0E1E43 + template: project + info: "{{ page.catchphrase }}" + create: project diff --git a/site/templates/portfolio.json.php b/site/templates/portfolio.json.php index 04e2213..f0e67a7 100644 --- a/site/templates/portfolio.json.php +++ b/site/templates/portfolio.json.php @@ -1,6 +1,7 @@ $page->backgroundImage()->toFile()?->url(), 'projects' => $page->children()->listed()->map(function($project) { return [ 'title' => $project->title()->value(), diff --git a/src/styles/buttons.css b/src/styles/buttons.css index b6ce28b..65ed4e7 100644 --- a/src/styles/buttons.css +++ b/src/styles/buttons.css @@ -2,48 +2,51 @@ .button { width: 14vmax; min-width: 130px; + position: sticky; display: flex; align-items: center; justify-content: center; - position: sticky; z-index: var(--z-base); padding: 12px 16px; transition: 0.5s ease-out; - font-family: "Danzza Bold"; - background-color: var(--color-primary); border: none; cursor: pointer; + + font-family: "Danzza Bold"; + font-size: var(--font-size-button); + text-transform: uppercase; + color: #000; + + background: linear-gradient(270deg, var(--color-primary) 50%, transparent 0) + 100%; + background-size: 201% 100%; + outline: 2px solid #04fea0; } .button:hover { - background-position: left; - background-color: transparent; - outline: solid 2px var(--color-primary); + background-color: initial; + background-position: 0; + outline: 2px solid #04fea0; + color: var(--color-primary); } -.button p { - color: black; - margin: 0; - transition: color 0.3s; +.button:hover::before { + filter: invert(84%) sepia(30%) saturate(1700%) hue-rotate(87deg) + brightness(100%) contrast(99%); } - -.button:hover p { - color: var(--color-primary) !important; -} - -.earth-icon { - width: 24px; - height: 24px; - background-image: url('/assets/img/icon-earth-green.png'); - background-size: contain; - background-repeat: no-repeat; - background-position: center; - margin-right: 8px; - transition: filter 0.3s; +.button.earth-icon::before { + content: ""; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAYAAADFniADAAACmUlEQVRYhe2YsWtUQRDGf1ETNAlJhIgRop4gGqyCoI0IekUKbSJaaRNBxErwP0hnIxhbq7MRLYRYaJEiKMHCFMFGURAMGlBRMBElEGOUlW9lbtm3d/d4gRPvg8c+5s3OzO3Mfrtz5MAk8KuBZ7JRFxvyRLXeaKth/yxwOJB9B34EskvAduAVcCf41g50BbJZ4Hbe31aJpGk0oveM7FSNRmxUUk43ZcgG9e7SuwRsBLrz/a4qfAN+ym5JHxaAVasUqykX0Bs900AfcLSAgJCdPtn1PgZDpaYsdJs+V9QjQZouAMeANeC8ZHMN+pgzcy9rIfaa79eU1qlY8U8kuGe+huNUoVvMJ3xMeL1YoTuFt3rv13buAIYTzrZo7K2h16HR0cpnve9KUZNfqUUji1FCEY+lhMVwpZq20H0dPAdORdja4RNwMWHnunjHMfXVhN5NYFsgOyfWP2Rr0qdjPGKksk6FHmP0cR9LU6avFVS9aFMeHT4CH4J5jkO2qvhfJGzuBzYDX3WeZeGAivqL4UKPAV1/qoJqGlhGdxe0l0FgB4GdwLLOpiwcB3q00k8TeiNi/3eRM3RIK/4HLUqoB62g6oUr9PvSbdcl323/B8H8zoyGwaNX444aep0R2Un5dpfLx+HH1tUlhdjNs8dQQL/G98CJhJ27wD7gEXAlofdQKT6ju7/3V4VYUI7ldweyFXFRFpYlX6qht6KxK9I1/4UNyl3QbqngTkv2BHitbmZMsunIuZWCOz/LZq7vZo5Idk/dzGzKSMkUpA9kuKC23TcVY0ZWCif8M+Tpevs9esrasjMF+ZuRvbLxsRAqxQp91ey+NUOMRaDb2M085GNBWUwFZIq6jrDhHNA4FLltOLa+EciSRZ0H/+Hfi8Bv133zgtDiJQYAAAAASUVORK5CYII="); + background-size: 100%; + width: 1.125rem; + height: 1.125rem; + transform: translateX(-0.5rem); + transition: all 0.5s ease-out; } .button:hover .earth-icon { - filter: brightness(0) saturate(100%) invert(77%) sepia(82%) saturate(507%) hue-rotate(91deg) brightness(101%) contrast(97%); + filter: brightness(0) saturate(100%) invert(77%) sepia(82%) saturate(507%) + hue-rotate(91deg) brightness(101%) contrast(97%); } /* Clickable elements */ diff --git a/src/views/Portfolio.svelte b/src/views/Portfolio.svelte index 4cfaeba..8fd974a 100644 --- a/src/views/Portfolio.svelte +++ b/src/views/Portfolio.svelte @@ -11,8 +11,9 @@ let sectionEl = $state(null) // --- Derived --- - const isActive = $derived(slides.active?.id === 'portfolio') - const projects = $derived(data?.projects ?? []) + const isActive = $derived(slides.active?.id === 'portfolio') + const projects = $derived(data?.projects ?? []) + const backgroundImage = $derived(data?.background_image ?? null) const currentProject = $derived(projects[currentIndex] ?? null) // Capture du hash synchrone avant que tout effect puisse le modifier @@ -79,6 +80,7 @@
{#each currentProject.external_links as link} - {link.label} + {link.label} {/each}
@@ -143,7 +145,11 @@