Skip to content

Commit e4302ab

Browse files
fwextensionsfwextensions
committed
Redesign get-started.astro page
Use large digits for the getting started steps. Add BigHeading.astro component to show large uppercase text. Move the join the conversation item first. Tweak GitHubEventCard.tsx to use stone colors.
1 parent 1622a43 commit e4302ab

File tree

9 files changed

+136
-72
lines changed

9 files changed

+136
-72
lines changed

‎src/components/BigHeading.astro‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
interface Props {
3+
anchor?: "left" | "right";
4+
size?: "lg" | "md" | "sm";
5+
}
6+
7+
const Sizes = {
8+
lg: {
9+
Heading: "h2",
10+
headingFontSize: "text-9xl",
11+
},
12+
md: {
13+
Heading: "h3",
14+
headingFontSize: "text-5xl leading-[0.9]",
15+
},
16+
sm: {
17+
Heading: "h4",
18+
headingFontSize: "text-2xl",
19+
},
20+
};
21+
22+
const {
23+
anchor = "left",
24+
size = "lg",
25+
} = Astro.props;
26+
const { Heading, headingFontSize } = Sizes[size];
27+
---
28+
29+
<Heading
30+
class:list={[
31+
"flex-1",
32+
"font-condensed",
33+
"font-semibold",
34+
"uppercase",
35+
headingFontSize,
36+
"leading-[0.8]",
37+
"mb-0",
38+
// anchor === "left" && "text-right",
39+
]}
40+
>
41+
<slot />
42+
</Heading>
43+
44+
<style>
45+
h2, h3, h4 {
46+
:global(b) {
47+
color: var(--color-sf-red);
48+
font-weight: inherit;
49+
}
50+
}
51+
</style>

‎src/components/BlogListItem.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,13 @@ const thumbnailSize = `${ThumbnailUnits}rem`;
4545
alt={image_alt}
4646
widths={[Thumbnail2X]}
4747
sizes=`${Thumbnail2X}px`
48+
loading="lazy"
4849
/>
4950
: <DefaultThumbnail size={thumbnailSize} />
5051
}
5152
</a>
5253
<div class="flex-1">
53-
<time class="block text-gray-500 mb-2 leading-none" datetime={date?.toISOString()}>{dateString}</time>
54+
<time class="block text-stone-500 font-condensed mb-2 leading-none" datetime={date?.toISOString()}>{dateString}</time>
5455
<h3 class="text-2xl font-semibold font-condensed mb-6"><a href={postURL}>{title}</a></h3>
5556
{/* descriptionHTML is formatted as a <p> tag - Tailwind prose handles paragraph styling if applied upstream */}
5657
<Fragment set:html={descriptionHTML} />

‎src/components/GetStartedStep.astro‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,34 @@
11
---
2-
import { Image } from "astro:assets";
3-
import type { ImageMetadata } from "astro";
4-
5-
interface Props {
6-
title: string;
7-
src: ImageMetadata;
8-
}
9-
10-
const { title, src } = Astro.props;
2+
import BigHeading from "./BigHeading.astro";
113
---
124

13-
<li class="relative pl-4 mb-6 [counter-increment:item]">
14-
<figure class="flex flex-row items-start gap-6">
15-
<Image class="w-24" src={src} alt={title} loading="eager" />
16-
<figcaption class="p-0">
17-
<h3 class="my-2 text-xl text-primary font-semibold">{title}</h3>
5+
<li class="relative flex flex-row items-start gap-1u mb-2u [counter-increment:item]">
6+
<div class="flex-1">
7+
<BigHeading size="md">
8+
<slot name="title" />
9+
</BigHeading>
10+
11+
<div class="mt-1u text-xl">
1812
<slot />
19-
</figcaption>
20-
</figure>
13+
</div>
14+
</div>
2115
</li>
2216

2317
<style>
18+
/* we have to use @reference here to get access toTailwind utility classes */
19+
@reference "@/styles/global.css";
20+
2421
li::before {
25-
content: counter(item);
26-
font-weight: bold;
27-
font-size: 2rem;
28-
color: var(--color-sf-red);
29-
position: absolute;
30-
left: -1.5rem;
31-
line-height: 1;
22+
@apply content-[counter(item)]
23+
text-[length:var(--spacing-4col)]
24+
text-right
25+
text-stone-200
26+
font-semibold
27+
font-condensed
28+
leading-[.8]
29+
w-6col;
30+
text-box-trim: trim-both;
31+
text-box-edge: cap alphabetic;
32+
font-variant-numeric: tabular-nums;
3233
}
3334
</style>

