Skip to content

Commit 846418a

Browse files
jsanzdevjsanzdev
committed
Fixed layout for work pages title and description.
1 parent 197f7e5 commit 846418a

File tree

2 files changed

+140
-129
lines changed

2 files changed

+140
-129
lines changed

‎src/pages/work/[...slug].astro

Lines changed: 133 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,151 +1,155 @@
11
---
2-
import { type CollectionEntry, getCollection } from 'astro:content';
2+
import { type CollectionEntry, getCollection } from "astro:content";
33
4-
import BaseLayout from '../../layouts/BaseLayout.astro';
4+
import BaseLayout from "../../layouts/BaseLayout.astro";
55
6-
import ContactCTA from '../../components/ContactCTA.astro';
7-
import Hero from '../../components/Hero.astro';
8-
import Icon from '../../components/Icon.astro';
9-
import Pill from '../../components/Pill.astro';
6+
import ContactCTA from "../../components/ContactCTA.astro";
7+
import Hero from "../../components/Hero.astro";
8+
import Icon from "../../components/Icon.astro";
9+
import Pill from "../../components/Pill.astro";
1010
1111
interface Props {
12-
entry: CollectionEntry<'work'>;
12+
entry: CollectionEntry<"work">;
1313
}
1414
1515
// This is a dynamic route that generates a page for every Markdown file in src/content/
1616
// Read more about dynamic routes and this `getStaticPaths` function in the Astro docs:
1717
// https://docs.astro.build/en/core-concepts/routing/#dynamic-routes
1818
export async function getStaticPaths() {
19-
const work = await getCollection('work');
20-
return work.map((entry) => ({
21-
params: { slug: entry.slug },
22-
props: { entry },
23-
}));
19+
const work = await getCollection("work");
20+
return work.map((entry) => ({
21+
params: { slug: entry.slug },
22+
props: { entry },
23+
}));
2424
}
2525
2626
const { entry } = Astro.props;
2727
const { Content } = await entry.render();
2828
---
2929

3030
<BaseLayout title={entry.data.title} description={entry.data.description}>
31-
<div class="stack gap-20">
32-
<div class="stack gap-15">
33-
<header>
34-
<div class="wrapper stack gap-2">
35-
<a class="back-link" href="/work/"><Icon icon="arrow-left" /> Work</a>
36-
<Hero title={entry.data.title} align="start">
37-
<div class="details">
38-
<div class="tags">
39-
{entry.data.tags.map((t) => <Pill>{t}</Pill>)}
40-
</div>
41-
<p class="description">{entry.data.description}</p>
42-
</div>
43-
</Hero>
44-
</div>
45-
</header>
46-
<main class="wrapper">
47-
<div class="stack gap-10 content">
48-
{entry.data.img && <img src={entry.data.img} alt={entry.data.img_alt || ''} />}
49-
<div class="content">
50-
<Content />
51-
</div>
52-
</div>
53-
</main>
54-
</div>
55-
<ContactCTA />
56-
</div>
31+
<div class="stack gap-20">
32+
<div class="stack gap-15">
33+
<header>
34+
<div class="wrapper stack gap-2">
35+
<a class="back-link" href="/work/"><Icon icon="arrow-left" /> Work</a>
36+
<Hero title={entry.data.title}>
37+
<div class="details">
38+
<div class="tags">
39+
{entry.data.tags.map((t) => <Pill>{t}</Pill>)}
40+
</div>
41+
<p class="description">{entry.data.description}</p>
42+
</div>
43+
</Hero>
44+
</div>
45+
</header>
46+
<main class="wrapper">
47+
<div class="stack gap-10 content">
48+
{
49+
entry.data.img && (
50+
<img src={entry.data.img} alt={entry.data.img_alt || ""} />
51+
)
52+
}
53+
<div class="content">
54+
<Content />
55+
</div>
56+
</div>
57+
</main>
58+
</div>
59+
<ContactCTA />
60+
</div>
5761
</BaseLayout>
5862

