Skip to content

Commit b4a7cb0

Browse files
suvanbanerjeesuvanbanerjee
committed
optimize for small width device
1 parent 2516948 commit b4a7cb0

File tree

5 files changed

+75
-16
lines changed

5 files changed

+75
-16
lines changed

‎src/app/_components/container.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ type Props = {
33
};
44

55
const Container = ({ children }: Props) => {
6-
return <div className="container mx-auto px-5 text-mono-800 dark:text-mono-100">{children}</div>;
6+
return <div className="container mx-auto px-3 sm:px-5 text-mono-800 dark:text-mono-100">{children}</div>;
77
};
88

99
export default Container;

‎src/app/_components/markdown-styles.module.css‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,42 @@
11
.markdown {
2-
font-size: 1.125rem;
3-
line-height: 1.75;
2+
font-size: 0.95rem;
3+
line-height: 1.6;
4+
}
5+
6+
/* Mobile adjustments */
7+
@media (max-width: 640px) {
8+
.markdown {
9+
font-size: 0.875rem;
10+
line-height: 1.5;
11+
}
12+
13+
.markdown h2 {
14+
font-size: 1.5rem;
15+
margin-top: 2rem;
16+
margin-bottom: 0.75rem;
17+
}
18+
19+
.markdown h3 {
20+
font-size: 1.25rem;
21+
margin-top: 1.5rem;
22+
margin-bottom: 0.75rem;
23+
}
24+
25+
.markdown p,
26+
.markdown ul,
27+
.markdown ol,
28+
.markdown blockquote {
29+
margin-top: 1rem;
30+
margin-bottom: 1rem;
31+
}
32+
}
33+
34+
/* Desktop styles */
35+
@media (min-width: 640px) {
36+
.markdown {
37+
font-size: 1.125rem;
38+
line-height: 1.75;
39+
}
440
}
541

642
.markdown p,

