world/sass/screen.scss

73 lines
1.3 KiB
SCSS

.screen {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
}
.bg {
z-index: 0;
background: black url(/sunset.gif) no-repeat;
background-size: cover;
background-position-y: bottom;
background-position-x: center;
filter: brightness(0.75);
box-shadow: inset 0 0 512px 128px black;
transition: 250ms ease;
@media (max-width:667px) {
filter: brightness(0.5);
box-shadow: inset 0 0 128px 32px black;
background-position-x: 14.5%;
}
}
.content {
z-index: 1;
color: #c1c4c1;
padding: 40px;
text-align: center;
width: 80%;
left: 50%;
transform: translateX(-50%);
overflow-y: auto;
.md-content {
text-align: left;
}
}
@keyframes fader-fade {
0% {
opacity: 1;
background: black;
}
to {
opacity: 0;
pointer-events: none;
}
}
.fader {
background: black;
z-index: 3;
animation: fader-fade 3s;
animation-delay: 2s;
animation-fill-mode: forwards;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
p {
animation: fader-fade 1s;
animation-delay: 1.5s;
animation-fill-mode: forwards;
}
}