update home look and feel
This commit is contained in:
parent
c6ed04bf8c
commit
32ad79ff43
2 changed files with 361 additions and 28 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue