mirror of
https://codeberg.org/vegvisir/website.git
synced 2025-09-13 16:33:42 +02:00
88 lines
No EOL
1.2 KiB
CSS
88 lines
No EOL
1.2 KiB
CSS
section {
|
|
min-height: 40svh;
|
|
}
|
|
|
|
/* # Components */
|
|
|
|
/* ## Split */
|
|
|
|
section.split {
|
|
display: grid;
|
|
justify-items: center;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
section.split > div {
|
|
grid-row: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
section.split.reverse > div:last-child {
|
|
grid-column: 1;
|
|
}
|
|
|
|
section.split.reverse > div:first-child {
|
|
grid-column: 2;
|
|
}
|
|
|
|
/* ### Text */
|
|
|
|
section.split .text {
|
|
width: 70%;
|
|
display: flex;
|
|
align-items: baseline;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ### Buttons */
|
|
|
|
section.split .buttons {
|
|
display: flex;
|
|
gap: var(--padding);
|
|
margin-top: var(--padding);
|
|
}
|
|
|
|
/* # Sections */
|
|
|
|
/* ## Intro */
|
|
|
|
section#intro {
|
|
min-height: 70svh;
|
|
}
|
|
|
|
/* ### Compass */
|
|
|
|
section#intro div.compass svg {
|
|
--size: 50svh;
|
|
|
|
width: var(--size);
|
|
height: var(--size);
|
|
position: absolute;
|
|
}
|
|
|
|
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: calc(var(--size) - 30px);
|
|
|
|
animation-duration: 15s;
|
|
animation-direction: alternate-reverse;
|
|
}
|
|
|
|
/* ## Assets */
|
|
|
|
/* ## Freedom */
|
|
|
|
section#freedom > div > svg {
|
|
height: 300px;
|
|
} |