From 75a097a018a0090f5902758353c578fce4aa2a25 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sat, 23 May 2026 18:43:42 +0000
Subject: [PATCH] =CustomBlocks.php overhaul relatively complete. Also refactored the gallery in gallery.min.js and the jvbRenderGallery.
---
src/video/style.scss | 140 +++++++++++++++++++++++++++++-----------------
1 files changed, 88 insertions(+), 52 deletions(-)
diff --git a/src/video/style.scss b/src/video/style.scss
index 223f434..aa4cd61 100644
--- a/src/video/style.scss
+++ b/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;
- }
- }
-}
--
Gitblit v1.10.0