diff --git a/app/components/about.css.ts b/app/components/about.css.ts new file mode 100644 index 0000000..30a6df7 --- /dev/null +++ b/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", +}); diff --git a/app/components/footer.css.ts b/app/components/footer.css.ts index e69de29..f652d2e 100644 --- a/app/components/footer.css.ts +++ b/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", + }, +}); diff --git a/app/components/footer.tsx b/app/components/footer.tsx index e5bfdfe..978f384 100644 --- a/app/components/footer.tsx +++ b/app/components/footer.tsx @@ -1 +1,29 @@ -export const PS2LiveLogo = () =>
; +import { Link } from "@remix-run/react"; +import * as styles from "./footer.css"; + +export const Footer = ({ isMainPage }: { isMainPage?: boolean }) => ( + +); diff --git a/app/reset.css b/app/reset.css new file mode 100644 index 0000000..8bc8914 --- /dev/null +++ b/app/reset.css @@ -0,0 +1,47 @@ +*,*::before,*::after { + box-sizing: border-box +} + +body,h1,h2,h3,h4,p,figure,blockquote,dl,dd { + margin: 0 +} + +ul[role="list"],ol[role="list"] { + list-style: none +} + +html:focus-within { + scroll-behavior: smooth +} + +body { + min-height: 100vh; + text-rendering: optimizeSpeed; + line-height: 1.5 +} + +a:not([class]) { + text-decoration-skip-ink: auto +} + +img,picture { + max-width: 100%; + display: block +} + +input,button,textarea,select { + font: inherit +} + +@media(prefers-reduced-motion:reduce) { + html:focus-within { + scroll-behavior: auto + } + + *,*::before,*::after { + animation-duration: .01ms !important; + animation-iteration-count: 1 !important; + transition-duration: .01ms !important; + scroll-behavior: auto !important + } +} diff --git a/app/root.tsx b/app/root.tsx index 70fd3a7..6c6be67 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -9,12 +9,16 @@ import { ScrollRestoration, } from "@remix-run/react"; import * as styles from "./root.css"; +import "./reset.css"; export const links: LinksFunction = () => [ + { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: true }, + { rel: "preconnect", href: "ttps://fonts.googleapis.com", crossorigin: true }, { rel: "stylesheet", - href: "https://unpkg.com/modern-css-reset@1.4.0/dist/reset.min.css", + href: "https://fonts.googleapis.com/css2?family=Unbounded:wght@700&display=swap", }, + ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), ]; diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index e48b4ab..24db3ce 100644 --- a/app/routes/_index.tsx +++ b/app/routes/_index.tsx @@ -1,5 +1,6 @@ import { json, type V2_MetaFunction } from "@remix-run/cloudflare"; import { useLoaderData } from "@remix-run/react"; +import { Footer } from "~/components/footer"; import { WorldContainer } from "~/components/index-world-container"; import { outer } from "~/components/index.css"; import { fetchMetagameWorlds } from "~/utils/metagame"; @@ -31,6 +32,7 @@ export default function Index() {
+