Skip to content

Commit bbfc577

Browse files
committed
feat: make post page responsive
1 parent ccaed51 commit bbfc577

File tree

6 files changed

+53
-20
lines changed

6 files changed

+53
-20
lines changed

.changeset/silly-jeans-lie.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"r.obin.ch": patch
3+
---
4+
5+
Make post page responsive

src/components/Foldable.astro

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
---
3+
4+
<details>
5+
<summary><slot name="title" /></summary>
6+
<slot />
7+
</details>

src/components/GitInfo.astro

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { GitInfoFrontmatter } from '../remark/remark-git-info'
33
import { getLocaleFromUrl, useTranslations } from '../utils/i18n';
44
import Button from './Button.astro';
55
import DateTime from './DateTime.astro';
6+
import Foldable from './Foldable.astro';
67
78
type Props = GitInfoFrontmatter;
89
@@ -12,8 +13,8 @@ const t = useTranslations(locale);
1213
1314
---
1415

15-
<div>
16-
<span class="label">{t('gitInfoLabel')}</span>
16+
<Foldable>
17+
<span class="label" slot="title">{t('gitInfoLabel')}</span>
1718
<dl>
1819
<slot name="before" />
1920
{git?.lastCommit && (
@@ -30,4 +31,4 @@ const t = useTranslations(locale);
3031
)}
3132
<slot name="after" />
3233
</dl>
33-
</div>
34+
</Foldable>

src/components/TableOfContents.astro

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
import { getLocaleFromUrl, useTranslations } from "../utils/i18n";
3+
import Foldable from "./Foldable.astro";
34
45
type Props = {
56
fromDepth?: number;
@@ -56,19 +57,6 @@ const t = useTranslations(locale);
5657
}
5758
</style>
5859

59-
<nav class="table-of-contents">
60-
<span class="label">{t("tableOfContentsLabel")}</span>
61-
<ul>
62-
{
63-
headings.map((heading) => (
64-
<li class={`depth-${heading.depth}`}>
65-
<a href={`#${heading.slug}`}>{heading.text}</a>
66-
</li>
67-
))
68-
}
69-
</ul>
70-
</nav>
71-
7260
<script>
7361
document.addEventListener("astro:page-load", () => {
7462
const observer = new IntersectionObserver((entries) => {
@@ -100,3 +88,18 @@ const t = useTranslations(locale);
10088
});
10189
});
10290
</script>
91+
92+
<Foldable>
93+
<span class="label" slot="title">{t("tableOfContentsLabel")}</span>
94+
<nav class="table-of-contents">
95+
<ul>
96+
{
97+
headings.map((heading) => (
98+
<li class={`depth-${heading.depth}`}>
99+
<a href={`#${heading.slug}`}>{heading.text}</a>
100+
</li>
101+
))
102+
}
103+
</ul>
104+
</nav>
105+
</Foldable>

src/layouts/DefaultLayout.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,11 +175,15 @@ main :is(h1, h2, h3, h4, h5, h6) a {
175175
}
176176

177177
main :is(img, video) {
178-
width: 100%;
178+
max-width: 100%;
179179
height: auto;
180180
border-radius: var(--border-radius);
181181
}
182182

183+
p:has(> img) {
184+
text-align: center;
185+
}
186+
183187
article {
184188
line-height: var(--line-height);
185189
}

src/layouts/pages/Post.astro

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
---
2-
import DateTime from '../../components/DateTime.astro';
2+
import DateTime from "../../components/DateTime.astro";
33
44
type Props = {
55
frontmatter?: {
6-
title?: string
6+
title?: string;
77
publishedAt?: Date;
8-
}
8+
};
99
};
1010
1111
const { frontmatter } = Astro.props;
1212
---
13+
1314
<style>
1415
.post {
1516
padding: 1.4rem 0;
@@ -47,6 +48,18 @@ const { frontmatter } = Astro.props;
4748
text-align: center;
4849
}
4950

51+
@media (max-width: 1280px) {
52+
.post {
53+
grid-template-columns: 1fr;
54+
grid-template-areas: "title" "left" "right" "article";
55+
gap: 1.4rem;
56+
}
57+
aside {
58+
justify-self: center;
59+
width: 100%;
60+
max-width: 50rem;
61+
}
62+
}
5063
</style>
5164
<div class="post">
5265
<slot name="title">

0 commit comments

Comments
 (0)