Skip to content

Update styles for sponsor cards and move styles to global.css #154

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DanCoria wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update styles for sponsor cards and move styles to global.css #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 15 additions & 13 deletions src/components/SponsorCard.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,25 +19,25 @@ const { name, region, gender, gtlId, focus, bio, image, isSponsored, slug } = As
const imageUrl = imageBuilder.image(image).width(600).fit('crop').url();
---
<div
class={`border border-1 border-white p-3 bg-transparent font-gotham-office rounded-lg relative ${
class={`border border-1 border-white p-4 bg-[var(--cream)] font-gotham-office rounded-lg relative ${
isSponsored ? 'border-2 border-[var(--light-green)] sponsored-badge' : ''
}`}
>
<div class={`flex gap-4 items-center ${isSponsored ? 'text-gray-500' : 'text-white'} pb-4`}>
<div class={`flex gap-4 items-center ${isSponsored ? 'text-gray-500' : 'text-black'} pb-4`}>
<img
src={imageUrl}
class={`rounded-lg w-1/3 md:pb-0 ${isSponsored ? 'grayscale opacity-40' : ''}`}
alt={`Photo of ${name}`}
/>
<div class="w-full">
<h3
class={`text-lg md:text-2xl ${isSponsored ? 'text-gray-500' : 'text-white'}`}
class={`text-lg md:text-2xl ${isSponsored ? 'text-gray-500' : 'text-black'}`}
>
{name}
</h3>
<p
class={`text-sm md:text-base md:py-2 ${
isSponsored ? 'text-gray-500' : 'text-white'
isSponsored ? 'text-gray-500' : 'text-black'
}`}
>
<strong>Region:</strong> {region}
Expand All @@ -46,47 +46,49 @@ const imageUrl = imageBuilder.image(image).width(600).fit('crop').url();
<div class="flex items-center gap-2 md:gap-4">
<p
class={`text-sm md:text-base py-2 ${
isSponsored ? 'text-gray-500' : 'text-white'
isSponsored ? 'text-gray-500' : 'text-black'
}`}
>
<strong>Gender:</strong> {gender}
</p>
<span class={`text-sm md:text-lg ${isSponsored ? 'text-gray-500' : 'text-white'}`}>
<span class={`text-sm md:text-lg ${isSponsored ? 'text-gray-500' : 'text-black'}`}>
|
</span>
<p
class={`text-xs md:text-base ${isSponsored ? 'text-gray-500' : 'text-white'}`}
class={`text-xs md:text-base ${isSponsored ? 'text-gray-500' : 'text-black'}`}
>
{gtlId}
</p>
</div>
</div>
</div>
<div class="my-4 flex justify-between items-center">
<div class="mt-4 mb-6 block md:flex justify-between items-center">
<a
href={`/sponsors/${slug}`}
class={`px-4 py-2 rounded-lg font-semibold transition-colors ${
isSponsored
? 'bg-gray-600 text-gray-300 hover:bg-gray-500'
: 'bg-[var(--light-green)] text-black hover:bg-green-400'
: 'bg-[var(--gtl-light-green)] text-black hover:bg-green-400'
}`}
>
View Details
</a>
<p class="text-white font-gotham-office">$1,000 month needed</p>
{!isSponsored && (
<p class="text-black mt-4 md:mt-0 md:text-xl font-gotham-office">$1,000 month needed</p>
)}
</div>
<div class={`text-white font-gotham-office ${isSponsored ? 'text-gray-500' : ''}`}>
<div class={`text-black font-gotham-office ${isSponsored ? 'text-gray-500' : ''}`}>
<div>
<p
class={`text-lg font-gotham-office font-bold ${
isSponsored ? 'text-gray-500' : 'text-white'
isSponsored ? 'text-gray-500' : 'text-black'
}`}
>
<strong>Focus: {focus}</strong>
</p>
<p
class={`text-base md:text-lg font-gotham-office font-light ${
isSponsored ? 'text-gray-500' : 'text-white'
isSponsored ? 'text-gray-500' : 'text-black'
}`}
>
{bio}
Expand Down
48 changes: 22 additions & 26 deletions src/pages/global-translation-leaders.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import Layout from '../layouts/Layout.astro';
import SponsorCards from '../components/SponsorCards.astro';
import { sanityClient as sanity } from 'sanity:client';
import '../styles/global.css'

const sponsors = await sanity.fetch(`*[_type == "sponsor"]{
name,
Expand All @@ -16,31 +17,26 @@ const sponsors = await sanity.fetch(`*[_type == "sponsor"]{
}`);
---
<style>
:root {
--dark-green: #1d3738;
--light-green: #29b77c;
--light-gray: #636466;
--cream: #f7f1e7;
}
.container {

/* .gtl-container {
max-width: 1440px;
margin: 0 auto;
}
.gtl-logo-wrapper {
max-width: 1440px;
margin: 0 auto;
}
.bg-green {
background-color: var(--dark-green);
.bg-gtl-green {
background-color: var(--gtl-dark-green);
}
.bg-light-green {
background-color: var(--light-green);
.bg-gtl-light-green {
background-color: var(--gtl-light-green);
}
.bg-light-gray {
background-color: var(--light-gray);
.bg-gtl-light-gray {
background-color: var(--gtl-light-gray);
}
.bg-cream {
background-color: var(--cream);
.bg-gtl-cream {
background-color: var(--gtl-cream);
}
.icon {
width: 50px;
Expand All @@ -56,9 +52,9 @@ const sponsors = await sanity.fetch(`*[_type == "sponsor"]{
font-weight: 900;
height: 0.6em;
line-height: 1;
color: var(--light-green);
color: var(--gtl-light-green);
font-size: calc(1px * 100);
}
} */
</style>
<Layout>
<section class="bg-black">
Expand All @@ -70,7 +66,7 @@ const sponsors = await sanity.fetch(`*[_type == "sponsor"]{
<div class="gtl-logo-wrapper px-6">
<img src="https://cdn.sanity.io/media-libraries/ml0ZDygBMJD9/images/0fa6e1351fb91829fbdcca10d29d727c26cd1e25-2048x336.png" alt="Seed Company Logo" class="w-1/2 md:max-w-xs" />
</div>
<div class="sm:flex container min-h-screen md:h-full px-6 lg:px-8">
<div class="sm:flex gtl-container min-h-screen md:h-full px-6 lg:px-8">
<div class="w-full sm:w-1/2 py-24">
<div>
<h1 class="text-balance rader uppercase tracking-tight text-5xl md:text-9xl text-white">Global Translation Leaders</h1>
Expand All @@ -81,8 +77,8 @@ const sponsors = await sanity.fetch(`*[_type == "sponsor"]{
</div>
</div>
</section>
<section class="bg-green px-6 py-24 lg:py-32 lg:px-8">
<div class="container justify-center items-center sm:flex gap-6 sm:px-6 text-white">
<section class="bg-gtl-green px-6 py-24 lg:py-32 lg:px-8">
<div class="gtl-container justify-center items-center sm:flex gap-6 sm:px-6 text-white">
<div class="w-full sm:w-1/2 pr-0 sm:pr-24">
<h2 class="text-balance rader uppercase tracking-tight text-5xl lg:text-8xl text-white mb-8">About GTL</h2>
<p class="gotham text-lg">Seed Company's Global Translation Leaders (GTL) program is supported by generous investors who understand the power of training and leadership in Bible translation. Sponsors include individuals, families, small groups, churches, businesses, and foundations who are committed to seeing Bible translation advance around the globe.</p>
Expand All @@ -95,20 +91,20 @@ const sponsors = await sanity.fetch(`*[_type == "sponsor"]{
</section>
<section class="w-full">
<div class="block lg:flex text-white text-center gotham">
<div class="w-full bg-light-green px-8 py-16 sm:px-32">
<div class="w-full bg-gtl-light-green px-8 py-16 sm:px-32">
<img src="https://cdn.sanity.io/media-libraries/ml0ZDygBMJD9/images/a952fd2db09a56eff39b8ec843f47cefaeb55ae4-500x462.png" alt="seedling icon" class="icon mx-auto mb-6" />
<h3 class="text-2xl sm:text-4xl gotham-bold my-6">Our Approach</h3>
<p class="gotham text-lg">There's no one-size-fits-all approach to Bible translation. Each people group and culture is different. That's why Seed Company works alongside local partners—who know their own languages and cultures best—to translate Scripture efficiently and accurately.</p>
</div>
<div class="w-full bg-light-gray px-8 py-16 sm:px-32">
<div class="w-full bg-gtl-light-gray px-8 py-16 sm:px-32">
<img src="https://cdn.sanity.io/media-libraries/ml0ZDygBMJD9/images/c7979f089a6938b674eda8058541c9ed54fed802-500x462.png" alt="seedling icon" class="icon mx-auto mb-6" />
<h3 class="text-2xl sm:text-4xl gotham-bold my-6">900+ Leaders</h3>
<p class="gotham text-lg font-weight-light">Over the past thirty years, Seed Company has been honored to support Bible translation leaders through internship-focused training. To date, we've supported over 900 translation leaders (and counting!) in this program. Now, we're excited to share the ability to sponsor individual participants, giving investors a unique opportunity to understand the culture, the language, the challenges, and the opportunities an individual translation leader is navigating!</p>
</div>
</div>
</section>
<section class="w-full bg-cream px-6 sm:px-8 py-24 lg:py-32">
<div class="w-full sm:flex container">
<section class="w-full bg-gtl-cream px-6 sm:px-8 py-24 lg:py-32">
<div class="w-full sm:flex gtl-container">
<div class="w-full sm:w-1/4 ">
<img src="https://cdn.sanity.io/media-libraries/ml0ZDygBMJD9/images/961a15b21d6110384890c187034926a22e62b785-924x1080.jpg" alt="Woman smiling" class="rounded-lg shadow-lg mb-6 sm:mb-0" />
<blockquote class="quote gotham-office mb-8 text-md italic pt-4">
Expand All @@ -122,8 +118,8 @@ const sponsors = await sanity.fetch(`*[_type == "sponsor"]{
</div>
</div>
</section>
<section class="w-full bg-green px-6 sm:px-8 py-24 lg:py-32 bg-green">
<div class="container">
<section class="w-full bg-gtl-green px-6 sm:px-8 py-24 lg:py-32 bg-green">
<div id="sponsors" class="gtl-container">
<h2 class="text-balance text-white rader uppercase text-5xl lg:text-8xl text-black mb-8">Sponsor a Global Translation Leader:</h2>
<SponsorCards sponsors={sponsors} />
</div>
Expand Down
14 changes: 7 additions & 7 deletions src/pages/sponsors/[slug].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ const imageUrl = sponsor.image ? imageBuilder.image(sponsor.image).width(800).ur

<Layout>
<div class="bg-[var(--sus-primary-heading)] min-h-screen text-white py-12">
<div class="container border-white border-2 rounded-lg mx-auto p-8 md:py-12">
<div class="container bg-[var(--cream)] border-white border-2 rounded-lg mx-auto p-8 md:py-12">
<div class="mb-8">
<a href="/global-translation-leaders" class="text-[var(--sus-button-secondary-bg)] hover:underline">
<a href="/global-translation-leaders#sponsors" class="text-[var(--sus-button-secondary-bg)] hover:underline">
← Back to Global Translation Leaders
</a>
</div>
Expand All @@ -46,19 +46,19 @@ const imageUrl = sponsor.image ? imageBuilder.image(sponsor.image).width(800).ur
<div class="w-full">
<div>
<div class="w-full">
<h1 class="text-4xl lg:text-6xl font-bold mb-4">{sponsor.name}</h1>
<h1 class="text-4xl text-[var(--black)] lg:text-6xl font-bold mb-4">{sponsor.name}</h1>
</div>
<div class="space-y-2 mb-8 md:grid grid-cols-2">
<div class="space-y-2 mb-8 md:grid grid-cols-2 text-[var(--black)] ">
<p class="mt-2"><strong>Region:</strong> {sponsor.region}</p>
<p><strong>Gender:</strong> {sponsor.gender}</p>
<p><strong>GTL ID:</strong> {sponsor.gtlId}</p>
<p><strong>Focus:</strong> {sponsor.focus}</p>
</div>
</div>
</div>
<div class="w-full">
<div class="w-full ">
<div>
<div class="space-y-4 mb-6">
<div class="space-y-4 mb-6 ">
{!sponsor.isSponsored && (
<form action="">
<input type="text" placeholder="Your message..." class="border border-gray-300 p-2 rounded-lg w-full" />
Expand All @@ -74,7 +74,7 @@ const imageUrl = sponsor.image ? imageBuilder.image(sponsor.image).width(800).ur
</div>
</div>

<div class="mb-8">
<div class="mb-8 text-[var(--black)] ">
<h2 class="text-2xl font-bold mb-4">Biography</h2>
<p class="text-lg leading-relaxed">{sponsor.bio}</p>
</div>
Expand Down
46 changes: 44 additions & 2 deletions src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,52 @@
--footer-bg: #000;
--footer-text: #fff;
--mkt-primary-heading-size: 8rem;

--cream: #f7f1e7;
--black: #000000;
--border-accent: #d6d4c9;
}

--gtl-dark-green: #1d3738;
--gtl-light-green: #29b77c;
--gtl-light-gray: #636466;
--gtl-cream: #f7f1e7;
}
.gtl-container {
max-width: 1440px;
margin: 0 auto;
}
.gtl-logo-wrapper {
max-width: 1440px;
margin: 0 auto;
}
.bg-gtl-green {
background-color: var(--gtl-dark-green);
}
.bg-gtl-light-green {
background-color: var(--gtl-light-green);
}
.bg-gtl-light-gray {
background-color: var(--gtl-light-gray);
}
.bg-gtl-cream {
background-color: var(--gtl-cream);
}
.icon {
width: 50px;
height: 50px;
}
.quote {
font-weight: 300;
}
.quote::before {
content: "“";
display: block;
font-family: 'Times New Roman', serif;
font-weight: 900;
height: 0.6em;
line-height: 1;
color: var(--gtl-light-green);
font-size: calc(1px * 100);
}
/* Sustainers Template Styles */
.sus-primary-bg {
background-color: var(--sus-primary-bg);
Expand Down
Loading