style: card component

kelilipan · Sep 3, 2021 · f7ce512 · f7ce512
1 parent 9e51669
commit f7ce512
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 12 deletions.
diff --git a/components/PostCard.tsx b/components/PostCard.tsx
@@ -15,32 +15,27 @@ const PostCard = ({
   readTime,
 }: PostType) => {
   const borderColor = useColorModeValue("blackAlpha.100", "whiteAlpha.200");
-  const outerBorderColor = useColorModeValue("transparent", "whiteAlpha.200");
   const date = new Date(publishedAt).toLocaleDateString("en-US", {
     day: "numeric",
     month: "long",
     year: "numeric",
   });
+  const bgHoverColor = useColorModeValue("blackAlpha.50", "whiteAlpha.200");
   return (
     <RouteLink
       borderRadius="5px"
       href={`/blog/${slug}`}
       textDecor="none!important"
       position="relative"
-      bottom="0px"
-      transition="0.2s ease all"
-      _hover={{
-        transition: "0.2s ease all",
-        bottom: "5px",
-      }}
     >
       <Box
         height="full"
         borderRadius="5px"
-        shadow="md"
         role="group"
-        borderColor={outerBorderColor}
+        borderColor={borderColor}
         borderWidth="1px"
+        transition="0.2s ease all"
+        _hover={{ bgColor: bgHoverColor, transition: "0.2s ease all" }}
       >
         <AspectRatio ratio={1.92 / 1}>
           <Box

diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx
@@ -50,7 +50,7 @@ const ProjectCard = ({
       borderRadius="5px"
     >
       <AspectRatio ratio={16 / 9} w={[null, "512px"]}>
-        <Box borderLeftRadius={[0, "5px"]} borderTopRadius={["5px", 0]}>
+        <Box borderRadius={["5px 5px 0 0 ", "5px 0 0 5px"]}>
           <Image
             width="512"
             height="288"

diff --git a/components/SnippetCard.tsx b/components/SnippetCard.tsx
@@ -13,8 +13,14 @@ const SnippetCard = ({ logo, title, description, tags, slug }: SnippetType) => {
   const borderColor = useColorModeValue("blackAlpha.100", "whiteAlpha.200");
   const bgHoverColor = useColorModeValue("blackAlpha.50", "whiteAlpha.200");
   return (
-    <RouteLink href={`/snippet/${slug}`} textDecor="none!important" w="full">
+    <RouteLink
+      borderRadius="5px"
+      href={`/snippet/${slug}`}
+      textDecor="none!important"
+      w="full"
+    >
       <Stack
+        borderRadius="5px"
         alignItems={["flex-start", "center"]}
         direction={["column", "row"]}
         borderColor={borderColor}

diff --git a/pages/blog.tsx b/pages/blog.tsx
@@ -22,7 +22,7 @@ const Blog = ({ posts }: BlogProps) => {
       </Heading>
       <Text>Some tech stuff and my random thoughts.</Text>
       {filteredBlogPosts.length > 0 ? (
-        <SimpleGrid columns={[1, 2]} gap="6" py="2">
+        <SimpleGrid columns={[1, 2]} gap="4" py="2">
           {filteredBlogPosts.map((post: PostType, idx: number) => (
             <PostCard {...post} key={idx} />
           ))}