Skip to content

Commit 7da22c0

Browse files
tingebertingeber
committed
callout and spacing
1 parent e9b2894 commit 7da22c0

11 files changed

Lines changed: 116 additions & 40 deletions

‎.pages.yml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,18 @@ components:
251251
required: true
252252
description: Markdown content for this section
253253

254+
callout_section:
255+
type: object
256+
fields:
257+
- name: background
258+
label: Section Background
259+
component: background_select
260+
- name: content
261+
label: Content
262+
type: rich-text
263+
required: true
264+
description: Markdown content rendered inside a corner-bracket frame.
265+
254266
button_section:
255267
type: object
256268
fields:
@@ -581,6 +593,9 @@ components:
581593
- name: richText
582594
label: Rich Text Section
583595
component: richtext_section
596+
- name: callout
597+
label: Callout Section
598+
component: callout_section
584599
- name: button
585600
label: Button Section
586601
component: button_section
@@ -676,6 +691,10 @@ content:
676691
label: Rich Text Section
677692
component: richtext_section
678693

694+
- name: callout
695+
label: Callout Section
696+
component: callout_section
697+
679698
- name: button
680699
label: Button Section
681700
component: button_section

‎src/components/sections/CalloutSection.astro‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
import renderMarkdownWithImages from '@utils/renderMarkdown';
3+
4+
export interface Props {
5+
content: string;
6+
}
7+
8+
const { content } = Astro.props;
9+
const { html } = await renderMarkdownWithImages(content, false);
10+
---
11+
12+
<div class="mx-auto max-w-3xl">
13+
<div class="corner-brackets p-8 text-ink md:p-12 lg:p-16">
14+
<div
15+
class="prose max-w-none text-ink prose-p:my-0 prose-p:font-serif prose-p:text-lg prose-p:leading-relaxed md:prose-p:leading-normal"
16+
>
17+
<Fragment set:html={html} />
18+
</div>
19+
</div>
20+
</div>

‎src/components/sections/HowWeWorkSection.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const modalities = modalityEntries
4747
}));
4848
---
4949

