removing unused bundled files

css/editor-style.css

@@ -1,489 +0,0 @@
-.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
-  }
-}

header.php

@@ -35,7 +35,7 @@
 				</div>
 
 				<div class="dynamiques-redirector">
-					<a href="<?php echo get_bloginfo('url'); ?>">
+					<a href="<?php echo get_site_url(2); ?>">
 						Revue Dynamiques
 					</a>
 				</div>

js/app.js

@@ -1,89 +0,0 @@
-(() => {
-  // 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"
-    });
-  });
-})();

resources/css/app.css

@@ -18,6 +18,9 @@
 @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';
@@ -35,6 +38,7 @@
 @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';

resources/css/base/buttons.css

@@ -3,4 +3,40 @@
   @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;
+      }
+    }
+  }
+}

resources/css/base/typography.css

@@ -56,5 +56,5 @@ body.wp-admin h6:not(.editor-visual-editor h6) {
 }
 
 .subtitle-big {
-  @apply text-7xl font-normal uppercase;
+  @apply text-7xl font-normal uppercase fjalla pb-6;
 }

resources/css/blocks/dernieres-dynamiques.css

@@ -1,7 +1,6 @@
 .block-dernieres-dynamiques {
-  @apply bg-primary text-white px-12 xl:px-24 pt-20;
+  @apply bg-primary text-white  pt-20;
-  overflow: hidden;
+  overflow: visible !important;
-
   *:not(.article-card *) {
     @apply text-white;
   }

resources/css/blocks/team-authors.css

@@ -0,0 +1,48 @@
+.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 {
+    }
+  }
+}

resources/css/components/card-revue.css

@@ -0,0 +1,3 @@
+.card-revue {
+  @apply p-12 border border-primary;
+}

resources/css/components/page-header.css

@@ -0,0 +1,15 @@
+.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;
+  }
+}

resources/css/components/revues-grid.css

@@ -0,0 +1,5 @@
+.revues-grid {
+  &__list {
+    @apply grid grid-cols-1 md:grid-cols-2  gap-4;
+  }
+}

resources/css/layout/footer.css

@@ -1,7 +1,7 @@
 footer {
-  @apply mx-auto px-12;
+  @apply w-full mx-auto px-12;
   .branding {
-    @apply w-full mb-12 grid relative  pt-64;
+    @apply w-full mb-12 grid relative mt-24 md:mt-32 xl:mt-48;
     z-index: -1;
     .square,
     .rectangle-rotated {
@@ -17,12 +17,32 @@ footer {
     }
 
     &__shapes {
-      @apply w-full grid gap-4 grid-cols-4  h-full absolute  left-0;
+      @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;
       top: 0px;
 
-      img {
+      div.shape {
-        @apply h-64 shrink;
+        @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;
       }
     }
 

resources/css/layout/nav.css

@@ -1,3 +1,7 @@
+.website_logo {
+  @apply w-72 h-auto;
+}
+
 .primary-menu-container {
   @apply mx-auto  
 	bg-primary 
@@ -6,7 +10,7 @@
 	h-fit
 	py-8
 	px-8
-	2xl:px-32
+	2xl:px-20
  	my-0;
 
   a {

resources/css/layout/section.css

@@ -0,0 +1,6 @@
+:where(.content-section) {
+  .content-section__inner {
+    @apply max-w-screen-2xl mx-auto px-12 xl:px-20 py-16;
+    overflow: hidden;
+  }
+}

resources/img/icons/carhop-mail.svg

@@ -0,0 +1,14 @@
+<?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>

resources/js/app.js

@@ -1,57 +1,6 @@
 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',
-  });
 });

resources/js/footer.js

@@ -0,0 +1,78 @@
+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',
+    }
+  );
+}

template-parts/footer.php

@@ -3,10 +3,18 @@
 ?>
 <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">
+		<div class="shape square">
-		<img class="shape circle" src="<?php echo get_template_directory_uri(); ?>/resources/img/icon-publications.svg" alt="Carhop">
+			<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icon-collections.svg" alt="Carhop">
-		<img class="shape rectangle-rotated" src="<?php echo get_template_directory_uri(); ?>/resources/img/icon-activites.svg" alt="Carhop">
+		</div>
-		<img class="shape rectangle-vertical" src="<?php echo get_template_directory_uri(); ?>/resources/img/icon-dbmob.svg" alt="Carhop">
+		<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>
 	</div>
 	<img class="website-title" src="<?php echo get_template_directory_uri(); ?>/resources/img/carhop-textual-logo.svg" alt="Carhop">
 </div>