Add tiling anteater head background art (#25)

- Make diagonally tiling base asset to use native CSS background repeat - Embed white background to minimize opaque file size (no transparency) - The resulting GIF uses 8 colors with dithering Co-authored-by: Taesung Hwang <Taesung@CM17.local>
HackAtUCI · Sep 14, 2023 · 167d446 · 167d446
1 parent 7babafb
commit 167d446
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
@@ -5,6 +5,7 @@ import FontProvider from "@/lib/FontProvider";
 import NavBar from "@/components/NavBar/NavBar";
 import Footer from "@/components/Footer/Footer";
 import "@/lib/styles/bootstrap.scss";
+import "@/lib/styles/globals.scss";
 
 export const metadata: Metadata = {
 	title: "Create Next App",
@@ -19,7 +20,7 @@ export default function RootLayout({
 	return (
 		<html lang="en">
 			<FontProvider />
-			<body>
+			<body className="background">
 				<NavBar />
 				{children}
 				<Footer />

diff --git a/apps/site/src/assets/background/anteater-head-tiling.gif b/apps/site/src/assets/background/anteater-head-tiling.gif
diff --git a/apps/site/src/lib/styles/globals.scss b/apps/site/src/lib/styles/globals.scss
@@ -0,0 +1,4 @@
+.background {
+	background-image: url("~@/assets/background/anteater-head-tiling.gif");
+	background-size: 464px; // half size for 2x scaling
+}