‎src/components/HeaderLogo.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@ import logoType from "@/assets/brand/logoType.svg";
88
<Image src={logo} alt="SF Civic Tech Logo" class="h-[2.4rem] w-auto" loading="eager" />
99
<div class="flex flex-col items-start ">
1010
<Image src={logoType} alt="SF Civic Tech" class="h-[1.15rem] w-auto mb-2" loading="eager" />
11-
<em class="font-normal text-xs text-gray-400 leading-[.6]">formerly Code for San Francisco</em>
11+
<em class="font-normal text-xs text-stone-400 leading-[.6]">formerly Code for San Francisco</em>
1212
</div>
1313
</div>

‎src/components/TagOrnament.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ interface Props {
55
color?: string;
66
}
77
8-
const { color = "#f2f2f2" } = Astro.props;
8+
const { color } = Astro.props;
99
---
1010

1111
<Icon
1212
name="tag-ornament"
1313
viewBox="0 18 116 116"
14-
class={`w-24 max-w-full`}
15-
style={{ color }}
14+
class="w-24 max-w-full text-stone-100"
15+
style={color && { color }}
1616
width="inherit"
1717
height="inherit"
1818
/>

‎src/pages/get-started.astro‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,35 @@
22
import BaseLayout from "@/layouts/BaseLayout.astro";
33
import GetStartedStep from "@/components/GetStartedStep.astro";
44
import { base, meetupURL, memberFormURL, projectsURL, slackURL, codeOfConductURL } from "@/utils/urls";
5-
import about from "@/assets/get-started/about.webp";
6-
import onboard from "@/assets/get-started/onboard.webp";
7-
import attend from "@/assets/get-started/attend.webp";
8-
import join from "@/assets/get-started/join.webp";
95
106
const meta = {
117
description: "Get started with SF Civic Tech. We're here to help you get involved.",
12-
image: onboard.src,
138
};
149
---
1510

