nate/Siteforge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish About, forms, and share/contact UI

Browse Source
This commit is contained in:
nmemmert
2026-04-23 17:03:41 -04:00
parent 8a71aecb4e
commit b4f1c1dbdb
4 changed files with 174 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.css
+159 -17
View File
@@ -96,11 +96,17 @@
.art-glow {
position: absolute;
inset: -44%;
background: radial-gradient(ellipse, rgba(201, 168, 76, 0.42) 0%, rgba(201, 168, 76, 0.16) 44%, transparent 72%);
background: radial-gradient(
ellipse,
rgba(201, 168, 76, 0.58) 0%,
rgba(201, 168, 76, 0.3) 34%,
rgba(201, 168, 76, 0.1) 58%,
transparent 78%
);
z-index: 0;
border-radius: 50%;
pointer-events: none;
filter: blur(12px);
filter: blur(18px) saturate(112%);
animation: glow-pulse 4s ease-in-out infinite;
}
@@ -429,14 +435,25 @@
padding: 5rem 0;
}
.section-about .section-inner {
max-width: 1160px;
}
.about-inner {
display: grid;
grid-template-columns: 360px 1fr;
gap: 4rem;
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:
@@ -444,6 +461,75 @@
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);
@@ -669,13 +755,24 @@
padding: 5rem 0;
}
.section-qr .section-inner {
max-width: 1080px;
}
.qr-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 4rem;
gap: 4.5rem;
align-items: center;
}
.qr-text {
background: linear-gradient(180deg, rgba(17, 17, 17, 0.92), rgba(11, 11, 11, 0.94));
border: 1px solid rgba(201, 168, 76, 0.22);
border-radius: 16px;
padding: 2rem 2.1rem;
}
.qr-text h2 {
font-family: var(--brand-font-heading);
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
@@ -716,6 +813,11 @@
.qr-code-wrap {
text-align: center;
flex-shrink: 0;
background: rgba(16, 16, 16, 0.9);
border: 1px solid rgba(201, 168, 76, 0.22);
border-radius: 16px;
padding: 1.35rem 1.2rem 1rem;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.38);
}
.qr-frame {
@@ -877,13 +979,16 @@
}
.contact-profile-photo {
width: 72px;
height: 72px;
width: 108px;
height: 108px;
border-radius: 999px;
object-fit: cover;
object-position: top;
object-position: center 22%;
border: 2px solid var(--brand-gold);
flex-shrink: 0;
box-shadow:
0 0 0 4px rgba(201, 168, 76, 0.16),
0 10px 28px rgba(0, 0, 0, 0.42);
}
.contact-profile-name {
@@ -989,8 +1094,8 @@
.contact-form input,
.contact-form textarea,
.contact-form select {
background: #0c0c0c;
border: 1px solid rgba(201, 168, 76, 0.25);
background: #090909;
border: 1px solid rgba(201, 168, 76, 0.38);
border-radius: 8px;
color: var(--brand-warm-white);
font-family: var(--brand-font-body);
@@ -998,12 +1103,34 @@
font-weight: 300;
padding: 0.7rem 0.85rem;
outline: none;
transition: border-color 200ms;
transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: rgba(201, 168, 76, 0.7);
.contact-form textarea:focus,
.contact-form select:focus {
border-color: rgba(201, 168, 76, 0.85);
box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.16);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: rgba(214, 193, 140, 0.6);
}
.contact-form select {
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, rgba(201, 168, 76, 0.9) 50%),
linear-gradient(135deg, rgba(201, 168, 76, 0.9) 50%, transparent 50%);
background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 2rem;
}
.contact-form select option {
background: #0b0b0b;
color: var(--brand-warm-white);
}
.contact-form textarea {
@@ -1387,8 +1514,8 @@
}
.study-download-form input {
background: #0c0c0c;
border: 1px solid rgba(201, 168, 76, 0.25);
background: #090909;
border: 1px solid rgba(201, 168, 76, 0.38);
border-radius: 8px;
color: var(--brand-warm-white);
font-family: var(--brand-font-body);
@@ -1396,11 +1523,26 @@
font-weight: 300;
padding: 0.7rem 0.85rem;
outline: none;
transition: border-color 200ms;
transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
}
.study-download-form input:focus {
border-color: rgba(201, 168, 76, 0.7);
border-color: rgba(201, 168, 76, 0.85);
box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.16);
}
.study-download-form input::placeholder {
color: rgba(214, 193, 140, 0.6);
}
.contact-form input:-webkit-autofill,
.contact-form textarea:-webkit-autofill,
.contact-form select:-webkit-autofill,
.study-download-form input:-webkit-autofill {
-webkit-text-fill-color: var(--brand-warm-white);
-webkit-box-shadow: 0 0 0 1000px #0a0a0a inset;
box-shadow: 0 0 0 1000px #0a0a0a inset;
transition: background-color 9999s ease-in-out 0s;
}
.study-download-form .btn-primary {
src/App.tsx
+14 -4
View File
@@ -119,7 +119,7 @@ export const DEFAULTS: SiteContent = {
aboutShowP2:
"Whether you're in the car, at the gym, or just looking for something to anchor your day, each episode is designed to feed your faith with solid, practical teaching.",
aboutNate:
'Nate Emmert is a husband, dad, and lifelong student of the Bible from Lynchburg, Va. He created Verse by Verse to share the joy of deep Scripture study in a format anyone can follow along with — no seminary required.',
"Nate Emmert is a husband, dad, and lifelong student of the Bible from Lynchburg, Va. He's not a pastor or a professor — just someone who fell in love with digging into Scripture and wanted to bring others along for the journey. He created Verse by Verse to make deep Bible study accessible to anyone, whether you've read the Bible your whole life or you're just getting started. No seminary required. No prior knowledge assumed. Just the Word, unpacked verse by verse.",
seriesLabel: 'Now Playing',
seriesTitle: 'Study of Titus: Sound Doctrine',
seriesDescription:
@@ -862,6 +862,13 @@ function LandingPage({ content }: { content: SiteContent }) {
<div className="section-inner about-inner">
<div className="about-photo">
<img src="/images/nate-photo.jpeg" alt="Nate Emmert" />
<div className="about-photo-divider" aria-hidden="true" />
<div className="about-nate-copy">
<p className="eyebrow">About Nate</p>
<div className="about-nate-rule" aria-hidden="true" />
<p>{content.aboutNate}</p>
<a href="#listen" className="about-nate-cta">Listen Now ↓</a>
</div>
</div>
<div className="about-text">
<p className="eyebrow">About the Show</p>
@@ -869,8 +876,11 @@ function LandingPage({ content }: { content: SiteContent }) {
<p>{content.aboutShowP1}</p>
<p>{content.aboutShowP2}</p>
<div className="rule-divider" aria-hidden="true" />
<p className="eyebrow">About Nate</p>
<p>{content.aboutNate}</p>
<img
src="/images/hebrews-4-12-verse-art.png"
alt="Hebrews 4:12 verse artwork"
className="about-verse-art"
/>
</div>
</div>
</section>
@@ -1094,7 +1104,7 @@ function LandingPage({ content }: { content: SiteContent }) {
rel="noreferrer"
className="btn-secondary"
>
creators.spotify.com/pod/profile/nmemmert
Open Spotify Creator Profile
</a>
<ShareShowButton />
</div>