mirror of
https://codeberg.org/vegvisir/website.git
synced 2025-09-14 00:43:42 +02:00
74 lines
No EOL
1 KiB
CSS
74 lines
No EOL
1 KiB
CSS
:root {
|
|
--wavelength: 20vw;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-deep);
|
|
}
|
|
|
|
header.transparent {
|
|
color: white;
|
|
background-color: transparent;
|
|
border-color: rgba(255, 255, 255, .1);
|
|
}
|
|
|
|
header.transparent .logo {
|
|
fill: var(--color-deep);
|
|
background-color: white;
|
|
}
|
|
|
|
header.transparent button.solid {
|
|
color: var(--color-deep);
|
|
background-color: white;
|
|
}
|
|
|
|
/* # Sections */
|
|
|
|
/* ## Intro */
|
|
|
|
section#intro {
|
|
color: white;
|
|
height: 400px;
|
|
}
|
|
|
|
section#intro div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: baseline;
|
|
}
|
|
|
|
section#intro h1 {
|
|
font-size: 50px;
|
|
}
|
|
|
|
section#intro h2 {
|
|
background-color: black;
|
|
}
|
|
|
|
/* ### Waves */
|
|
|
|
section#intro .waves {
|
|
position: relative;
|
|
z-index: -1;
|
|
}
|
|
|
|
section#intro .waves img {
|
|
width: calc(100% + var(--wavelength));
|
|
object-fit: cover;
|
|
animation: waves 9s linear infinite;
|
|
}
|
|
|
|
@keyframes waves {
|
|
to {
|
|
transform: translateX(calc((var(--wavelength) * 2) * -1));
|
|
}
|
|
}
|
|
|
|
/* ## Example */
|
|
|
|
section#example {
|
|
margin-top: calc(var(--wavelength) / 2);
|
|
background-color: white;
|
|
height: 700px;
|
|
} |