docs: css cleanup

front-of-house · May 5, 2021 · 7d26793 · 7d26793
1 parent ad1b9bc
commit 7d26793
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 8 deletions.
diff --git a/docs/public/style.css b/docs/public/style.css
@@ -12,6 +12,7 @@
   --pink: #ff7a93;
   --green: #b9f27c;
   --yellow: #e0af68;
+  --dAlpha: rgba(0, 0, 0, 0.1);
   --shadow: 0px 0px 1px var(--dAlpha), 0px 4px 8px var(--dAlpha),
     0px 16px 24px var(--dAlpha), 0px 24px 32px var(--dAlpha);
 }
@@ -104,9 +105,10 @@ p {
   padding: 16px 24px 16px 56px;
   overflow: auto;
   color: var(--dark);
-  background: var(--light);
+  background: white;
   box-shadow: var(--shadow);
   border-radius: 6px;
+  border: 2px solid var(--dark);
 }
 .wysiwyg blockquote:first-child {
   margin-top: 0;
@@ -125,13 +127,13 @@ p {
   display: block;
   position: absolute;
   left: 16px;
+  border: 2px solid var(--pink);
   color: var(--pink);
   width: 24px;
   height: 24px;
   border-radius: 24px;
-  background: white;
   text-align: center;
-  line-height: 24px;
+  line-height: 20px;
   font-weight: bold;
 }
 .wysiwyg h1 a,
@@ -153,7 +155,7 @@ p {
 
 code {
   background: #eee;
-  color: var(--mid);
+  color: #444;
   padding: 0;
 }
 pre,
@@ -169,6 +171,7 @@ pre code[class*='hljs'] {
 pre {
   padding: 0;
   overflow: auto;
+  width: 100%;
 }
 
 #root {

diff --git a/docs/src/content/docs.md b/docs/src/content/docs.md
@@ -89,6 +89,10 @@ export async function handler ({
 At this point, you can visit the served URL (probably `localhost:4000`) in your
 browser to view your HTML page or API response.
 
+> With the above example, make sure to only include one of `body`, `html`,
+> `json` or `xml`. All of these map to `Response.body`, and set separate
+> `Content-Type` headers for convenience.
+
 ## Static Responses
 
 So you've seen how to create a serverless function with Presta. But what if you

diff --git a/docs/src/lib/theme.js b/docs/src/lib/theme.js
@@ -22,6 +22,9 @@ export const theme = {
     fontFamily: {
       sans: `'Roboto', -apple-system, system-ui, BlinkMacSystemFont, sans-serif`,
       mono: `'Roboto Mono', monospace`
+    },
+    boxShadow: {
+      shadow: `0px 0px 1px var(--dAlpha), 0px 4px 8px var(--dAlpha), 0px 16px 24px var(--dAlpha), 0px 24px 32px var(--dAlpha)`
     }
   }
 }
diff --git a/docs/src/pages/Docs.jsx b/docs/src/pages/Docs.jsx
@@ -44,7 +44,7 @@ export async function handler (ctx) {
       <Hypo hypostyle={hypo}>
         <Box pb={6} cx={{ overflow: 'hidden' }}>
           <Gutter withVertical>
-            <Box mx='auto' maxWidth='640px'>
+            <Box mx='auto' w={1} maxWidth='640px'>
               <Box f aic jcb>
                 <Box as='a' href='/' cx={{ textDecoration: 'none' }}>
                   <Logo noWord />
@@ -67,7 +67,8 @@ export async function handler (ctx) {
               </Box>
 
               <Box pt={16} f fw jcb>
-                <div
+                <Box
+                  w={1}
                   className='wysiwyg'
                   dangerouslySetInnerHTML={{ __html: content }}
                 />

diff --git a/docs/src/pages/Index.jsx b/docs/src/pages/Index.jsx
@@ -55,6 +55,7 @@ function Page () {
 
               <Box w={[1, 1, 2 / 5]} pt={[8, 8, 0]} pl={[0, 0, 8]}>
                 <Box
+                  rel
                   c='white'
                   bg='dark'
                   p={6}
@@ -91,18 +92,74 @@ function Page () {
                     />
                   </Box>
 
+                  <Box
+                    abs
+                    left
+                    right
+                    top
+                    mxa
+                    bg='white'
+                    borderRadius='4px'
+                    px={[2, 2, 3]}
+                    py={3}
+                    fs={6}
+                    w={140}
+                    c='dark'
+                    tac
+                    boxShadow='shadow'
+                    transform='translateY(-50%)'
+                    cx={{
+                      '@keyframes bounce': {
+                        from: {
+                          transform: 'translateY(-65%)'
+                        },
+                        to: {
+                          transform: 'translateY(-50%)'
+                        }
+                      },
+                      animation: 'bounce 0.4s',
+                      animationDirection: 'alternate',
+                      animationTimingFunction: 'cubic-bezier(.5, 0.05, 1, .5)',
+                      animationIterationCount: 'infinite'
+                    }}
+                  >
+                    Try it now!
+                    <Box
+                      abs
+                      left
+                      right
+                      bottom
+                      mxa
+                      w={0}
+                      h={0}
+                      cx={{
+                        borderTop: '8px solid white',
+                        borderLeft: '8px solid transparent',
+                        borderRight: '8px solid transparent',
+                        borderBottom: '8px solid transparent',
+                        transform: 'translateY(100%)'
+                      }}
+                    />
+                  </Box>
+
                   <Box f>
                     <Box mr={2} cx={{ opacity: 0.5 }}>
                       $
                     </Box>{' '}
-                    npx presta build file.tsx
+                    npx presta watch index.ts
                   </Box>
                 </Box>
               </Box>
             </Box>
           </Box>
 
-          <Box rel mb={[8, 8, 12]} borderRadius='8px' bg='dark'>
+          <Box
+            rel
+            mb={[8, 8, 12]}
+            borderRadius='8px'
+            bg='dark'
+            d={['none', 'none', 'block']}
+          >
             <Box
               as='video'
               db