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/timeline/style.scss | 135 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 135 insertions(+), 0 deletions(-)
diff --git a/src/timeline/style.scss b/src/timeline/style.scss
new file mode 100644
index 0000000..ea20261
--- /dev/null
+++ b/src/timeline/style.scss
@@ -0,0 +1,135 @@
+main {
+ --gap: 0;
+ section:last-of-type {
+ margin-bottom: 0;
+ }
+}
+
+#at-a-glance {
+ padding: 0 10vw;
+ --gap: 0;
+ img {
+ width: 100%;
+ height: auto;
+ border: 2px solid var(--action-0);
+ }
+ h3 {
+ font-size: var(--txt-x-small);
+ }
+ .before {
+ img {
+ border-right-width: 1px;
+ border-left: 0;
+ border-top: 0;
+ }
+ }
+ .after {
+ img {
+ border-left-width: 1px;
+ border-right: 0;
+ border-bottom: 0;
+ }
+ }
+}
+
+.timeline-point.timeline-point {
+ --lineWidth: 1px;
+ --gap: 2rem;
+ padding: 0;
+ margin:0;
+ background-color: var(--base);
+ max-width: 100vw;
+ position: relative;
+ overflow: hidden;
+ img {
+ width: 40%;
+ border-radius: 4px;
+ position: sticky;
+ padding: .5rem;
+ }
+ .info {
+ padding: 1rem .5rem .5rem;
+ width: 60%;
+ position: relative;
+ h2 {
+ margin: 0 0 .5rem;
+ font-size: var(--txt-medium);
+ position: relative;
+ .icon {
+ --w: 2.5rem;
+ transform: rotate(-90deg);
+ position: absolute;
+ left: -2.5rem;
+ top: .25rem;
+ background-color: var(--action-100);
+ }
+ }
+
+ }
+ &::before,
+ &::after {
+ content: '';
+ display: block;
+ position: absolute;
+ left: 45%;
+ height: 100%;
+ width: var(--lineWidth);
+ background-color: var(--action-0);
+ //box-shadow: var(--action-shadow);
+ }
+ &::before {
+ height: 1rem;
+ }
+ &::after {
+ top: 4rem;
+ }
+ &#before-treatment::before,
+ &:last-of-type::after {
+ display: none;
+ }
+}
+@media (min-width:768px) {
+ #at-a-glance {
+ h3 {
+ font-size: var(--txt-x-large);
+ }
+ }
+ .timeline-point.timeline-point {
+ --gap: 4rem;
+ img {
+ width: 50%;
+ }
+ .info {
+ width: 50%;
+ padding: 25vh 1rem 1rem;
+ h2 {
+ .icon {
+ --w: 4rem;
+ left: -6.15rem;
+ top: 0;
+ }
+ }
+ a {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ }
+
+ time {
+ text-transform: uppercase;
+ font-size: var(--txt-x-small);
+ }
+ }
+ &::before,
+ &::after {
+ left: calc(50% + 2rem);
+ }
+
+ &::before {
+ height: calc(25vh - 2rem);
+ }
+ &::after {
+ top: calc(25vh + 6rem);
+ }
+ }
+}
--
Gitblit v1.10.0