update base, add /about, footer
This commit is contained in:
parent
434f29b967
commit
251931c838
11 changed files with 1721 additions and 1437 deletions
78
app/components/about.css.ts
Normal file
78
app/components/about.css.ts
Normal file
|
|
@ -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",
|
||||
});
|
||||
|
|
@ -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",
|
||||
},
|
||||
});
|
||||
|
|
@ -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>© {new Date().getFullYear()}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
|
|
|||
47
app/reset.css
Normal file
47
app/reset.css
Normal file
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -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 }] : []),
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -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() {
|
|||
<div className={outer}>
|
||||
<WorldContainer metagame={data.metagame} population={data.population} />
|
||||
</div>
|
||||
<Footer isMainPage />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
109
app/routes/about.tsx
Normal file
109
app/routes/about.tsx
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
import { Footer } from "~/components/footer";
|
||||
import {
|
||||
header,
|
||||
item,
|
||||
itemContainer,
|
||||
itemGithubLink,
|
||||
itemLink,
|
||||
link,
|
||||
love,
|
||||
outer,
|
||||
} from "~/components/about.css";
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<div>
|
||||
<div className={outer}>
|
||||
<div>
|
||||
<p className={header}>
|
||||
<b>PS2.LIVE</b> is a network of services that report on the ongoing
|
||||
war on Auraxis.
|
||||
</p>
|
||||
<p style={{ fontStyle: "italic" }}>
|
||||
hat tips:{" "}
|
||||
<a className={link} href="https://ps2.fisu.pw/">
|
||||
fisu
|
||||
</a>
|
||||
,{" "}
|
||||
<a className={link} href="https://wt.honu.pw/">
|
||||
honu & varunda
|
||||
</a>
|
||||
,{" "}
|
||||
<a className={link} href="https://voidwell.com/">
|
||||
Voidwell & Lampjaw
|
||||
</a>
|
||||
,{" "}
|
||||
<a className={link} href="https://census.lithafalcon.cc">
|
||||
Sanctuary & Falcon
|
||||
</a>
|
||||
,{" "}
|
||||
<a className={link} href="https://ps2alerts.co">
|
||||
PS2Alerts team
|
||||
</a>
|
||||
,{" "}
|
||||
<a className={link} href="https://discord.gg/yVzGEg3RKV">
|
||||
PS2devs Discord
|
||||
</a>
|
||||
, Daybreak Census Team 💖
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<ul className={itemContainer}>
|
||||
{[
|
||||
{
|
||||
name: "Saerro",
|
||||
url: "https://saerro.ps2.live",
|
||||
github: "https://github.com/genudine/saerro",
|
||||
description:
|
||||
"Population GraphQL API focussing on deep granularity.",
|
||||
},
|
||||
{
|
||||
name: "Metagame API",
|
||||
url: "https://metagame.ps2.live",
|
||||
github: "https://github.com/genudine/metagame",
|
||||
description: "World states, contininent locks, alerts, etc.",
|
||||
},
|
||||
{
|
||||
name: "Population API",
|
||||
url: "https://agg.ps2.live/population",
|
||||
github: "https://github.com/genudine/agg-population",
|
||||
description: "Population as seen by many services, averaged.",
|
||||
},
|
||||
{
|
||||
name: "Census Playground",
|
||||
url: "https://try.ps2.live",
|
||||
github: "https://github.com/genudine/try.ps2.live",
|
||||
description: "Explore and share the Census API.",
|
||||
},
|
||||
{
|
||||
name: "ps2.live",
|
||||
url: "https://ps2.live",
|
||||
github: "https://github.com/genudine/ps2.live",
|
||||
description: "This website. It's pretty cool.",
|
||||
},
|
||||
{
|
||||
name: "Medkit",
|
||||
url: "https://github.com/genudine/medkit2",
|
||||
github: "https://github.com/genudine/medkit2",
|
||||
description:
|
||||
"PS2 Discord bot for population/continents in channel names.",
|
||||
},
|
||||
].map(({ name, url, github, description }, i) => (
|
||||
<li className={item} key={i}>
|
||||
<a href={url} className={itemLink}>
|
||||
{name}
|
||||
</a>
|
||||
<div>{description} </div>
|
||||
<a href={github} className={itemGithubLink}>
|
||||
github
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<p className={love}>Built with 💖 by Pomf =3</p>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
2772
package-lock.json
generated
2772
package-lock.json
generated
File diff suppressed because it is too large
Load diff
34
package.json
34
package.json
|
|
@ -5,34 +5,34 @@
|
|||
"scripts": {
|
||||
"build": "remix build",
|
||||
"dev:remix": "remix watch",
|
||||
"dev:wrangler": "cross-env NODE_ENV=development npm run wrangler",
|
||||
"dev": "npm-run-all build --parallel \"dev:*\"",
|
||||
"start": "cross-env NODE_ENV=production npm run wrangler",
|
||||
"dev:wrangler": "npm run wrangler",
|
||||
"dev": "cross-env NODE_ENV=development npm-run-all build --parallel \"dev:*\"",
|
||||
"start": "cross-env NODE_ENV=production npm run wrangler --live-reload",
|
||||
"typecheck": "tsc",
|
||||
"wrangler": "wrangler pages dev ./public",
|
||||
"pages:deploy": "npm run build && wrangler pages publish ./public"
|
||||
},
|
||||
"dependencies": {
|
||||
"@remix-run/cloudflare": "^1.16.0",
|
||||
"@remix-run/cloudflare-pages": "^1.16.0",
|
||||
"@remix-run/css-bundle": "^1.16.0",
|
||||
"@remix-run/react": "^1.16.0",
|
||||
"@remix-run/cloudflare": "^1.17.0",
|
||||
"@remix-run/cloudflare-pages": "^1.17.0",
|
||||
"@remix-run/css-bundle": "^1.17.0",
|
||||
"@remix-run/react": "^1.17.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"isbot": "^3.6.8",
|
||||
"isbot": "^3.6.10",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@cloudflare/workers-types": "^3.19.0",
|
||||
"@remix-run/dev": "^1.16.0",
|
||||
"@remix-run/eslint-config": "^1.16.0",
|
||||
"@types/react": "^18.0.35",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@vanilla-extract/css": "^1.11.0",
|
||||
"eslint": "^8.38.0",
|
||||
"@cloudflare/workers-types": "3.x",
|
||||
"@remix-run/dev": "^1.17.0",
|
||||
"@remix-run/eslint-config": "^1.17.0",
|
||||
"@types/react": "^18.2.10",
|
||||
"@types/react-dom": "^18.2.4",
|
||||
"@vanilla-extract/css": "^1.11.1",
|
||||
"eslint": "^8.42.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"typescript": "^5.0.4",
|
||||
"wrangler": "^2.15.1"
|
||||
"typescript": "^5.1.3",
|
||||
"wrangler": "^3.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.13"
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ module.exports = {
|
|||
// publicPath: "/build/",
|
||||
future: {
|
||||
v2_errorBoundary: true,
|
||||
v2_headers: true,
|
||||
v2_meta: true,
|
||||
v2_normalizeFormMethod: true,
|
||||
v2_routeConvention: true,
|
||||
|
|
|
|||
|
|
@ -1,2 +1 @@
|
|||
compatibility_date = "2022-04-05"
|
||||
compatibility_flags = ["streams_enable_constructors"]
|
||||
compatibility_date = "2023-06-10"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue