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 | 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..aa4cd61
--- /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: 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: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ min-width: 100%;
+ min-height: 100%;
+ 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;
+ }
+ }
+
+ .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: 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 */
+ &.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