From 46d681c6b825d21b3f698d793c4e630c687d90ad Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Thu, 21 May 2026 21:41:53 +0000
Subject: [PATCH] =Major CustomBlocks.php overhaul, expanding block support and customization from the editor. theme.json should now be updated on new themes to set brand colours, etc. Also note: major change to .col vs .row alignment: simplifying it to .top .bottom vs the confusion of the differences for .col/.row .start and .a-start
---
src/video/style.scss | 178 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 178 insertions(+), 0 deletions(-)
diff --git a/src/video/style.scss b/src/video/style.scss
new file mode 100644
index 0000000..d16e7d9
--- /dev/null
+++ b/src/video/style.scss
@@ -0,0 +1,178 @@
+/** style.scss **/
+.video-cover {
+ position: relative;
+ width: 100%;
+ min-height: 75vh;
+ overflow: hidden;
+ display: flex;
+ .wrap {
+ background-color: var(--contrast-200);
+ //&::before {
+ // position: absolute;
+ // top: 0;
+ // bottom: 0;
+ // left: 0;
+ // right: 0;
+ // background-color: var(--base);
+ // mix-blend-mode: lighten;
+ // content: '';
+ // z-index: 1;
+ //}
+ }
+ /* Video background */
+ .video-container {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ min-width: 100%;
+ min-height: 100%;
+ z-index: 0;
+ display: flex;
+ background-color: 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;
+ }
+ }
+
+ .inner-wrap {
+ position: relative;
+ z-index: 2;
+ width: 100%;
+ padding: 2rem;
+ color: var(--action-contrast);
+
+ /* Better text readability */
+ h1, h2, h3, h4, h5, h6 {
+ word-spacing: 100vw;
+ color: var(--action-contrast);
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+ margin: 2rem 0 0;
+ }
+
+ p {
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ margin: 0;
+ color: var(--action-contrast);
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+ }
+
+ .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: var(--action-0);
+ color: var(--action-contrast);
+ }
+ }
+
+ .outline a {
+ background-color: rgba(var(--base-rgb), rgba(var(--base-rgb),var(--op-3)));
+ }
+ .buttons {
+ margin: 3rem 0;
+ li {
+ background-color: rgba(var(--action-rgb), var(--op-4));
+ }
+ }
+ /* Button styles */
+ .wp-block-button__link {
+ text-shadow: none;
+ }
+ }
+
+ /* Alignment classes */
+ &.align-top-left {
+ align-items: flex-start;
+ justify-content: flex-start;
+ }
+ &.align-top-center {
+ align-items: flex-start;
+ justify-content: center;
+ }
+ &.align-top-right {
+ align-items: flex-start;
+ justify-content: flex-end;
+ }
+ &.align-center-left {
+ align-items: center;
+ justify-content: flex-start;
+ }
+ &.align-center {
+ align-items: center;
+ justify-content: center;
+ }
+ &.align-center-right {
+ align-items: center;
+ justify-content: flex-end;
+ }
+ &.align-bottom-left {
+ align-items: flex-end;
+ justify-content: flex-start;
+ }
+ &.align-bottom-center {
+ align-items: flex-end;
+ justify-content: center;
+ }
+ &.align-bottom-right {
+ align-items: flex-end;
+ justify-content: flex-end;
+ }
+
+ /* Full-width alignment */
+ &.alignfull {
+ width: 100vw;
+ max-width: none;
+ margin-left: calc(50% - 50vw);
+ margin-right: calc(50% - 50vw);
+ }
+
+ /* Wide alignment */
+ &.alignwide {
+ max-width: 1200px;
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
--
Gitblit v1.10.0