16-
<BaseLayout title="Get Started"
11+
<BaseLayout title=""
1712
meta={meta}
1813
>
19-
<p class="mb-4">
20-
Regardless of skillset or background, anyone can contribute to their
21-
community through SF Civic Tech
22-
</p>
23-
<ol class="list-none [counter-reset:item] mt-6">
24-
<GetStartedStep
25-
title="Tell us about yourself"
26-
src={about}
27-
>
14+
<ol class="list-none [counter-reset:item] mt-3u">
15+
<GetStartedStep>
16+
<Fragment slot="title">
17+
<b>Tell us</b><br>
18+
about<br>
19+
yourself
20+
</Fragment>
21+
2822
<p>
2923
Fill out our <a href={memberFormURL}>2 minute form</a> so we can help match you with opportunities
3024
</p>
3125
</GetStartedStep>
32-
<GetStartedStep
33-
title="Onboard"
34-
src={onboard}
35-
>
36-
<ol class="list-decimal pl-5 space-y-1">
26+
27+
<GetStartedStep>
28+
<Fragment slot="title">
29+
<b>On</b><br>
30+
board
31+
</Fragment>
32+
33+
<ol class="list-decimal pl-5 space-y-1 marker:text-muted">
3734
<li class="marker:initial">
3835
Read our <a href={base(codeOfConductURL)}>Code of Conduct</a>
3936
</li>
@@ -45,18 +42,25 @@ const meta = {
4542
</li>
4643
</ol>
4744
</GetStartedStep>
48-
<GetStartedStep
49-
title="Attend Hack Night"
50-
src={attend}
51-
>
45+
46+
<GetStartedStep>
47+
<Fragment slot="title">
48+
<b>Attend</b><br>
49+
Hack<br>
50+
Night
51+
</Fragment>
52+
5253
<p>
5354
We meet remotely every Wednesday to work on projects! Head over to our <a href={meetupURL}>Meetup</a> for more details
5455
</p>
5556
</GetStartedStep>
56-
<GetStartedStep
57-
title="Join a Project"
58-
src={join}
59-
>
57+
58+
<GetStartedStep>
59+
<Fragment slot="title">
60+
<b>Join</b><br>
61+
a Project
62+
</Fragment>
63+
6064
<p>
6165
Review our current portfolio listed on our <a href={projectsURL}>Projects</a> page. Join us at Hack Night or on Slack to get involved!
6266
</p>

‎src/pages/index.astro‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import BigText from "@/components/BigText.astro";
1313
Civic<br>
1414
Tech
1515
</Fragment>
16+
1617
<Fragment slot="body">
1718
We are a welcoming and inclusive volunteer group of <i>developers</i>, <i>designers</i>,
1819
<i>data geeks</i>, and <i>citizen activists</i> who use creative technology to address civic
@@ -26,6 +27,7 @@ import BigText from "@/components/BigText.astro";
2627
Wed<br>
2728
6:30PM
2829
</Fragment>
30+
2931
<Fragment slot="body">
3032
<p><i>Virtual Civic Hack Night</i></p>
3133
<p>Not just for techies, success means having volunteers from all across
@@ -36,29 +38,32 @@ import BigText from "@/components/BigText.astro";
3638

3739
<BigText size="md" showOrnament={false}>
3840
<Fragment slot="title">
39-
<b>Propose a<br>
40-
Project</b>
41+
<b>Join the</b><br>
42+
Conversation
4143
</Fragment>
44+
4245
<Fragment slot="body">
43-
<p>Have an idea to improve community or civic life in San Francisco? We want to hear it.</p>
46+
<p>Our Slack workspace is the main hub for communication and collaboration. Introduce yourself!</p>
4447
</Fragment>
4548
</BigText>
4649

4750
<BigText size="md" anchor="right" showOrnament={false}>
4851
<Fragment slot="title">
49-
<b>Join the<br>
50-
Conversation</b>
52+
<b>Propose a</b><br>
53+
Project
5154
</Fragment>
55+
5256
<Fragment slot="body">
53-
<p>Our Slack workspace is the main hub for communication and collaboration. Introduce yourself!</p>
57+
<p>Have an idea to improve community or civic life in San Francisco? We want to hear it.</p>
5458
</Fragment>
5559
</BigText>
5660

5761
<BigText size="md">
5862
<Fragment slot="title">
59-
<b>Stay<br>
60-
Informed</b>
63+
<b>Stay</b><br>
64+
Informed
6165
</Fragment>
66+
6267
<Fragment slot="body">
6368
<p>Sign up for our newsletter to stay updated on events, projects, and other announcements.</p>
6469
</Fragment>

‎src/react/GitHubEvents/GitHubEventCard.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,14 @@ export default function GitHubEventCard({
2626
className="
2727
w-[calc((100cqw-2*theme(spacing.10)-1px)/3)]
2828
block aspect-square p-4
29-
text-center no-underline text-gray-600 dark:text-gray-400
29+
text-center no-underline
30+
text-stone-600 dark:text-stone-400
3031
flex flex-col items-center justify-between flex-shrink-0
31-
bg-gray-100 dark:bg-gray-800
32-
border border-gray-300 dark:border-gray-700
32+
bg-stone-50 dark:bg-stone-800
33+
border border-stone-300 dark:border-stone-700
3334
transition-colors duration-300 ease-in-out
34-
hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-600 dark:hover:text-gray-400
35+
hover:bg-stone-200 dark:hover:bg-stone-700
36+
hover:text-stone-700 dark:hover:text-stone-400
3537
snap-start
3638
overflow-hidden break-words
3739
"
@@ -42,17 +44,17 @@ export default function GitHubEventCard({
4244
alt={`${username}'s avatar`}
4345
className="w-14 h-14 aspect-square rounded-full mb-1"
4446
/>
45-
<h3 className="m-0 mb-1 text-base font-semibold">{username}</h3>
47+
<h3 className="m-0 mb-1 text-base text-muted font-semibold">{username}</h3>
4648
</header>
4749
<p
4850
title={messageTooltip}
49-
className="text-sm leading-[1.2] m-0 overflow-hidden text-ellipsis break-words line-clamp-2 lg:line-clamp-3"
51+
className="text-sm leading-[1.2] font-condensed m-0 overflow-hidden text-ellipsis break-words line-clamp-2 lg:line-clamp-3"
5052
// break-words doesn't actually add word-break: break-word, which is needed to handle the long lines
5153
style={{ wordBreak: "break-word" }}
5254
>
5355
{message}
5456
</p>
55-
<footer className="text-xs opacity-75">
57+
<footer className="text-xs text-muted">
5658
<h4 className="mt-1 mb-0 font-bold">{repo}</h4>
5759
<time
5860
dateTime={timestamp}

‎src/styles/global.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
--font-condensed: "Barlow Condensed", sans-serif;
88

99
--color-primary: var(--color-sf-red);
10-
--color-text-base: black;
10+
--color-text-base: var(--color-stone-900);
1111
--color-background-base: white;
1212
--color-muted: var(--color-stone-500);
1313

0 commit comments

Comments
 (0)