[DOCS]fix: blogchain list items styling (#967)

kadena-community · Sep 27, 2023 · f9de53a · f9de53a · vercel · Sep 27, 2023
1 parent bdf21d5
commit f9de53a
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 47 deletions.
diff --git a/.changeset/eight-ads-tell.md b/.changeset/eight-ads-tell.md
@@ -0,0 +1,5 @@
+---
+'@kadena/docs': patch
+---
+
+fix blogpost list styling
diff --git a/packages/apps/docs/src/components/Blog/BlogItem/BlogItem.tsx b/packages/apps/docs/src/components/Blog/BlogItem/BlogItem.tsx
@@ -9,6 +9,7 @@ import {
   figureClass,
   figureVariant,
   footer,
+  gridWrapperClass,
   imageClass,
   link,
   metaItem,
@@ -31,29 +32,47 @@ export const BlogItem: FC<IProps> = ({ item, size = 'default' }) => {
   return (
     <li className={blogitem}>
       <Link className={link} href={item.root}>
-        <Stack>
-          <Box>
-            <Stack direction="column" gap="$3">
-              <Stack alignItems="center" gap="$2">
-                <Avatar
-                  name={item.authorInfo?.name}
-                  avatar={item.authorInfo?.avatar}
-                />
-                <Heading as="h4" variant="h6">
-                  {item.authorInfo?.name}{' '}
-                  {item.authorInfo?.description && (
-                    <span className={authorTitleClass}>
-                      {' '}
-                      - {item.authorInfo.description}
-                    </span>
-                  )}
-                </Heading>
-              </Stack>
-              <Heading as="h3" variant="h5">
-                {item.title}
+        <div className={gridWrapperClass}>
+          <div style={{ gridArea: 'image' }}>
+            <Box
+              marginLeft={{ xs: 0, md: '$8' }}
+              marginBottom={{ xs: '$8', md: 0 }}
+            >
+              <figure className={classNames(figureClass, figureVariant[size])}>
+                {item.headerImage && (
+                  <Image
+                    className={imageClass}
+                    src={item.headerImage}
+                    fill
+                    style={{ objectFit: 'cover' }}
+                    alt={item.title}
+                  />
+                )}
+              </figure>
+            </Box>
+          </div>
+          <div style={{ gridArea: 'header' }}>
+            <Stack alignItems="center" gap="$2">
+              <Avatar
+                name={item.authorInfo?.name}
+                avatar={item.authorInfo?.avatar}
+              />
+              <Heading as="h4" variant="h6">
+                {item.authorInfo?.name}{' '}
+                {item.authorInfo?.description && (
+                  <span className={authorTitleClass}>
+                    {' '}
+                    - {item.authorInfo.description}
+                  </span>
+                )}
               </Heading>
-              <div>{item.description}</div>
             </Stack>
+            <Heading as="h3" variant="h5">
+              {item.title}
+            </Heading>
+
+            <div>{item.description}</div>
+
             <footer className={footer}>
               <span className={metaItem}>
                 {item.readingTimeInMinutes} minutes
@@ -68,21 +87,8 @@ export const BlogItem: FC<IProps> = ({ item, size = 'default' }) => {
                   ))}
               </span>
             </footer>
-          </Box>
-          <Box marginLeft="$8">
-            <figure className={classNames(figureClass, figureVariant[size])}>
-              {item.headerImage && (
-                <Image
-                  className={imageClass}
-                  src={item.headerImage}
-                  fill
-                  style={{ objectFit: 'cover' }}
-                  alt={item.title}
-                />
-              )}
-            </figure>
-          </Box>
-        </Stack>
+          </div>
+        </div>
       </Link>
     </li>
   );

diff --git a/packages/apps/docs/src/components/Blog/BlogItem/styles.css.ts b/packages/apps/docs/src/components/Blog/BlogItem/styles.css.ts
@@ -1,4 +1,4 @@
-import { sprinkles, vars } from '@kadena/react-ui/theme';
+import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
 
 import { style, styleVariants } from '@vanilla-extract/css';
 
@@ -74,17 +74,35 @@ export const figureClass = style([
     borderRadius: '$md',
   }),
   {
-    width: `clamp(${vars.sizes.$32}, 15vw, ${vars.sizes.$48})`,
-    aspectRatio: '1',
+    width: `100%`,
+
+    '@media': {
+      [`screen and ${breakpoints.md}`]: {
+        width: `clamp(${vars.sizes.$32}, 15vw, ${vars.sizes.$48})`,
+        aspectRatio: '1',
+      },
+    },
   },
 ]);
 
 export const figureVariant = styleVariants({
   default: {
-    width: `clamp(${vars.sizes.$32}, 15vw, ${vars.sizes.$48})`,
+    width: '100%',
+    aspectRatio: '16 / 3',
+    '@media': {
+      [`screen and ${breakpoints.md}`]: {
+        width: `clamp(${vars.sizes.$32}, 15vw, ${vars.sizes.$48})`,
+      },
+    },
   },
   large: {
-    width: `clamp(${vars.sizes.$48}, 20vw, ${vars.sizes.$64})`,
+    width: '100%',
+    aspectRatio: '16 / 7',
+    '@media': {
+      [`screen and ${breakpoints.md}`]: {
+        width: `clamp(${vars.sizes.$48}, 20vw, ${vars.sizes.$64})`,
+      },
+    },
   },
 });
 
