Add title and profile section in index page

marshallku · Feb 9, 2025 · e9a8092 · e9a8092 · github-actions · Feb 9, 2025
1 parent 9dd7f2d
commit e9a8092
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/apps/blog/src/app/page.module.scss b/apps/blog/src/app/page.module.scss
@@ -6,6 +6,18 @@
     &__header {
         position: relative;
         display: flex;
+        width: clamp(0px, map.get($container-width, "large"), 100%);
+        padding: 0 20px;
+        margin: 36px auto 12px;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+
+        @include respond-to(medium) {
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: flex-start;
+        }
     }
 
     &__container {

diff --git a/apps/blog/src/app/page.tsx b/apps/blog/src/app/page.tsx
@@ -25,11 +25,15 @@ export default async function Home() {
     return (
         <section className={cx()}>
             <header className={cx("__header")}>
-                <Typography variant="h1" fontWeight={700}>
-                    {SITE_NAME}
-                </Typography>
-                <Typography>{SITE_DESCRIPTION}</Typography>
-                <Profile size="small" showContact />
+                <div className={cx("__header-content")}>
+                    <Typography variant="h1" fontWeight={700} marginBottom={8}>
+                        {SITE_NAME}
+                    </Typography>
+                    <Typography marginBottom={24}>{SITE_DESCRIPTION}</Typography>
+                </div>
+                <div className={cx("__profile")}>
+                    <Profile size="small" showContact />
+                </div>
             </header>
             <section className={cx("__container")}>
                 <PostList posts={postsInPage} />
Component	Story	Success	Viewport	MisMatch Percentage
components-button	string-children	✅	phone	0.00%
components-button	string-children	✅	tablet	0.10%
input-input	default	✅	phone	0.00%
input-input	default	✅	tablet	0.10%
input-input	line	✅	phone	0.00%
input-input	line	✅	tablet	0.04%
input-input	box	✅	phone	0.00%
input-input	box	✅	tablet	0.04%
components-profile	default	✅	phone	0.00%
components-profile	default	✅	tablet	0.00%
input-textarea	line	✅	phone	0.00%
input-textarea	line	✅	tablet	0.04%
input-textarea	box	✅	phone	0.00%
input-textarea	box	✅	tablet	0.04%
typography-typography	default	✅	phone	0.00%
typography-typography	default	✅	tablet	0.07%