Skip to content

Commit ed2ece7

Browse files
raitucarpraitucarp
committed
refactor: responsive design
1 parent 3d445f0 commit ed2ece7

File tree

8 files changed

+51
-39
lines changed

8 files changed

+51
-39
lines changed

‎src/app/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ export default function Home() {
1616
<VStack
1717
w="100%"
1818
flex={1}
19-
py={["1rem", "2rem"]}
19+
py={{ base: "1rem", lg: "2rem" }}
2020
h="100%"
2121
bgGradient={"to-br"}
2222
gradientFrom={"bg"}
2323
gradientTo={"bg.muted"}
24-
gap={["1rem", "3rem"]}
24+
gap={{ base: "1rem", lg: "3rem" }}
2525
alignItems={"start"}
2626
>
2727
<HeroSection />

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default async function Post(props: Params) {
2929
<Portal>
3030
<ReadingTimeProgressBar />
3131
</Portal>
32-
<VStack as="article" alignItems={"start"} py={["3rem"]}>
32+
<VStack as="article" alignItems={"start"} py={{ base: "3rem" }}>
3333
<PostHeader
3434
_heading={{
3535
fontSize: ["2xl", "5xl"],

‎src/app/~/layout.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,20 +20,20 @@ export default function PostLayout({
2020
return (
2121
<VStack
2222
as="main"
23-
w={["100%", "70%"]}
24-
px={["1rem", "3rem"]}
25-
py={["5%", "2%"]}
23+
w={{ base: "100%", lg: "70%" }}
24+
px={{ base: "1rem", lg: "3rem" }}
25+
py={{ base: "5%", lg: "2%" }}
2626
margin="0 auto"
2727
alignItems={"start"}
2828
>
2929
<Stack
3030
w="100%"
3131
separator={<StackSeparator />}
32-
direction={["column", "row"]}
32+
direction={{ base: "column", lg: "row" }}
3333
>
3434
<Link passHref href="/">
3535
<OwnerHeading
36-
fontSize={["lg", "2xl"]}
36+
fontSize={{ base: "lg", lg: "2xl" }}
3737
_hover={{
3838
textDecor: "underline",
3939
textDecorationThickness: "0.01rem",
@@ -47,7 +47,7 @@ export default function PostLayout({
4747
/>{" "}
4848
</Link>
4949
<AboutMeHeading
50-
fontSize={["xs", "lg"]}
50+
fontSize={{ base: "xs", lg: "lg" }}
5151
_highlight={{
5252
query: "Writer",
5353
styles: { color: { _dark: "blue.400", base: "blue.500" } },

‎src/app/~/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export default function PostsPage() {
5656
<Link href={`/~/${post.slug}`}>{post.title}</Link>
5757
</Heading>
5858
<Stack
59-
direction={["column", "row"]}
59+
direction={{ base: "column", lg: "row" }}
6060
w="100%"
6161
separator={<StackSeparator />}
6262
gap={5}

‎src/components/cta.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,19 @@ import { FaFile, FaPage4, FaPerson, FaUser } from "react-icons/fa6";
55

66
export function CallToAction() {
77
return (
8-
<HStack py={["1rem", "2rem"]}>
9-
<Button size={["md", "2xl"]} rounded={"full"} asChild>
8+
<HStack py={{ base: "1rem", lg: "2rem" }}>
9+
<Button size={{ base: "md", lg: "2xl" }} rounded={"full"} asChild>
1010
<Link href="/~">
1111
<FaFileAlt />
1212
List of posts
1313
</Link>
1414
</Button>
15-
<Button size={["md", "2xl"]} rounded={"full"} variant="outline" asChild>
15+
<Button
16+
size={{ base: "md", lg: "2xl" }}
17+
rounded={"full"}
18+
variant="outline"
19+
asChild
20+
>
1621
<Link href="/about">
1722
<FaUser />
1823
About me

‎src/components/posts/body.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ type Props = {
99
content: string;
1010
};
1111

12-
13-
1412
export function PostBody({ content }: Props) {
1513
return (
1614
<Markdown
@@ -20,10 +18,10 @@ export function PostBody({ content }: Props) {
2018
const { children, className, node, ...rest } = props;
2119
return (
2220
<Text
23-
fontSize={["md", "2xl"]}
21+
fontSize={{ base: "md", lg: "2xl" }}
2422
className={merriweather.className}
2523
fontWeight={"300"}
26-
marginBlock={["0.8rem", "1rem"]}
24+
marginBlock={{ base: "0.8rem", lg: "1rem" }}
2725
textIndent={"2rem"}
2826
lineHeight={"taller"}
2927
>
@@ -37,7 +35,7 @@ export function PostBody({ content }: Props) {
3735
return (
3836
<Heading
3937
as="h1"
40-
fontSize={["4xl", "6xl"]}
38+
fontSize={{ base: "4xl", lg: "6xl" }}
4139
lineHeight="short"
4240
className={notoSerif.className}
4341
>
@@ -52,7 +50,7 @@ export function PostBody({ content }: Props) {
5250
return (
5351
<Heading
5452
as="h2"
55-
fontSize={["3xl", "5xl"]}
53+
fontSize={{ base: "3xl", lg: "5xl" }}
5654
lineHeight="short"
5755
className={notoSerif.className}
5856
>
@@ -67,7 +65,7 @@ export function PostBody({ content }: Props) {
6765
return (
6866
<Heading
6967
as="h3"
70-
fontSize={["2xl", "4xl"]}
68+
fontSize={{ base: "2xl", lg: "4xl" }}
7169
lineHeight="short"
7270
className={notoSerif.className}
7371
>
@@ -82,7 +80,7 @@ export function PostBody({ content }: Props) {
8280
return (
8381
<Heading
8482
as="h4"
85-
fontSize={["xl", "3xl"]}
83+
fontSize={{ base: "xl", lg: "3xl" }}
8684
lineHeight="short"
8785
className={notoSerif.className}
8886
>
@@ -97,7 +95,7 @@ export function PostBody({ content }: Props) {
9795
return (
9896
<Heading
9997
as="h5"
100-
fontSize={["lg", "2xl"]}
98+
fontSize={{ base: "lg", lg: "2xl" }}
10199
lineHeight="short"
102100
className={notoSerif.className}
103101
>
@@ -112,7 +110,7 @@ export function PostBody({ content }: Props) {
112110
return (
113111
<Heading
114112
as="h6"
115-
fontSize={["md", "xl"]}
113+
fontSize={{ base: "md", lg: "xl" }}
116114
lineHeight="short"
117115
className={notoSerif.className}
118116
>

‎src/components/sections/hero.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,11 @@ import { AboutMeHeading, OwnerHeading } from "../about";
2121

2222
export function HeroSection() {
2323
return (
24-
<HStack w="100%" px={["5%", "8%"]} py={["1rem", "2rem"]}>
24+
<HStack
25+
w="100%"
26+
px={{ base: "5%", lg: "8%" }}
27+
py={{ base: "1rem", lg: "2rem" }}
28+
>
2529
<VStack alignItems={"start"}>
2630
<HStack justify="start" alignItems="center">
2731
<Heading
@@ -36,10 +40,10 @@ export function HeroSection() {
3640
</Heading>
3741
<ContactButtonGroup />
3842
</HStack>
39-
<OwnerHeading fontSize={["2xl", "7xl"]} />
43+
<OwnerHeading fontSize={{ base: "2xl", lg: "7xl" }} />
4044
<AboutMeHeading
4145
_highlight={{ query: "Developer" }}
42-
fontSize={["md", "2xl"]}
46+
fontSize={{ base: "md", lg: "2xl" }}
4347
/>
4448

4549
<CallToAction />

‎src/components/sections/showcase.tsx‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -44,33 +44,33 @@ export function Showcase({
4444
justify="start"
4545
alignSelf={"center"}
4646
separator={<StackSeparator />}
47-
gap={["1rem", "2rem"]}
48-
px={["5%", "8%"]}
49-
w={["100%", "80%"]}
50-
direction={["column", "row"]}
47+
gap={{ base: "1rem", lg: "2rem" }}
48+
px={{ base: "5%", lg: "8%" }}
49+
w={{ base: "100%", lg: "80%" }}
50+
direction={{ base: "column", lg: "row" }}
5151
>
5252
<Stack
53-
w={["100%", "40%"]}
54-
alignItems={["center", "end"]}
55-
direction={["row", "column"]}
53+
w={{ base: "100%", lg: "40%" }}
54+
alignItems={{ base: "center", lg: "end" }}
55+
direction={{ base: "row", lg: "column" }}
5656
>
5757
{Icon && (
58-
<Text as="span" fontSize={["2xl", "5xl"]}>
58+
<Text as="span" fontSize={{ base: "2xl", lg: "5xl" }}>
5959
<Icon />
6060
</Text>
6161
)}
6262
<Heading
63-
fontSize={["xl", "4xl"]}
64-
textAlign={["left", "right"]}
63+
fontSize={{ base: "xl", lg: "4xl" }}
64+
textAlign={{ base: "left", lg: "right" }}
6565
lineHeight={"shorter"}
6666
wordWrap={"break-word"}
6767
>
6868
{title}
6969
</Heading>
7070
</Stack>
71-
<VStack w={["100%", "60%"]} gap={"1rem"} alignItems={"start"}>
71+
<VStack w={{ base: "100%", lg: "60%" }} gap={"1rem"} alignItems={"start"}>
7272
<Text
73-
fontSize={["md", "2xl"]}
73+
fontSize={{ base: "md", lg: "2xl" }}
7474
className={notoSerif.className}
7575
fontWeight={"300"}
7676
textAlign={"left"}
@@ -80,7 +80,12 @@ export function Showcase({
8080

8181
{children}
8282

83-
<Button rounded="2xl" {..._button} asChild alignSelf={["end", "start"]}>
83+
<Button
84+
rounded="2xl"
85+
{..._button}
86+
asChild
87+
alignSelf={{ base: "end", lg: "start" }}
88+
>
8489
<ChakraLink {..._anchor} asChild>
8590
<Link {..._link!}>{actionText}</Link>
8691
</ChakraLink>

0 commit comments

Comments
 (0)