Updated layout, added ability to make new sections, added new block types, increased layout size by 30%

This commit is contained in:
nathan
2026-05-01 14:37:36 -04:00
parent a472255a94
commit d0200f3975
7 changed files with 841 additions and 35 deletions

View File

@@ -77,11 +77,85 @@
/* ── Quote Block ─────────────────────────────────────────────────────────── */
/* Uses existing .quote-block, .quote-text, .quote-attribution from components.css */
/* ── Fact Briefing Panel ─────────────────────────────────────────────────── */
.block-fact-panel {
margin: 1.25rem 0;
}
.block-fact-panel .fact-panel-list {
margin: 0;
padding: 0;
}
/* ── Timeline Card ───────────────────────────────────────────────────────── */
.block-timeline-card {
background: var(--color-white);
border: 1px solid var(--color-gray);
border-radius: var(--radius-md);
padding: 1rem 1.1rem;
margin: 1.25rem 0;
}
.block-timeline-header {
display: flex;
align-items: flex-start;
gap: 0.55rem;
margin-bottom: 0.45rem;
flex-wrap: wrap;
}
.block-timeline-date {
background: var(--color-accent);
color: var(--color-white);
padding: 0.18rem 0.45rem;
border-radius: var(--radius-sm);
font-size: 12px;
line-height: 1.2;
font-weight: 600;
font-family: var(--font-secondary);
white-space: nowrap;
margin-top: 0.05rem;
}
.block-timeline-title {
margin: 0;
color: var(--color-primary);
font-size: 1.55rem;
line-height: 1.2;
font-family: var(--font-primary);
flex: 1;
min-width: 220px;
}
.block-timeline-text {
margin: 0;
margin-left: calc(0.45rem + 0.55rem + 52px);
font-size: 1.1rem;
line-height: 1.45;
color: var(--color-primary);
font-family: var(--font-primary);
}
@media (max-width: 640px) {
.block-timeline-text {
margin-left: 0;
}
}
/* ── Gallery Block ───────────────────────────────────────────────────────── */
.block-gallery {
margin: 1.25rem 0;
}
.gallery-empty {
padding: 0.75rem;
border: 1px dashed var(--color-gray);
border-radius: var(--radius-sm);
color: var(--color-dark-gray);
font-family: var(--font-secondary);
font-size: 13px;
}
.gallery-scroll {
display: flex;
gap: 0.75rem;
@@ -127,6 +201,92 @@
right: 0;
}
/* ── Carousel Gallery Mode ────────────────────────────────────────────────── */
.gallery-mode-carousel .gallery-carousel {
position: relative;
}
.gallery-mode-carousel .gallery-slides {
position: relative;
min-height: 220px;
border-radius: var(--radius-sm);
overflow: hidden;
box-shadow: var(--shadow-sm);
background: #0f1720;
}
.gallery-mode-carousel .gallery-slide {
display: none;
margin: 0;
position: relative;
}
.gallery-mode-carousel .gallery-slide.is-active {
display: block;
}
.gallery-mode-carousel .gallery-slide img {
width: 100%;
height: 260px;
object-fit: cover;
display: block;
}
.gallery-slide-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0));
color: #fff;
font-size: 12px;
line-height: 1.45;
padding: 0.75rem;
font-family: var(--font-secondary);
}
.gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
border: none;
border-radius: var(--radius-full);
background: rgba(0, 0, 0, 0.42);
color: #fff;
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.gallery-nav:hover {
background: rgba(0, 0, 0, 0.62);
}
.gallery-nav-prev { left: 0.5rem; }
.gallery-nav-next { right: 0.5rem; }
.gallery-dots {
margin-top: 0.6rem;
display: flex;
justify-content: center;
gap: 0.4rem;
}
.gallery-dot {
width: 9px;
height: 9px;
border-radius: var(--radius-full);
border: none;
background: #cbd5e1;
cursor: pointer;
}
.gallery-dot.is-active {
background: var(--color-primary);
}
/* ── 4-Image Grid Block ──────────────────────────────────────────────────── */
.block-grid4 {
margin: 1.25rem 0;