JustalK/PORTFOLIO

View on GitHub
src/assets/less/page_not_found.less

Summary

Maintainability
Test Coverage
@import (reference) "libs/constants.less";
@import (reference) "libs/mixins.less";
 
#PAGE_NOT_FOUND {
position: relative;
width: 100%;
height: 100%;
 
&::before,
&::after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
transform: translateY(-100%);
}
 
&::before {
.transition(all 0.6s cubic-bezier(0.87, 0.32, 0.81, 0.36));
 
opacity: 0.7;
background: @background-color-transition-d;
}
 
&::after {
.transition(all 1s cubic-bezier(0.87, 0.32, 0.81, 0.36));
 
background: @background-color-transition-l;
}
 
&.unmounted {
&::before,
&::after {
transform: translateY(0);
}
}
 
& div {
position: absolute;
transform: translate(-50%, -50%);
top: 40%;
left: 50%;
text-align: center;
user-select: none;
 
& h1 {
font-size: 10rem;
margin: 0;
color: @text-color;
}
 
& span {
display: block;
margin-bottom: 40px;
font-size: 3rem;
border-right: 0.5rem solid @text-color;
animation: blink-caret 0.75s step-end infinite;
}
 
& a {
display: block;
position: relative;
font-size: 2rem;
padding: 10px;
width: 150px;
height: 30px;
line-height: 30px;
margin: auto;
color: @text-color;
 
&:hover {
color: @text-color-white;
}
 
& svg,
& svg rect {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
fill: transparent;
}
 
& svg rect {
stroke: @text-color-white;
stroke-width: 4;
transition: 0.5s;
stroke-dasharray: 100, 300;
stroke-dashoffset: 145;
 
&:hover {
stroke: @background-bloc-0;
stroke-dasharray: 500, 500;
stroke-dashoffset: 0;
}
}
}
}
}
 
@keyframes blink-caret {
from,
to { border-color: transparent; }
50% { border-color: @text-color; }
}