5963
<style>
60-
header {
61-
padding-bottom: 2.5rem;
62-
border-bottom: 1px solid var(--gray-800);
63-
}
64-
65-
.back-link {
66-
display: none;
67-
}
68-
69-
.details {
70-
display: flex;
71-
flex-direction: column;
72-
padding: 0.5rem;
73-
gap: 1.5rem;
74-
justify-content: space-between;
75-
align-items: center;
76-
}
77-
78-
.tags {
79-
display: flex;
80-
gap: 0.5rem;
81-
}
82-
83-
.description {
84-
font-size: var(--text-lg);
85-
max-width: 54ch;
86-
}
87-
88-
.content {
89-
max-width: 65ch;
90-
margin-inline: auto;
91-
}
92-
93-
.content > :global(* + *) {
94-
margin-top: 1rem;
95-
}
96-
97-
.content :global(h1),
98-
.content :global(h2),
99-
.content :global(h3),
100-
.content :global(h4),
101-
.content :global(h5) {
102-
margin: 1.5rem 0;
103-
}
104-
105-
.content :global(img) {
106-
border-radius: 1.5rem;
107-
box-shadow: var(--shadow-sm);
108-
background: var(--gradient-subtle);
109-
border: 1px solid var(--gray-800);
110-
}
111-
112-
.content :global(blockquote) {
113-
font-size: var(--text-lg);
114-
font-family: var(--font-brand);
115-
font-weight: 600;
116-
line-height: 1.1;
117-
padding-inline-start: 1.5rem;
118-
border-inline-start: 0.25rem solid var(--accent-dark);
119-
color: var(--gray-0);
120-
}
121-
122-
.back-link,
123-
.content :global(a) {
124-
text-decoration: 1px solid underline transparent;
125-
text-underline-offset: 0.25em;
126-
transition: text-decoration-color var(--theme-transition);
127-
}
128-
129-
.back-link:hover,
130-
.back-link:focus,
131-
.content :global(a:hover),
132-
.content :global(a:focus) {
133-
text-decoration-color: currentColor;
134-
}
135-
136-
@media (min-width: 50em) {
137-
.back-link {
138-
display: block;
139-
align-self: flex-start;
140-
}
141-
142-
.details {
143-
flex-direction: row;
144-
gap: 2.5rem;
145-
}
146-
147-
.content :global(blockquote) {
148-
font-size: var(--text-2xl);
149-
}
150-
}
64+
header {
65+
padding-bottom: 2.5rem;
66+
border-bottom: 1px solid var(--gray-800);
67+
}
68+
69+
.back-link {
70+
display: none;
71+
}
72+
73+
.details {
74+
display: flex;
75+
flex-direction: column;
76+
padding: 0.5rem;
77+
gap: 1.5rem;
78+
justify-content: space-between;
79+
align-items: center;
80+
}
81+
82+
.tags {
83+
display: flex;
84+
gap: 0.5rem;
85+
}
86+
87+
.description {
88+
font-size: var(--text-lg);
89+
max-width: 54ch;
90+
}
91+
92+
.content {
93+
max-width: 65ch;
94+
margin-inline: auto;
95+
}
96+
97+
.content > :global(* + *) {
98+
margin-top: 1rem;
99+
}
100+
101+
.content :global(h1),
102+
.content :global(h2),
103+
.content :global(h3),
104+
.content :global(h4),
105+
.content :global(h5) {
106+
margin: 1.5rem 0;
107+
}
108+
109+
.content :global(img) {
110+
border-radius: 1.5rem;
111+
box-shadow: var(--shadow-sm);
112+
background: var(--gradient-subtle);
113+
border: 1px solid var(--gray-800);
114+
}
115+
116+
.content :global(blockquote) {
117+
font-size: var(--text-lg);
118+
font-family: var(--font-brand);
119+
font-weight: 600;
120+
line-height: 1.1;
121+
padding-inline-start: 1.5rem;
122+
border-inline-start: 0.25rem solid var(--accent-dark);
123+
color: var(--gray-0);
124+
}
125+
126+
.back-link,
127+
.content :global(a) {
128+
text-decoration: 1px solid underline transparent;
129+
text-underline-offset: 0.25em;
130+
transition: text-decoration-color var(--theme-transition);
131+
}
132+
133+
.back-link:hover,
134+
.back-link:focus,
135+
.content :global(a:hover),
136+
.content :global(a:focus) {
137+
text-decoration-color: currentColor;
138+
}
139+
140+
@media (min-width: 50em) {
141+
.back-link {
142+
display: block;
143+
align-self: flex-start;
144+
}
145+
146+
.details {
147+
flex-direction: row;
148+
gap: 2.5rem;
149+
}
150+
151+
.content :global(blockquote) {
152+
font-size: var(--text-2xl);
153+
}
154+
}
151155
</style>

‎src/styles/global.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,13 @@ h5 {
202202
flex-direction: column;
203203
}
204204

205+
.details {
206+
display: flex;
207+
flex-direction: column !important;
208+
gap: 1rem;
209+
align-items: left;
210+
}
211+
205212
.gap-2 {
206213
gap: 0.5rem;
207214
}

0 commit comments

Comments
 (0)