FEATURE Add alternate picture rotation functionality to enhance image presentation

resources/css/app.css

@@ -11,6 +11,7 @@
 @import './base/links.css';
 @import './base/animation.css';
 @import './base/format-types.css';
+@import './base/carhop-specific-base.css';
 
 /* ########### FORMS ############ */
 @import './forms/forms.css';
@@ -71,11 +72,19 @@
 @import './blocks/our-collections.css';
 @import './blocks/featured-news.css';
 @import './blocks/notice-panel.css';
+@import './blocks/story-timeline-step.css';
+@import './blocks/story-timeline.css';
+@import './blocks/image-stack.css';
+@import './blocks/highlight-timeline-step.css';
+@import './blocks/highlight-timeline.css';
 
 @import './blocks/wp-block-heading.css';
 @import './blocks/wp-block-list.css';
 @import './blocks/wp-block-table.css';
 @import './blocks/wp-block-details.css';
+@import './blocks/wp-block-image.css';
+
+@import './blocks/variants.css';
 
 /* ########### LIBS ############ */
 @import './libs/swiper.css';

resources/css/base/carhop-specific-base.css

@@ -0,0 +1,14 @@
+body.is-website-carhop {
+  h3 {
+    @apply text-3xl;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply uppercase;
+  }
+}

resources/css/base/typography.css

@@ -33,21 +33,6 @@ li {
   @apply pb-4;
 }
 
-/* body.wp-admin h1:not(.editor-visual-editor h1),
-body.wp-admin h2:not(.editor-visual-editor h2),
-body.wp-admin h3:not(.editor-visual-editor h3),
-body.wp-admin h4:not(.editor-visual-editor h4),
-body.wp-admin h5:not(.editor-visual-editor h5),
-body.wp-admin h6:not(.editor-visual-editor h6) {
-  font-family: initial !important;
-  font-style: initial !important;
-  font-size: initial !important;
-  line-height: initial !important;
-  letter-spacing: initial !important;
-  text-transform: initial !important;
-  text-align: initial !important;
-} */
-
 .nunito {
   font-family: 'Nunito Sans', sans-serif;
 }

resources/css/blocks/chapter-section.css

@@ -162,3 +162,8 @@
   + .chapter-section--width-full.chapter-section--has-background {
   @apply !-mt-20;
 }
+
+.wp-block-carhop-blocks-content-box .chapter-section {
+  @apply py-8 md:py-10;
+  min-height: unset;
+}

resources/css/blocks/content-box.css

@@ -20,10 +20,16 @@
 
   &--bg-light {
     --content-box-text-color: var(--wp--preset--color--carhop-green);
+    --advised-text-color: var(--wp--preset--color--carhop-green, inherit);
   }
 
   &--bg-dark {
     --content-box-text-color: #fff;
+    --advised-text-color: #fff;
+
+    p {
+      color: var(--advised-text-color, inherit);
+    }
 
     .wp-block-carhop-blocks-cta {
       --cta-current-color: #fff;
@@ -145,3 +151,14 @@ body.page .content-box {
     @apply font-bold tracking-bigbig;
   }
 }
+
+.content-box--variant-backgrounded.alignfull
+  + .content-box--variant-backgrounded.alignfull {
+  @apply !mt-0;
+}
+
+.content-box--variant-backgrounded.alignfull:has(
+    + .content-box--variant-backgrounded.alignfull
+  ) {
+  @apply !mb-0;
+}

resources/css/blocks/heading.css

@@ -66,8 +66,10 @@
   &.is-style-stroked-after {
     @apply flex items-end gap-4;
     overflow-wrap: anywhere;
+    --advised-text-color: currentColor;
     &:after {
-      @apply flex-auto border-b-2 border-primary border-solid mb-2;
+      @apply flex-auto border-b-2  border-solid mb-2;
+      border-bottom: 2px solid var(--advised-text-color, --wp--preset--color--primary);
       content: '';
       display: block;
     }

resources/css/blocks/highlight-timeline-step.css

@@ -0,0 +1,29 @@
+.highlight-timeline-step {
+  &__innerblocks {
+    @apply pt-12 pb-2;
+
+    > p:last-child {
+      @apply !pb-0 mb-0;
+    }
+
+    .carhop-heading__innerblocks {
+      @apply gap-2;
+    }
+  }
+  &__year {
+    @apply h-auto w-full flex !p-12  justify-center items-center text-8xl text-white  fjalla;
+  }
+
+  &__year-background {
+    svg {
+      polygon {
+        @apply !fill-purple-200;
+      }
+    }
+  }
+  &__year-text {
+    @apply fjalla !pt-12 !pb-10;
+    font-size: clamp(4rem, 20vw, 20rem) !important;
+    line-height: 1.2 !important;
+  }
+}

resources/css/blocks/highlight-timeline.css

@@ -0,0 +1,23 @@
+.highlight-timeline {
+  --current-color: var(--advised-text-color, red);
+
+  .swiper-pagination-bullet {
+    @apply !pb-10 font-normal text-base;
+    color: var(--current-color, white);
+
+    &:after {
+      top: unset !important;
+      bottom: 0 !important;
+      background-color: var(--current-color, white);
+    }
+  }
+
+  p {
+    @apply text-lg;
+  }
+  .swiper-button-next,
+  .swiper-button-prev {
+    --swiper-navigation-size: 32px;
+    @apply filter-white !p-10;
+  }
+}

resources/css/blocks/image-stack.css

@@ -0,0 +1,21 @@
+.wp-block-carhop-blocks-image-stack {
+  .image-stack-item {
+    @apply border-2 border-primary p-4 w-fit bg-white;
+    img {
+      @apply block grayscale;
+    }
+
+    &.rotate-right {
+      @apply rotate-2;
+    }
+    &.rotate-left {
+      @apply -rotate-2;
+    }
+  }
+
+  &:hover {
+    img {
+      @apply grayscale-0;
+    }
+  }
+}

resources/css/blocks/narrative-card.css

@@ -75,6 +75,35 @@
     }
   }
 
