studio-variable/world-game
4
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

style button and earth icon variant
All checks were successful
Deploy / Deploy to Production (push) Successful in 16s
Details

Browse source
This commit is contained in:
isUnknown 2026-03-09 11:57:28 +01:00
parent 802a3ed5bf
commit c41eec0385
4 changed files with 74 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

44
site/blueprints/pages/portfolio.yml
View file

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

1
site/templates/portfolio.json.php
View file

@ -1,6 +1,7 @@
<?php
$specificData = [
'background_image' => $page->backgroundImage()->toFile()?->url(),
'projects' => $page->children()->listed()->map(function($project) {
return [
'title' => $project->title()->value(),

53
src/styles/buttons.css
View file

@ -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 */

18
src/views/Portfolio.svelte
View file

@ -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 @@
<section
class="portfolio golden-grid slide"
style={backgroundImage ? `--background-image: url('${backgroundImage}')` : ''}
bind:this={sectionEl}
ontouchstart={nav.onTouchStart}
ontouchend={nav.onTouchEnd}
@ -114,7 +116,7 @@
</div>
<div class="portfolio-links">
{#each currentProject.external_links as link}
<a href={link.url} target="_blank" rel="noopener noreferrer" class="button">{link.label}</a>
<a href={link.url} target="_blank" rel="noopener noreferrer" class="button earth-icon">{link.label}</a>
{/each}
</div>
</div>
@ -143,7 +145,11 @@
<style>
.portfolio {
background: #000;
background-color: #000;
background-image: var(--background-image, none);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Custom vertical lines */
@ -254,6 +260,10 @@
transition: transform 0.6s var(--ease-standard), opacity 0.6s var(--ease-standard);
}
.portfolio-nav-item:hover button {
transform: scale(1);
}
.portfolio-nav-item.active button {
transform: scale(1.5) translateX(-20%);
opacity: 1;