src/assets/less/page_not_found.less
@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; }}