Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Antoine:270c783ecbc652558cf5479d815ca99e7ccb4285
Branches Tags
Antoine:main
..
compare: Antoine:f3bedbe8541d7aeab488441a1f7d81c4e6608749
Branches Tags
Antoine:main

17 Commits
270c783ecb ... f3bedbe854

Author SHA1 Message Date
Antoine M
f3bedbe854 STYLE enhance footer layout with grid and z-index adjustments, and add parallax animation for improved visual dynamics
All checks were successful
continuous-integration/drone/push Build is passing
Details
2025-05-23 18:04:28 +02:00
Antoine M
961e727631 STYLE add flex layout and gap to article tags for improved spacing 2025-05-23 18:04:16 +02:00
Antoine M
c6b059f621 STYLE update chapter-section layout and typography, enhancing content structure and responsiveness 2025-05-23 18:04:04 +02:00
Antoine M
6f9693927d rebundling 2025-05-23 18:03:51 +02:00
Antoine M
ee197a001c FEAT add branding shapes to footer for enhanced visual appeal 2025-05-23 18:03:34 +02:00
Antoine M
a5f1a0625c STYLE refine layout and enhance card styling in revues-precedentes.css 2025-05-23 18:03:27 +02:00
Antoine M
45c065c4a4 FEAT add GSAP animations for shapes on scroll in branding section 2025-05-23 18:03:18 +02:00
Antoine M
e48da4b12c introducing file 2025-05-23 18:03:09 +02:00
Antoine M
e2710d1578 STYLE add new typography classes for small titles and big subtitles 2025-05-23 18:02:53 +02:00
Antoine M
b144c95faa STYLE add import for 'cta' block CSS 2025-05-23 18:02:15 +02:00
Antoine M
9d0ae8e0e3 UPLOAD introducing the assets 2025-05-23 18:02:02 +02:00
Antoine M
1e9106361d STYLE update font weight for subscribe-infolettre title to medium 2025-05-23 18:01:50 +02:00
Antoine M
d9e819e17d FEAT add GSAP and ScrollTrigger scripts for enhanced animations 2025-05-23 18:01:37 +02:00
Antoine M
5663f4b583 FEATURE including carhop green 2025-05-23 18:01:13 +02:00
Antoine M
c0f0a12b3b FEATURE including carhop green 2025-05-23 18:01:07 +02:00
Antoine M
69f5d3392a updloading screenshot 2025-05-23 18:00:52 +02:00
Antoine M
c4732b5187 fix 2025-05-23 18:00:43 +02:00
21 changed files with 286 additions and 52 deletions
Show Stats Expand all files Collapse all files

13
404.php
View File

@ -1,24 +1,27 @@
<!DOCTYPE html> <!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js"> <html <?php language_attributes(); ?> class="no-js">
<head> <head>
<meta charset="<?php bloginfo( 'charset' ); ?>"> <meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?> <?php wp_head(); ?>
</head> </head>
<body class="antialiased"> <body class="antialiased">
<div class="md:flex min-h-screen"> <div class="md:flex min-h-screen">
<div class="w-full md:w-1/2 flex items-center justify-center"> <div class="w-full md:w-1/2 flex items-center justify-center">
<div class="max-w-sm m-8"> <div class="max-w-sm m-8">
<div class="text-5xl md:text-15xl text-gray-800 border-primary border-b">404</div> <div class="text-5xl md:text-15xl text-gray-800 border-primary border-b">404</div>
<div class="w-16 h-1 bg-purple-light my-3 md:my-6"></div> <div class="w-16 h-1 bg-purple-light my-3 md:my-6"></div>
<p class="text-gray-800 text-2xl md:text-3xl font-light mb-8"><?php _e( 'Sorry, the page you are looking for could not be found.', 'tailpress' ); ?></p> <p class="text-gray-800 text-2xl md:text-3xl font-light mb-8"><?php _e('Sorry, the page you are looking for could not be found.', 'tailpress'); ?></p>
<a href="<?php echo get_bloginfo( 'url' ); ?>" class="bg-primary px-4 py-2 rounded text-white"> <a href="<?php echo get_bloginfo('url'); ?>" class="bg-primary px-4 py-2 rounded text-white">
<?php _e( 'Go Home', 'tailpress' ); ?> <?php _e('Go Home', 'tailpress'); ?>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html>
</html>

