Update some home item styling.

silencesoft · Jul 5, 2023 · 84c64ab · 84c64ab · vercel · Jul 5, 2023
1 parent 03f64fd
commit 84c64ab
Showing 1 changed file with 30 additions and 20 deletions.
diff --git a/src/components/Blog/Item/index.tsx b/src/components/Blog/Item/index.tsx
@@ -26,53 +26,63 @@ const Item: React.FC<Props> = ({ post }: Props) => {
   return (
     <Link href={`/post/${slug}`} style={{ display: 'block', width: '100%' }}>
       <Card isPressable>
-        <Card.Header css={{ position: 'absolute', zIndex: 1, top: 5, textShadow: 'black 2px 2px' }}>
+        <Card.Header
+          css={{
+            position: image ? 'absolute' : 'relative',
+            zIndex: 1,
+            top: 0,
+            textShadow: 'black 2px 2px',
+            bgBlur: '#0f111466',
+          }}
+        >
           <Col>
-            <Text size={12} weight="bold" transform="uppercase">
+            <Text size={12} weight="bold" transform="uppercase" color="white">
               {tags[0]}
             </Text>
-            <Text h2 b size={20} color="white">
+            <Text h2 size={20} color="white" weight="bold">
               {title}
             </Text>
           </Col>
         </Card.Header>
-        <Card.Image
-          src={
-            image
-              ? image
-              : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII= '
-          }
-          objectFit="cover"
-          width="100%"
-          height={340}
-          alt=""
-          title={title}
-        />
+        {image && (
+          <Card.Image
+            src={
+              image
+                ? image
+                : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII= '
+            }
+            objectFit="cover"
+            width="100%"
+            height={340}
+            alt=""
+            title={title}
+          />
+        )}
         <Card.Footer
           isBlurred
           css={{
-            position: 'absolute',
+            position: image ? 'absolute' : 'relative',
             bgBlur: '#0f111466',
-            borderTop: '$borderWeights$light solid $gray800',
+            borderTop: image ? '$borderWeights$light solid $gray800' : '',
             bottom: 0,
             zIndex: 1,
           }}
         >
           <Row>
             <Col span={9}>
               <Row>
-                <Col span={4}>
+                <Col css={{ width: 'auto', paddingRight: 16 }}>
                   {userData?.picture ? (
                     <Avatar src={userData?.picture} size="lg" />
                   ) : (
                     <Avatar icon={<RxPerson />} size="lg" />
                   )}
                 </Col>
                 <Col>
-                  <Text color="#d1d1d1" size={12}>
+                  <Text color="#eeeeee" size={12}>
                     @{userData?.name}&nbsp;
                   </Text>
-                  <Text color="#d1d1d1" size={10}>
+                  <Text color="#eeeeee" size={10}>
                     {dayjs.unix(published_at).format('MMM D, YYYY')}
                   </Text>
                 </Col>