diff --git a/home/site/app.css b/home/site/app.css index 1b14377..00ca74c 100644 --- a/home/site/app.css +++ b/home/site/app.css @@ -534,10 +534,23 @@ video { --tw-backdrop-sepia: ; } +.mx-auto { + margin-left: auto; + margin-right: auto; +} + .mt-4 { margin-top: 1rem; } +.mr-2 { + margin-right: 0.5rem; +} + +.inline-block { + display: inline-block; +} + .flex { display: flex; } @@ -546,6 +559,26 @@ video { height: 100vh; } +.h-6 { + height: 1.5rem; +} + +.h-2 { + height: 0.5rem; +} + +.h-10 { + height: 2.5rem; +} + +.h-12 { + height: 3rem; +} + +.max-h-screen { + max-height: 100vh; +} + .w-96 { width: 24rem; } @@ -562,14 +595,46 @@ video { width: 16rem; } +.w-6 { + width: 1.5rem; +} + +.w-\[800px\] { + width: 800px; +} + +.w-full { + width: 100%; +} + +.w-screen { + width: 100vw; +} + +.max-w-7xl { + max-width: 80rem; +} + +.max-w-6xl { + max-width: 72rem; +} + .list-none { list-style-type: none; } +.flex-row { + flex-direction: row; +} + .flex-col { flex-direction: column; } +.flex-wrap { + flex-wrap: wrap; +} + .items-center { align-items: center; } @@ -590,6 +655,10 @@ video { margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } +.overflow-hidden { + overflow: hidden; +} + .rounded-xl { border-radius: 0.75rem; } @@ -616,6 +685,22 @@ video { background-color: rgb(39 39 42 / 0.8); } +.bg-zinc-800\/90 { + background-color: rgb(39 39 42 / 0.9); +} + +.bg-zinc-950\/90 { + background-color: rgb(9 9 11 / 0.9); +} + +.bg-zinc-950\/80 { + background-color: rgb(9 9 11 / 0.8); +} + +.bg-zinc-950\/70 { + background-color: rgb(9 9 11 / 0.7); +} + .bg-\[url\(\'bg\.webp\'\)\] { background-image: url('bg.webp'); } @@ -628,10 +713,54 @@ video { background-image: url('bg-transformed.webp'); } +.bg-gradient-to-r { + background-image: linear-gradient(to right, var(--tw-gradient-stops)); +} + +.from-red-600 { + --tw-gradient-from: #dc2626 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-pink-600 { + --tw-gradient-from: #db2777 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(219 39 119 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.via-pink-500 { + --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), #ec4899 var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.via-blue-500 { + --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), #3b82f6 var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.via-indigo-500 { + --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), #6366f1 var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.to-yellow-400 { + --tw-gradient-to: #facc15 var(--tw-gradient-to-position); +} + +.to-cyan-400 { + --tw-gradient-to: #22d3ee var(--tw-gradient-to-position); +} + .bg-cover { background-size: cover; } +.bg-clip-text { + -webkit-background-clip: text; + background-clip: text; +} + .bg-no-repeat { background-repeat: no-repeat; } @@ -644,6 +773,10 @@ video { padding: 4rem; } +.p-8 { + padding: 2rem; +} + .px-4 { padding-left: 1rem; padding-right: 1rem; @@ -669,6 +802,10 @@ video { padding-right: 16rem; } +.text-center { + text-align: center; +} + .text-4xl { font-size: 2.25rem; line-height: 2.5rem; @@ -679,10 +816,64 @@ video { line-height: 2rem; } +.text-8xl { + font-size: 6rem; + line-height: 1; +} + +.text-6xl { + font-size: 3.75rem; + line-height: 1; +} + .font-bold { font-weight: 700; } +.font-black { + font-weight: 900; +} + +.text-transparent { + color: transparent; +} + +.shadow-2xl { + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-pink-600 { + --tw-shadow-color: #db2777; + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-cyan-600 { + --tw-shadow-color: #0891b2; + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-cyan-200 { + --tw-shadow-color: #a5f3fc; + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-cyan-300 { + --tw-shadow-color: #67e8f9; + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-pink-300 { + --tw-shadow-color: #f9a8d4; + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-pink-800 { + --tw-shadow-color: #9d174d; + --tw-shadow: var(--tw-shadow-colored); +} + .ring-4 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); @@ -699,6 +890,40 @@ video { --tw-ring-color: rgb(39 39 42 / 0.1); } +.ring-pink-500\/10 { + --tw-ring-color: rgb(236 72 153 / 0.1); +} + +.ring-pink-500\/20 { + --tw-ring-color: rgb(236 72 153 / 0.2); +} + +.ring-cyan-500\/20 { + --tw-ring-color: rgb(6 182 212 / 0.2); +} + +.drop-shadow-\[0_1\.2px_1\.2px_rgba\(0\2c 0\2c 0\2c 0\.8\)\] { + --tw-drop-shadow: drop-shadow(0 1.2px 1.2px rgba(0,0,0,0.8)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.drop-shadow-\[0_2\.4px_2\.4px_rgba\(0\2c 0\2c 0\2c 0\.8\)\] { + --tw-drop-shadow: drop-shadow(0 2.4px 2.4px rgba(0,0,0,0.8)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.backdrop-blur-lg { + --tw-backdrop-blur: blur(16px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.backdrop-blur { + --tw-backdrop-blur: blur(8px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + html { scroll-behavior: smooth; --tw-bg-opacity: 1; @@ -785,3 +1010,19 @@ body::-webkit-scrollbar-thumb:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } + +@media (min-width: 768px) { + .md\:max-w-6xl { + max-width: 72rem; + } + + .md\:px-64 { + padding-left: 16rem; + padding-right: 16rem; + } + + .md\:py-8 { + padding-top: 2rem; + padding-bottom: 2rem; + } +} diff --git a/home/site/index.html b/home/site/index.html index 47a7783..081bb97 100644 --- a/home/site/index.html +++ b/home/site/index.html @@ -9,56 +9,148 @@ -
-

Welcome to the Lab

+ class="bg-zinc-900 h-screen flex flex-col items-center justify-center bg-[url('bg-transformed.webp')] bg-no-repeat bg-cover w-screen h-screen overflow-hidden"> +
+

+ Welcome to the Lab +

-