Skip to content

Commit 36a4616

Browse files
WaqasAliAbbasiWaqasAliAbbasi
committed
fix: safari responsiveness
1 parent ef1e8fd commit 36a4616

9 files changed

Lines changed: 30 additions & 14 deletions

File tree

‎src/app/layout.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ export const metadata: Metadata = {
1818
default: "Waqas Ali",
1919
},
2020
openGraph: {
21-
images: [{ url: portrait.src, width: portrait.width, height: portrait.height }],
21+
images: [
22+
{ url: portrait.src, width: portrait.width, height: portrait.height },
23+
],
2224
},
2325
alternates: {
2426
types: {
@@ -37,7 +39,7 @@ export default function RootLayout({
3739
<ClientScripts />
3840
<body className={inter.className}>
3941
<Providers>
40-
<main className="flex min-h-screen flex-col gap-4 py-11 px-5 max-w-2xl mx-auto">
42+
<main className="flex min-h-dvh flex-col gap-4 py-8 sm:py-11 px-5 sm:px-6 max-w-2xl mx-auto">
4143
<Header />
4244
<div className="flex-1">{children}</div>
4345
<Footer />

‎src/app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default function Page() {
4040
<Divider />
4141
<section>
4242
<h1 className="font-semibold">Get In Touch</h1>
43-
<div className="mt-1 flex flex-row justify-between">
43+
<div className="mt-1 flex flex-row flex-wrap gap-x-6 gap-y-2 justify-between">
4444
<SocialLink
4545
icon={EnvelopeIcon}
4646
text="Email"

‎src/app/sitemap.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@ export default function sitemap(): MetadataRoute.Sitemap {
1313
const postDates = posts.map(({ metadata: { date } }) => date);
1414

1515
return [
16-
{ url: SITE_URL, lastModified: mostRecent([...projectDates, ...postDates]) },
16+
{
17+
url: SITE_URL,
18+
lastModified: mostRecent([...projectDates, ...postDates]),
19+
},
1720
{ url: `${SITE_URL}/work`, lastModified: mostRecent(projectDates) },
1821
...projects.map(({ slug, metadata: { date } }) => ({
1922
url: `${SITE_URL}/work/${slug}`,

‎src/app/work/page.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,17 @@ export const metadata: Metadata = {
1111
};
1212

1313
const Projects: React.FC<{ showAll: boolean }> = ({ showAll }) => (
14-
<div className="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-6">
14+
<div className="grid grid-cols-[repeat(auto-fit,minmax(140px,1fr))] gap-6">
1515
{projects
1616
.filter(({ metadata: { highlight } }) => showAll || !!highlight)
1717
.map(({ slug, metadata: { title, image, date, description } }) => (
1818
<Link key={slug} href={`/work/${slug}`}>
1919
<div>
20-
<Image src={image} alt={title} className="h-24 object-cover " />
20+
<Image
21+
src={image}
22+
alt={title}
23+
className="h-24 w-full object-cover"
24+
/>
2125
<h3 className="font-bold mt-2">{title}</h3>
2226
<p className="text-xs">{dayjs(date).format("MMMM D, YYYY")}</p>
2327
<p className="text-xs mt-1 line-clamp-4">{description}</p>

‎src/components/Footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const Footer: React.FC<
77
React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLHRElement>
88
> = ({ className = "", ...props }) => (
99
<footer
10-
className={`flex mt-1 justify-center items-center text-xs gap-x-1 ${className}`}
10+
className={`flex flex-wrap mt-1 justify-center items-center text-center text-xs gap-x-1 ${className}`}
1111
{...props}
1212
>
1313
<Link href="/rss.xml" title="RSS Feed" className="flex">

‎src/components/Header.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,17 @@ export const Header: React.FC<{ siteTitle?: string }> = ({ siteTitle }) => {
1515

1616
return (
1717
<>
18-
<div className="flex flex-row justify-between items-center">
19-
<Link href="/" className="flex flex-row items-center gap-4">
18+
<div className="flex flex-row justify-between items-center gap-3">
19+
<Link
20+
href="/"
21+
className="flex flex-row items-center gap-3 sm:gap-4 min-w-0"
22+
>
2023
<Image
2124
alt="Waqas Ali Portrait"
2225
src={portrait}
23-
className="inline-block h-16 w-16 rounded-full"
26+
className="inline-block h-12 w-12 sm:h-16 sm:w-16 shrink-0 rounded-full"
2427
/>
25-
<h1 className="text-2xl font-bold leading-7 sm:truncate sm:text-3xl sm:tracking-tight">
28+
<h1 className="text-2xl font-bold leading-7 truncate sm:text-3xl sm:tracking-tight">
2629
Waqas Ali
2730
</h1>
2831
</Link>

‎src/components/Post.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ export const Post: React.FC<{
1212
<h1 className="text-2xl font-bold">{title}</h1>
1313
<h3 className="mt-2">{dayjs(date).format("MMMM D, YYYY")}</h3>
1414
<Divider className="my-4" />
15-
<article className="prose dark:prose-invert">{children}</article>
15+
<article className="prose prose-sm sm:prose-base max-w-none wrap-break-word dark:prose-invert">
16+
{children}
17+
</article>
1618
</div>
1719
);
1820
};

‎src/components/Project.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ export const Project: React.FC<{
1212
<h1 className="text-2xl font-bold">{title}</h1>
1313
<h3 className="mt-2">{dayjs(date).format("MMMM D, YYYY")}</h3>
1414
<Divider className="my-4" />
15-
<article className="prose dark:prose-invert">{children}</article>
15+
<article className="prose prose-sm sm:prose-base max-w-none wrap-break-word dark:prose-invert">
16+
{children}
17+
</article>
1618
</div>
1719
);
1820
};

‎src/components/ToggleTheme.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const ToggleTheme = () => {
3030
title="Toggle Theme"
3131
onClick={toggleTheme}
3232
type="button"
33-
className="rounded-sm outline-solid outline-1 p-1 dark:hover:bg-gray-700 hover:bg-gray-100"
33+
className="shrink-0 rounded-sm outline-solid outline-1 p-1 dark:hover:bg-gray-700 hover:bg-gray-100"
3434
>
3535
<Icon className="h-4 w-4" />
3636
</button>

0 commit comments

Comments
 (0)