Docs pages fixes pt1 (#6025)

keystonejs · Jun 30, 2021 · 3948373 · 3948373 · vercel · Jun 30, 2021
1 parent 0988f08
commit 3948373
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 16 deletions.
diff --git a/docs/components/Breadcrumbs.tsx b/docs/components/Breadcrumbs.tsx
@@ -79,6 +79,7 @@ export function Breadcrumbs() {
                   look="body12"
                   css={{
                     textTransform: 'uppercase',
+                    color: 'var(--muted)',
                   }}
                 >
                   {title}

diff --git a/docs/components/docs/Heading.tsx b/docs/components/docs/Heading.tsx
@@ -69,7 +69,7 @@ export function H1(props: StringOnlyChildren) {
       css={{
         fontSize: 'var(--font-xxlarge)',
         fontWeight: 700,
-        letterSpacing: '-0.025em',
+        letterSpacing: '-0.03rem',
         marginTop: 0,
       }}
       as="h1"
@@ -84,7 +84,7 @@ export function H2(props: StringOnlyChildren) {
       css={{
         fontSize: 'var(--font-xlarge)',
         fontWeight: 500,
-        letterSpacing: '-0.025em',
+        letterSpacing: '-0.03rem',
         marginTop: 0,
       }}
       as="h2"
@@ -99,7 +99,7 @@ export function H3(props: StringOnlyChildren) {
       css={{
         fontSize: 'var(--font-large)',
         fontWeight: 500,
-        letterSpacing: '-0.025em',
+        letterSpacing: 'none',
         marginTop: 0,
       }}
       as="h3"

diff --git a/docs/components/docs/Navigation.tsx b/docs/components/docs/Navigation.tsx
@@ -10,6 +10,7 @@ import { AnchorHTMLAttributes } from 'react';
 import { useHeaderContext } from '../Header';
 import { Badge } from '../primitives/Badge';
 import { Type } from '../primitives/Type';
+import { useMediaQuery } from '../../lib/media';
 
 type SectionProps = { label: string; children: ReactNode };
 export function Section({ label, children }: SectionProps) {
@@ -22,9 +23,9 @@ export function Section({ label, children }: SectionProps) {
     >
       <Type
         as="h3"
-        look="body14bold"
-        margin="0 0 var(--space-large) 0"
-        // color="var(--muted)"
+        look="body16bold"
+        margin="var(--space-xlarge) 0 var(--space-large) 0"
+        font-weight="700"
         color="var(--text-heading)"
         css={{ textTransform: 'uppercase' }}
       >
@@ -43,6 +44,7 @@ type NavItemProps = {
 
 export function NavItem({ href, isActive: _isActive, isPlaceholder, ...props }: NavItemProps) {
   const { pathname } = useRouter();
+  const mq = useMediaQuery();
   let isActive = _isActive || pathname === href;
   const ctx = useHeaderContext();
   const isOpen = ctx ? ctx.mobileNavIsOpen : true;
@@ -51,17 +53,17 @@ export function NavItem({ href, isActive: _isActive, isPlaceholder, ...props }:
     <Link href={href} passHref>
       <a
         tabIndex={isOpen ? 0 : -1}
-        css={{
+        css={mq({
           display: 'block',
           textDecoration: 'none',
-          padding: '0 0 var(--space-medium) 0',
+          padding: ['0 0 var(--space-medium) 0', '0 0 var(--space-large) var(--space-medium)'],
           color: isActive
             ? 'var(--link)'
             : `${isPlaceholder ? 'var(--text-disabled)' : 'var(--text)'}`,
           ':hover': {
             color: 'var(--link)',
           },
-        }}
+        })}
         {...props}
       />
     </Link>
@@ -83,9 +85,9 @@ export function PrimaryNavItem({ href, children }: PrimaryNavItemProps) {
           display: 'block',
           fontSize: '1rem',
           color: isActive ? 'var(--link)' : 'var(--text-heading)',
-          marginBottom: '1rem',
+          marginBottom: '1.25rem',
           alignItems: 'center',
-          fontWeight: 700,
+          fontWeight: 600,
           ':hover': {
             color: 'var(--link)',
           },

diff --git a/docs/components/primitives/Well.tsx b/docs/components/primitives/Well.tsx
@@ -38,7 +38,7 @@ export function Well({ grad = 'grad1', heading, href, children, ...props }: Well
           },
           '&:hover, &:focus': {
             boxShadow: '0 7px 21px var(--shadow)',
-            transform: ' scale(1.008)',
+            transform: 'translateY(-4px)',
           },
         }}
         {...props}

diff --git a/docs/lib/prose-lite.ts b/docs/lib/prose-lite.ts
@@ -1,5 +1,5 @@
 export const proseStyles = {
-  color: 'var(--code)',
+  color: 'var(--muted)',
   'img, video': {
     maxWidth: '100%',
     height: 'auto',
@@ -8,15 +8,15 @@ export const proseStyles = {
     content: '""',
   },
   a: {
-    color: 'var(--text-heading)',
+    color: 'var(--text)',
     textDecoration: 'underline',
     fontWeight: 500,
   },
   'a:hover': {
     color: 'var(--link)',
   },
   strong: {
-    color: 'var(--text-heading)',
+    color: 'var(--text)',
     fontWeight: 600,
   },
   'ol[type="A"], ol[type="A" s]': {
@@ -37,6 +37,7 @@ export const proseStyles = {
   'ol > li': {
     position: 'relative' as const,
     paddingLeft: '1.75em',
+    fontSize: '1.125rem',
   },
   'ol > li::before': {
     content: 'counter(list-item, var(--list-counter-style, decimal)) "."',

diff --git a/docs/pages/docs/index.tsx b/docs/pages/docs/index.tsx
@@ -18,7 +18,7 @@ export default function Docs() {
         Keystone Docs
       </Type>
 
-      <Type as="p" look="body18" margin="1.25rem 0 0 0">
+      <Type as="p" look="body18" margin="1.25rem 0 0">
         More than a backend framework. More than a Headless CMS. Keystone is a platform for next-gen
         development workflows and evolution.
       </Type>
-Original file line number
+Diff line change
@@ Expand Up / @@ -79,6 +79,7 @@ export function Breadcrumbs() { @@
                       look="body12"
                       css={{
                         textTransform: 'uppercase',
+                        color: 'var(--muted)',
                       }}
                     >
                       {title}
@@ Expand Down @@