tristonarmstrong/XeNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mess around with a playground

Browse Source
This commit is contained in:
Triston Armstrong 2024-01-01 00:30:19 -06:00
parent 41d88578a7
commit d882af592b
3 changed files with 51 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
pages/index.tsx
View File

@ -85,6 +85,11 @@ export default function Landing({ jobs, skills, projects }: LandingProps) {
<p>An endless trail of links to my personal notes</p> <p>An endless trail of links to my personal notes</p>
<a href="/notes" target="_blank">Go To Notes {'->'}</a> <a href="/notes" target="_blank">Go To Notes {'->'}</a>
</article> </article>
<article>
<h2 className="text-1xl font-bold uppercase">Experimental Stuff</h2>
<a href="/portfolio2" target="_blank">Portfolio 2 {"->"}</a>
</article>
</section> </section>
</main> </main>
</div> </div>

31
pages/playground/index.tsx Normal file
View File

@ -0,0 +1,31 @@
import Head from "next/head";
export default function Home() {
return (
<div>
<Head>
<body className="bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-gray-600 to-gray-900 " />
</Head>
<div className="parent min-h-screen grid grid-cols-23 grid-rows-22 gap-5 p-10 scale-75">
<div className="[grid-area:1_/_1_/_14_/_6] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent "> </div>
<div className="[grid-area:14_/_1_/_17_/_6] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="[grid-area:1_/_6_/_8_/_12] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="[grid-area:1_/_12_/_8_/_18] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="[grid-area:17_/_1_/_21_/_10] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="[grid-area:21_/_1_/_23_/_10] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="[grid-area:17_/_18_/_23_/_24] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="[grid-area:12_/_18_/_17_/_24] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="[grid-area:7_/_18_/_12_/_24] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="[grid-area:1_/_18_/_7_/_24] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="[grid-area:8_/_6_/_17_/_18] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="[grid-area:17_/_10_/_23_/_18] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
</div>
<div className="p-10 flex gap-4 bg-white">
<div className="bg-sky-50 transition-all duration-500 hover:w-36 hover:bg-sky-500 w-20 h-20 shadow-lg hover:shadow-sky-300 rounded-full" />
<div className="bg-red-50 transition-all duration-500 hover:w-36 hover:bg-red-500 w-20 h-20 shadow-lg hover:shadow-red-300 rounded-full" />
<div className="bg-purple-50 transition-all duration-500 hover:w-36 hover:bg-purple-500 w-20 h-20 shadow-lg hover:shadow-purple-300 rounded-full" />
</div>
</div>
)
}

22
styles/global.css
View File

@ -10,15 +10,23 @@
--white: #ffffffff; --white: #ffffffff;
} }
.parent>* {
border-radius: 16px;
box-shadow: -10px 16px 25px #0004;
}
@layer components { @layer components {
:root { :root {
/* LOGO Theme colors */ /* LOGO Theme colors */
--rich-black: #071425ff; --rich-black: #071425ff;
--air-force-blue: #6f8fa5ff; --air-force-blue: #6f8fa5ff;
--light-blue: #a5c6cdff; --light-blue: #a5c6cdff;
--white: #ffffffff; --white: #ffffffff;
} }
.nav-bar { .nav-bar {
@apply px-5 py-2 bg-slate-500 bg-opacity-20 flex flex-col; @apply px-5 py-2 bg-slate-500 bg-opacity-20 flex flex-col;