mirror of
https://codeberg.org/vegvisir/website.git
synced 2025-09-14 08:53:42 +02:00
76 lines
No EOL
1 KiB
CSS
76 lines
No EOL
1 KiB
CSS
vv-shell {
|
|
overflow-x: hidden;
|
|
padding: 0 var(--padding);
|
|
}
|
|
|
|
/* # Components */
|
|
|
|
code-demo {
|
|
width: 100%;
|
|
max-width: 700px;
|
|
}
|
|
|
|
/* # Sections */
|
|
|
|
/* ## Intro */
|
|
|
|
section#intro {
|
|
min-height: min(50svh, 1000px);
|
|
}
|
|
|
|
section#intro .text h1 {
|
|
font-size: 50px;
|
|
line-height: 50px;
|
|
}
|
|
|
|
/* ### Compass */
|
|
|
|
section#intro div.compass {
|
|
align-self: center;
|
|
}
|
|
|
|
section#intro div.compass svg {
|
|
--size: 50svh;
|
|
|
|
width: var(--size);
|
|
height: var(--size);
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
|
|
section#intro div.compass svg.points {
|
|
opacity: .2;
|
|
animation: spin 10s alternate infinite linear;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(30deg); }
|
|
}
|
|
|
|
section#intro div.compass svg:nth-child(2) {
|
|
--size: 60svh;
|
|
|
|
animation-duration: 15s;
|
|
animation-direction: alternate-reverse;
|
|
}
|
|
|
|
/* ## Assets */
|
|
|
|
/* ## Freedom */
|
|
|
|
section#freedom > div > svg {
|
|
height: 300px;
|
|
}
|
|
|
|
/* # Size queries */
|
|
|
|
@media (max-width: 950px) {
|
|
section#intro {
|
|
min-height: min(40svh, 1000px);
|
|
}
|
|
|
|
section#intro div.compass {
|
|
opacity: .3;
|
|
z-index: -1;
|
|
}
|
|
} |