center footer on landing page

linobino1 · Sep 10, 2024 · 7726ebb · 7726ebb
1 parent d5ff060
commit 7726ebb
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/app/components/Layout/index.module.css b/app/components/Layout/index.module.css
@@ -13,14 +13,19 @@
 
 .container footer {
   position: relative;
-  text-align: left;
   z-index: 1;
   padding: 1rem;
   padding-top: 4rem;
   color: #aaa;
   display: flex;
+  width: 100%;
   gap: 1rem;
 }
+@media (max-width: 768px) {
+  .container[data-layout-center="true"] footer {
+    justify-content: center;
+  }
+}
 
 .container footer a:visited,
 .container footer a:active,

diff --git a/app/components/Layout/index.tsx b/app/components/Layout/index.tsx
@@ -1,23 +1,34 @@
-import { NavLink } from "@remix-run/react";
+import { NavLink, useLocation } from "@remix-run/react";
 import classes from "./index.module.css";
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   type?: "black" | "white";
   noFooter?: boolean;
 }
 
-export const Layout: React.FC<Props> = ({ type, children, ...props }) => {
+export const Layout: React.FC<Props> = ({
+  type = "black",
+  children,
+  ...props
+}) => {
+  const { pathname } = useLocation();
   return (
-    <div className={classes.container} data-layout-type={type ?? "black"}>
+    <div
+      className={classes.container}
+      data-layout-type={type ?? "black"}
+      data-layout-center={pathname === "/"}
+    >
       <main {...props}>{children}</main>
       {!props.noFooter && (
         <footer>
           <NavLink prefetch="intent" to="/legal">
             legal notice
           </NavLink>
-          <NavLink prefetch="intent" to="/past-shows">
-            past shows
-          </NavLink>
+          {pathname === "/" && (
+            <NavLink prefetch="intent" to="/past-shows">
+              past shows
+            </NavLink>
+          )}
         </footer>
       )}
     </div>