4
css/editor-style.css
View File

@ -342,6 +342,10 @@
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
} }
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.alignfull { .alignfull {
margin: 2rem calc(50% - 50vw) !important; margin: 2rem calc(50% - 50vw) !important;
max-width: 100vw !important; max-width: 100vw !important;

4
includes/init.php
View File

@ -76,7 +76,6 @@ add_filter('walker_nav_menu_start_el', 'wrap_parent_menu_item_buttons', 10, 4);
------------------------------------------------------------------*/ ------------------------------------------------------------------*/
function carhop_enqueue_scripts() function carhop_enqueue_scripts()
{ {
$theme = wp_get_theme(); $theme = wp_get_theme();
@ -90,6 +89,9 @@ function carhop_enqueue_scripts()
// Enqueue Swiper CSS and JS // Enqueue Swiper CSS and JS
wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css'); wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');
wp_enqueue_script('swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', array(), null, true); wp_enqueue_script('swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', array(), null, true);
wp_enqueue_script('gsap-js', 'https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js', array(), false, true);
wp_enqueue_script('gsap-st', 'https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js', array('gsap-js'), false, true);
} }
/* ---------------------------------------------------------------- /* ----------------------------------------------------------------

48
js/app.js
View File

@ -37,5 +37,53 @@
// resources/js/app.js // resources/js/app.js
window.addEventListener("load", function() { window.addEventListener("load", function() {
menuInit(); menuInit();
gsap.to(".shape.square", {
scrollTrigger: {
trigger: ".branding",
start: "top bottom",
end: "bottom top",
markers: true,
scrub: 0.2
},
y: "300%",
duration: 2,
ease: "none"
});
gsap.to(".shape.circle", {
scrollTrigger: {
trigger: ".branding",
start: "top bottom",
end: "bottom top",
markers: true,
scrub: 0.4
},
y: "175%",
duration: 2,
ease: "none"
});
gsap.to(".shape.rectangle-rotated", {
scrollTrigger: {
trigger: ".branding",
start: "top bottom",
end: "bottom top",
markers: true,
scrub: 0.6
},
y: "340%",
duration: 2,
ease: "none"
});
gsap.to(".shape.rectangle-vertical", {
scrollTrigger: {
trigger: ".branding",
start: "top bottom",
end: "bottom top",
markers: true,
scrub: 0.3
},
y: "150%",
duration: 2,
ease: "none"
});
}); });
})(); })();

1
resources/css/app.css
View File

@ -34,6 +34,7 @@
@import './blocks/subscribe-infolettre.css'; @import './blocks/subscribe-infolettre.css';
@import './blocks/dernieres-dynamiques.css'; @import './blocks/dernieres-dynamiques.css';
@import './blocks/revues-precedentes.css'; @import './blocks/revues-precedentes.css';
@import './blocks/cta.css';
/* Home */ /* Home */
@import '../../template-blocks/home/home-header/home-header.css'; @import '../../template-blocks/home/home-header/home-header.css';

8
resources/css/base/typography.css
View File

@ -50,3 +50,11 @@ body.wp-admin h6:not(.editor-visual-editor h6) {
.fjalla { .fjalla {
font-family: 'Fjalla One', sans-serif; font-family: 'Fjalla One', sans-serif;
} }
.title-small {
@apply text-base mb-6 font-bold tracking-wider uppercase nunito;
}
.subtitle-big {
@apply text-7xl font-normal uppercase;
}

86
resources/css/blocks/chapter-section.css
View File

@ -1,46 +1,54 @@
.chapter-section { .chapter-section {
@apply flex items-center justify-center gap-8 2xl:gap-12 !my-0 px-12; @apply flex items-center justify-between gap-8 2xl:gap-12 !my-0 px-12;
/* min-height: 80vh; */ /* min-height: 80vh; */
@apply xl:pt-32; @apply xl:py-32 2xl:py-48;
@apply max-w-screen-2xl;
@apply mx-auto; @apply mx-auto;
/* & + *:not(.simple-screen) { /* & + *:not(.simple-screen) {
@apply xl:mt-32; @apply xl:mt-32;
} */ } */
&--right {
@apply flex-row-reverse;
}
&__content {
flex-shrink: 0;
@apply max-w-lg;
p {
@apply text-neutral-600 max-w-sm;
}
}
&__innerblocks {
/* @apply max-w-xl; */
p {
}
}
&__cover {
@apply object-contain;
min-width: 0;
flex-shrink: 1;
max-width: 100%; /* Empêche de dépasser son conteneur */
display: block;
&--large { h2 {
@apply !h-96; @apply title-small;
} }
&--grande { h3 {
@apply !h-80; @apply subtitle-big;
} }
&--medium { &--right {
@apply !h-64; @apply flex-row-reverse;
} }
&--small { &__content {
@apply !h-12; /* flex-shrink: 0; */
} @apply max-w-3xl;
} p {
@apply text-neutral-600 max-w-sm;
}
}
&__innerblocks {
/* @apply max-w-xl; */
p {
}
}
&__cover {
@apply object-contain;
min-width: 0;
flex-shrink: 1;
max-width: 100%; /* Empêche de dépasser son conteneur */
display: block;
&--large {
@apply !h-96;
}
&--grande {
@apply !h-80;
}
&--medium {
@apply !h-64;
}
&--small {
@apply !h-12;
}
}
} }

0
resources/css/blocks/cta.css Normal file
View File

53
resources/css/blocks/revues-precedentes.css
View File

@ -3,7 +3,7 @@
.block-revues-precedentes__header { .block-revues-precedentes__header {
} }
&__inner { &__inner {
@apply max-w-screen-2xl mx-auto px-12 xl:px-24; @apply max-w-screen-2xl mx-auto;
} }
&__header { &__header {
@ -23,8 +23,7 @@
} }
.card-revue { .card-revue {
@apply grid gap-12 2xl:gap-24 pb-24; @apply grid gap-y-12 2xl:gap-y-16 pb-24 gap-x-12 2xl:gap-x-24;
grid-template-columns: 61.8fr 38.2fr; grid-template-columns: 61.8fr 38.2fr;
.content-meta { .content-meta {
@ -35,7 +34,53 @@
} }
&__content { &__content {
@apply p-6; h4.title {
@apply uppercase text-7xl font-normal pb-8;
}
h5.edito-title {
@apply text-2xl font-bold uppercase pb-8;
}
}
&__issue-thumbnail-wrapper {
@apply relative w-full;
.card-background {
@apply absolute border-primary border bg-white top-20 left-8;
height: 94%;
width: 104%;
transform: perspective(800px) rotateY(10deg)
skewX(1deg) rotateZ(4deg) rotateX(1deg)
scale(0.98) translateY(-2px);
z-index: 0;
&::before {
@apply content-[''] absolute inset-0 bg-carhop-purple-100 w-full h-full;
width: calc(100% - 42px);
height: calc(100% - 42px);
left: 21px;
top: 21px;
z-index: 0;
}
}
}
&__issue-thumbnail {
@apply bg-white border-primary border relative;
/* transform: perspective(800px) rotateY(10deg) skewX(2deg); */
height: 330px;
position: relative;
z-index: 10;
img {
width: calc(100% - 42px);
height: calc(100% - 42px);
left: 21px;
top: 21px;
object-fit: cover;
position: relative;
z-index: 2;
}
} }
} }
} }

