kopia lustrzana https://github.com/cheeaun/phanpy
140 wiersze
2.6 KiB
CSS
140 wiersze
2.6 KiB
CSS
#welcome {
|
|
text-align: center;
|
|
background-image: radial-gradient(
|
|
circle at center,
|
|
var(--bg-color),
|
|
transparent 16em
|
|
),
|
|
radial-gradient(circle at center, var(--bg-color), transparent 8em);
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
padding: 16px;
|
|
cursor: default;
|
|
}
|
|
#welcome ~ * {
|
|
display: none;
|
|
}
|
|
|
|
#welcome .hero-container {
|
|
padding-block: 60px;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#welcome h1 {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 5em;
|
|
line-height: 1;
|
|
letter-spacing: -1px;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
mix-blend-mode: multiply;
|
|
}
|
|
@keyframes shine2 {
|
|
0% {
|
|
left: -100%;
|
|
}
|
|
20% {
|
|
left: 100%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
}
|
|
}
|
|
#welcome h1:before {
|
|
content: '';
|
|
position: absolute;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: linear-gradient(
|
|
100deg,
|
|
rgba(255, 255, 255, 0) 30%,
|
|
rgba(255, 255, 255, 0.4),
|
|
rgba(255, 255, 255, 0) 70%
|
|
);
|
|
top: 0;
|
|
left: -100%;
|
|
pointer-events: none;
|
|
animation: shine2 5s ease-in-out 1s infinite;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
#welcome {
|
|
background-image: none;
|
|
}
|
|
#welcome h1 {
|
|
mix-blend-mode: normal;
|
|
}
|
|
#welcome h1:before {
|
|
content: none;
|
|
}
|
|
}
|
|
#welcome img {
|
|
vertical-align: top;
|
|
transition: transform 0.3s ease-out;
|
|
}
|
|
#welcome h1 img {
|
|
filter: drop-shadow(-1px -1px var(--bg-blur-color))
|
|
drop-shadow(0 -1px 1px #fff)
|
|
drop-shadow(0 16px 32px var(--drop-shadow-color));
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
#welcome h1 img {
|
|
filter: none;
|
|
}
|
|
}
|
|
|
|
#welcome h1:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
#welcome .desc {
|
|
font-size: 1.4em;
|
|
text-wrap: balance;
|
|
opacity: 0.7;
|
|
}
|
|
#welcome .hero-container > p {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#why-container .sections {
|
|
padding-inline: 16px;
|
|
}
|
|
#why-container .sections section {
|
|
text-align: start;
|
|
max-width: 480px;
|
|
background-color: var(--bg-color);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 17px 20px 40px var(--drop-shadow-color);
|
|
margin-bottom: 48px;
|
|
}
|
|
#why-container .sections section h4 {
|
|
margin: 0;
|
|
padding: 30px 30px 0;
|
|
font-size: 1.4em;
|
|
font-weight: 600;
|
|
}
|
|
#why-container .sections section p {
|
|
margin-inline: 30px;
|
|
margin-bottom: 30px;
|
|
opacity: 0.7;
|
|
text-wrap: balance;
|
|
}
|
|
#why-container .sections section img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-bottom: 1px solid var(--outline-color);
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
#why-container .sections section img {
|
|
filter: invert(0.85) hue-rotate(180deg);
|
|
}
|
|
}
|