Remove absolute positioning from the intro board (#88)

* Remove absolute positioning from the intro board * Fix tabs * Remove redundant style
codux-templates · Oct 10, 2024 · 4125ffb · 4125ffb
1 parent 9e75a81
commit 4125ffb
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 23 deletions.
diff --git a/_codux/boards/intro/intro.board.tsx b/_codux/boards/intro/intro.board.tsx
@@ -5,17 +5,19 @@ export default createBoard({
     name: '🌱 Intro',
     Board: () => (
         <div className={styles.container}>
-            <p className={styles.myStyle}>
-                HOW TO USE <br /> E-COMMERCE STARTER?
-            </p>
-            <p className={styles.myParagraph}>
-                Welcome to Codux e-commerce starter. <br /> This template was built to help you create your own store
-                easily. Use Codux to design your website the way you want, and Wix Headless e-commerce services to
-                manage your store.
-                <a href={'https://help.codux.com/kb/en/article/kb37137'}>
-                    <button className="introButton">Learn more</button>
-                </a>
-            </p>
+            <div className={styles.content}>
+                <p className={styles.title}>
+                    HOW TO USE <br /> E-COMMERCE STARTER?
+                </p>
+                <p className={styles.description}>
+                    Welcome to Codux e-commerce starter. <br /> This template was built to help you create your own
+                    store easily. Use Codux to design your website the way you want, and Wix Headless e-commerce
+                    services to manage your store.
+                    <a href={'https://help.codux.com/kb/en/article/kb37137'}>
+                        <button className="introButton">Learn more</button>
+                    </a>
+                </p>
+            </div>
         </div>
     ),
     environmentProps: {

diff --git a/_codux/boards/intro/intro.module.scss b/_codux/boards/intro/intro.module.scss
@@ -1,17 +1,18 @@
 @use '@styles/variables.scss' as *;
 
 .container {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    border-radius: 10px;
-    display: grid;
+    width: 100%;
+    height: 100vh;
+    display: flex;
     justify-content: center;
+    align-items: center;
+}
+
+.content {
     width: 1000px;
 }
 
-.myStyle {
+.title {
     font: var(--paragraph1);
     color: var(--snow-white);
     padding: 40px 100px;
@@ -23,7 +24,7 @@
     border-radius: 20px 20px 0 0;
 }
 
-.myParagraph {
+.description {
     color: var(--snow-white);
     padding: 70px 120px;
     text-align: center;
@@ -43,15 +44,15 @@
         margin-top: unset;
     }
 
-    .myStyle,
-    .myParagraph {
+    .title,
+    .description {
         padding: 50px 40px;
     }
 }
 
 @media (width <= $mobile-width) {
-    .myStyle,
-    .myParagraph {
+    .title,
+    .description {
         font-size: 20px;
     }
 }