2
resources/css/blocks/subscribe-infolettre.css
View File

@ -19,7 +19,7 @@
h5, h5,
h6, h6,
&__title { &__title {
@apply font-bold !text-white; @apply !font-medium !text-white;
} }
&__content { &__content {

3
resources/css/components/article-tag.css
View File

@ -5,3 +5,6 @@
@apply bg-primary text-white; @apply bg-primary text-white;
} }
} }
.article-tags {
@apply flex gap-2;
}

36
resources/css/layout/footer.css
View File

@ -1,7 +1,30 @@
footer { footer {
@apply mx-auto px-12 pt-64; @apply mx-auto px-12;
.branding { .branding {
@apply w-full mb-12; @apply w-full mb-12 grid relative pt-64;
z-index: -1;
.square,
.rectangle-rotated {
z-index: -1;
}
.circle,
.rectangle-vertical {
z-index: -3;
}
.website-title {
z-index: -2;
}
&__shapes {
@apply w-full grid gap-4 grid-cols-4 h-full absolute left-0;
top: 0px;
img {
@apply h-64 shrink;
flex-shrink: 1;
}
}
.website-title { .website-title {
@apply w-full; @apply w-full;
@ -26,3 +49,12 @@ footer {
} }
} }
} }
@keyframes parallax {
from {
transform: translateY(-200px);
}
to {
transform: translateY(200px);
}
}

1
resources/img/icon-activites.svg Normal file
View File

@ -0,0 +1 @@
<svg width="33.243" xmlns="http://www.w3.org/2000/svg" height="33.243" id="screenshot-a2556a6c-3214-8099-8006-165931dde031" viewBox="-0.121 -0.121 33.243 33.243" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-a2556a6c-3214-8099-8006-165931dde031" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-a2556a6c-3214-8099-8006-165931dde032" style="display: none;"><g class="fills" id="fills-a2556a6c-3214-8099-8006-165931dde032"><rect width="32.99999999999818" height="32.997226940004225" x="-0.000010239060429739766" transform="matrix(0.999973, 0.007385, -0.007385, 0.999973, 0.122307, -0.121397)" style="fill: rgb(214, 195, 255); fill-opacity: 1;" ry="0" fill="none" rx="0" y="0.0027730221845558845"/></g></g><g id="shape-a2556a6c-3214-8099-8006-165931dde033"/><g id="shape-a2556a6c-3214-8099-8006-165931dde034"><g class="fills" id="fills-a2556a6c-3214-8099-8006-165931dde034"><rect width="28.870975068950884" height="17.792708437504757" class="cls-1" x="2.0645861314221747" transform="matrix(0.712339, -0.701836, 0.701896, 0.712280, -6.833029, 16.326982)" style="fill: rgb(214, 195, 255); fill-opacity: 1;" ry="0" rx="0" y="7.601056546915743"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
resources/img/icon-collections.svg Normal file
View File

@ -0,0 +1 @@
<svg width="30.998" xmlns="http://www.w3.org/2000/svg" height="30.996" id="screenshot-a2556a6c-3214-8099-8006-165931dde038" viewBox="-4.54 -4.539 30.998 30.996" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-a2556a6c-3214-8099-8006-165931dde038"><g class="fills" id="fills-a2556a6c-3214-8099-8006-165931dde038"><rect width="21.9185463932713" height="21.918546393260385" class="cls-1" x="0" transform="matrix(0.701889, 0.712286, -0.712333, 0.701842, 11.073723, -4.538540)" style="fill: rgb(10, 211, 255); fill-opacity: 1;" ry="0" rx="0" y="0"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 592 B

1
resources/img/icon-dbmob.svg Normal file
View File

@ -0,0 +1 @@
<svg width="20.236" xmlns="http://www.w3.org/2000/svg" height="32.147" id="screenshot-a2556a6c-3214-8099-8006-165931dde043" viewBox="-0.118 -0.073 20.236 32.147" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-a2556a6c-3214-8099-8006-165931dde043"><g class="fills" id="fills-a2556a6c-3214-8099-8006-165931dde043"><rect width="19.99999999999875" height="31.99999999999534" class="cls-1" x="0" transform="matrix(0.999973, 0.007385, -0.007385, 0.999973, 0.118427, -0.073410)" style="fill: rgb(174, 33, 84); fill-opacity: 1;" ry="0" rx="0" y="0"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 591 B

1
resources/img/icon-publications.svg Normal file
View File

@ -0,0 +1 @@
<svg width="24.177" xmlns="http://www.w3.org/2000/svg" height="24.177" id="screenshot-a2556a6c-3214-8099-8006-165931dde048" viewBox="-0.088 -0.088 24.177 24.177" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-a2556a6c-3214-8099-8006-165931dde048"><g class="fills" id="fills-a2556a6c-3214-8099-8006-165931dde048"><ellipse cx="11.999999999999773" cy="11.999999999999261" rx="11.999999999999773" ry="11.999999999999261" transform="matrix(0.999973, 0.007385, -0.007385, 0.999973, 0.088943, -0.088289)" style="fill: rgb(255, 166, 48); fill-opacity: 1;"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 598 B

52
resources/js/app.js
View File

@ -2,4 +2,56 @@ import menuInit from './header';
window.addEventListener('load', function () { window.addEventListener('load', function () {
menuInit(); menuInit();
gsap.to('.shape.square', {
scrollTrigger: {
trigger: '.branding',
start: 'top bottom',
end: 'bottom top',
markers: true,
scrub: 0.2,
},
y: '300%',
duration: 2,
ease: 'none',
});
gsap.to('.shape.circle', {
scrollTrigger: {
trigger: '.branding',
start: 'top bottom',
end: 'bottom top',
markers: true,
scrub: 0.4,
},
y: '175%',
duration: 2,
ease: 'none',
});
gsap.to('.shape.rectangle-rotated', {
scrollTrigger: {
trigger: '.branding',
start: 'top bottom',
end: 'bottom top',
markers: true,
scrub: 0.6,
},
y: '340%',
duration: 2,
ease: 'none',
});
gsap.to('.shape.rectangle-vertical', {
scrollTrigger: {
trigger: '.branding',
start: 'top bottom',
end: 'bottom top',
markers: true,
scrub: 0.3,
},
y: '150%',
duration: 2,
ease: 'none',
});
}); });

BIN
screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 682 KiB

After

Width:  |  Height:  |  Size: 29 KiB

13
tailwind.config.js
View File

@ -30,6 +30,19 @@ module.exports = {
...tailpress.colorMapper( ...tailpress.colorMapper(
tailpress.theme('settings.color.palette', theme) tailpress.theme('settings.color.palette', theme)
), ),
'carhop-green': {
50: '#f1fcf9',
100: '#cef9ee',
200: '#9df2de',
300: '#64e4c9',
400: '#34cdb2',
500: '#1bb198',
600: '#138e7d',
700: getBaseColor('carhop-green'), // Base Color
800: '#145b52',
900: '#164b45',
950: '#062d2a',
},
'carhop-orange': { 'carhop-orange': {
50: '#fff8eb', 50: '#fff8eb',
100: '#ffebc6', 100: '#ffebc6',

6
template-parts/footer.php
View File

@ -2,6 +2,12 @@
?> ?>
<div class="branding"> <div class="branding">
<div class="branding__shapes">
<img class="shape square" src="<?php echo get_template_directory_uri(); ?>/resources/img/icon-collections.svg" alt="Carhop">
<img class="shape circle" src="<?php echo get_template_directory_uri(); ?>/resources/img/icon-publications.svg" alt="Carhop">
<img class="shape rectangle-rotated" src="<?php echo get_template_directory_uri(); ?>/resources/img/icon-activites.svg" alt="Carhop">
<img class="shape rectangle-vertical" src="<?php echo get_template_directory_uri(); ?>/resources/img/icon-dbmob.svg" alt="Carhop">
</div>
<img class="website-title" src="<?php echo get_template_directory_uri(); ?>/resources/img/carhop-textual-logo.svg" alt="Carhop"> <img class="website-title" src="<?php echo get_template_directory_uri(); ?>/resources/img/carhop-textual-logo.svg" alt="Carhop">
</div> </div>

5
theme.json
View File

@ -14,6 +14,11 @@
"slug": "primary", "slug": "primary",
"color": "#136F63" "color": "#136F63"
}, },
{
"name": "Carhop Green",
"slug": "carhop-green",
"color": "#136f63"
},
{ {
"name": "Carhop Orange", "name": "Carhop Orange",
"slug": "carhop-orange", "slug": "carhop-orange",