mirror of
https://codeberg.org/vegvisir/website.git
synced 2025-09-13 16:33:42 +02:00
vlw
7a8fc36ec0
Brand new design for the website following the new design language I used for [version 2.0 of my personal website](https://codeberg.org/vlw/vlw.se/releases/tag/2.0.0). Reviewed-on: https://codeberg.org/vegvisir/website/pulls/2 Co-authored-by: vlw <victor@vlw.se> Co-committed-by: vlw <victor@vlw.se>
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;
|
|
}
|
|
} |