=CustomBlocks.php overhaul relatively complete. Also refactored the gallery...

Jake Vanderwerf

5 days ago 75a097a018a0090f5902758353c578fce4aa2a25

 src/video/style.scss

@@ -1,65 +1,121 @@
.video-cover-wrapper {
/** style.scss **/
.video-cover {
   position: relative;
   width: 100%;
   min-height: 400px;
   min-height: 75vh;
   overflow: hidden;
   display: flex;

   // Video background
   .video-cover-bg {
   .wrap {
      background-color: rgb(var(--contrast-200));
      //&::before {
      // position: absolute;
      // top: 0;
      // bottom: 0;
      // left: 0;
      // right: 0;
      // background-color: rgb(var(--base));
      // mix-blend-mode: lighten;
      // content: '';
      // z-index: 1;
      //}
   }
   /* Video background */
   .video-container {
      position: absolute;
      top: 50%;
      left: 50%;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      transform: translate(-50%, -50%);
      object-fit: cover;
      z-index: 0;
      display: flex;
      background-color: rgb(var(--action-50));

      &.fade {
         animation: fadeIn 1s ease-in;
      }

      video {
         pointer-events: none;
         opacity: .85;
         mix-blend-mode: multiply;
         filter: grayscale(100%) contrast(1);
         flex: 1 0 100%;
         object-fit: cover;
      }
   }

   // Dark overlay
   .video-cover-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 1);
      z-index: 1;
   }

   // Content container
   .video-cover-content {
   .inner-wrap {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: 2rem;
      color: white;
      color: var(--action-contrast);

      // Better text readability
      /* Better text readability */
      h1, h2, h3, h4, h5, h6 {
         color: white;
         word-spacing: 100vw;
         color: var(--action-contrast);
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
         margin: 2rem 0 0;
      }

      p {
         color: white;
         text-transform: uppercase;
         letter-spacing: 2px;
         margin: 0;
         color: var(--action-contrast);
         text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      }

      // Button styles
      .media-text {
      }
         .media-text figure {
            max-width: 50%;
         }
         @media (min-width: 768px) {
            .media-text {
               --align: flex-start;
               gap: 3rem;
               max-width: var(--content);
            }
         }
         .media-text > div {
            width: fit-content;
         }
      .buttons a {
         font-weight: var(--fw-h-bold);
         color: var(--action-contrast);
         border-color: var(--action-contrast);
         &:visited {
            color: var(--action-contrast);
            &:hover {
               color: var(--action-contrast);
            }
         }
         &:hover {
            background-color: rgb(var(--action-0));
            color: var(--action-contrast);
         }
      }

      .outline a {
         background-color: rgba(var(--base), rgba(var(--base),var(--op-3)));
      }
      .buttons {
         margin: 3rem 0;
         li {
            background-color: rgba(var(--action-0), var(--op-4));
         }
      }
      /* Button styles */
      .wp-block-button__link {
         text-shadow: none;
      }
   }

   // Alignment classes
   /* Alignment classes */
   &.align-top-left {
      align-items: flex-start;
      justify-content: flex-start;
@@ -97,7 +153,7 @@
      justify-content: flex-end;
   }

   // Full-width alignment
   /* Full-width alignment  */
   &.alignfull {
      width: 100vw;
      max-width: none;
@@ -105,7 +161,7 @@
      margin-right: calc(50% - 50vw);
   }

   // Wide alignment
   /* Wide alignment */
   &.alignwide {
      max-width: 1200px;
   }
@@ -120,23 +176,3 @@
   }
}

// Responsive adjustments
@media (max-width: 768px) {
   .video-cover-wrapper {
      min-height: 300px;

      .video-cover-content {
         padding: 1.5rem;
      }
   }
}

@media (max-width: 480px) {
   .video-cover-wrapper {
      min-height: 250px;

      .video-cover-content {
         padding: 1rem;
      }
   }
}