docs: styling additions

graphiquejs · Dec 31, 2024 · 5b34c12 · 5b34c12
1 parent 7dda345
commit 5b34c12
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 78 deletions.
diff --git a/docs/components/LandingPage/index.tsx b/docs/components/LandingPage/index.tsx
@@ -30,15 +30,15 @@ export const LandingPage = () => (
       <div className={styles.cta}>
         <a className={styles['cta-button']} href="/docs">
           Get Started
-          <div className={styles['forward-icon']}>&rarr;</div>
+          <div className={styles['forward-icon']}>→</div>
         </a>
       </div>
-    </main>
-    <Hr className={styles.hr} />
-    <div className={styles['landing-demo-wrapper']}>
-      <div className={styles['landing-demo-container']}>
-        <Demo />
+      <Hr className={styles.hr} />
+      <div className={styles['landing-demo-wrapper']}>
+        <div className={styles['landing-demo-container']}>
+          <Demo />
+        </div>
       </div>
-    </div>
+    </main>
   </>
 )
diff --git a/docs/components/LandingPage/styles.module.css b/docs/components/LandingPage/styles.module.css
@@ -6,50 +6,37 @@
   display: inline-block;
 }
 
-.hr {
-  margin: 3rem 0 3rem 0;
-}
-
 .hero {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: 73px 0 2rem 0;
+  margin: 63px 0 2rem 0;
   z-index: 2;
   position: relative;
-  padding: 1rem;
+  padding: 1rem 0;
   font-size: 3.2rem;
 
-  @media screen and (max-width: 440px) {
-    padding: 1rem 0;
-  }
-
   @media screen and (min-width: 785px) {
-    margin-top: 108px;
+    margin-top: 98px;
   }
 
   @media screen and (min-width: 1440px) {
-    margin-top: 128px;
+    margin-top: 118px;
   }
 
   .hero-text {
     line-height: 1.2;
     font-weight: 800;
     color: #111;
     text-align: center;
-    padding: 0 0.5rem;
 
     @media screen and (min-width: 1250px) {
       font-size: 4.2rem;
     }
 
-    @media screen and (max-width: 645px) {
-      font-size: 2.25rem;
-    }
-
-    @media screen and (max-width: 440px) {
-      font-size: 1.8rem;
+    @media screen and (max-width: 685px) {
+      font-size: 2.5rem;
     }
   }
 
@@ -66,22 +53,22 @@
 .tagline {
   text-align: center;
   font-weight: 400;
-  margin-top: 2rem;
-  font-size: 1.15rem;
+  margin-top: 1.6rem;
+  font-size: 1rem;
   line-height: 1.4;
-  opacity: 0.8;
-  padding: 0 2rem;
+  opacity: 0.85;
+  padding: 0 1rem;
 
   @media screen and (min-width: 615px) {
     font-size: 1.5rem;
     padding: 0 2rem;
     font-weight: 300;
-    margin-top: 2.5rem;
+    margin-top: 1rem;
   }
 
   @media screen and (min-width: 1250px) {
-    font-size: 1.75rem;
-    margin-top: 3rem;
+    font-size: 1.65rem;
+    margin-top: 2.2rem;
   }
 }
 
@@ -90,25 +77,29 @@
   opacity: 1;
 }
 
+.tagline-highlight:is(html[class~='dark'] *) {
+  color: #fff;
+}
+
 .cta {
   display: flex;
   justify-content: center;
   margin-top: 0;
 
   @media screen and (min-width: 440px) {
-    margin-top: 2.5rem;
+    margin-top: 2rem;
   }
 
   @media screen and (min-width: 646px) {
-    margin-top: 4rem;
+    margin-top: 3.5rem;
   }
 }
 
 .cta-button {
   display: flex;
   align-items: center;
   padding: 0.65rem 1.3rem;
-  font-weight: 600;
+  font-weight: 500;
   font-size: 1rem;
   background: #298670;
   border: 1px solid #11614a33;
@@ -151,15 +142,53 @@
   background: #eee;
 }
 
+.hr {
+  margin: 1.8rem 0;
+  opacity: 0.8;
+
+  @media screen and (min-width: 550px) {
+    margin: 3rem 0;
+  }
+}
+
+.heading-container {
+  display: flex;
+  align-items: center;
+  column-gap: 0.6rem;
+  width: 100%;
+  margin-bottom: 1.5rem;
+  padding: 0 0.75rem;
+
+  @media screen and (min-width: 645px) {
+    padding: 0 1rem;
+  }
+}
+
+.heading-container h2 {
+  font-size: 1.35rem;
+  font-weight: 900;
+  letter-spacing: -0.15px;
+
+  @media screen and (min-width: 645px) {
+    font-size: 1.5rem;
+  }
+}
+
 .landing-demo-wrapper {
   width: 100%;
   display: flex;
+  flex-direction: column;
+  align-items: center;
   justify-content: center;
-  padding: 0 1rem;
+  padding: 0;
 
   @media screen and (min-width: 646px) {
     padding: 0 3rem;
   }
+
+  @media screen and (min-height: 1000px) {
+    padding-top: 1.5rem;
+  }
 }
 
 .landing-demo-container {

diff --git a/docs/components/demo/LandingPage/index.tsx b/docs/components/demo/LandingPage/index.tsx
@@ -65,8 +65,8 @@ const App = () => (
           />
         </div>
       }
-      x="&rarr; Body mass (g)"
-      y="&uarr; Flipper length (mm)"
+      x="→ Body mass (g)"
+      y="↑ Flipper length (mm)"
     />
   </GG>
 );`

diff --git a/docs/components/demo/geoms/geom-hline/Basic.tsx b/docs/components/demo/geoms/geom-hline/Basic.tsx
@@ -8,17 +8,17 @@ import { GeomHLine } from '@graphique/geom-hline';
 
 const App = () => (
   <div style={{ marginTop: 25 }}>
-  <GG
-    data={penguins.filter((d) => d.species === 'Chinstrap')}
-    aes={{
-      x: (d) => d.beakLength,
-      y: (d) => d.flipperLength,
-    }}
-    margin={{ left: 45 }}
-    isContainerWidth
-  >
-    <GeomHLine attr={{ stroke: '#6aafa3', strokeWidth: 1 }} />
-  </GG>
+    <GG
+      data={penguins.filter((d) => d.species === 'Chinstrap')}
+      aes={{
+        x: (d) => d.beakLength,
+        y: (d) => d.flipperLength,
+      }}
+      margin={{ left: 45 }}
+      isContainerWidth
+    >
+      <GeomHLine attr={{ stroke: '#6aafa3', strokeWidth: 1 }} />
+    </GG>
   </div>
 );`
 

diff --git a/docs/components/demo/geoms/geom-vline/Basic.tsx b/docs/components/demo/geoms/geom-vline/Basic.tsx
@@ -8,17 +8,17 @@ import { GeomVLine } from '@graphique/geom-vline';
 
 const App = () => (
   <div style={{ marginTop: 25 }}>
-  <GG
-    data={penguins.filter((d) => d.species === 'Chinstrap')}
-    aes={{
-      x: (d) => d.beakLength,
-      y: (d) => d.flipperLength,
-    }}
-    margin={{ left: 45 }}
-    isContainerWidth
-  >
-    <GeomVLine attr={{ stroke: '#6aafa3', strokeWidth: 1 }} />
-  </GG>
+    <GG
+      data={penguins.filter((d) => d.species === 'Chinstrap')}
+      aes={{
+        x: (d) => d.beakLength,
+        y: (d) => d.flipperLength,
+      }}
+      margin={{ left: 45 }}
+      isContainerWidth
+    >
+      <GeomVLine attr={{ stroke: '#6aafa3', strokeWidth: 1 }} />
+    </GG>
   </div>
 );`
 

diff --git a/docs/components/typography/H1.tsx b/docs/components/typography/H1.tsx
@@ -1,22 +1,28 @@
+import { useWindowWidth } from '@react-hook/window-size'
+
 interface Props {
   children?: string
   size?: string
 }
 
 const H1: React.FC<Props> = ({ children }) => {
-  const isLong = children && children?.length > 15;
-  const size = isLong ? '3xl' : '4xl';
+  const width = useWindowWidth()
+  const isNarrow = width < 440
+
+  const isLong = children && children?.length > 15
+  const condensedSize = isLong ? '1.875rem' : '2.25rem'
+  const fontSize = isLong && isNarrow ? '1.7rem' : condensedSize
 
   return (
     <h1
-      style={{ lineHeight: 1.3 }}
-      className={`_mt-8 _text-${size} ${
+      style={{ lineHeight: 1.3, fontSize }}
+      className={`_mt-8 ${
         isLong ? '_pb-4' : ''
       } _font-extrabold _tracking-tight _text-slate-900 dark:_text-slate-100 `}
     >
       {children}
     </h1>
-  );
-};
+  )
+}
 
