Skip to content

Commit 7fca5d3

Browse files
ubmitubmit
authored
chore: update layout stacking and labels
1 parent 7b443ba commit 7fca5d3

10 files changed

Lines changed: 20 additions & 45 deletions

File tree

‎src/components/ArrowUpRightIcon.astro‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎src/components/Header.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { SITE_TITLE } from "../consts";
33
import LedgerLabel from "./LedgerLabel.astro";
44
---
55

6-
<header class="flex flex-col pb-4">
7-
<a class="inline-block text-lg font-medium no-underline" href="/">
6+
<header class="flex flex-col">
7+
<a class="text-lg font-medium no-underline" href="/">
88
{SITE_TITLE}
99
</a>
1010
<LedgerLabel as="span">Frontend Engineer</LedgerLabel>

‎src/components/LedgerLabel.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ interface Props {
55
class?: string;
66
}
77
8-
const { as: Tag = "span", href, class: className } = Astro.props;
8+
const { as: Tag = "span", href, class: className } = Astro.props as Props;
99
const classes =
1010
"text-ledger-muted font-sans text-sm font-medium uppercase tracking-wide leading-6";
1111
const classList = [classes, className];

‎src/components/PostCard.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const { title, description, pubDate, href, featured = false } = Astro.props;
2222
<span class="font-medium">{title}</span>
2323
{
2424
featured && (
25-
<span class="text-gray-1000 border-ledger-line rounded-full border px-2 py-0.5 font-mono text-[10px] tracking-[0.18em] uppercase">
25+
<span class="text-gray-1000 border-ledger-line rounded-full border px-1.5 py-0.5 font-mono text-[9px] tracking-[0.18em] uppercase sm:px-2 sm:text-[10px]">
2626
Featured
2727
</span>
2828
)

‎src/layouts/BaseLayout.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import Header from "../components/Header.astro";
77
class="bg-page-bg pointer-events-none fixed top-0 left-0 z-50 h-14 w-full backdrop-blur-xl [-webkit-mask-image:linear-gradient(to_bottom,black,transparent)]"
88
>
99
</div>
10-
<div class="mx-auto w-full max-w-[980px] px-6 py-16 sm:py-20">
10+
<div class="mx-auto w-full max-w-4xl px-6 py-16 sm:py-20">
1111
<Header />
12-
<main class="mt-10 space-y-6">
12+
<main class="mt-14 space-y-6">
1313
<slot />
1414
</main>
1515
</div>

‎src/layouts/BlogPost.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ const { title, description, pubDate, updatedDate } = Astro.props;
1717

1818
<BaseLayout>
1919
<div class="space-y-6">
20-
<section class="grid grid-cols-[140px_1fr] gap-6">
21-
<LedgerLabel as="div">Meta</LedgerLabel>
20+
<section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
21+
<LedgerLabel as="div" class="hidden sm:block">Meta</LedgerLabel>
2222
<div class="space-y-2">
2323
<h1 class="text-gray-1200 text-2xl font-medium">{title}</h1>
2424
<div class="text-gray-1100 font-mono text-sm">
@@ -33,8 +33,8 @@ const { title, description, pubDate, updatedDate } = Astro.props;
3333
}
3434
</div>
3535
</section>
36-
<section class="grid grid-cols-[140px_1fr] gap-6">
37-
<LedgerLabel as="div">Content</LedgerLabel>
36+
<section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
37+
<LedgerLabel as="div" class="hidden sm:block">Content</LedgerLabel>
3838
<article class="prose dark:prose-invert">
3939
<slot />
4040
</article>

‎src/layouts/Talk.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ const { title, description, pubDate, updatedDate, event, slides, recording } =
1818

1919
<BaseLayout>
2020
<div class="space-y-6">
21-
<section class="grid grid-cols-[140px_1fr] gap-6">
22-
<LedgerLabel as="div">Meta</LedgerLabel>
21+
<section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
22+
<LedgerLabel as="div" class="hidden sm:block">Meta</LedgerLabel>
2323
<div class="space-y-2">
2424
<h1 class="text-gray-1200 text-2xl font-medium">{title}</h1>
2525
<div class="text-gray-1100 font-mono text-sm">
@@ -61,8 +61,8 @@ const { title, description, pubDate, updatedDate, event, slides, recording } =
6161
}
6262
</div>
6363
</section>
64-
<section class="grid grid-cols-[140px_1fr] gap-6">
65-
<LedgerLabel as="div">Content</LedgerLabel>
64+
<section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
65+
<LedgerLabel as="div" class="hidden sm:block">Content</LedgerLabel>
6666
<article class="prose dark:prose-invert">
6767
<slot />
6868
</article>

‎src/pages/index.astro‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import BaseLayout from "../layouts/BaseLayout.astro";
1010
import SectionHeading from "../components/SectionHeading.astro";
1111
import PostCard from "../components/PostCard.astro";
1212
import SubtleLink from "../components/SubtleLink.astro";
13-
import ArrowUpRightIcon from "../components/ArrowUpRightIcon.astro";
1413
import "../styles/base.css";
1514
---
1615

@@ -20,7 +19,7 @@ import "../styles/base.css";
2019
</head>
2120
<BaseLayout>
2221
<!-- About Section -->
23-
<section class="grid grid-cols-[140px_1fr] gap-6">
22+
<section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
2423
<SectionHeading title="About" />
2524
<p class="text-gray-1100 leading-7">
2625
I'm Gui, a Frontend Engineer focused on crafting polished and user-first
@@ -39,7 +38,7 @@ import "../styles/base.css";
3938
</section>
4039

4140
<!-- Currently Section -->
42-
<section class="grid grid-cols-[140px_1fr] gap-6">
41+
<section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
4342
<SectionHeading title="Currently" />
4443
<div class="text-gray-1100 space-y-4 leading-7">
4544
<p>
@@ -64,7 +63,7 @@ import "../styles/base.css";
6463
</section>
6564

6665
<!-- Writing Section -->
67-
<section class="grid grid-cols-[140px_1fr] gap-6">
66+
<section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
6867
<SectionHeading title="Writing" href="/writing" />
6968
<ul>
7069
{
@@ -82,7 +81,7 @@ import "../styles/base.css";
8281
</section>
8382

8483
<!-- Talks Section -->
85-
<section class="grid grid-cols-[140px_1fr] gap-6">
84+
<section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
8685
<SectionHeading title="Talks" href="/talks" />
8786
<ul>
8887
{

‎src/pages/talks.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { SITE_DESCRIPTION, talksSortedByPubDate } from "../consts";
1212
<BaseHead title="Talks" description={SITE_DESCRIPTION} />
1313
</head>
1414
<BaseLayout>
15-
<section class="grid grid-cols-[140px_1fr] gap-6">
15+
<section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
1616
<SectionHeading title="Talks" />
1717
<ul class="space-y-3">
1818
{

‎src/pages/writing.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { SITE_DESCRIPTION, postsSortedByPubDate } from "../consts";
1212
<BaseHead title="Writing" description={SITE_DESCRIPTION} />
1313
</head>
1414
<BaseLayout>
15-
<section class="grid grid-cols-[140px_1fr] gap-6">
15+
<section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
1616
<SectionHeading title="Writing" />
1717
<ul class="space-y-3">
1818
{

0 commit comments

Comments
 (0)