Fixes sponsorship page

components/code-panel/code-docs.tsx

@@ -113,7 +113,7 @@ const StyledDocs = styled('div', {
   },
 
   '& blockquote': {
-    backgroundColor: 'rgba(144, 144, 144, .05)',
+    backgroundColor: '$overlay',
     padding: 12,
     margin: '20px 0',
     borderRadius: 8,

components/shared.tsx

@@ -114,7 +114,7 @@ export const RowButton = styled('button', {
 
   '& svg': {
     position: 'relative',
-    stroke: 'rgba(0,0,0,.2)',
+    stroke: '$overlay',
     strokeWidth: 1,
     zIndex: 1,
   },

pages/sponsorware.tsx

@@ -7,6 +7,7 @@ export default function Sponsorware(): JSX.Element {
   const [session, loading] = useSession()
 
   return (
+    <OuterContent>
       <Content
         size={{
           '@sm': 'small',
@@ -18,7 +19,12 @@ export default function Sponsorware(): JSX.Element {
           tiny little drawing app by{' '}
           <a href="https://twitter.com/steveruizok">steveruizok</a>.
         </p>
-      <video autoPlay muted playsInline onClick={(e) => e.currentTarget.play()}>
+        <video
+          autoPlay
+          muted
+          playsInline
+          onClick={(e) => e.currentTarget.play()}
+        >
           <source src="images/hello.mp4" type="video/mp4" />
         </video>
         <p>This project is currently: </p>
@@ -61,6 +67,7 @@ export default function Sponsorware(): JSX.Element {
           )}
         </ButtonGroup>
       </Content>
+    </OuterContent>
   )
 }
 
@@ -74,15 +81,29 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   }
 }
 
+const OuterContent = styled('div', {
+  backgroundColor: '$canvas',
+  padding: '32px',
+  margin: '0 auto',
+  overflow: 'scroll',
+  position: 'fixed',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'flex-start',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  width: '100%',
+  height: '100%',
+})
+
 const Content = styled('div', {
   width: '720px',
   maxWidth: '100%',
   backgroundColor: '$panel',
-  margin: '32px auto',
-  borderRadius: '0px',
+  borderRadius: '4px',
   boxShadow: '$12',
-  padding: '16px',
-  overflow: 'hidden',
   color: '$text',
   fontSize: '$2',
   fontFamily: '$body',

styles/stitches.config.ts

@@ -140,6 +140,7 @@ const globalStyles = global({
     fontSize: '$2',
     color: '$text',
     backgroundColor: '$canvas',
+    minHeight: '100vh',
   },
   body: {
     overflow: 'hidden',