fix: home styles

santosfrancisco · Apr 14, 2024 · 18b5c1f · 18b5c1f
1 parent a4184bb
commit 18b5c1f
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 89 deletions.
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -28,3 +28,37 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+
+/* index page start */
+
+.heroBanner {
+  padding: 2rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button + .button {
+  margin-left: 16px;
+}
+
+@media only screen and (min-width: 48rem) {
+  .heroBanner {
+    padding: 4rem 0;
+    text-align: left;
+  }
+
+  .buttons {
+    -webkit-box-pack: start;
+    justify-content: start;
+  }
+}
+
+/* index page end */
diff --git a/src/pages/demo.tsx b/src/pages/demo.tsx
@@ -1,9 +1,9 @@
-import styled, { ThemeProvider } from "styled-components";
+import styled from "styled-components";
 import { Container, Row, Col, ScreenClass, ScreenBadge } from "@site/lib";
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
-const customConf = {
+export const customConf = {
   mediaQuery: "only screen",
   columns: {
     xs: 4,
@@ -48,53 +48,53 @@ type DemoProps = {
 
 const Demo = ({ className }: DemoProps) => {
   return (
-    <ThemeProvider theme={{ awesomegrid: customConf }}>
-      <div className={className}>
-        <Container className="grid-container">
-          <div>
-            <p>Resize your browser window and see what happens!</p>
-          </div>
-          <ScreenBadge />
-          <Row>
-            <Col>
-              <ScreenClass
-                render={(screen) => (
-                  <p
-                    style={{
-                      color: ["sm", "md"].includes(screen) ? "green" : "yellow"
-                    }}
-                  >
-                    Current screen is {screen.toUpperCase()}
-                  </p>
-                )}
-              />
-            </Col>
-          </Row>
-          <Row>
-            <Col xs={2} sm={3} md={4} lg={3} xl={6}>
-              <div className="grid-col">
-                xs={2} sm={3} md={4} lg={3} xl={6}
-              </div>
-            </Col>
-            <Col xs={2} sm={5} md={4} lg={3} xl={6}>
-              <div className="grid-col">
-                xs={2} sm={5} md={4} lg={3} xl={6}
-              </div>
-            </Col>
-            <Col xs={4} sm={5} md={4} lg={6} xl={6}>
-              <div className="grid-col">
-                xs={4} sm={5} md={4} lg={6} xl={6}
-              </div>
-            </Col>
-            <Col xs={4} sm={3} md={4} lg={12} xl={6}>
-              <div className="grid-col">
-                xs={4} sm={3} md={4} lg={12} xl={6}
-              </div>
-            </Col>
-          </Row>
-        </Container>
-      </div>
-    </ThemeProvider>
+    // <ThemeProvider theme={{ awesomegrid: customConf }}>
+    <div className={className}>
+      <Container className="grid-container">
+        <div>
+          <p>Resize your browser window and see what happens!</p>
+        </div>
+        <ScreenBadge />
+        <Row>
+          <Col>
+            <ScreenClass
+              render={(screen) => (
+                <p
+                  style={{
+                    color: ["sm", "md"].includes(screen) ? "green" : "yellow"
+                  }}
+                >
+                  Current screen is {screen.toUpperCase()}
+                </p>
+              )}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col xs={2} sm={3} md={4} lg={3} xl={6}>
+            <div className="grid-col">
+              xs={2} sm={3} md={4} lg={3} xl={6}
+            </div>
+          </Col>
+          <Col xs={2} sm={5} md={4} lg={3} xl={6}>
+            <div className="grid-col">
+              xs={2} sm={5} md={4} lg={3} xl={6}
+            </div>
+          </Col>
+          <Col xs={4} sm={5} md={4} lg={6} xl={6}>
+            <div className="grid-col">
+              xs={4} sm={5} md={4} lg={6} xl={6}
+            </div>
+          </Col>
+          <Col xs={4} sm={3} md={4} lg={12} xl={6}>
+            <div className="grid-col">
+              xs={4} sm={3} md={4} lg={12} xl={6}
+            </div>
+          </Col>
+        </Row>
+      </Container>
+    </div>
+    // </ThemeProvider>
   );
 };
 

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -4,8 +4,7 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import HomepageFeatures from "@site/src/components/HomepageFeatures";
 import Heading from "@theme/Heading";
-import styled from "styled-components";
-import { Container, config } from "@site/lib";
+import { Container } from "@site/lib";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
@@ -32,44 +31,14 @@ function HomepageHeader() {
   );
 }
 
-export default styled(({ className }) => {
+export default function IndexPage() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <div className={className}>
-      <Layout title={siteConfig.title} description={siteConfig.tagline}>
-        <HomepageHeader />
-        <Container>
-          <HomepageFeatures />
-        </Container>
-      </Layout>
-    </div>
+    <Layout title={siteConfig.title} description={siteConfig.tagline}>
+      <HomepageHeader />
+      <Container>
+        <HomepageFeatures />
+      </Container>
+    </Layout>
   );
-})`
-  .heroBanner {
-    padding: 2rem;
-    text-align: center;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .buttons {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .button + .button {
-      margin-left: 16px;
-    }
-  }
-
-  ${(props) => config(props).media["sm"]`
-    .heroBanner {
-      padding: 4rem 0;
-      text-align: left;
-    }
-    
-    .buttons {
-      justify-content: start;
-    }
-`}
-`;
+}