‎src/app/_components/post-body.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ type Props = {
66

77
export function PostBody({ content }: Props) {
88
return (
9-
<div className="max-w-3xl mx-auto mt-10 px-4 md:px-0">
9+
<div className="max-w-3xl mx-auto mt-6 sm:mt-10 px-2 sm:px-4 md:px-0">
1010
<div
11-
className={`${markdownStyles["markdown"]} prose prose-lg dark:prose-invert prose-headings:font-display prose-headings:font-bold prose-a:text-accent hover:prose-a:text-accent-light dark:prose-a:text-accent dark:hover:prose-a:text-accent-light prose-img:rounded-lg prose-img:shadow-md mx-auto prose-pre:bg-mono-100 dark:prose-pre:bg-mono-800 prose-code:text-accent-dark dark:prose-code:text-accent-light prose-table:table-auto prose-table:w-full prose-thead:bg-mono-100 dark:prose-thead:bg-mono-800 prose-th:p-2 prose-td:p-2 prose-tr:border-b prose-tr:border-mono-200 dark:prose-tr:border-mono-700`}
11+
className={`${markdownStyles["markdown"]} prose prose-sm sm:prose-base lg:prose-lg dark:prose-invert prose-headings:font-display prose-headings:font-bold prose-a:text-accent hover:prose-a:text-accent-light dark:prose-a:text-accent dark:hover:prose-a:text-accent-light prose-img:rounded-lg prose-img:shadow-md mx-auto prose-pre:bg-mono-100 dark:prose-pre:bg-mono-800 prose-code:text-accent-dark dark:prose-code:text-accent-light prose-table:table-auto prose-table:w-full prose-thead:bg-mono-100 dark:prose-thead:bg-mono-800 prose-th:p-2 prose-td:p-2 prose-tr:border-b prose-tr:border-mono-200 dark:prose-tr:border-mono-700`}
1212
dangerouslySetInnerHTML={{ __html: content }}
1313
/>
1414
</div>

‎src/app/globals.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,27 @@
5858
.container {
5959
@apply px-4;
6060
}
61+
62+
/* Reduce base font size on mobile */
63+
body {
64+
font-size: 14px;
65+
}
66+
67+
/* Adjust heading sizes for mobile */
68+
h1 {
69+
font-size: 1.5rem !important;
70+
line-height: 1.3 !important;
71+
}
72+
73+
h2 {
74+
font-size: 1.25rem !important;
75+
line-height: 1.4 !important;
76+
}
77+
78+
h3 {
79+
font-size: 1.125rem !important;
80+
line-height: 1.4 !important;
81+
}
6182
}
6283

6384
/* Buttons */

‎src/app/posts/[slug]/page.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,12 @@ export default async function Post(props: Params) {
5151
<>
5252
{post.preview && <Alert preview={post.preview} />}
5353

54-
<article className="mb-8 pt-16 sm:pt-24 sm:mb-16">
54+
<article className="mb-6 pt-14 sm:pt-24 sm:mb-16">
5555
<Container>
5656
<div className="max-w-4xl mx-auto">
5757
{/* Simplified header card with reduced padding on mobile */}
58-
<div className="mb-6 sm:mb-10">
59-
<div className="relative bg-white dark:bg-mono-800 border border-mono-200 dark:border-mono-700 rounded-lg p-4 sm:p-6 md:p-8 shadow-sm sm:shadow-md overflow-hidden">
58+
<div className="mb-4 sm:mb-10">
59+
<div className="relative bg-white dark:bg-mono-800 border border-mono-200 dark:border-mono-700 rounded-lg p-3 sm:p-6 md:p-8 shadow-sm sm:shadow-md overflow-hidden">
6060
<div className="flex justify-between items-center mb-4">
6161
<div className="text-sm text-mono-500 dark:text-mono-400">
6262
<DateFormatter dateString={post.date} />
@@ -65,14 +65,14 @@ export default async function Post(props: Params) {
6565

6666
<div className="md:px-2">
6767
{/* Title with clean appearance */}
68-
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-4 sm:mb-6 text-mono-800 dark:text-mono-200">
68+
<h1 className="text-xl sm:text-3xl md:text-4xl font-bold mb-3 sm:mb-6 text-mono-800 dark:text-mono-200">
6969
{post.title}
7070
</h1>
7171

7272
{/* Author info - simplified for mobile */}
73-
<div className="mb-4 sm:mb-6">
73+
<div className="mb-3 sm:mb-6">
7474
<div className="flex items-center">
75-
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden border-2 border-mono-200 dark:border-mono-700 mr-3 sm:mr-4">
75+
<div className="w-8 h-8 sm:w-12 sm:h-12 rounded-full overflow-hidden border-2 border-mono-200 dark:border-mono-700 mr-2 sm:mr-4">
7676
<img
7777
src={post.author.picture}
7878
alt={post.author.name}
@@ -81,10 +81,10 @@ export default async function Post(props: Params) {
8181
/>
8282
</div>
8383
<div>
84-
<p className="font-medium text-mono-900 dark:text-mono-100">
84+
<p className="text-sm sm:text-base font-medium text-mono-900 dark:text-mono-100">
8585
{post.author.name}{post.coauthors && post.coauthors.length > 0 ? " (Lead Author)" : ""}
8686
</p>
87-
<p className="text-sm text-mono-600 dark:text-mono-400">
87+
<p className="text-xs sm:text-sm text-mono-600 dark:text-mono-400">
8888
OVOS Contributor
8989
</p>
9090
</div>
@@ -121,7 +121,7 @@ export default async function Post(props: Params) {
121121

122122
{/* Cover image with lazy loading */}
123123
{post.coverImage && (
124-
<div className="relative aspect-video rounded-lg overflow-hidden shadow-sm mb-4 sm:mb-8">
124+
<div className="relative aspect-video rounded-lg overflow-hidden shadow-sm mb-3 sm:mb-8">
125125
<img
126126
src={post.coverImage}
127127
alt={post.title}
@@ -135,14 +135,16 @@ export default async function Post(props: Params) {
135135
</div>
136136

137137
{/* Post body with reduced padding on mobile */}
138-
<div className="bg-white dark:bg-mono-800 border border-mono-200 dark:border-mono-700 rounded-lg p-4 sm:p-6 md:p-8 shadow-sm sm:shadow-md">
138+
<div className="bg-white dark:bg-mono-800 border border-mono-200 dark:border-mono-700 rounded-lg p-3 sm:p-6 md:p-8 shadow-sm sm:shadow-md">
139139
<div
140140
className="prose dark:prose-invert
141141
prose-headings:text-mono-800 dark:prose-headings:text-mono-100
142142
prose-p:text-mono-700 dark:prose-p:text-mono-300
143143
prose-a:text-accent hover:prose-a:text-accent-light
144144
prose-img:rounded-md prose-img:shadow-sm
145-
max-w-none prose-sm sm:prose-base"
145+
max-w-none prose-sm sm:prose-base lg:prose-lg
146+
prose-headings:text-lg sm:prose-headings:text-xl lg:prose-headings:text-2xl
147+
prose-p:text-sm sm:prose-p:text-base"
146148
>
147149
<PostBody content={content} />
148150
</div>

0 commit comments

Comments
 (0)