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

update styles

Browse Source
This commit is contained in:
Triston Armstrong 2024-01-01 01:13:10 -06:00
parent d882af592b
commit 78be0209ae
3 changed files with 13 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/index.tsx
View File

@ -17,7 +17,7 @@ export default function Landing({ jobs, skills, projects }: LandingProps) {
return ( return (
<div> <div>
<Head> <Head>
<body className="bg-gradient-to-b from-slate-900 to-slate-950 container max-w-full mx-auto text-gray-300 py-24 px-4 w-full sm:px-20 md:px-16" /> <body className="bg-gradient-to-b from-richBlack from-30% to-black to-90% container max-w-full mx-auto text-gray-300 py-24 px-4 w-full sm:px-20 md:px-16" />
</Head> </Head>
<main className="flex flex-col-reverse gap-8 md:grid md:grid-cols-8"> <main className="flex flex-col-reverse gap-8 md:grid md:grid-cols-8">

24
pages/playground/index.tsx
View File

@ -7,18 +7,18 @@ export default function Home() {
<body className="bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-gray-600 to-gray-900 " /> <body className="bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-gray-600 to-gray-900 " />
</Head> </Head>
<div className="parent min-h-screen grid grid-cols-23 grid-rows-22 gap-5 p-10 scale-75"> <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="shadow-xl rounded-lg [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="shadow-xl rounded-lg [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="shadow-xl rounded-lg [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="shadow-xl rounded-lg [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="shadow-xl rounded-lg [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="shadow-xl rounded-lg [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="shadow-xl rounded-lg [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="shadow-xl rounded-lg [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="shadow-xl rounded-lg [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="shadow-xl rounded-lg [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="shadow-xl rounded-lg [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 className="shadow-xl rounded-lg [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>
<div className="p-10 flex gap-4 bg-white"> <div className="p-10 flex gap-4 bg-white">

13
styles/global.css
View File

@ -11,23 +11,10 @@
} }
.parent>* {
border-radius: 16px;
box-shadow: -10px 16px 25px #0004;
}
@layer components { @layer components {
:root {
/* LOGO Theme colors */
--rich-black: #071425ff;
--air-force-blue: #6f8fa5ff;
--light-blue: #a5c6cdff;
--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;
} }