refactor(website): update font size for responsive design

semaphore-protocol · Nov 9, 2023 · 799b765 · 799b765
1 parent 3979f34
commit 799b765
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 16 deletions.
diff --git a/apps/website/src/app/learn/page.tsx b/apps/website/src/app/learn/page.tsx
@@ -179,10 +179,10 @@ await verifyProof(verificationKey, fullProof)`,
     const renderTabBlockSemaphore = () => (
         <VStack>
             <VStack w={{ base: "auto", md: "720px" }}>
-                <Text fontSize={"44px"} fontWeight={"500"}>
+                <Text fontSize={{ base: "40px", md: "44px" }} fontWeight={{ base: "400", md: "500" }}>
                     Semaphore: Anonymous interactions
                 </Text>
-                <Text fontSize={"20px"} mt={"24px"} lineHeight={"32px"}>
+                <Text fontSize={{ base: "16px", md: "20px" }} mt={"24px"} lineHeight={"32px"}>
                     Using zero knowledge, Semaphore allows users to prove their membership of a group and send signals
                     such as votes or endorsements without revealing their original identity. The goal is to make
                     Semaphore a standard for anonymous signaling and group membership proving.
@@ -191,13 +191,13 @@ await verifyProof(verificationKey, fullProof)`,
             <VStack mt={"40px"}>
                 <Flex wrap={{ base: "wrap", lg: "nowrap" }} justify={"center"} alignItems={"center"} gap={"32px"}>
                     <VStack>
-                        <Text fontSize={"30px"} fontWeight={"500"}>
+                        <Text fontSize={{ base: "24px", md: "30px" }} fontWeight={{ base: "400", md: "500" }}>
                             Principles
                         </Text>
                         <InfoCard texts={infoCardTexts[0]} />
                     </VStack>
                     <VStack>
-                        <Text fontSize={"30px"} fontWeight={"500"}>
+                        <Text fontSize={{ base: "24px", md: "30px" }} fontWeight={{ base: "400", md: "500" }}>
                             Main focus
                         </Text>
                         <InfoCard texts={infoCardTexts[1]} />
@@ -210,10 +210,10 @@ await verifyProof(verificationKey, fullProof)`,
     const renderTabBlockZeroKnowledge = () => (
         <VStack>
             <VStack w={{ base: "auto", md: "720px" }}>
-                <Text fontSize={"44px"} fontWeight={"500"}>
+                <Text fontSize={{ base: "40px", md: "44px" }} fontWeight={{ base: "400", md: "500" }}>
                     Zero Knowledge: new cryptography
                 </Text>
-                <Text fontSize={"20px"} mt={"24px"} lineHeight={"32px"}>
+                <Text fontSize={{ base: "16px", md: "20px" }} mt={"24px"} lineHeight={"32px"}>
                     Zero-knowledge is a new field in cryptography that allows developers to build apps that allow users
                     to share information with each other without revealing their identities or the contents of the
                     information being shared.
@@ -223,7 +223,7 @@ await verifyProof(verificationKey, fullProof)`,
                         borderBottomWidth={"1px"}
                         borderBottomColor={"white"}
                         _hover={{ borderBottomColor: "transparent" }}
-                        fontSize="20px"
+                        fontSize={{ base: "16px", md: "20px" }}
                         fontWeight="normal"
                     >
                         Learn more
@@ -232,7 +232,7 @@ await verifyProof(verificationKey, fullProof)`,
             </VStack>
             <VStack mt={"40px"}>
                 <VStack>
-                    <Text fontSize={"30px"} fontWeight={"500"}>
+                    <Text fontSize={{ base: "24px", md: "30px" }} fontWeight={{ base: "400", md: "500" }}>
                         Characteristics
                     </Text>
                     <InfoCard texts={infoCardTexts[0]} />
@@ -361,7 +361,7 @@ await verifyProof(verificationKey, fullProof)`,
                     display={{ base: "flex", xl: "none" }}
                     flex="1"
                     alignSelf={"start"}
-                    fontSize="44px"
+                    fontSize={{ base: "40px", md: "44px" }}
                     fontWeight={"500"}
                     mt={"100px"}
                 >

diff --git a/apps/website/src/components/CodeBlock.tsx b/apps/website/src/components/CodeBlock.tsx
@@ -35,7 +35,7 @@ export default function CodekBlock({ text }: CodekBlockProps) {
             <CodeBlock {...copyBlockProps} />
             <Button
                 textColor={"alabaster.300"}
-                fontSize={"18px"}
+                fontSize={{ base: "16px", md: "18px" }}
                 fontWeight={"400"}
                 borderColor={"alabaster.800"}
                 backgroundColor={"darkBlue"}

diff --git a/apps/website/src/components/InfoCard.tsx b/apps/website/src/components/InfoCard.tsx
@@ -26,8 +26,12 @@ export default function InfoCard({ texts }: InfoCardProps) {
                 <VStack align="left" spacing="10" maxH="500" overflowY="auto">
                     {texts.map((text, i) => (
                         <VStack key={i} align="left">
-                            <Heading fontSize="24px">{text.title}</Heading>
-                            <Text fontSize="16px">{text.body}</Text>
+                            <Heading textAlign={"left"} fontSize={{ base: "20px", md: "24px" }}>
+                                {text.title}
+                            </Heading>
+                            <Text textAlign={"left"} fontSize={{ base: "14px", md: "16px" }}>
+                                {text.body}
+                            </Text>
                         </VStack>
                     ))}
                 </VStack>

diff --git a/apps/website/src/components/SectionBlock.tsx b/apps/website/src/components/SectionBlock.tsx
@@ -24,8 +24,10 @@ export default function SectionBlock({ title, description, linkText, linkUrl, co
         <VStack>
             <Flex justify={{ base: "start", xl: "space-around" }} wrap={{ base: "wrap", xl: "nowrap" }} gap={"52px"}>
                 <VStack w={{ base: "auto", lg: "602px" }} alignItems={{ base: "start", xl: "center" }} gap={"32px"}>
-                    <Text fontSize={"44px"}>{title}</Text>
-                    <Text fontSize={"18px"} textColor={"alabaster.400"}>
+                    <Text fontSize={{ base: "40px", md: "44px" }} fontWeight={{ base: "400", md: "500" }}>
+                        {title}
+                    </Text>
+                    <Text fontSize={{ base: "16px", md: "18px" }} textColor={"alabaster.400"}>
                         {description}
                     </Text>
                     <Link
@@ -41,7 +43,7 @@ export default function SectionBlock({ title, description, linkText, linkUrl, co
                             borderBottomColor={"white"}
                             _hover={{ borderBottomColor: "transparent" }}
                             fontSize="18px"
-                            fontWeight="normal"
+                            fontWeight="400"
                         >
                             {linkText}
                         </Text>

diff --git a/apps/website/src/components/VideoCard.tsx b/apps/website/src/components/VideoCard.tsx
@@ -22,7 +22,7 @@ export default function VideoCard({ embeddedVideoUrl, title }: VideoCardProps) {
                     </AspectRatio>
                 </HStack>
                 <CardBody padding={"0px 20px 20px 20px"}>
-                    <Heading fontSize={"20px"} lineHeight={"28px"} fontWeight={"normal"}>
+                    <Heading fontSize={{ base: "18px", md: "20px" }} lineHeight={"28px"} fontWeight={"normal"}>
                         {title}
                     </Heading>
                 </CardBody>