update base, add /about, footer

app/components/about.css.ts

@@ -0,0 +1,78 @@
+import { style } from "@vanilla-extract/css";
+
+export const header = style({
+  fontSize: "2rem",
+  padding: "1rem",
+});
+
+export const outer = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  minHeight: "calc(100vh - 300px)",
+  textAlign: "center",
+  flexDirection: "column",
+});
+
+export const link = style({
+  color: "#9e9e9e",
+  textDecoration: "none",
+  transition: "color 0.2s ease-in-out",
+  ":hover": {
+    color: "#d53875",
+  },
+});
+
+export const itemContainer = style({
+  display: "flex",
+  flexWrap: "wrap",
+  justifyContent: "center",
+  alignItems: "center",
+  flexDirection: "column",
+});
+
+export const item = style({
+  listStyle: "none",
+  display: "flex",
+  padding: "1.5rem 1rem",
+  fontSize: "1.5rem",
+  backgroundColor: "#222",
+  margin: "1rem",
+  borderRadius: "0.4rem",
+  justifyContent: "space-between",
+});
+
+export const itemLink = style({
+  display: "block",
+  marginRight: "0.75rem",
+  paddingRight: "0.75rem",
+  borderRight: "1px solid #666",
+  color: "#d53875",
+  textDecoration: "none",
+  transition: "color 0.2s ease-in-out",
+
+  ":hover": {
+    color: "#efefef",
+  },
+});
+
+export const itemGithubLink = style({
+  display: "flex",
+  alignItems: "center",
+  marginLeft: "0.75rem",
+  paddingLeft: "0.75rem",
+  borderLeft: "1px solid #666",
+  color: "#ddd",
+  textDecoration: "none",
+  transition: "color 0.2s ease-in-out",
+  fontSize: "1rem",
+
+  ":hover": {
+    color: "#efefef",
+  },
+});
+
+export const love = style({
+  fontSize: "0.9rem",
+  color: "#aaa",
+});

app/components/footer.css.ts

@@ -0,0 +1,76 @@
+import { style } from "@vanilla-extract/css";
+import footer from "~/images/footer.jpg";
+
+export const root = style({
+  height: 300,
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexDirection: "column",
+  lineHeight: 1,
+});
+export const background = style({
+  backgroundImage: `url(${footer})`,
+  backgroundSize: "cover",
+  backgroundPosition: "bottom",
+  maskImage: "linear-gradient(to bottom, transparent 25%, black)",
+  WebkitMaskImage: "linear-gradient(to bottom, transparent 25%, black)",
+  position: "absolute",
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+});
+
+export const logo = style({
+  fontSize: "3rem",
+  fontWeight: "bold",
+  fontFamily: "Unbounded, monospace",
+  zIndex: 1,
+  textShadow: "0 0 2em black",
+});
+export const logoX = style({
+  color: "#c8a714",
+  position: "relative",
+  top: "0.8rem",
+  left: "0.075rem",
+});
+export const logoLive = style({
+  color: "#d8d8d8",
+});
+export const logoDot = style({
+  display: "inline-block",
+  width: "0.75em",
+  height: "0.75em",
+  borderRadius: "50%",
+  backgroundColor: "#d8d8d8",
+  position: "relative",
+  left: "0.05rem",
+  top: "0.075em",
+  boxShadow: "0 0 2em black",
+  backgroundImage: `conic-gradient(
+    #d30101 0deg 45deg,
+    #991cba 75deg 165deg,
+    #1564cc 195deg 285deg,
+    #d30101 315deg 360deg
+  )`,
+});
+export const lowerLogo = style({
+  textAlign: "right",
+  display: "flex",
+  justifyContent: "space-between",
+  fontSize: "0.8rem",
+  fontWeight: "bold",
+  fontFamily: "Helvetica, Arial, sans-serif",
+  padding: "0 0.2rem",
+  color: "#aaa",
+});
+export const link = style({
+  color: "#aaa",
+  textDecoration: "none",
+  transition: "color 0.2s ease-in-out",
+  ":hover": {
+    color: "gold",
+  },
+});

app/components/footer.tsx

@@ -1 +1,29 @@
-export const PS2LiveLogo = () => <div></div>;
+import { Link } from "@remix-run/react";
+import * as styles from "./footer.css";
+
+export const Footer = ({ isMainPage }: { isMainPage?: boolean }) => (
+  <footer>
+    <div className={styles.root}>
+      <div className={styles.background}></div>
+      <div className={styles.logo}>
+        PS2
+        <div className={styles.logoDot}></div>
+        <span className={styles.logoLive}>LIVE</span>
+        <div className={styles.lowerLogo}>
+          <div>
+            {isMainPage ? (
+              <Link className={styles.link} to="/about">
+                more stuff »
+              </Link>
+            ) : (
+              <Link className={styles.link} to="/">
+                less stuff »
+              </Link>
+            )}
+          </div>
+          <div>&copy; {new Date().getFullYear()}</div>
+        </div>
+      </div>
+    </div>
+  </footer>
+);