+  /* Aspect ratio modifiers applied to the cover container */
+  &__cover--ratio-1-1 {
+    aspect-ratio: 1 / 1;
+  }
+  &__cover--ratio-4-3 {
+    aspect-ratio: 4 / 3;
+  }
+  &__cover--ratio-3-4 {
+    aspect-ratio: 3 / 4;
+  }
+  &__cover--ratio-3-2 {
+    aspect-ratio: 3 / 2;
+  }
+  &__cover--ratio-2-3 {
+    aspect-ratio: 2 / 3;
+  }
+  &__cover--ratio-16-9 {
+    aspect-ratio: 16 / 9;
+  }
+  &__cover--ratio-21-9 {
+    aspect-ratio: 21 / 9;
+  }
+  &__cover--ratio-9-16 {
+    aspect-ratio: 9 / 16;
+  }
+  &__cover--ratio-9-21 {
+    aspect-ratio: 9 / 21;
+  }
+
   &__content {
     p {
       @apply text-primary text-lg;

resources/css/blocks/scroll-story-block.css

@@ -1,3 +1,14 @@
 .scroll-story-block {
   @apply py-12 flex flex-col gap-12 overflow-x-hidden;
+
+  &--has-numbering {
+    counter-reset: narrative-card;
+    .narrative-card .narrative-card__content {
+      &:before {
+        @apply bg-primary text-white  w-12 h-12 flex items-center justify-center mb-12;
+        content: counter(narrative-card);
+        counter-increment: narrative-card;
+      }
+    }
+  }
 }

resources/css/blocks/story-timeline-step.css

@@ -0,0 +1,33 @@
+.story-timeline-step {
+  @apply max-w-screen-xl mx-auto !pb-24;
+
+  &__year {
+    @apply text-center text-primary  !font-bold flex items-center justify-center gap-6 tracking-widest !pb-12;
+
+    &:after,
+    &:before {
+      content: '';
+      @apply block w-full  bg-primary;
+      height: 1px;
+    }
+  }
+
+  &__innerblocks {
+    p {
+      @apply mt-0;
+    }
+  }
+
+  .wp-block-image {
+    img {
+      @apply grayscale;
+      &:hover {
+        @apply grayscale-0;
+      }
+    }
+  }
+
+  .wp-block-columns {
+    @apply !mb-16;
+  }
+}

resources/css/blocks/story-timeline.css

@@ -0,0 +1,24 @@
+.wp-block-carhop-blocks-story-timeline {
+  @apply flex gap-12 mx-auto max-w-screen-xl;
+  aside.story-timeline__years {
+    @apply text-white;
+    ul {
+      @apply sticky top-0 left-0 !pt-6;
+      @apply list-none p-0 m-0 flex flex-col gap-4;
+      li {
+        @apply list-none bg-white text-primary p-2 border border-primary text-3xl fjalla;
+      }
+
+      li.story-timeline__year[data-active='false'] {
+        @apply opacity-30;
+      }
+      li.story-timeline__year[data-active='true'] {
+        @apply opacity-100;
+      }
+    }
+  }
+}
+
+.wp-block-carhop-blocks-heading + .wp-block-carhop-blocks-story-timeline {
+  @apply mt-6;
+}

resources/css/blocks/variants.css

@@ -0,0 +1,22 @@
+.block-custom-video.is-style-stacked-background,
+.wp-block-embed.is-style-stacked-background {
+  @apply relative z-10;
+  > * {
+    @apply z-10;
+  }
+
+  .wp-block-embed__wrapper {
+    @apply p-4 bg-white border border-primary;
+  }
+  &:after {
+    @apply content-[''] absolute inset-0 bg-white border border-primary w-full h-full top-0 left-0;
+    z-index: 0;
+    transform: translate(16px, 40px) rotate(-4deg);
+    background: linear-gradient(
+          var(--wp--preset--color--primary),
+          var(--wp--preset--color--primary)
+        )
+        center/calc(100% - 30px) calc(100% - 30px) no-repeat,
+      white;
+  }
+}

resources/css/blocks/wp-block-image.css

@@ -0,0 +1,46 @@
+.wp-block-image.is-style-framed {
+  @apply border-2  p-4 w-fit bg-white;
+  --advised-text-color: currentColor;
+  border-color: var(--advised-text-color, --wp--preset--color--primary);
+  img {
+    @apply block;
+  }
+
+  &.rotate-right {
+    @apply rotate-2;
+  }
+  &.rotate-left {
+    @apply -rotate-2;
+  }
+}
+.wp-block-image.is-style-stacked {
+  @apply w-fit bg-green-200 relative z-30 !mb-12;
+
+  > * {
+    @apply relative z-30;
+  }
+  img {
+    @apply block relative z-30 p-4 bg-white border-2;
+    --advised-text-color: currentColor;
+    border-color: var(--advised-text-color, --wp--preset--color--primary);
+  }
+
+  &.rotate-right {
+    @apply rotate-2;
+  }
+  &.rotate-left {
+    @apply -rotate-2;
+  }
+
+  &:after {
+    @apply content-[''] absolute inset-0 bg-white border border-primary w-full h-full top-0 left-0;
+    z-index: 10;
+    transform: translate(40px, 40px) rotate(-4deg);
+    background: linear-gradient(
+          var(--wp--preset--color--primary),
+          var(--wp--preset--color--primary)
+        )
+        center/calc(100% - 30px) calc(100% - 30px) no-repeat,
+      white;
+  }
+}

resources/css/layout/footer.css

@@ -1,7 +1,7 @@
 footer {
   @apply w-full mx-auto px-4 md:px-12 pb-6 md:pb-32;
 
-  .section-title {
+  h3.section-title {
     @apply text-lg nunito uppercase font-bold tracking-widest mb-6;
   }
 

resources/css/libs/swiper.css

@@ -32,6 +32,7 @@
   .swiper-button-next,
   .swiper-button-prev {
     @apply static block border border-primary p-12  rounded-full transition-all duration-300;
+
     &:after {
       @apply left-1/2 top-1/2 block  w-fit;
 

resources/img/shapes/background-shape-A_purple.svg

@@ -1,3 +0,0 @@
-<svg width="1440" height="1588" viewBox="0 0 1440 1588" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
-<path preserveAspectRatio="none" d="M0 0H1440V1588L0 1559.71V0Z" fill="#EFE8FF"/>
-</svg>

resources/img/shapes/background-shape-B_purple.svg

@@ -1,3 +0,0 @@
-<svg width="1440" height="1588" viewBox="0 0 1440 1588" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
-<path d="M0 77L1440 0V1588L0 1559.71L0 77Z" fill="#EFE8FF" preserveAspectRatio="none"/>
-</svg>

resources/js/alternate-pictures.ts

@@ -0,0 +1,11 @@
+export default function alternatePictures() {
+  const images = document.querySelectorAll('.wp-block-image.is-style-framed');
+
+  images.forEach((img, index) => {
+    if (index % 2 === 0) {
+      img.classList.add('rotate-left');
+    } else {
+      img.classList.add('rotate-right');
+    }
+  });
+}

resources/js/app.ts

@@ -2,9 +2,11 @@ import menuInit from './header';
 import initFooterShapes from './footer';
 import handleScrollTop from './utilities/scroll-top';
 import handleInsidePageScrolling from './page-scrolling';
+import alternatePictures from './alternate-pictures';
 window.addEventListener('load', function () {
   menuInit();
   initFooterShapes();
   handleScrollTop();
   handleInsidePageScrolling();
+  alternatePictures();
 });

theme.json

@@ -3,7 +3,11 @@
   "settings": {
     "layout": {
       "contentSize": "960px",
-      "wideSize": "1280px"
+      "wideSize": "1280px",
+      "xWideSize": "1400px",
+      "custom": {
+        "xWideSize": "1400px"
+      }
     },
     "spacing": {
       "blockGap": true,
@@ -130,6 +134,17 @@
           "size": "1.875rem"
         }
       ]
+    },
+    "styles": {
+      "blocks": {
+        "core/columns": {
+          "layout": {
+            "contentSize": "960px",
+            "wideSize": "1280px",
+            "xWideSize": "1400px"
+          }
+        }
+      }
     }
   }
 }