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",
+});