docs: tweak footer

la55u · Dec 7, 2020 · 8ef2206 · 8ef2206
1 parent 5ffbc8c
commit 8ef2206
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/docs/Footer.module.css b/docs/Footer.module.css
@@ -1,8 +1,5 @@
 .skewed {
+  z-index: -1;
   transform: skewY(-9deg);
   box-shadow: 0 15rem 0 0 theme('backgroundColor.gray.900');
-
-  & > * {
-    transform: skewY(9deg);
-  }
 }
diff --git a/docs/Footer.tsx b/docs/Footer.tsx
@@ -33,12 +33,13 @@ export default function Footer({
   reactUseGestureVersion: string
 }) {
   return (
-    <footer
-      className={cx(
-        'px-10 py-32 grid md:grid-flow-col md:place-items-center place-content-center gap-8 bg-gray-900',
-        styles.skewed
-      )}
-    >
+    <footer className="px-10 py-32 grid md:grid-flow-col md:place-items-center place-content-center gap-8 relative">
+      <div
+        className={cx(
+          styles.skewed,
+          'absolute top-0 right-0 bottom-0 bg-gray-900 w-screen'
+        )}
+      />
       <Badge name="react-spring-bottom-sheet" version={version} />
       <Badge name="react-spring" version={reactSpringVersion} />
       <Badge name="react-use-gesture" version={reactUseGestureVersion} />