Skip to content

Commit 720034f

Browse files
outofambitoutofambit
committed
standardize section spacing
1 parent 0bfbb24 commit 720034f

13 files changed

Lines changed: 108 additions & 95 deletions

File tree

‎src/components/GridItem/ContributorDoc.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const { item } = Astro.props;
1414
href={`/contribute/${removeLocaleAndExtension(item.slug)}`}
1515
>
1616
<div
17-
class="grid place-content-center mt-xs bg-accent-color text-accent-type-color aspect-photo p-4 mb-2"
17+
class="grid place-content-center bg-accent-color text-accent-type-color aspect-photo p-4"
1818
>
1919
<span
2020
class="text-lg text-center align-middle line-clamp-3 text-pretty group-hover:underline"

‎src/components/ReferenceDirectoryWithFilter/index.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -110,16 +110,16 @@ export const ReferenceDirectoryWithFilter = ({
110110
}
111111

112112
return (
113-
<div class="my-lg">
113+
<div class="my-[40px]">
114114
{subcat.name.includes("p5.") ? (
115115
<a
116116
id={subcat.name}
117117
href={`/reference/${category.name === "p5.sound" ? "p5.sound" : "p5"}/${subcat.name}`}
118118
>
119-
<h3>{subcat.name}</h3>
119+
<h3 className="m-0">{subcat.name}</h3>
120120
</a>
121121
) : (
122-
<h3>
122+
<h3 className="m-0">
123123
{subcat.name}
124124
<a id={subcat.name} />
125125
</h3>
@@ -133,10 +133,7 @@ export const ReferenceDirectoryWithFilter = ({
133133
return <div class="mt-lg">{uiTranslations["No Results"]}</div>;
134134
}
135135
return filteredEntries.map((category) => (
136-
<div
137-
class="my-md border-b border-type-color pb-2xl last:!border-0"
138-
key={category.name}
139-
>
136+
<section key={category.name}>
140137
<h2>
141138
{category.name}
142139
<a id={category.name} />
@@ -147,7 +144,7 @@ export const ReferenceDirectoryWithFilter = ({
147144
{renderEntries(subcat.entries)}
148145
</div>
149146
))}
150-
</div>
147+
</section>
151148
));
152149
};
153150

‎src/components/RelatedItems/index.astro‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -21,24 +21,26 @@ interface Props {
2121
const { title, items, class: className } = Astro.props;
2222
---
2323

24-
<div class={className}>
24+
<div>
2525
<hr />
26-
<h2 class="mt-md mb-lg">{title}</h2>
27-
<div class="grid grid-cols-2 lg:grid-cols-4 gap-y-xl gap-x-[40px]">
28-
{
29-
items.map((i) => {
30-
if (isCurationResponse(i)) {
31-
return <GridItemSketch item={i} />;
32-
}
33-
switch (i.collection) {
34-
case "reference":
35-
return <GridItemReference item={i} />;
36-
case "examples":
37-
return <GridItemExample item={i} />;
38-
case "events":
39-
return <GridItemEvent item={i} />;
40-
}
41-
})
42-
}
43-
</div>
26+
<section class={className}>
27+
<h2>{title}</h2>
28+
<ul class="grid grid-cols-2 lg:grid-cols-4 gap-y-xl gap-x-[40px]">
29+
{
30+
items.map((i) => {
31+
if (isCurationResponse(i)) {
32+
return <GridItemSketch item={i} />;
33+
}
34+
switch (i.collection) {
35+
case "reference":
36+
return <GridItemReference item={i} />;
37+
case "examples":
38+
return <GridItemExample item={i} />;
39+
case "events":
40+
return <GridItemEvent item={i} />;
41+
}
42+
})
43+
}
44+
</ul>
45+
</section>
4446
</div>

‎src/layouts/AboutLayout.astro‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -59,13 +59,13 @@ const displayedFeaturedPeople = sortedFeaturedPeople.slice(0, 6);
5959
<Head title="About" locale={currentLocale} />
6060

6161
<BaseLayout title="About" variant="root">
62-
<section class="mt-md pb-xs rendered-markdown">
62+
<section class="rendered-markdown">
6363
<Content />
6464
</section>
65-
<hr />
66-
<section class="pb-2xl lg:pb-xl">
65+
66+
<section>
6767
<h2 id="people">{t("People")}</h2>
68-
<ul class="content-grid my-xl">
68+
<ul class="content-grid">
6969
{
7070
displayedFeaturedPeople.map((fp) => (
7171
<li class="col-span-2">
@@ -74,12 +74,12 @@ const displayedFeaturedPeople = sortedFeaturedPeople.slice(0, 6);
7474
))
7575
}
7676
</ul>
77-
<LinkButton variant="link" url="/people" class="my-md min-w-[220px]"
77+
<LinkButton variant="link" url="/people" class="mt-md min-w-[220px]"
7878
>{t("All People")}</LinkButton
7979
>
8080
</section>
81-
<hr />
82-
<section class="pb-3xl lg:pb-2xl">
81+
82+
<section>
8383
<h2 id="contact">{t("Contact")}</h2>
8484
<div class="text-2xl grid grid-cols-6 lg:grid-cols-9 gap-x-[40px] mt-xl">
8585
<div class="col-span-2 lg:col-span-3">Email</div><div
@@ -100,7 +100,6 @@ const displayedFeaturedPeople = sortedFeaturedPeople.slice(0, 6);
100100
</div>
101101
</div>
102102
</section>
103-
<hr />
104103
<section>
105104
<h2 id="processing-foundation">Processing Foundation</h2>
106105
<ul class="text-2xl mt-xl">
@@ -121,7 +120,4 @@ const displayedFeaturedPeople = sortedFeaturedPeople.slice(0, 6);
121120
a {
122121
@apply text-type-magenta-dark;
123122
}
124-
h2 {
125-
@apply mt-sm;
126-
}
127123
</style>

‎src/layouts/BaseLayout.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const {
2626
subtitle,
2727
className = "",
2828
variant = "root",
29-
mainContentParentClass = "mx-5 md:mx-lg pb-4xl mt-md",
29+
mainContentParentClass = "mx-5 md:mx-lg mt-md",
3030
homepageConfig,
3131
} = Astro.props;
3232
const currentLocale = getCurrentLocale(Astro.url.pathname);

‎src/layouts/CommunityLayout.astro‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ setJumpToState({
4444
<Head title={"Community"} locale={currentLocale} />
4545

4646
<BaseLayout title="Community">
47-
<section class="mt-md mb-xl">
48-
<h2 class="mb-lg">{t("Sketches")}<a id="sketches"></a></h2>
47+
<section>
48+
<h2>{t("Sketches")}<a id="sketches"></a></h2>
4949
<ul class="grid grid-cols-2 gap-y-xl gap-x-[40px] lg:grid-cols-4">
5050
{
5151
sketches.map((sk, i) => (
@@ -70,9 +70,9 @@ setJumpToState({
7070
>
7171
</div>
7272
</section>
73-
<hr />
74-
<section class="mt-md mb-xl">
75-
<h2 class="mb-lg">{t("Libraries")}<a id="libraries"></a></h2>
73+
74+
<section>
75+
<h2>{t("Libraries")}<a id="libraries"></a></h2>
7676
<ul class="grid grid-cols-2 gap-y-xl gap-x-[40px] lg:grid-cols-4">
7777
{
7878
libraries.map((lib) => (
@@ -90,9 +90,9 @@ setJumpToState({
9090
>
9191
</div>
9292
</section>
93-
<hr />
94-
<section class="mt-md mb-xl">
95-
<h2 class="mb-lg">{t("Events")}<a id="events"></a></h2>
93+
94+
<section>
95+
<h2>{t("Events")}<a id="events"></a></h2>
9696
<ul class="grid grid-cols-2 gap-y-xl gap-x-[40px] lg:grid-cols-4">
9797
{
9898
events.map((event, i) => (

‎src/layouts/ContributeLayout.astro‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ setJumpToState({
5151
/>
5252

5353
<BaseLayout title="Contribute">
54-
<section class="mt-md mb-xl">
55-
<h2 class="mb-lg" id="docs">{t("Contributor Docs")}</h2>
54+
<section>
55+
<h2 id="docs">{t("Contributor Docs")}</h2>
5656
<div class="mb-md grid grid-cols-1 gap-x-[40px] lg:grid-cols-2">
5757
<div>
5858
<Image
@@ -77,16 +77,15 @@ setJumpToState({
7777
}
7878
</ul>
7979
</section>
80-
<hr />
81-
<section class="mt-md mb-xl">
82-
<h2 class="mt-md mb-lg" id="donate">{t("Donate")}</h2>
80+
<section>
81+
<h2 id="donate">{t("Donate")}</h2>
8382
<ul class="grid grid-cols-2 gap-y-xl gap-x-[40px] lg:grid-cols-4">
8483
{
8584
// This is the same markup as in ContributorDocItem
8685
donateSectionItems.map((it) => (
8786
<li>
8887
<a href={it.url}>
89-
<div class="grid place-content-center mt-xs bg-accent-color text-accent-type-color aspect-photo p-4 mb-2">
88+
<div class="grid place-content-center bg-accent-color text-accent-type-color aspect-photo p-4">
9089
<span class="text-lg text-center align-middle line-clamp-3 text-pretty">
9190
{it.title}
9291
</span>

‎src/layouts/ExamplesLayout.astro‎

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -57,23 +57,18 @@ setJumpToState(jumpToState);
5757
<BaseLayout title="Examples">
5858
{
5959
examplesByCategory.map((category, i) => (
60-
<>
61-
<section class="grid pb-3xl lg:pb-2xl last:pb-0">
62-
<h2 class="col-span-full mb-xl mt-0">
63-
{category.name} <a id={category.name.toLowerCase()} />
64-
</h2>
65-
<ul class="col-span-full grid grid-cols-2 lg:grid-cols-4 gap-x-[20px] gap-y-[40px] lg:gap-x-[40px]">
66-
{category.examples.map((exampleEntry, i) => (
67-
<li class="col-span-1">
68-
{<GridItemExample item={exampleEntry} lazyLoad={i <= 4} />}
69-
</li>
70-
))}
71-
</ul>
72-
</section>
73-
{i !== examplesByCategory.length - 1 ? (
74-
<hr class="mb-sm col-span-full" />
75-
) : null}
76-
</>
60+
<section class="grid">
61+
<h2 class="col-span-full">
62+
{category.name} <a id={category.name.toLowerCase()} />
63+
</h2>
64+
<ul class="col-span-full grid grid-cols-2 lg:grid-cols-4 gap-x-[20px] gap-y-[40px] lg:gap-x-[40px]">
65+
{category.examples.map((exampleEntry, i) => (
66+
<li class="col-span-1">
67+
{<GridItemExample item={exampleEntry} lazyLoad={i <= 4} />}
68+
</li>
69+
))}
70+
</ul>
71+
</section>
7772
))
7873
}
7974
</BaseLayout>

‎src/layouts/PeopleLayout.astro‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ setJumpToState(null);
6363
{
6464
featuredEntries.map((category, i) => (
6565
<section>
66-
<h2 class="mb-lg">{category.label}</h2>
66+
<h2>{category.label}</h2>
6767
<ul class="content-grid">
6868
{category.members.map((person) => (
6969
<li class="col-span-6 md:col-span-9 lg:col-span-12 content-grid">
@@ -96,19 +96,21 @@ setJumpToState(null);
9696
))
9797
}
9898

99-
<h2 class="mb-lg">{contributorEntries.label}</h2>
100-
<ul class="grid grid-cols-2 lg:grid-cols-4 gap-x-[40px]">
101-
{
102-
lodash.shuffle(contributorEntries.members).map((person) => (
103-
<li class="col-span-1">
104-
<a
105-
href={person.data.url}
106-
aria-label={`Link to ${person.data.name}'s personal website'`}
107-
>
108-
{person.data.name}
109-
</a>
110-
</li>
111-
))
112-
}
113-
</ul>
99+
<section>
100+
<h2>{contributorEntries.label}</h2>
101+
<ul class="grid grid-cols-2 lg:grid-cols-4 gap-x-[40px]">
102+
{
103+
lodash.shuffle(contributorEntries.members).map((person) => (
104+
<li class="col-span-1">
105+
<a
106+
href={person.data.url}
107+
aria-label={`Link to ${person.data.name}'s personal website'`}
108+
>
109+
{person.data.name}
110+
</a>
111+
</li>
112+
))
113+
}
114+
</ul>
115+
</section>
114116
</BaseLayout>

‎src/layouts/TextDetailLayout.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ setJumpToState(null);
3030
className={pageTopic}
3131
subtitle={null}
3232
>
33-
<div class="max-w-[750px] [&>*:first-child]:mt-0 rendered-markdown">
33+
<div class="max-w-[750px] [&>*:first-child]:mt-0 rendered-markdown pb-[80px]">
3434
<Content />
3535
</div>
3636
</BaseLayout>

0 commit comments

Comments
 (0)