From 47e77f9fac1155c536b2b87fec552c7fcce66fa6 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Mon, 01 Jun 2026 18:06:34 +0000
Subject: [PATCH] =Timeline block fixes. Next up: adding article schema classes
---
src/timeline/style.scss | 77 +++++++++++++++++++++++++++-----------
1 files changed, 54 insertions(+), 23 deletions(-)
diff --git a/src/timeline/style.scss b/src/timeline/style.scss
index 2f6ac8d..059dcfb 100644
--- a/src/timeline/style.scss
+++ b/src/timeline/style.scss
@@ -5,16 +5,18 @@
}
}
+
+
#at-a-glance {
- max-width: var(--alignWide);
+ padding: 0 10vw;
--gap: 0;
img {
width: 100%;
height: auto;
- border: 2px solid var(--action-0);
+ border: 2px solid rgb(var(--action-0));
}
h3 {
- font-size: var(--small);
+ font-size: var(--txt-x-small);
}
.before {
img {
@@ -31,17 +33,29 @@
}
}
}
+main > header {
+ grid-column: wider;
-.timeline-point.timeline-point {
+ ul.timeline.terms {
+ max-width: none;
+ margin: 0;
+ font-size: var(--txt-x-small);
+ }
+ .buttons {
+ margin-bottom: 0;
+ }
+}
+
+.timeline-point.timeline-point.row {
--lineWidth: 1px;
--gap: 2rem;
padding: 0;
margin:0;
- background-color: var(--base);
+ background-color: rgb(var(--base));
max-width: 100vw;
position: relative;
- overflow: hidden;
- .open-gallery {
+ //overflow: hidden;
+ img {
width: 40%;
border-radius: 4px;
position: sticky;
@@ -51,21 +65,32 @@
padding: 1rem .5rem .5rem;
width: 60%;
position: relative;
+ .icon-logo-triangle {
+ --w: 2.2rem;
+ transform: rotate(-90deg);
+ position: absolute;
+ left: -3rem;
+ top: .25rem;
+ background-color: rgb(var(--action-100));
+ }
h2 {
margin: 0 0 .5rem;
- font-size: var(--medium);
+ 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);
- }
}
}
+ .term-list {
+ margin: 0;
+ font-size: var(--txt-x-small);
+
+ li {
+ display: block;
+ a {
+ vertical-align: top;
+ }
+ }
+ }
&::before,
&::after {
content: '';
@@ -74,14 +99,14 @@
left: 45%;
height: 100%;
width: var(--lineWidth);
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
//box-shadow: var(--action-shadow);
}
&::before {
height: 1rem;
}
&::after {
- top: 4rem;
+ top: 4.25rem;
}
&#before-treatment::before,
&:last-of-type::after {
@@ -91,12 +116,12 @@
@media (min-width:768px) {
#at-a-glance {
h3 {
- font-size: var(--xlarge);
+ font-size: var(--txt-x-large);
}
}
- .timeline-point.timeline-point {
+ .timeline-point.timeline-point.row {
--gap: 4rem;
- .open-gallery {
+ img {
width: 50%;
}
.info {
@@ -105,10 +130,16 @@
h2 {
.icon {
--w: 4rem;
- left: -4.15rem;
+ left: -6.15rem;
top: 0;
}
}
+ small {
+ display: inline-flex;
+ flex-wrap: wrap;
+ gap: .25rem;
+ align-items: center;
+ }
a {
display: flex;
flex-wrap: wrap;
@@ -117,7 +148,7 @@
time {
text-transform: uppercase;
- font-size: var(--small);
+ font-size: var(--txt-x-small);
}
}
&::before,
--
Gitblit v1.10.0