50-
<section class="text-ink">
50+
<section class="py-8 text-ink md:py-14 lg:py-20">
5151
<header class="mb-10 flex flex-col items-start gap-4 md:mb-14">
5252
<SectionTitle title={title} class="text-ink" />
5353
{
@@ -92,7 +92,7 @@ const modalities = modalityEntries
9292
{col.name}
9393
</span>
9494
{col.tagline && (
95-
<p class="font-mono text-[0.65rem] tracking-[0.18em] text-ink-muted uppercase">
95+
<p class="font-serif text-sm leading-relaxed text-ink-soft">
9696
{col.tagline}
9797
</p>
9898
)}
@@ -137,7 +137,7 @@ const modalities = modalityEntries
137137
</div>
138138

139139
{col.tagline && (
140-
<p class="mt-3 font-mono text-[0.65rem] tracking-[0.18em] text-ink-muted uppercase">
140+
<p class="mt-3 font-serif text-sm leading-relaxed text-ink-soft md:text-base">
141141
{col.tagline}
142142
</p>
143143
)}

‎src/components/sections/LatestUpdatesSection.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const resolved: Resolved[] = projects
6363

6464
{
6565
resolved.length > 0 && (
66-
<div class="py-12 text-white md:py-20 lg:py-28">
66+
<div class="py-8 text-white md:py-14 lg:py-20">
6767
<header class="mb-10 md:mb-8">
6868
<SectionTitle title={title} class="text-white" />
6969
</header>

‎src/components/sections/OrganisationsRollSection.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ if (limit) {
2121
}
2222
---
2323

24-
<div class="py-4">
24+
<div class="py-8 md:py-14 lg:py-20">
2525
{
2626
title && (
2727
<div class="mb-10 flex max-w-2xl flex-col gap-3">

‎src/components/sections/ProjectsRollSection.astro‎

Lines changed: 51 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const orgs = await getOrganisations();
4848
const orgById = new Map(orgs.map((o) => [o.data.id, o.data]));
4949
---
5050

51-
<div class="py-4">
51+
<div class="py-8 md:py-14 lg:py-20">
5252
{
5353
title && (
5454
<div class="mb-8 flex max-w-2xl flex-col gap-3">
@@ -64,33 +64,56 @@ const orgById = new Map(orgs.map((o) => [o.data.id, o.data]));
6464

6565
{
6666
projects.length > 0 ? (
67-
<div class:list={['grid gap-4', gridCols]}>
68-
{projects.map((project) => (
69-
<ProjectCard
70-
name={project.data.name}
71-
slug={project.data.slug}
72-
description={project.data.description}
73-
client={
74-
project.data.client
75-
? orgById.get(project.data.client)?.name
76-
: undefined
77-
}
78-
clientLogo={
79-
project.data.client
80-
? orgById.get(project.data.client)?.image
81-
: undefined
82-
}
83-
phases={project.data.phases}
84-
skills={project.data.skills}
85-
projectStatus={project.data.projectStatus}
86-
image={hideImages ? undefined : project.data.image}
87-
class:list={[
88-
!hideImages && project.data.image ? 'sm:col-span-2' : '',
89-
cardAspect,
90-
]}
91-
/>
92-
))}
93-
</div>
67+
<>
68+
<div class:list={['grid gap-4', gridCols]}>
69+
{projects.map((project) => (
70+
<ProjectCard
71+
name={project.data.name}
72+
slug={project.data.slug}
73+
description={project.data.description}
74+
client={
75+
project.data.client
76+
? orgById.get(project.data.client)?.name
77+
: undefined
78+
}
79+
clientLogo={
80+
project.data.client
81+
? orgById.get(project.data.client)?.image
82+
: undefined
83+
}
84+
phases={project.data.phases}
85+
skills={project.data.skills}
86+
projectStatus={project.data.projectStatus}
87+
image={hideImages ? undefined : project.data.image}
88+
class:list={[
89+
!hideImages && project.data.image ? 'sm:col-span-2' : '',
90+
cardAspect,
91+
]}
92+
/>
93+
))}
94+
</div>
95+
96+
<div class="mt-14 flex justify-end pt-4 md:mt-16">
97+
<a
98+
href="/projects"
99+
class="group inline-flex items-center gap-4 no-underline"
100+
>
101+
<span class="font-mono text-sm tracking-[0.22em] text-ink uppercase md:text-[0.95rem]">
102+
See all projects
103+
</span>
104+
<span
105+
aria-hidden="true"
106+
class="block h-px w-12 bg-ink-muted/60 transition-[width,background-color] duration-300 group-hover:w-20 group-hover:bg-ink"
107+
/>
108+
<span
109+
aria-hidden="true"
110+
class="font-mono text-base text-ink transition-transform duration-300 group-hover:translate-x-1 md:text-lg"
111+
>
112+
→
113+
</span>
114+
</a>
115+
</div>
116+
</>
94117
) : (
95118
<p class="text-ink-muted italic">No projects to show.</p>
96119
)

‎src/components/sections/Sections.astro‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import ApplyForUxdSection from '@components/sections/ApplyForUxdSection.astro';
33
import ButtonSection from '@components/sections/ButtonSection.astro';
44
import CalEmbedSection from '@components/sections/CalEmbedSection.astro';
5+
import CalloutSection from '@components/sections/CalloutSection.astro';
56
import CardSection from '@components/sections/CardSection.astro';
67
import FeedGridSection from '@components/sections/FeedGridSection.astro';
78
import FlexiSection from '@components/sections/FlexiSection.astro';
@@ -58,6 +59,8 @@ const { sectionItems } = Astro.props;
5859
withTOC={section.withTOC}
5960
/>
6061
);
62+
case 'callout':
63+
return <CalloutSection content={section.content} />;
6164
case 'card':
6265
return (
6366
<CardSection

‎src/components/sections/UxdCtaSection.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const {
1717
} = Astro.props;
1818
---
1919

20-
<div class="relative py-12 md:py-20 lg:py-28">
20+
<div class="relative py-8 md:py-14 lg:py-20">
2121
<div class="grid gap-10 md:gap-14 lg:grid-cols-[7fr_5fr] lg:items-end lg:gap-20">
2222
{/* LEFT: title + statement + description */}
2323
<div class="flex flex-col gap-6">

‎src/content.config.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,10 @@ const pagesCollection = defineCollection({
104104
content: z.string(),
105105
withTOC: z.boolean().optional().default(false),
106106
}),
107+
SectionCommonSchema.extend({
108+
type: z.literal('callout'),
109+
content: z.string(),
110+
}),
107111
SectionCommonSchema.extend({
108112
type: z.literal('button'),
109113
title: z.string().optional(),

‎src/content/pages/home.yaml‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@ sections:
66
background:
77
bgColor: phase-gradient
88
bgType: full
9+
- type: callout
10+
content: >-
11+
Draftlab is a design and technology studio that works with civil society organisations, humanitarians, open tech projects, and multi-stakeholder initiatives. We believe technology should be appropriate to its context: secure where it needs to be, sovereign where it matters, simple where complexity would be a burden.
12+
background:
13+
bgColor: phase-gradient-light
14+
bgType: full
915
# - type: framework
1016
# title: How we work
1117
# description: 'The framework below maps what we do across two dimensions: the phase of your project, and the way we show up.'
@@ -16,11 +22,7 @@ sections:
1622
background:
1723
bgColor: white
1824
bgType: full
19-
- type: latestUpdates
20-
limit: 4
21-
background:
22-
bgColor: phase-gradient
23-
bgType: full
25+
2426
- type: projectsRoll
2527
title: Featured projects
2628
featuredOnly: true
@@ -30,6 +32,11 @@ sections:
3032
background:
3133
bgColor: white
3234
bgType: full
35+
- type: latestUpdates
36+
limit: 4
37+
background:
38+
bgColor: phase-gradient
39+
bgType: full
3340
- type: organisationsRoll
3441
title: Clients and partners
3542
background:

0 commit comments

Comments
 (0)