Compare commits
No commits in common. "182def4a6d94d6148bed1f9b666fd416fde55020" and "f3bedbe8541d7aeab488441a1f7d81c4e6608749" have entirely different histories.
182def4a6d
...
f3bedbe854
489
css/editor-style.css
Normal file
489
css/editor-style.css
Normal file
|
|
@ -0,0 +1,489 @@
|
|||
.container {
|
||||
width: 100%;
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.container {
|
||||
max-width: 480px
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.container {
|
||||
max-width: 600px;
|
||||
padding-right: 2rem;
|
||||
padding-left: 2rem
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 782px) {
|
||||
.container {
|
||||
max-width: 782px
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
padding-right: 0rem;
|
||||
padding-left: 0rem
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.container {
|
||||
max-width: 1280px
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.container {
|
||||
max-width: 1440px
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1840px) {
|
||||
.container {
|
||||
max-width: 1840px
|
||||
}
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.m-8 {
|
||||
margin: 2rem
|
||||
}
|
||||
|
||||
.my-3 {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.75rem
|
||||
}
|
||||
|
||||
.my-8 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto
|
||||
}
|
||||
|
||||
.mb-8 {
|
||||
margin-bottom: 2rem
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem
|
||||
}
|
||||
|
||||
.mt-8 {
|
||||
margin-top: 2rem
|
||||
}
|
||||
|
||||
.mb-12 {
|
||||
margin-bottom: 3rem
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid
|
||||
}
|
||||
|
||||
.h-1 {
|
||||
height: 0.25rem
|
||||
}
|
||||
|
||||
.h-48 {
|
||||
height: 12rem
|
||||
}
|
||||
|
||||
.min-h-screen {
|
||||
min-height: 100vh
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.w-16 {
|
||||
width: 4rem
|
||||
}
|
||||
|
||||
.max-w-sm {
|
||||
max-width: 24rem
|
||||
}
|
||||
|
||||
.max-w-screen-md {
|
||||
max-width: 782px
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.gap-6 {
|
||||
gap: 1.5rem
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.25rem
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px
|
||||
}
|
||||
|
||||
.border-b {
|
||||
border-bottom-width: 1px
|
||||
}
|
||||
|
||||
.border-primary {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(19 111 99 / var(--tw-border-opacity))
|
||||
}
|
||||
|
||||
.border-red-400 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(248 113 113 / var(--tw-border-opacity))
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(19 111 99 / var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.bg-gray-200 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.bg-red-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(254 226 226 / var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.object-cover {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem
|
||||
}
|
||||
|
||||
.px-3 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem
|
||||
}
|
||||
|
||||
.py-8 {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem
|
||||
}
|
||||
|
||||
.py-3 {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem
|
||||
}
|
||||
|
||||
.text-5xl {
|
||||
font-size: 3rem;
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem
|
||||
}
|
||||
|
||||
.text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem
|
||||
}
|
||||
|
||||
.font-light {
|
||||
font-weight: 300
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.font-extrabold {
|
||||
font-weight: 800
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
.leading-tight {
|
||||
line-height: 1.25
|
||||
}
|
||||
|
||||
.text-gray-800 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(31 41 55 / var(--tw-text-opacity))
|
||||
}
|
||||
|
||||
.text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity))
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity))
|
||||
}
|
||||
|
||||
.text-gray-700 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity))
|
||||
}
|
||||
|
||||
.text-red-700 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(185 28 28 / var(--tw-text-opacity))
|
||||
}
|
||||
|
||||
.antialiased {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
|
||||
.shadow-md {
|
||||
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
||||
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 {
|
||||
margin: 2rem calc(50% - 50vw) !important;
|
||||
max-width: 100vw !important;
|
||||
width: 100vw
|
||||
}
|
||||
|
||||
.alignwide {
|
||||
margin: 2rem 0;
|
||||
max-width: 1280px !important
|
||||
}
|
||||
|
||||
.alignnone {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
height: auto;
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
.aligncenter {
|
||||
margin: 0.5rem auto;
|
||||
display: block
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.alignleft:not(.wp-block-button) {
|
||||
margin-right: 0.5rem;
|
||||
float: left
|
||||
}
|
||||
|
||||
.alignright:not(.wp-block-button) {
|
||||
margin-left: 0.5rem;
|
||||
float: right
|
||||
}
|
||||
|
||||
.wp-block-button.alignleft a {
|
||||
float: left;
|
||||
margin-right: 1rem
|
||||
}
|
||||
|
||||
.wp-block-button.alignright a {
|
||||
float: right;
|
||||
margin-left: 1rem
|
||||
}
|
||||
}
|
||||
|
||||
.wp-caption {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.wp-caption img {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
.wp-caption-text {
|
||||
font-size: 0.875rem;
|
||||
color: #4b5563
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
|
||||
}
|
||||
|
||||
.wp-block {
|
||||
max-width: 1280px
|
||||
}
|
||||
|
||||
.wp-block[data-align="wide"] {
|
||||
max-width: 1280px
|
||||
}
|
||||
|
||||
.wp-block[data-align="full"] {
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
.wp-block.alignfull {
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
.acf-block-component {
|
||||
/* @apply bg-red-500; */
|
||||
}
|
||||
|
||||
.acf-block-fields {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 782px
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.sm\:inline {
|
||||
display: inline
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 782px) {
|
||||
.md\:my-6 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem
|
||||
}
|
||||
|
||||
.md\:flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.md\:w-1\/2 {
|
||||
width: 50%
|
||||
}
|
||||
|
||||
.md\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.md\:text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.lg\:flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.lg\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.lg\:items-center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.lg\:justify-between {
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.lg\:text-5xl {
|
||||
font-size: 3rem;
|
||||
line-height: 1
|
||||
}
|
||||
}
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</div>
|
||||
|
||||
<div class="dynamiques-redirector">
|
||||
<a href="<?php echo get_site_url(2); ?>">
|
||||
<a href="<?php echo get_bloginfo('url'); ?>">
|
||||
Revue Dynamiques
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
89
js/app.js
Normal file
89
js/app.js
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
(() => {
|
||||
// resources/js/header.js
|
||||
function menuInit() {
|
||||
let main_navigation = document.querySelector("#primary-menu");
|
||||
const header = document.querySelector("#primary-header");
|
||||
const primary_menu = header.querySelector("#primary-menu");
|
||||
const burgerMenuToggle = header.querySelector("#burger-menu-toggle");
|
||||
const submenuToggles = primary_menu.querySelectorAll(".menu-item-submenu-toggle");
|
||||
burgerMenuToggle.addEventListener("click", function(e) {
|
||||
e.preventDefault();
|
||||
header.classList.toggle("nav-open");
|
||||
burgerMenuToggle.toggleAttribute("aria-expanded");
|
||||
gsap.from(primary_menu, {
|
||||
opacity: 20,
|
||||
y: "-100vh",
|
||||
duration: 0.5,
|
||||
ease: Power4.easeOut
|
||||
});
|
||||
});
|
||||
document.addEventListener("focusin", (e) => {
|
||||
const header2 = document.querySelector("#primary-header");
|
||||
if (header2.classList.contains("nav-open") && !header2.contains(document.activeElement)) {
|
||||
header2.classList.remove("nav-open");
|
||||
burgerMenuToggle.setAttribute("aria-expanded", false);
|
||||
burgerMenuToggle.focus();
|
||||
}
|
||||
}, true);
|
||||
submenuToggles.forEach((button) => {
|
||||
button.addEventListener("click", function(e) {
|
||||
let isExpanded = button.getAttribute("aria-expanded") === "true";
|
||||
button.setAttribute("aria-expanded", !isExpanded);
|
||||
button.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu-open");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// resources/js/app.js
|
||||
window.addEventListener("load", function() {
|
||||
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"
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
|
@ -18,9 +18,6 @@
|
|||
@import './components/article-caroussel.css';
|
||||
@import './components/content-meta.css';
|
||||
@import './components/article-tag.css';
|
||||
@import './components/page-header.css';
|
||||
@import './components/revues-grid.css';
|
||||
@import './components/card-revue.css';
|
||||
|
||||
/* ########### LAYOUT ############ */
|
||||
@import './layout/nav.css';
|
||||
|
|
@ -38,7 +35,6 @@
|
|||
@import './blocks/dernieres-dynamiques.css';
|
||||
@import './blocks/revues-precedentes.css';
|
||||
@import './blocks/cta.css';
|
||||
@import './blocks/team-authors.css';
|
||||
|
||||
/* Home */
|
||||
@import '../../template-blocks/home/home-header/home-header.css';
|
||||
|
|
|
|||
|
|
@ -3,40 +3,4 @@
|
|||
@apply border-primary border bg-transparent text-primary;
|
||||
}
|
||||
|
||||
.cta {
|
||||
@apply block w-fit px-6 py-3;
|
||||
&--classic {
|
||||
@apply border-primary border bg-transparent text-primary;
|
||||
|
||||
&:hover {
|
||||
@apply bg-primary text-white;
|
||||
svg rect,
|
||||
svg polyline {
|
||||
@apply !stroke-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&--rounded {
|
||||
@apply rounded-full;
|
||||
}
|
||||
&--primary {
|
||||
@apply border-primary border bg-primary text-white;
|
||||
}
|
||||
|
||||
&--mailing {
|
||||
}
|
||||
|
||||
&--has-icon {
|
||||
@apply flex items-center gap-4;
|
||||
|
||||
svg {
|
||||
@apply w-6;
|
||||
|
||||
rect,
|
||||
polyline {
|
||||
@apply stroke-primary;
|
||||
stroke-width: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,5 +56,5 @@ body.wp-admin h6:not(.editor-visual-editor h6) {
|
|||
}
|
||||
|
||||
.subtitle-big {
|
||||
@apply text-7xl font-normal uppercase fjalla pb-6;
|
||||
@apply text-7xl font-normal uppercase;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.block-dernieres-dynamiques {
|
||||
@apply bg-primary text-white pt-20;
|
||||
overflow: visible !important;
|
||||
@apply bg-primary text-white px-12 xl:px-24 pt-20;
|
||||
overflow: hidden;
|
||||
|
||||
*:not(.article-card *) {
|
||||
@apply text-white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
.team-authors {
|
||||
h2 {
|
||||
}
|
||||
|
||||
.author-card {
|
||||
@apply bg-white p-12 border border-carhop-green-700;
|
||||
|
||||
&__thumbnail {
|
||||
@apply w-full h-32 object-cover mb-6 border border-carhop-green-700 relative;
|
||||
|
||||
img {
|
||||
@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 object-cover object-center bg-carhop-green-100;
|
||||
width: calc(100% - 16px);
|
||||
height: calc(100% - 16px);
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
}
|
||||
&__name {
|
||||
@apply text-2xl font-medium mb-4;
|
||||
}
|
||||
|
||||
&__email {
|
||||
@apply mt-4;
|
||||
|
||||
&:hover {
|
||||
@apply cta--primary;
|
||||
}
|
||||
}
|
||||
|
||||
&__bio {
|
||||
}
|
||||
}
|
||||
.comity-type {
|
||||
@apply pt-12;
|
||||
|
||||
&__title {
|
||||
@apply text-4xl font-medium mb-4;
|
||||
}
|
||||
|
||||
&__list {
|
||||
@apply grid grid-cols-2 md:grid-cols-3 gap-12;
|
||||
}
|
||||
|
||||
&__item {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.card-revue {
|
||||
@apply p-12 border border-primary;
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
.page-header {
|
||||
@apply bg-primary text-white py-16 items-center;
|
||||
|
||||
&__inner {
|
||||
@apply grid grid-cols-1 lg:grid-cols-2;
|
||||
grid-template-columns: 61.8fr 38.2fr;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@apply text-white;
|
||||
}
|
||||
&__subtitle {
|
||||
@apply text-white text-6xl;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.revues-grid {
|
||||
&__list {
|
||||
@apply grid grid-cols-1 md:grid-cols-2 gap-4;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
footer {
|
||||
@apply w-full mx-auto px-12;
|
||||
@apply mx-auto px-12;
|
||||
.branding {
|
||||
@apply w-full mb-12 grid relative mt-24 md:mt-32 xl:mt-48;
|
||||
@apply w-full mb-12 grid relative pt-64;
|
||||
z-index: -1;
|
||||
.square,
|
||||
.rectangle-rotated {
|
||||
|
|
@ -17,32 +17,12 @@ footer {
|
|||
}
|
||||
|
||||
&__shapes {
|
||||
@apply w-full max-w-full grid gap-2 md:gap-24 xl:gap-32 2xl:gap-48 grid-cols-4 h-full absolute left-0;
|
||||
@apply w-full grid gap-4 grid-cols-4 h-full absolute left-0;
|
||||
top: 0px;
|
||||
|
||||
div.shape {
|
||||
@apply shrink flex flex-col w-full h-full;
|
||||
/* background-color: rgba(219, 234, 254, 0.5); */
|
||||
top: 0;
|
||||
flex-shrink: 1;
|
||||
aspect-ratio: 1/1;
|
||||
justify-self: center;
|
||||
transform-origin: bottom center;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
}
|
||||
div.square:first-child,
|
||||
div.rectangle-rotated {
|
||||
@apply justify-end;
|
||||
}
|
||||
img {
|
||||
@apply w-full h-fit object-contain;
|
||||
aspect-ratio: 1/1;
|
||||
flex-grow: 0;
|
||||
width: 100%;
|
||||
}
|
||||
img:last-child {
|
||||
@apply object-right;
|
||||
@apply h-64 shrink;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
.website_logo {
|
||||
@apply w-72 h-auto;
|
||||
}
|
||||
|
||||
.primary-menu-container {
|
||||
@apply mx-auto
|
||||
bg-primary
|
||||
|
|
@ -9,8 +5,8 @@
|
|||
relative
|
||||
h-fit
|
||||
py-8
|
||||
px-8
|
||||
2xl:px-20
|
||||
px-8
|
||||
2xl:px-32
|
||||
my-0;
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
:where(.content-section) {
|
||||
.content-section__inner {
|
||||
@apply max-w-screen-2xl mx-auto px-12 xl:px-20 py-16;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="mail" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37.1 30.23">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<rect class="cls-1" x="1" y="1" width="35.1" height="28.23"/>
|
||||
<polyline class="cls-1" points="1 1 18.55 16.13 36.1 1"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 381 B |
|
|
@ -1,6 +1,57 @@
|
|||
import menuInit from './header';
|
||||
import initFooterShapes from './footer';
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
menuInit();
|
||||
initFooterShapes();
|
||||
|
||||
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,78 +0,0 @@
|
|||
export default function initFooterShapes() {
|
||||
gsap.fromTo(
|
||||
'.shape.square',
|
||||
{
|
||||
y: '-60%',
|
||||
rotation: 0,
|
||||
},
|
||||
{
|
||||
scrollTrigger: {
|
||||
trigger: '.branding',
|
||||
start: 'top bottom',
|
||||
end: 'bottom top',
|
||||
markers: true,
|
||||
scrub: 0.2,
|
||||
},
|
||||
y: '80%',
|
||||
duration: 2,
|
||||
ease: 'none',
|
||||
}
|
||||
);
|
||||
|
||||
gsap.fromTo(
|
||||
'.shape.circle',
|
||||
{
|
||||
y: '-60%',
|
||||
},
|
||||
{
|
||||
scrollTrigger: {
|
||||
trigger: '.branding',
|
||||
start: 'top bottom',
|
||||
end: 'bottom top',
|
||||
markers: true,
|
||||
scrub: 0.4,
|
||||
},
|
||||
y: '30%',
|
||||
duration: 2,
|
||||
ease: 'none',
|
||||
}
|
||||
);
|
||||
|
||||
gsap.fromTo(
|
||||
'.shape.rectangle-rotated',
|
||||
{
|
||||
y: '-60%',
|
||||
},
|
||||
{
|
||||
scrollTrigger: {
|
||||
trigger: '.branding',
|
||||
start: 'top bottom',
|
||||
end: 'bottom top',
|
||||
markers: true,
|
||||
scrub: 0.6,
|
||||
},
|
||||
y: '30%',
|
||||
duration: 2,
|
||||
ease: 'none',
|
||||
}
|
||||
);
|
||||
|
||||
gsap.fromTo(
|
||||
'.shape.rectangle-vertical',
|
||||
{
|
||||
y: '-60%',
|
||||
},
|
||||
{
|
||||
scrollTrigger: {
|
||||
trigger: '.branding',
|
||||
start: 'top bottom',
|
||||
end: 'bottom top',
|
||||
markers: true,
|
||||
scrub: 0.3,
|
||||
},
|
||||
y: '60%',
|
||||
duration: 2,
|
||||
ease: 'none',
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
@ -3,18 +3,10 @@
|
|||
?>
|
||||
<div class="branding">
|
||||
<div class="branding__shapes">
|
||||
<div class="shape square">
|
||||
<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icon-collections.svg" alt="Carhop">
|
||||
</div>
|
||||
<div class="shape circle">
|
||||
<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icon-publications.svg" alt="Carhop">
|
||||
</div>
|
||||
<div class="shape rectangle-rotated">
|
||||
<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icon-activites.svg" alt="Carhop">
|
||||
</div>
|
||||
<div class="shape rectangle-vertical">
|
||||
<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icon-dbmob.svg" alt="Carhop">
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user