-export default H1;
+export default H1
diff --git a/docs/pages/styles.css b/docs/pages/styles.css
@@ -8,19 +8,13 @@
   }
 }
 
-nav._mx-auto {
+nav._mx-auto :first-child {
   @media screen and (max-width: 615px) {
-    padding: 0 1rem 0 0.5rem;
+    margin-left: -5px;
   }
 }
 
-article._w-full {
-  @media screen and (max-width: 440px) {
-    padding: 0 0.25rem;
-  }
-}
-
-h2 {
+h2._text-3xl {
   margin-top: 2.7rem !important;
 }
 
@@ -53,6 +47,12 @@ iframe:is(html[class~='dark'] *) {
   user-select: none;
 }
 
+.cm-line {
+  @media screen and (max-width: 615px) {
+    font-size: 0.75rem;
+  }
+}
+
 .sp-preview-action {
   opacity: 0.5;
   transition: all 300ms;

diff --git a/packages/graphique/src/gg/GG.tsx b/packages/graphique/src/gg/GG.tsx
@@ -13,7 +13,7 @@ import type { RootGGProps } from './types/GG'
 /**
  * **The top-level component and starting point for creating Graphique visualizations**.
  *
- * Pass in data, map data properties to visual properties (`aes`), and fill with child Geoms
+ * Pass in data, map data properties to visual properties ([`aes`](https://graphique.dev/docs/graphique/gg#Aes)), and fill with child Geoms
  * to start visualizing data. Configure and customize with a friendly, component-based API.
  *
  * @param data - the data used to create the base, an array of objects