45 lines
643 B
CSS
45 lines
643 B
CSS
body {
|
|
height: 300vh;
|
|
}
|
|
|
|
:root {
|
|
--width: 100%;
|
|
--bg: #efefef;
|
|
}
|
|
|
|
.scroll-direction {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.scroll-direction:after {
|
|
content: attr(data-direction);
|
|
}
|
|
|
|
header {
|
|
position: fixed;
|
|
width: var(--width);
|
|
margin: 0;
|
|
background: var(--bg);
|
|
padding: 1rem;
|
|
height: 100vh;
|
|
}
|
|
|
|
.logo {
|
|
position: absolute;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
height: 30rem;
|
|
top: 50%;
|
|
left: 50%;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
main, article {
|
|
height: 100%;
|
|
}
|
|
|
|
.wrapper {
|
|
margin: 0 auto;
|
|
max-width: var(--width);
|
|
} |