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" /> <meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<div <div className="fixed w-2k h-2k z-0 overflow-hidden animate-scroll">
className="fixed z-0 overflow-hidden animate-scroll" <Image src="/images/4x16_9_logo_silhouette_bg.png" layout="fill" />
style={{ width: "3600px" }}
>
<Image
src="/images/logo_silhouette_bg.png"
width="1800px"
height="1080px"
layout="responsive"
/>
</div> </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="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"> <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> */} {/* <p>this is the chat</p> */}
</div> </div>
<div <div
className="rounded-sm ring-4 ring-alice-werefox-red bg-alice-werefox-grey-dark bg-opacity-0 aspect-video overflow-hidden relative" className="rounded-sm ring-4 ring-alice-werefox-red bg-alice-werefox-grey-dark bg-opacity-60 aspect-video overflow-hidden relative"
style={{ height: "176px", width: "264px" }} style={{
height: "148px",
width: "264px",
}}
> >
<div className=" top-0 left-0"> <div className="opacity-100">
<Image <div className=" top-0 left-0">
src="/images/skye_annoyed.png" <Image
width="720" src="/images/skye_annoyed.png"
height="480" width="264px"
className="animate-topslide1" height="148px"
></Image> className="animate-topslide1"
</div> ></Image>
<div className="absolute top-0 left-0"> </div>
<Image <div className="absolute top-0 left-0">
src="/images/skye_coffee.png" <Image
width="720" src="/images/skye_coffee.png"
height="480" width="264px"
className="animate-topslide2" height="148px"
></Image> className="animate-topslide2"
</div> ></Image>
<div className="absolute top-0 left-0"> </div>
<Image <div className="absolute top-0 left-0">
src="/images/skye_heart.png" <Image
width="720" src="/images/skye_heart.png"
height="480" width="264px"
className="animate-topslide3" height="148px"
></Image> className="animate-topslide3"
</div> ></Image>
<div className="absolute top-0 left-0"> </div>
<Image <div className="absolute top-0 left-0">
src="/images/skye_shrug.png" <Image
width="720" src="/images/skye_shrug.png"
height="480" width="264px"
className="animate-topslide4" height="148px"
></Image> className="animate-topslide4"
</div> ></Image>
<div className="absolute top-0 left-0"> </div>
<Image <div className="absolute top-0 left-0">
src="/images/skye_sunglasses.png" <Image
width="720" src="/images/skye_sunglasses.png"
height="480" width="264px"
className="animate-topslide5" height="148px"
></Image> className="animate-topslide5"
</div> ></Image>
<div className="absolute top-0 left-0"> </div>
<Image <div className="absolute top-0 left-0">
src="/images/skye_wink.png" <Image
width="720" src="/images/skye_wink.png"
height="480" width="264px"
className="animate-topslide6" height="148px"
></Image> className="animate-topslide6"
</div> ></Image>
<div className="absolute top-0 left-0"> </div>
<Image <div className="absolute top-0 left-0">
src="/images/skye_witch.jpg" <Image
width="720" src="/images/skye_witch.jpg"
height="480" width="264px"
className="animate-topslide7" height="148px"
></Image> className="animate-topslide7"
</div> ></Image>
<div className="absolute top-0 left-0"> </div>
<Image <div className="absolute top-0 left-0">
src="/images/fucker_in_charge.jpeg" <Image
width="720" src="/images/fucker_in_charge.jpeg"
height="480" width="264px"
className="animate-topslide8" height="148px"
></Image> className="animate-topslide8"
</div> ></Image>
<div className="absolute top-0 left-0"> </div>
<Image <div className="absolute top-0 left-0">
src="/images/ada_werefox_temp.jpeg" <Image
width="720" src="/images/ada_werefox_temp.jpeg"
height="480" width="264px"
className="animate-topslide9" height="148px"
></Image> className="animate-topslide9"
</div> ></Image>
<div className="absolute top-0 left-0"> </div>
<Image <div className="absolute top-0 left-0">
src="/images/ref_sheet_crop.jpg" <Image
width="720" src="/images/ref_sheet_crop.jpg"
height="480" width="264px"
className="animate-topslide10" height="148px"
></Image> className="animate-topslide10"
></Image>
</div>
</div> </div>
</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" }, "100%": { "margin-top": "-10em" },
}, },
scroll: { scroll: {
"0%": { transform: "translate(-45%, -45%)" }, "0%": { transform: "translate(-40%, -40%)" },
"50%": { transform: "translate(-25%, -25%)" }, "50%": { transform: "translate(-20%, -20%)" },
"100%": { transform: "translate(-5%, -5%)" }, "100%": { transform: "translate(0%, 0%)" },
}, },
}, },
animation: { animation: {
@ -173,7 +173,7 @@ module.exports = withAnimations({
topslide8: "topslide8 40s ease-in-out infinite", topslide8: "topslide8 40s ease-in-out infinite",
topslide9: "topslide9 40s ease-in-out infinite", topslide9: "topslide9 40s ease-in-out infinite",
topslide10: "topslide10 40s ease-in-out infinite", topslide10: "topslide10 40s ease-in-out infinite",
scroll: "scroll 20s linear infinite", scroll: "scroll 30s linear infinite",
}, },
width: { width: {
"2k": "3840px", "2k": "3840px",