90 lines
1.1 KiB
SCSS
90 lines
1.1 KiB
SCSS
|
@import "layout";
|
||
|
|
|
||
|
|
header, footer {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
height: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
main {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.messages {
|
||
|
|
margin-bottom: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.error-code {
|
||
|
|
font-size: 36px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.error-message {
|
||
|
|
font-size: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.error-instructions {
|
||
|
|
margin-top: 32px;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav {
|
||
|
|
margin-top: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
content: "Oops";
|
||
|
|
position: absolute;
|
||
|
|
z-index: -1;
|
||
|
|
|
||
|
|
font-size: #{'min(50vh, 40vw)'};
|
||
|
|
opacity: 0.025;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact {
|
||
|
|
text-align: center;
|
||
|
|
padding: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 24px;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
a {
|
||
|
|
position: relative;
|
||
|
|
padding: 16px;
|
||
|
|
|
||
|
|
color: $defaultTextColor;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
color: #fff;
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
opacity: 0.2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
|
||
|
|
background-image: url(../img/logo.svg);
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
background-size: 64px;
|
||
|
|
|
||
|
|
opacity: 0.075;
|
||
|
|
filter: contrast(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|