TheClashFruit
6fdc97b98b
All checks were successful
Deploy Website / build (push) Successful in 1m28s
90 lines
1.3 KiB
SCSS
90 lines
1.3 KiB
SCSS
@import 'variables.module';
|
|
|
|
.headLine {
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
margin: 1rem;
|
|
|
|
min-height: 100vh;
|
|
|
|
text-align: center;
|
|
|
|
overflow: hidden;
|
|
|
|
h3 {
|
|
font-size: 2rem;
|
|
|
|
max-width: 50rem;
|
|
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 5rem;
|
|
|
|
max-width: 50rem;
|
|
|
|
background: linear-gradient(180deg, #e5e7eb, #f9fafb), #e5e7eb;
|
|
background-clip: text;
|
|
|
|
[data-theme='dark'] & {
|
|
background: linear-gradient(180deg, #f9fafb, #e5e7eb), #f9fafb;
|
|
background-clip: text;
|
|
}
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
@media (max-width: 768px) {
|
|
font-size: 3.5rem;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size: 1.25rem;
|
|
line-height: 1.75rem;
|
|
|
|
max-width: 50rem;
|
|
|
|
margin-bottom: 8rem;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
|
|
display: flex;
|
|
|
|
gap: 1rem;
|
|
}
|
|
|
|
.gradient {
|
|
position: absolute;
|
|
|
|
top: 50%;
|
|
left: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
z-index: -1;
|
|
|
|
width: 1000px;
|
|
height: 1000px;
|
|
|
|
max-width: 100%;
|
|
|
|
background: radial-gradient(50% 50% at 50% 50%, #ddd6fe 0%, #f8fafc 100%);
|
|
|
|
[data-theme='dark'] & {
|
|
background: radial-gradient(50% 50% at 50% 50%, #2e1065 0%, #0f172a 100%);
|
|
}
|
|
|
|
filter: blur(128px);
|
|
|
|
mix-blend-mode: normal;
|
|
|
|
will-change: filter;
|
|
}
|
|
} |