diff --git a/package-lock.json b/package-lock.json index fe39f67..911e972 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "siteforge", - "version": "2.27.0", + "version": "2.28.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "siteforge", - "version": "2.27.0", + "version": "2.28.0", "dependencies": { "@aws-sdk/client-s3": "^3.1135.0", "@dnd-kit/core": "^6.3.1", diff --git a/package.json b/package.json index d55a00d..e27ec46 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "siteforge", "private": true, - "version": "2.27.0", + "version": "2.28.0", "type": "module", "scripts": { "dev": "vite", diff --git a/src/App.css b/src/App.css index c2911c6..a21ba7b 100644 --- a/src/App.css +++ b/src/App.css @@ -978,124 +978,35 @@ } /* ── About ── */ -.section-about { - background: #0d0d0d; - padding: 5rem 0; -} -.section-about .section-inner { - max-width: 1160px; -} -.about-inner { - display: grid; - grid-template-columns: minmax(340px, 420px) 1fr; - gap: 4.5rem; - align-items: start; -} -.about-photo { - display: flex; - flex-direction: column; - gap: 0.75rem; -} -.about-photo img { - display: block; - width: 100%; - border-radius: 14px; - box-shadow: - 0 12px 50px rgba(0, 0, 0, 0.55), - 0 0 0 1px rgba(201, 168, 76, 0.15); -} -.about-photo-divider { - width: 86%; - height: 1px; - margin: 0.3rem auto 0.45rem; - background: linear-gradient( - 90deg, - rgba(201, 168, 76, 0), - rgba(201, 168, 76, 0.6) 20%, - rgba(201, 168, 76, 0.9) 50%, - rgba(201, 168, 76, 0.6) 80%, - rgba(201, 168, 76, 0) - ); -} -.about-nate-copy { - padding: 0; -} -.about-nate-copy .eyebrow { - margin-bottom: 0.3rem; -} -.about-nate-rule { - width: 170px; - height: 1px; - background: linear-gradient(90deg, var(--brand-gold), rgba(201, 168, 76, 0.18)); - margin-bottom: 0.8rem; -} -.about-nate-copy p { - font-family: var(--brand-font-body); - font-weight: 400; - font-size: 1.2rem; - line-height: 1.7; - color: var(--brand-warm-white); - margin: 0 0 1rem; - padding: 0; - opacity: 0.9; -} -.about-nate-cta { - display: inline-block; - font-family: var(--brand-font-body); - font-size: 0.95rem; - letter-spacing: 0.12em; - text-transform: uppercase; - color: var(--brand-gold); - text-decoration: none; - margin-top: 0.35rem; - padding-bottom: 0.1rem; - border-bottom: 1px solid rgba(201, 168, 76, 0.45); - transition: color 180ms ease, border-color 180ms ease; -} -.about-nate-cta:hover { - color: var(--brand-warm-white); - border-bottom-color: rgba(246, 232, 186, 0.85); -} -.about-verse-art { - display: block; - width: 100%; - margin-top: 1.1rem; - border-radius: 14px; - box-shadow: - 0 12px 50px rgba(0, 0, 0, 0.55), - 0 0 0 1px rgba(201, 168, 76, 0.15); -} -.about-text h2 { - font-family: var(--brand-font-heading); - font-size: clamp(1.8rem, 3vw, 2.4rem); - color: var(--brand-warm-white); - margin: 0.5rem 0 1.2rem; - font-weight: 700; -} -.about-text p { - font-family: var(--brand-font-body); - font-weight: 400; - font-size: 1.2rem; - line-height: 1.7; - color: var(--brand-warm-white); - margin: 0 0 1rem; - padding: 0; - opacity: 0.9; -} + + + + + + + + + + + + + + + /* ── Homepage Newsletter ── */ .section-newsletter { @@ -7667,15 +7578,9 @@ a.study-track-card:hover { justify-content: center; } - .about-inner { - grid-template-columns: 1fr; - gap: 2rem; - } + - .about-photo { - max-width: 260px; - margin: 0 auto; - } + .series-card { grid-template-columns: 1fr; @@ -13500,9 +13405,7 @@ a.study-track-card:hover { } /* About copy was set larger than body text everywhere else */ - .about-inner p { - font-size: 1.0625rem; - } + /* Nothing readable below 12px */ .study-module-lesson, @@ -13553,9 +13456,7 @@ a.study-track-card:hover { font-size: clamp(1.4rem, 2.4vw, 1.625rem); } - .about-inner p { - font-size: 1.0625rem; - } + } /* ── Resources page (tabs + compact grids) ─────────────────────────────── */ @@ -13750,3 +13651,56 @@ a.study-track-card:hover { .cx-row { grid-template-columns: minmax(0, 1fr); } } +/* ── About page ────────────────────────────────────────────────────────── */ +.ab-section { padding: 2.5rem 0 1.5rem; } +.ab-intro { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 2.5rem; align-items: center; } +.ab-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; border: 1px solid var(--brand-gold-dark); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5); } +.ab-intro-copy { display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; } +.ab-intro-copy .eyebrow { margin: 0; } +.ab-bio { margin: 0; font-size: 1.1rem; line-height: 1.75; color: var(--brand-warm-white); max-width: 60ch; } +.ab-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; } + +.ab-show { + display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 2.5rem; align-items: center; + margin-top: 3rem; padding: 2rem; border-radius: 16px; + background: var(--brand-black-3); border: 1px solid var(--brand-border); +} +.ab-show-copy { display: flex; flex-direction: column; gap: 0.8rem; } +.ab-show-copy .eyebrow { margin: 0; } +#root > :not(.admin-shell) .ab-show-copy h2 { margin: 0; line-height: 1.15; } +.ab-show-copy p:not(.eyebrow) { margin: 0; font-size: 1.02rem; line-height: 1.7; color: var(--brand-muted); max-width: 60ch; } +.ab-verse-art { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); } + +.ab-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; } +.ab-path { + display: flex; flex-direction: column; gap: 0.35rem; padding: 1.15rem; text-decoration: none; color: inherit; + background: transparent; border: 1px solid var(--brand-border); border-radius: 12px; + transition: border-color 150ms, transform 150ms; +} +.ab-path:hover { border-color: var(--brand-gold-dark); transform: translateY(-2px); } +.ab-path-title { font-family: var(--brand-font-heading); font-size: 1.35rem; font-weight: 600; color: var(--brand-warm-white); } +.ab-path-text { font-size: 0.92rem; line-height: 1.5; color: var(--brand-muted); } +.ab-path-go { margin-top: 0.2rem; font-size: 0.85rem; color: var(--brand-gold); } + +@media (max-width: 900px) { + .ab-intro { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 1.75rem; } + .ab-show { grid-template-columns: minmax(0, 1fr); padding: 1.5rem; } + .ab-verse-art { max-width: 420px; justify-self: center; } + .ab-paths { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; } + .ab-path { padding: 0.9rem 1rem; } + .ab-path-go { display: none; } +} +@media (max-width: 600px) { + .ab-section { padding: 1.5rem 0 1rem; } + .ab-intro { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } + .ab-photo { max-width: 200px; aspect-ratio: 1 / 1; } + .ab-bio { font-size: 1.02rem; } + .ab-show { margin-top: 2rem; padding: 1.15rem; gap: 1.25rem; } + .ab-cta-row .btn-primary, .ab-cta-row .btn-secondary { flex: 1 1 100%; justify-content: center; text-align: center; } +} + +@media (max-width: 600px) { + .section-testimonials { padding-top: 2rem; padding-bottom: 2rem; } + .cx-support { padding-bottom: 2rem; } +} + diff --git a/src/App.tsx b/src/App.tsx index 5c24935..391df39 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -666,31 +666,54 @@ function KofiSupportSection({ content }: { content: SiteContent }) { } function AboutSection({ content }: { content: SiteContent }) { + const paths = [ + { to: '/start-here', title: 'New here?', text: 'A short path through the show, one step at a time.' }, + { to: '/episodes', title: 'Listen', text: 'Every episode, newest first.' }, + { to: '/study', title: 'Study with us', text: 'Self-paced Bible studies with notes and discussion.' }, + ] return ( -
-
-
- Nate Emmert -