refactor: update responsive layout (#31)

* refactor: update responsive layout * refactor(theme): add custom breakpoints
pravastacaraka · Aug 28, 2021 · 987cd18 · 987cd18 · vercel · Aug 28, 2021
1 parent 095a7f3
commit 987cd18
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 61 deletions.
diff --git a/components/Footer.js b/components/Footer.js
@@ -38,7 +38,7 @@ const footerSocials = [
 function Footer() {
   const date = new Date().getFullYear();
   return (
-    <Container as="footer" px={4} py={8}>
+    <Container as="footer" mb={{ base: "calc(60px - var(--chakra-space-4))", md: 0 }} px={4} py={8}>
       <Stack align="center" color="gray.500" textAlign="center">
         <ButtonGroup>
           {footerSocials.map((social) => (

diff --git a/components/MobileNavigation.js b/components/MobileNavigation.js
@@ -13,7 +13,7 @@ function MobileNavigation() {
     <MotionBox
       initial={false}
       animate={isOpen ? "open" : "close"}
-      position="sticky"
+      position="fixed"
       bottom="0"
       left="0"
       right="0"

diff --git a/pages/_app.js b/pages/_app.js
@@ -2,7 +2,7 @@ import Footer from "@app-components/Footer";
 import Header from "@app-components/Header";
 import MobileNavigation from "@app-components/MobileNavigation";
 import customTheme from "@app-styles/theme";
-import { ChakraProvider, Container } from "@chakra-ui/react";
+import { ChakraProvider, Container, Flex } from "@chakra-ui/react";
 import "@fontsource/inter/variable.css";
 import Head from "next/head";
 import { useRouter } from "next/router";
@@ -15,11 +15,13 @@ function MyApp({ Component, pageProps }) {
       <Head>
         <meta content="width=device-width, initial-scale=1" name="viewport" />
       </Head>
-      <Header />
-      <Container as="main" pt={{ base: 4, md: 8 }} pb={{ base: 8, md: 0 }} px={4}>
-        <Component {...pageProps} key={asPath} />
-      </Container>
-      <Footer />
+      <Flex direction="column" minH={{ base: "calc(100vh - 60px)", md: "100vh" }}>
+        <Header />
+        <Container as="main" pt={{ base: 4, md: 8 }} pb={{ base: 4, md: 8 }} px={4}>
+          <Component {...pageProps} key={asPath} />
+        </Container>
+        <Footer />
+      </Flex>
       <MobileNavigation />
     </ChakraProvider>
   );

diff --git a/pages/about.js b/pages/about.js
@@ -43,14 +43,7 @@ function About({ about, knowledges, imgProps }) {
   const tools = knowledges?.filter((knowledge) => knowledge.fields.type === "tool");
   const deployments = knowledges?.filter((knowledge) => knowledge.fields.type === "ci/cd");
   return (
-    <Stack
-      as="section"
-      minH={{
-        base: "calc(100vh - var(--chakra-space-32) - 232px)",
-        md: "calc(100vh - var(--chakra-space-32) - 200px)",
-      }}
-      spacing={8}
-    >
+    <Stack as="section" spacing={8}>
       <Head>
         <title>{pageMeta.title} - Pravasta Caraka</title>
         <meta name="description" content={pageMeta.description} />

diff --git a/pages/achievements.js b/pages/achievements.js
@@ -114,22 +114,15 @@ function AchievementPage({ awards, licenses }) {
   const licensesGroupByYear = arrayGroupBy("year");
   const licensesGroupedByYear = licensesGroupByYear(licenses);
   return (
-    <Stack
-      as="section"
-      minH={{
-        base: "calc(100vh - var(--chakra-space-32) - 232px)",
-        md: "calc(100vh - var(--chakra-space-32) - 200px)",
-      }}
-      spacing={8}
-    >
+    <Stack as="section" spacing={8}>
       <Head>
         <title>{pageMeta.title} - Pravasta Caraka</title>
         <meta name="description" content={pageMeta.description} />
       </Head>
 
       <Stack spacing={4} textAlign="center">
         <Heading as="h1">Achievements</Heading>
-        <Text>{pageMeta.description}</Text>
+        <Text lineHeight="tall">{pageMeta.description}</Text>
       </Stack>
 
       <Stack spacing={4}>

diff --git a/pages/blog.js b/pages/blog.js
@@ -7,29 +7,31 @@ function BlogPage({ posts }) {
     description: "Sometimes I write about web development, other times about random interesting stuff.",
   };
   return (
-    <Stack
-      as="section"
-      minH={{
-        base: "calc(100vh - var(--chakra-space-32) - 232px)",
-        md: "calc(100vh - var(--chakra-space-32) - 200px)",
-      }}
-      spacing={8}
-    >
+    <Stack as="section" spacing={8}>
       <Head>
         <title>{pageMeta.title} - Pravasta Caraka</title>
         <meta name="description" content={pageMeta.description} />
       </Head>
 
       <Stack spacing={4} textAlign="center">
         <Heading as="h1">Recent Posts</Heading>
-        <Text as="h2">{pageMeta.description}</Text>
+        <Text as="h2" lineHeight="tall">
+          {pageMeta.description}
+        </Text>
       </Stack>
 
       {posts ? (
         <></>
       ) : (
         <Stack spacing={4} textAlign="center">
-          <Center minH="calc(100vh - var(--chakra-space-32) - 315px)">
+          <Center
+            h={{
+              base: "calc(100vh - 30rem)",
+              xs: "calc(100vh - 30rem + 20px)",
+              sm: "calc(100vh - 30rem + 25px)",
+              md: "calc(100vh - 30rem + 2px)",
+            }}
+          >
             <Text>Don&apos;t have any posts.</Text>
           </Center>
         </Stack>

diff --git a/pages/contact.js b/pages/contact.js
@@ -20,14 +20,7 @@ function ContactPage() {
     description: "Are you looking for a discussion partner or someone you can trust to help with your website?",
   };
   return (
-    <Stack
-      as="section"
-      minH={{
-        base: "calc(100vh - var(--chakra-space-32) - 232px)",
-        md: "calc(100vh - var(--chakra-space-32) - 200px)",
-      }}
-      spacing={8}
-    >
+    <Stack as="section" spacing={8}>
       <Head>
         <title>{pageMeta.title} - Pravasta Caraka</title>
         <meta name="description" content={pageMeta.description} />
@@ -38,8 +31,10 @@ function ContactPage() {
       </Stack>
 
       <Stack spacing={4}>
-        <Text as="h2">{pageMeta.description}</Text>
-        <Text>
+        <Text as="h2" lineHeight="tall">
+          {pageMeta.description}
+        </Text>
+        <Text lineHeight="tall">
           If so, I am the right person and open for you to contact. There is no limit to contact me. There are
           several options that you can choose to chat, discuss, or just say hello.
         </Text>
@@ -101,7 +96,7 @@ function ContactPage() {
         <Heading as="h2" fontWeight="semibold" size="lg">
           My Location
         </Heading>
-        <Text>
+        <Text lineHeight="tall">
           I am open if you want to discuss face to face. I am a software developer who lives in the district of
           Gedangan, Sidoarjo, East Java, ID.
         </Text>

diff --git a/pages/index.js b/pages/index.js
@@ -7,7 +7,12 @@ import profilePic from "../public/static/images/avatar.webp";
 
 function Home() {
   return (
-    <Center as="section" flexDir="column" minH={`calc(100vh - var(--chakra-space-16) - 40px)`}>
+    <Center
+      as="section"
+      flexDir="column"
+      justify="space-evenly"
+      minH={{ md: "calc(100vh - 22.5rem)", xl: "calc(100vh - 8.5rem)" }}
+    >
       <Head>
         <title>Pravasta Caraka</title>
       </Head>
@@ -21,9 +26,14 @@ function Home() {
         <Heading as="h1" size="3xl">
           Hey, I&apos;m Pravasta Caraka.
         </Heading>
-        <Text color={useColorModeValue("gray.600", "gray.400")} fontSize={["lg", "xl"]} maxW="65ch">
-          Web and mobile developer enthusiast. Currently based on Surabaya, Indonesia. You’ve found my personal
-          slice of the internet, while you&apos;re here you can&nbsp;
+        <Text
+          color={useColorModeValue("gray.600", "gray.400")}
+          fontSize={["lg", "xl"]}
+          lineHeight="tall"
+          maxW="65ch"
+        >
+          Web and mobile developer enthusiast. Currently based on Sidoarjo, ID. You’ve found my personal slice of
+          the internet, while you&apos;re here you can&nbsp;
           <NextChakraLink href="/about">learn more about me</NextChakraLink>.
         </Text>
       </Stack>

diff --git a/pages/projects.js b/pages/projects.js
@@ -48,22 +48,15 @@ function ProjectsPage({ projects, imgProps }) {
     description: "Here are some of my past works from personal projects and open source ones.",
   };
   return (
-    <Stack
-      as="section"
-      minH={{
-        base: "calc(100vh - var(--chakra-space-32) - 232px)",
-        md: "calc(100vh - var(--chakra-space-32) - 200px)",
-      }}
-      spacing={8}
-    >
+    <Stack as="section" spacing={8}>
       <Head>
         <title>{pageMeta.title} - Pravasta Caraka</title>
         <meta name="description" content={pageMeta.description} />
       </Head>
 
       <Stack align="center" spacing={4} textAlign="center">
         <Heading as="h1">{pageMeta.title}</Heading>
-        <Text as="h2" pb={8}>
+        <Text as="h2" lineHeight="tall" pb={8}>
           {pageMeta.description}
         </Text>
 
@@ -141,7 +134,14 @@ function ProjectsPage({ projects, imgProps }) {
           </SimpleGrid>
         ) : (
           <Stack spacing={4} textAlign="center">
-            <Center minH="calc(100vh - var(--chakra-space-32) - 315px)">
+            <Center
+              h={{
+                base: "calc(100vh - 30rem)",
+                xs: "calc(100vh - 30rem + 20px)",
+                sm: "calc(100vh - 30rem + 25px)",
+                md: "calc(100vh - 30rem + 2px)",
+              }}
+            >
               <Text>Don&apos;t have any projects.</Text>
             </Center>
           </Stack>

diff --git a/styles/theme.js b/styles/theme.js
@@ -1,5 +1,13 @@
 import { extendTheme, theme as defaultTheme } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
+import { createBreakpoints, mode } from "@chakra-ui/theme-tools";
+
+const breakpoints = createBreakpoints({
+  xs: "375px",
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+});
 
 const config = {
   useSystemColorMode: false,
@@ -26,6 +34,7 @@ const styles = {
 };
 
 const customTheme = extendTheme({
+  breakpoints,
   config,
   fonts,
   styles,