ada/werefox-obs-layouts
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

a couple more additions and tweaks.

Browse source
This commit is contained in:
Alexis Werefox 2022-01-22 06:06:49 +00:00
parent f3aca715c5
commit 6631c15941
5 changed files with 92 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

179
src/werefox-obs-layouts/pages/index.js
View file

@ -10,16 +10,8 @@ export default function Home() {
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div
className="fixed z-0 overflow-hidden animate-scroll"
style={{ width: "3600px" }}
>
<Image
src="/images/logo_silhouette_bg.png"
width="1800px"
height="1080px"
layout="responsive"
/>
<div className="fixed w-2k h-2k z-0 overflow-hidden animate-scroll">
<Image src="/images/4x16_9_logo_silhouette_bg.png" layout="fill" />
</div>
<div className="p-4 flex flex-row space-x-6 text-center text-xl text-alice-werefox-red-light w-1080p h-1080p z-10">
<div className="flex flex-col flex-grow space-y-6 z-10">
@ -31,88 +23,93 @@ export default function Home() {
{/* <p>this is the chat</p> */}
</div>
<div
className="rounded-sm ring-4 ring-alice-werefox-red bg-alice-werefox-grey-dark bg-opacity-0 aspect-video overflow-hidden relative"
style={{ height: "176px", width: "264px" }}
className="rounded-sm ring-4 ring-alice-werefox-red bg-alice-werefox-grey-dark bg-opacity-60 aspect-video overflow-hidden relative"
style={{
height: "148px",
width: "264px",
}}
>
<div className=" top-0 left-0">
<Image
src="/images/skye_annoyed.png"
width="720"
height="480"
className="animate-topslide1"
></Image>
</div>
<div className="absolute top-0 left-0">
<Image
src="/images/skye_coffee.png"
width="720"
height="480"
className="animate-topslide2"
></Image>
</div>
<div className="absolute top-0 left-0">
<Image
src="/images/skye_heart.png"
width="720"
height="480"
className="animate-topslide3"
></Image>
</div>
<div className="absolute top-0 left-0">
<Image
src="/images/skye_shrug.png"
width="720"
height="480"
className="animate-topslide4"
></Image>
</div>
<div className="absolute top-0 left-0">
<Image
src="/images/skye_sunglasses.png"
width="720"
height="480"
className="animate-topslide5"
></Image>
</div>
<div className="absolute top-0 left-0">
<Image
src="/images/skye_wink.png"
width="720"
height="480"
className="animate-topslide6"
></Image>
</div>
<div className="absolute top-0 left-0">
<Image
src="/images/skye_witch.jpg"
width="720"
height="480"
className="animate-topslide7"
></Image>
</div>
<div className="absolute top-0 left-0">
<Image
src="/images/fucker_in_charge.jpeg"
width="720"
height="480"
className="animate-topslide8"
></Image>
</div>
<div className="absolute top-0 left-0">
<Image
src="/images/ada_werefox_temp.jpeg"
width="720"
height="480"
className="animate-topslide9"
></Image>
</div>
<div className="absolute top-0 left-0">
<Image
src="/images/ref_sheet_crop.jpg"
width="720"
height="480"
className="animate-topslide10"
></Image>
<div className="opacity-100">
<div className=" top-0 left-0">
<Image
src="/images/skye_annoyed.png"
width="264px"
height="148px"
className="animate-topslide1"
></Image>
</div>
<div className="absolute top-0 left-0">
<Image
src="/images/skye_coffee.png"
width="264px"
height="148px"
className="animate-topslide2"
></Image>
</div>
<div className="absolute top-0 left-0">
<Image
src="/images/skye_heart.png"
width="264px"
height="148px"
className="animate-topslide3"
></Image>
</div>
<div className="absolute top-0 left-0">
<Image
src="/images/skye_shrug.png"
width="264px"
height="148px"
className="animate-topslide4"
></Image>
</div>
<div className="absolute top-0 left-0">
<Image
src="/images/skye_sunglasses.png"
width="264px"
height="148px"
className="animate-topslide5"
></Image>
</div>
<div className="absolute top-0 left-0">
<Image
src="/images/skye_wink.png"
width="264px"
height="148px"
className="animate-topslide6"
></Image>
</div>
<div className="absolute top-0 left-0">
<Image
src="/images/skye_witch.jpg"
width="264px"
height="148px"
className="animate-topslide7"
></Image>
</div>
<div className="absolute top-0 left-0">
<Image
src="/images/fucker_in_charge.jpeg"
width="264px"
height="148px"
className="animate-topslide8"
></Image>
</div>
<div className="absolute top-0 left-0">
<Image
src="/images/ada_werefox_temp.jpeg"
width="264px"
height="148px"
className="animate-topslide9"
></Image>
</div>
<div className="absolute top-0 left-0">
<Image
src="/images/ref_sheet_crop.jpg"
width="264px"
height="148px"
className="animate-topslide10"
></Image>
</div>
</div>
</div>
</div>

BIN
src/werefox-obs-layouts/public/images/4x16_9_logo_silhouette_bg.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
src/werefox-obs-layouts/public/images/4x_logo_silhouette_bg.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 154 KiB

BIN
src/werefox-obs-layouts/public/images/logo_silhouette_bg.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 80 KiB

8
src/werefox-obs-layouts/tailwind.config.js
View file

@ -154,9 +154,9 @@ module.exports = withAnimations({
"100%": { "margin-top": "-10em" },
},
scroll: {
"0%": { transform: "translate(-45%, -45%)" },
"50%": { transform: "translate(-25%, -25%)" },
"100%": { transform: "translate(-5%, -5%)" },
"0%": { transform: "translate(-40%, -40%)" },
"50%": { transform: "translate(-20%, -20%)" },
"100%": { transform: "translate(0%, 0%)" },
},
},
animation: {
@ -173,7 +173,7 @@ module.exports = withAnimations({
topslide8: "topslide8 40s ease-in-out infinite",
topslide9: "topslide9 40s ease-in-out infinite",
topslide10: "topslide10 40s ease-in-out infinite",
scroll: "scroll 20s linear infinite",
scroll: "scroll 30s linear infinite",
},
width: {
"2k": "3840px",