From 4a5121e6798b1ce1fbca4f68626069f3d2a34eb9 Mon Sep 17 00:00:00 2001 From: ANGELA RICCI Date: Fri, 6 Feb 2026 14:24:44 +0100 Subject: [PATCH 1/3] page offres + partners/ anim home --- public/css/main.css | 177 ++++++++++++++++++++++------------ public/css/queries.css | 76 +++++++++++---- public/img/sprite.svg | 12 +++ src/pages/index.astro | 29 ++++++ src/pages/offres-emploi.astro | 37 +++++++ src/pages/partner-[id].astro | 96 +++++++++++++++++- 6 files changed, 339 insertions(+), 88 deletions(-) create mode 100644 src/pages/offres-emploi.astro diff --git a/public/css/main.css b/public/css/main.css index b8d7d8a..4f42437 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -245,12 +245,14 @@ picture img { vertical-align: bottom; } +summary {cursor: pointer;} + /* ----------------------------------------------------------------- */ /* -------------------------- STRUCTURE ---------------------------- */ header { padding: calc(1rem + 2vw) 0 0.65rem calc(1rem + 2vw); - margin-bottom: calc(2rem + 2vw); + margin-bottom: calc(1rem + 1vw); transition: all 0.3s; } @@ -552,6 +554,7 @@ nav a[aria-current="page"] { /* ----------------------------------------------------------------- */ /* -------------------------- HOME ---------------------------- */ + div.hero { position: relative; background-image: linear-gradient( @@ -652,6 +655,17 @@ section.news article + article { border-top: 1px dotted var(--text-high); } + +@keyframes venue-photo-1 { + 0% {opacity: 0; transform: scale(0.5) rotate(0);} + 100% {opacity: 1; transform: scale(1) rotate(15deg);} +} + +@keyframes venue-photo-2 { + 0% {opacity: 0; transform: scale(0.5) rotate(0);} + 100% {opacity: 1; transform: scale(1) rotate(-13deg);} +} + div.venue { position: relative; margin: 10vw 0; @@ -736,7 +750,8 @@ div.sponsors { div.sponsors h3 { font-variation-settings: "wght" 800; color: var(--hot-color); - margin-bottom: 1rem; + padding-top: 0.5em; + margin-bottom: 1.5rem; border-top: 5px dotted var(--hot-color); } div.sponsors.platinium h3 { @@ -786,13 +801,36 @@ div.sponsor-sheet { } & p { box-sizing: border-box; - align-self: start; + align-self: stretch; background-color: var(--text-high); padding: 0.5rem; margin: 0; display: flex; justify-content: center; } + + & div.with-contact ul { + display: flex; + flex-wrap: wrap; + gap: 1rem; + list-style-type: none; + margin: 0.5rem 0 0; + } + + & div.with-contact li + li { + margin-top: 0; + } + + & div.with-contact a { + display: flex; + overflow: hidden; + gap: 3rem; + width: 24px; + height: 24px; + white-space: nowrap; + } + + & svg {fill: currentColor;} } .sponsor p.dark { @@ -883,91 +921,45 @@ div.stats li { text-align: center; color: var(--body-bg); margin: auto; - transform: rotate(0); - animation-duration: 1s; - animation-fill-mode: forwards; - animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0); + box-shadow: 0 0 8px 2px rgba(0,0,0, 0.5); } div.stats li:nth-child(1) { background-color: var(--main-light); - animation-name: slideStats1; - animation-delay: 4.9s; } div.stats li:nth-child(2) { background-color: var(--hot-light); transform: rotate(-1deg); - animation-name: slideStats2; - animation-delay: 5s; } div.stats li:nth-child(3) { background-color: var(--light-cold); transform: rotate(-6deg); - animation-name: slideStats3; - animation-delay: 5.1s; } div.stats li:nth-child(4) { background-color: var(--light-hot); transform: rotate(1deg); - animation-name: slideStats4; - animation-delay: 5.2s; } @keyframes slideStats1 { - 0% { - transform: rotate(0); - } - 50% { - transform: rotate(2deg); - } - 70% { - transform: rotate(1deg); - } - 100% { - transform: rotate(2deg); - } + 0% {transform: rotate(0);} + 40% {transform: rotate(-3deg);} + 80% {transform: rotate(2deg);} + 100% {transform: rotate(-3deg);} } @keyframes slideStats2 { - 0% { - transform: rotate(0); - } - 50% { - transform: rotate(-2deg); - } - 70% { - transform: rotate(1deg); - } - 100% { - transform: rotate(-1deg); - } + 0% {transform: translateX(-22vw) rotate(0);} + 80% {transform: translateX(0) rotate(-3deg);} + 100% {transform: translateX(0) rotate(4deg);} } @keyframes slideStats3 { - 0% { - transform: rotate(0); - } - 50% { - transform: rotate(-6deg); - } - 70% { - transform: rotate(-2deg); - } - 100% { - transform: rotate(-6deg); - } + 0% {transform: translateX(-44vw) rotate(0);} + 80% {transform: translateX(0) rotate(3deg);} + 100% {transform: translateX(0) rotate(-6deg);} } @keyframes slideStats4 { - 0% { - transform: rotate(0); - } - 50% { - transform: rotate(2deg); - } - 70% { - transform: rotate(1deg); - } - 100% { - transform: rotate(1deg); - } + 0% {transform: translateX(-66vw) rotate(0);} + 80% {transform: translateX(0) rotate(-3deg);} + 100% {transform: translateX(0) rotate(3deg);} } div.fixed { @@ -1445,6 +1437,10 @@ div.online { & ul { margin: 0 1em 1em 1.8em; } + + & a { + overflow-wrap: break-word; + } } div.talk h4, @@ -1550,6 +1546,61 @@ p.openfb { border-top: 3px dotted currentColor; } + +/* ----------------------------------------------------------------- */ +/* -------------------------- JPB OFFERS ---------------------------- */ + +.job-offers { + & summary { + font-size: calc(0.95em + 0.5vw); + font-variation-settings: "wght" 700; + list-style: none; + color: var(--n-dark); + background-color: var(--hot-color); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M9 17C9 17 16 18 19 21H20C20.5523 21 21 20.5523 21 20V13.937C21.8626 13.715 22.5 12.9319 22.5 12C22.5 11.0681 21.8626 10.285 21 10.063V4C21 3.44772 20.5523 3 20 3H19C16 6 9 7 9 7H5C3.89543 7 3 7.89543 3 9V15C3 16.1046 3.89543 17 5 17H6L7 22H9V17ZM11 8.6612C11.6833 8.5146 12.5275 8.31193 13.4393 8.04373C15.1175 7.55014 17.25 6.77262 19 5.57458V18.4254C17.25 17.2274 15.1175 16.4499 13.4393 15.9563C12.5275 15.6881 11.6833 15.4854 11 15.3388V8.6612ZM5 9H9V15H5V9Z'%3E%3C/path%3E%3C/svg%3E"), + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 16L6 10H18L12 16Z'%3E%3C/path%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-size: 1.52rem; + background-position: 0.45em 40%, center right 8px; + padding: 0.5em 2rem 0.6em 2.5rem; + } + + & div.content { + background-color: color-mix(in srgb, var(--hot-light), #000 75%); + padding: calc(1rem + 1vw) calc(1.5rem + 1vw) calc(1.5rem + 1vw) 2.5rem; + } + + & dl + dl {margin-top: 1.5rem;} + + & dt { + font-size: calc(0.9em + 0.5vw); + margin-bottom: 0.5em; + } + & dd { + font-size: calc(0.8em + 0.5vw); + padding-bottom: 0.25em; + padding-left: 1em; + margin-left: 1em; + border-left: 1px solid currentColor; + } + + & .p-action { + font-variation-settings: "wght" 700; + } +} + +details.job-offers[open] summary { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M9 17C9 17 16 18 19 21H20C20.5523 21 21 20.5523 21 20V13.937C21.8626 13.715 22.5 12.9319 22.5 12C22.5 11.0681 21.8626 10.285 21 10.063V4C21 3.44772 20.5523 3 20 3H19C16 6 9 7 9 7H5C3.89543 7 3 7.89543 3 9V15C3 16.1046 3.89543 17 5 17H6L7 22H9V17ZM11 8.6612C11.6833 8.5146 12.5275 8.31193 13.4393 8.04373C15.1175 7.55014 17.25 6.77262 19 5.57458V18.4254C17.25 17.2274 15.1175 16.4499 13.4393 15.9563C12.5275 15.6881 11.6833 15.4854 11 15.3388V8.6612ZM5 9H9V15H5V9Z'%3E%3C/path%3E%3C/svg%3E"), + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 8L18 14H6L12 8Z'%3E%3C/path%3E%3C/svg%3E"); +} + +div.job-offers dl { + background-color: color-mix(in srgb, #FFF 10%, var(--body-bg-dark) 5%); + padding: calc(1rem + 1vw) calc(1.5rem + 1vw); +} + + + /* ----------------------------------------------------------------- */ /* -------------------------- AGENDA ---------------------------- */ diff --git a/public/css/queries.css b/public/css/queries.css index cbc516f..efe1bf9 100644 --- a/public/css/queries.css +++ b/public/css/queries.css @@ -186,29 +186,65 @@ transform: rotate(-10deg); } } - - /* div.venue::before, div.venue::after { - display: block; - position: absolute; - content: ""; - background-color: rgb(255,255,255,0.1); - } - div.venue::before { - width: 90vw; - height: 80%; - left: 5vw; - } - div.venue::after { - width: 10vw; - height: 10vw; - top: 0; - right: 16vw; - transform: rotate(10deg); - z-index: 2; - } */ } +@media screen and (min-width: 850px) and (prefers-reduced-motion: no-preference) { + div.stats.active { + & ul {position: relative;} + & li:nth-child(2), & li:nth-child(3), & li:nth-child(4) { + transform: rotate(0); + } + & li:nth-child(1) { + animation-delay: 0.95; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-timing-function: linear; + animation-name: slideStats1; + } + & li:nth-child(2) { + transform: translateX(-22vw); + animation-delay: 0.85; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-timing-function: linear; + animation-name: slideStats2; + } + & li:nth-child(3) { + transform: translateX(-44vw); + animation-delay: 0.65; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-timing-function: linear; + animation-name: slideStats3; + } + & li:nth-child(4) { + transform: translateX(-66vw); + animation-delay: 0; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-timing-function: linear; + animation-name: slideStats4; + } + } + + div.venue.active p.illustration { + animation-delay: 1; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-timing-function: linear; + animation-name: venue-photo-1; + } + div.venue.active p.illustration.secondary { + display: block; + animation-delay: 0; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-timing-function: linear; + animation-name: venue-photo-2; + } +} + @media screen and (min-width: 800px) and (max-width: 1299px) { div.decor { display: grid; diff --git a/public/img/sprite.svg b/public/img/sprite.svg index 8e6fbe4..0b5f6ee 100644 --- a/public/img/sprite.svg +++ b/public/img/sprite.svg @@ -35,5 +35,17 @@ + + + + + + + + + + + + diff --git a/src/pages/index.astro b/src/pages/index.astro index 5ee27eb..d731f12 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -171,4 +171,33 @@ const og = { + + diff --git a/src/pages/offres-emploi.astro b/src/pages/offres-emploi.astro new file mode 100644 index 0000000..db7524a --- /dev/null +++ b/src/pages/offres-emploi.astro @@ -0,0 +1,37 @@ +--- +import Layout from "../layouts/Layout.astro"; +--- + + +
+
+

Les offres d'emploi de nos partenaires

+ +
+

+ Nos partenaires nous partagent leurs offres d'emploi actuelles. +

+
+ +
+
+
+ Developeur Fullstack Senior +
+
Axa – Paris
+
Offre publiée le 15/01/26
+
+
+
+ Poste +
+
Partenaire – Localisation
+
5 ans et plus
+
Offre publiée le JJ/MM/AA
+
+
+ +
+
+ + diff --git a/src/pages/partner-[id].astro b/src/pages/partner-[id].astro index 1ce70ee..73a3d28 100644 --- a/src/pages/partner-[id].astro +++ b/src/pages/partner-[id].astro @@ -59,7 +59,71 @@ const video = videos[sponsor.data.id] as string | undefined /> )}

-

{sponsor.data.name}

+
+

{sponsor.data.name}

+ +
From f2a91b5eeaa55277185af2b51e537df88e375a42 Mon Sep 17 00:00:00 2001 From: ANGELA RICCI Date: Tue, 10 Feb 2026 14:35:27 +0100 Subject: [PATCH 2/3] fix sponsors logo size --- public/css/main.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/css/main.css b/public/css/main.css index 4f42437..ffbab93 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -831,6 +831,8 @@ div.sponsor-sheet { } & svg {fill: currentColor;} + + & img {object-fit: contain;} } .sponsor p.dark { From fb0e343de5de6c54c53da1dd150cc1ade0669034 Mon Sep 17 00:00:00 2001 From: ANGELA RICCI Date: Thu, 12 Feb 2026 10:52:22 +0100 Subject: [PATCH 3/3] Design jobs + anim home --- public/css/main.css | 120 ++++++++++++++++++++++++---------- public/css/queries.css | 31 +++++---- src/pages/index.astro | 63 +++++++++++------- src/pages/offres-emploi.astro | 55 ++++++++++++---- src/pages/partner-[id].astro | 81 ++++++++++++++++++----- 5 files changed, 253 insertions(+), 97 deletions(-) diff --git a/public/css/main.css b/public/css/main.css index ffbab93..4d9156f 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -250,7 +250,7 @@ summary {cursor: pointer;} /* ----------------------------------------------------------------- */ /* -------------------------- STRUCTURE ---------------------------- */ -header { +#container > header { padding: calc(1rem + 2vw) 0 0.65rem calc(1rem + 2vw); margin-bottom: calc(1rem + 1vw); transition: all 0.3s; @@ -692,6 +692,7 @@ aside { margin: 0 5vw 6rem; } + aside div.be-partner { color: var(--n-dark); background-color: rgba(255, 255, 255, 0.7); @@ -830,7 +831,7 @@ div.sponsor-sheet { white-space: nowrap; } - & svg {fill: currentColor;} + & svg {fill: var(--link-color);} & img {object-fit: contain;} } @@ -943,25 +944,28 @@ div.stats li:nth-child(4) { } @keyframes slideStats1 { - 0% {transform: rotate(0);} - 40% {transform: rotate(-3deg);} - 80% {transform: rotate(2deg);} - 100% {transform: rotate(-3deg);} + 0% {transform: scale(1) rotate(0);} + 20% {transform: scale(1.2) rotate(-3deg);} + 40% {transform: rotate(3deg);} + 100% {transform: scale(1) rotate(-3deg);} } @keyframes slideStats2 { - 0% {transform: translateX(-22vw) rotate(0);} - 80% {transform: translateX(0) rotate(-3deg);} - 100% {transform: translateX(0) rotate(4deg);} + 0% {transform: rotate(0);} + 20% {transform: scale(1.2) rotate(5deg);} + 40% {transform: rotate(-3deg);} + 100% {transform: scale(1) rotate(2deg);} } @keyframes slideStats3 { - 0% {transform: translateX(-44vw) rotate(0);} - 80% {transform: translateX(0) rotate(3deg);} - 100% {transform: translateX(0) rotate(-6deg);} + 0% {transform: rotate(0);} + 20% {transform: scale(1.2) rotate(7deg);} + 40% {transform: rotate(-1deg);} + 100% {transform: scale(1) rotate(-3deg);} } @keyframes slideStats4 { - 0% {transform: translateX(-66vw) rotate(0);} - 80% {transform: translateX(0) rotate(-3deg);} - 100% {transform: translateX(0) rotate(3deg);} + 0% {transform: rotate(0);} + 20% {transform: scale(1.2) rotate(-3deg);} + 40% {transform: rotate(-3deg);} + 100% {transform: scale(1) rotate(5deg);} } div.fixed { @@ -1550,40 +1554,74 @@ p.openfb { /* ----------------------------------------------------------------- */ -/* -------------------------- JPB OFFERS ---------------------------- */ +/* -------------------------- JOB OFFERS ---------------------------- */ .job-offers { & summary { - font-size: calc(0.95em + 0.5vw); - font-variation-settings: "wght" 700; list-style: none; color: var(--n-dark); background-color: var(--hot-color); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M9 17C9 17 16 18 19 21H20C20.5523 21 21 20.5523 21 20V13.937C21.8626 13.715 22.5 12.9319 22.5 12C22.5 11.0681 21.8626 10.285 21 10.063V4C21 3.44772 20.5523 3 20 3H19C16 6 9 7 9 7H5C3.89543 7 3 7.89543 3 9V15C3 16.1046 3.89543 17 5 17H6L7 22H9V17ZM11 8.6612C11.6833 8.5146 12.5275 8.31193 13.4393 8.04373C15.1175 7.55014 17.25 6.77262 19 5.57458V18.4254C17.25 17.2274 15.1175 16.4499 13.4393 15.9563C12.5275 15.6881 11.6833 15.4854 11 15.3388V8.6612ZM5 9H9V15H5V9Z'%3E%3C/path%3E%3C/svg%3E"), - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 16L6 10H18L12 16Z'%3E%3C/path%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 16L6 10H18L12 16Z'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 1.52rem; - background-position: 0.45em 40%, center right 8px; - padding: 0.5em 2rem 0.6em 2.5rem; + background-position: center right 8px; + padding: 0.15em 2rem 0.6em 1rem; + } + & summary h2 { + font-size: calc(0.95em + 0.5vw); + font-variation-settings: "wght" 700; + color: var(--n-dark); + margin: 0; } & div.content { background-color: color-mix(in srgb, var(--hot-light), #000 75%); - padding: calc(1rem + 1vw) calc(1.5rem + 1vw) calc(1.5rem + 1vw) 2.5rem; } - & dl + dl {margin-top: 1.5rem;} + & header {margin-bottom: 0.5rem;} + + & h3 { + font-size: 1.4em; + margin-bottom: 0.5rem; + } + & p { + font-size: 1.2em; + } + & dl { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 1rem 0 0 1rem; + margin-left: 1rem; + border-left: 1px solid currentColor; + } + + & dl div { + display: flex; + flex-direction: column-reverse; + background-repeat: no-repeat; + background-size: 1em; + padding-left: 1.5em; + } + & dl div:nth-child(1) { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFF'%3E%3Cpath d='M4 11.3333L0 9L12 2L24 9V17.5H22V10.1667L20 11.3333V18.0113L19.7774 18.2864C17.9457 20.5499 15.1418 22 12 22C8.85817 22 6.05429 20.5499 4.22263 18.2864L4 18.0113V11.3333ZM6 12.5V17.2917C7.46721 18.954 9.61112 20 12 20C14.3889 20 16.5328 18.954 18 17.2917V12.5L12 16L6 12.5ZM3.96927 9L12 13.6846L20.0307 9L12 4.31541L3.96927 9Z'%3E%3C/path%3E%3C/svg%3E"); + } + & dl div:nth-child(2) { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFF'%3E%3Cpath d='M12.0049 22.0027C6.48204 22.0027 2.00488 17.5256 2.00488 12.0027C2.00488 6.4799 6.48204 2.00275 12.0049 2.00275C17.5277 2.00275 22.0049 6.4799 22.0049 12.0027C22.0049 17.5256 17.5277 22.0027 12.0049 22.0027ZM12.0049 20.0027C16.4232 20.0027 20.0049 16.421 20.0049 12.0027C20.0049 7.58447 16.4232 4.00275 12.0049 4.00275C7.5866 4.00275 4.00488 7.58447 4.00488 12.0027C4.00488 16.421 7.5866 20.0027 12.0049 20.0027ZM10.0549 11.0027H15.0049V13.0027H10.0549C10.2865 14.1439 11.2954 15.0027 12.5049 15.0027C13.1201 15.0027 13.6833 14.7806 14.1188 14.412L15.8198 15.546C14.9973 16.4415 13.8166 17.0027 12.5049 17.0027C10.1886 17.0027 8.28107 15.2527 8.03235 13.0027H7.00488V11.0027H8.03235C8.28107 8.75277 10.1886 7.00275 12.5049 7.00275C13.8166 7.00275 14.9973 7.56402 15.8198 8.45951L14.1189 9.59351C13.6834 9.22496 13.1201 9.00275 12.5049 9.00275C11.2954 9.00275 10.2865 9.86163 10.0549 11.0027Z'%3E%3C/path%3E%3C/svg%3E"); + } + & dl div:nth-child(3) { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFF'%3E%3Cpath d='M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z'%3E%3C/path%3E%3C/svg%3E"); + } + & dt { - font-size: calc(0.9em + 0.5vw); - margin-bottom: 0.5em; + font-size: 0.75em; + text-transform: uppercase; } + & dd { - font-size: calc(0.8em + 0.5vw); - padding-bottom: 0.25em; - padding-left: 1em; - margin-left: 1em; - border-left: 1px solid currentColor; + font-size: 1.1em; + font-variation-settings: "wght" 700; } & .p-action { @@ -1591,14 +1629,24 @@ p.openfb { } } +section.h-listing { + padding: 1.5rem; +} + +section.h-listing + section.h-listing { + border-top: 1px dotted currentColor; +} + +section.h-listing:nth-child(even) { + background-color: rgba(0, 0, 0, 0.15); +} + details.job-offers[open] summary { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M9 17C9 17 16 18 19 21H20C20.5523 21 21 20.5523 21 20V13.937C21.8626 13.715 22.5 12.9319 22.5 12C22.5 11.0681 21.8626 10.285 21 10.063V4C21 3.44772 20.5523 3 20 3H19C16 6 9 7 9 7H5C3.89543 7 3 7.89543 3 9V15C3 16.1046 3.89543 17 5 17H6L7 22H9V17ZM11 8.6612C11.6833 8.5146 12.5275 8.31193 13.4393 8.04373C15.1175 7.55014 17.25 6.77262 19 5.57458V18.4254C17.25 17.2274 15.1175 16.4499 13.4393 15.9563C12.5275 15.6881 11.6833 15.4854 11 15.3388V8.6612ZM5 9H9V15H5V9Z'%3E%3C/path%3E%3C/svg%3E"), - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 8L18 14H6L12 8Z'%3E%3C/path%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 8L18 14H6L12 8Z'%3E%3C/path%3E%3C/svg%3E"); } -div.job-offers dl { - background-color: color-mix(in srgb, #FFF 10%, var(--body-bg-dark) 5%); - padding: calc(1rem + 1vw) calc(1.5rem + 1vw); +div.job-offers section:first-of-type { + border-top: 1px dotted currentColor; } diff --git a/public/css/queries.css b/public/css/queries.css index efe1bf9..8ccc110 100644 --- a/public/css/queries.css +++ b/public/css/queries.css @@ -100,6 +100,11 @@ #mc_embed_signup_scroll h2 { margin-bottom: 0 !important; } + + .job-offers dl { + flex-direction: row; + gap: 2.5rem; + } } @@ -203,7 +208,6 @@ animation-name: slideStats1; } & li:nth-child(2) { - transform: translateX(-22vw); animation-delay: 0.85; animation-duration: 1s; animation-fill-mode: forwards; @@ -211,7 +215,6 @@ animation-name: slideStats2; } & li:nth-child(3) { - transform: translateX(-44vw); animation-delay: 0.65; animation-duration: 1s; animation-fill-mode: forwards; @@ -219,7 +222,6 @@ animation-name: slideStats3; } & li:nth-child(4) { - transform: translateX(-66vw); animation-delay: 0; animation-duration: 1s; animation-fill-mode: forwards; @@ -229,20 +231,30 @@ } div.venue.active p.illustration { - animation-delay: 1; - animation-duration: 1s; + opacity: 0; + animation-delay: 0s; + animation-duration: 0.25s; animation-fill-mode: forwards; animation-timing-function: linear; animation-name: venue-photo-1; } div.venue.active p.illustration.secondary { + opacity: 0; display: block; - animation-delay: 0; - animation-duration: 1s; + animation-delay: 0.25s; + animation-duration: 0.25s; animation-fill-mode: forwards; animation-timing-function: linear; animation-name: venue-photo-2; } + + /* div.be-partner p.read-more.active { + animation-delay: 0s; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-timing-function: linear; + animation-name: slideIn; + } */ } @media screen and (min-width: 800px) and (max-width: 1299px) { @@ -255,16 +267,13 @@ @media screen and (min-width: 1000px) { - header { + #container > header { display: grid; grid-template-columns: 200px 1fr 1fr; justify-content: space-between; align-items: center; gap: 3rem; } - header p { - font-size: calc(1.5em + 1vw); - } h1 {z-index: 1001;} diff --git a/src/pages/index.astro b/src/pages/index.astro index d731f12..68306c5 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -175,29 +175,48 @@ const og = { diff --git a/src/pages/offres-emploi.astro b/src/pages/offres-emploi.astro index db7524a..c226c65 100644 --- a/src/pages/offres-emploi.astro +++ b/src/pages/offres-emploi.astro @@ -14,21 +14,50 @@ import Layout from "../layouts/Layout.astro";
-
-
- Developeur Fullstack Senior -
-
Axa – Paris
-
Offre publiée le 15/01/26
+
+
+

+ Developeur Fullstack Senior +

+

Paris

+
+
+
+
Expérience
+
Minimum 5 ans
+
+
+
Salaire
+
36k à 55k
+
+
+
Publiée le
+
15/01/26
+
-
-
- Poste -
-
Partenaire – Localisation
-
5 ans et plus
-
Offre publiée le JJ/MM/AA
+
+
+
+

+ Developeur Fullstack Senior +

+

Paris

+
+
+
+
Expérience
+
Minimum 5 ans
+
+
+
Salaire
+
36k à 55k
+
+
+
Publiée le
+
15/01/26
+
+
diff --git a/src/pages/partner-[id].astro b/src/pages/partner-[id].astro index 73a3d28..7c30972 100644 --- a/src/pages/partner-[id].astro +++ b/src/pages/partner-[id].astro @@ -168,24 +168,75 @@ const video = videos[sponsor.data.id] as string | undefined
- Offres d'emploi chez {sponsor.data.name} +

Offres d'emploi chez {sponsor.data.name}
-
-
+
+
+

Developeur Fullstack Senior -

-
Paris
-
Offre publiée le 15/01/26
-
-
-
- Poste -
-
Localisation
-
5 ans et plus
-
Offre publiée le JJ/MM/AA
-
+ +

Paris

+ +
+
+
Expérience
+
Minimum 5 ans
+
+
+
Salaire
+
36k à 55k
+
+
+
Publiée le
+
15/01/26
+
+
+ +
+
+

+ Developeur Fullstack Senior +

+

Paris

+
+
+
+
Expérience
+
Minimum 5 ans
+
+
+
Salaire
+
36k à 55k
+
+
+
Publiée le
+
15/01/26
+
+
+
+
+
+

+ Developeur Fullstack Senior +

+

Paris

+
+
+
+
Expérience
+
Minimum 5 ans
+
+
+
Salaire
+
36k à 55k
+
+
+
Publiée le
+
15/01/26
+
+
+