xcl
/
xcl-website
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add random backgrounds to all pages

This commit is contained in:
Hri7566 2023-09-14 00:32:45 -04:00
parent 16cbcf97f3
commit d48050242f
2 changed files with 38 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/about.tsx
View File

@ -8,7 +8,21 @@ import { LinkButton } from "../components/LinkButton";
import { NavigationBar } from "../components/NavigationBar"; import { NavigationBar } from "../components/NavigationBar";
import { PageContentBox } from "~/components/PageContentBox"; import { PageContentBox } from "~/components/PageContentBox";
export default function Home() { export default function About() {
const bgs = [
"/bg/webp/bg1.webp",
"/bg/webp/bg2.webp",
"/bg/webp/bg3.webp",
"/bg/webp/bg4.webp",
"/bg/webp/bg5.webp",
"/bg/webp/bg6.webp",
"/bg/webp/bg7.webp",
"/bg/webp/bg8.webp",
"/bg/webp/bg9.webp",
];
const randomBg = bgs[Math.floor(Math.random() * bgs.length)] as string;
return ( return (
<> <>
<Head> <Head>
@ -17,7 +31,10 @@ export default function Home() {
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
{/* <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#993800] to-[#250e00]"> */} {/* <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#993800] to-[#250e00]"> */}
<main className="bg-[url(/bg/bg_day.png)] bg-cover bg-center"> <main
className="bg-cover bg-center"
style={{ backgroundImage: `url("${randomBg}")` }}
>
<div className="bg-black/60"> <div className="bg-black/60">
<div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40"> <div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40">
<Link className="absolute left-0 top-0" href="/"> <Link className="absolute left-0 top-0" href="/">

21
src/pages/team.tsx
View File

@ -6,7 +6,21 @@ import { NavigationBar } from "~/components/NavigationBar";
import { PageContentBox } from "~/components/PageContentBox"; import { PageContentBox } from "~/components/PageContentBox";
import { EmployeeList } from "~/components/EmployeeList"; import { EmployeeList } from "~/components/EmployeeList";
export default function Employment() { export default function Team() {
const bgs = [
"/bg/webp/bg1.webp",
"/bg/webp/bg2.webp",
"/bg/webp/bg3.webp",
"/bg/webp/bg4.webp",
"/bg/webp/bg5.webp",
"/bg/webp/bg6.webp",
"/bg/webp/bg7.webp",
"/bg/webp/bg8.webp",
"/bg/webp/bg9.webp",
];
const randomBg = bgs[Math.floor(Math.random() * bgs.length)] as string;
return ( return (
<> <>
<Head> <Head>
@ -15,7 +29,10 @@ export default function Employment() {
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
{/* <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#993800] to-[#250e00]"> */} {/* <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#993800] to-[#250e00]"> */}
<main className="bg-[url(/bg.png)] bg-cover bg-center"> <main
className="bg-cover bg-center"
style={{ backgroundImage: `url("${randomBg}")` }}
>
<div className="bg-black/60"> <div className="bg-black/60">
<div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40"> <div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40">
<Link className="absolute left-0 top-0" href="/"> <Link className="absolute left-0 top-0" href="/">