@@ -101,3 +119,23 @@ export const authorTitleClass = style([
     color: '$neutral3',
   }),
 ]);
+
+export const gridWrapperClass = style([
+  sprinkles({
+    display: 'grid',
+  }),
+  {
+    gridTemplateAreas: `
+      "image"
+      "header"
+    `,
+
+    '@media': {
+      [`screen and ${breakpoints.md}`]: {
+        gridTemplateAreas: `
+        "header image"
+      `,
+      },
+    },
+  },
+]);
diff --git a/packages/apps/docs/src/components/Layout/Redocly/Redocly.tsx b/packages/apps/docs/src/components/Layout/Redocly/Redocly.tsx
@@ -28,7 +28,7 @@ export const options: RedocRawOptions = {
   theme: {
     breakpoints: {
       small: '1024px',
-      medium: '1280px',
+      medium: '1279px',
       large: '1440px',
     },
     sidebar: {

diff --git a/packages/apps/docs/src/components/Layout/Redocly/styles.css.ts b/packages/apps/docs/src/components/Layout/Redocly/styles.css.ts
@@ -31,7 +31,7 @@ export const codebackgroundClass = style([
         backgroundPositionY: '-100px',
         backgroundPositionX: '-100px',
 
-        transform: 'scale(.3, 1)  translate(100%, 0)',
+        transform: 'scale(.6, 1)  translate(50%, 0)',
         opacity: 0,
 
         transition: 'transform 1.5s ease, opacity 3s ease-out',
@@ -45,10 +45,9 @@ export const codebackgroundClass = style([
           [`screen and ${breakpoints.lg}`]: {
             backgroundPositionX: `calc(100vw  - (${$$asideMenuWidthCode} + ${$$shadowWidth}))`,
           },
-          [`screen and ${breakpoints.xl}`]: {
-            display: 'block',
-          },
+
           [`screen and ${breakpoints.xxl}`]: {
+            display: 'block',
             backgroundPositionX: `calc(${$$pageWidth} + ((100vw - ${$$pageWidth}) /2 ) - (${$$asideMenuWidthCode} + ${$$shadowWidth}))`,
           },
         },
@@ -59,12 +58,15 @@ export const codebackgroundClass = style([
           [`screen and ${breakpoints.md}`]: {
             left: `calc(100vw  - (${$$asideMenuWidthCode} +  ${vars.sizes.$4}))`,
           },
+
           [`screen and ${breakpoints.lg}`]: {
-            left: `calc(100vw  - (${$$asideMenuWidthCode} +  ${vars.sizes.$4}  + ${vars.sizes.$4}))`,
+            left: `calc(100vw  - (${$$asideMenuWidthCode} +  ${vars.sizes.$20} ))`,
           },
+
           [`screen and ${breakpoints.xl}`]: {
             backgroundColor: $$backgroundOverlayColor,
           },
+
           [`screen and ${breakpoints.xxl}`]: {
             left: `calc(${$$pageWidth} + ((100vw - ${$$pageWidth}) /2) - (${$$asideMenuWidthCode} + ${vars.sizes.$6} ))`,
           },