diff --git a/public_html/asset/svg/filter.svg b/public_html/asset/svg/filter.svg index 8baf61d..9c8a681 100644 --- a/public_html/asset/svg/filter.svg +++ b/public_html/asset/svg/filter.svg @@ -5,5 +5,11 @@ + + + + + + \ No newline at end of file diff --git a/public_html/asset/svg/planet.svg b/public_html/asset/svg/planet.svg new file mode 100644 index 0000000..48209c9 --- /dev/null +++ b/public_html/asset/svg/planet.svg @@ -0,0 +1,100 @@ + +image/svg+xml \ No newline at end of file diff --git a/public_html/page/404.php b/public_html/page/404.php index e8a37fb..14024fb 100644 --- a/public_html/page/404.php +++ b/public_html/page/404.php @@ -24,13 +24,17 @@ - +
+ +

Vous êtes sur la mauvaise planète

- +
+ +

Prenez la fusée pour retourner à l'accueil en un clic

diff --git a/webpack/scss/layout.scss b/webpack/scss/layout.scss index 1f71366..b33660d 100644 --- a/webpack/scss/layout.scss +++ b/webpack/scss/layout.scss @@ -164,45 +164,89 @@ body{ } +body.body404{ + + filter: url('/asset/svg/filter.svg#goo-rocket'); + background-color: #333; +} + #cont404{ display: flex; position: fixed; - top: calc( 50% - #{$c404-bubble-width / 2} - 2em ); - left: calc( 50% - #{$c404-bubble-width / 2} - 2em ); + top: calc( 50% - #{$c404-bubble-width / 2} - 4em ); + left: calc( 50% - #{$c404-bubble-width / 2} - 4em ); width: #{$c404-bubble-width}; height: $c404-bubble-width; - padding: 2em; + padding: 4em; - background-color: #fff; - border: 1px solid #ddd; - box-shadow: 0 0 5px #ddd; - - border-radius: 50% / 50%; - - font-size: 3vh; - color: #444; flex-direction: column; - justify-content: space-around; + justify-content: space-between; align-items: center; p{ text-align: center; + z-index: 100; } - svg{ - path{ fill: #888 !important; } - transform: translateY(0em) scale(2); - cursor: pointer; + border-radius: 50%; + background: #fff; + + font-size: 3vh; + color: #444; + + + @keyframes rocket-round{ + // 0%{ transform: rotate(360deg) translateY(0) rotate(0deg); } + // 10%{ transform: rotate(360deg) translateY(#{-$c404-bubble-width * .5}) translateY(+1vh) rotate(0deg); } + // 20%{ transform: rotate(350deg) translateY(#{-$c404-bubble-width}) rotate(-45deg); } + // 25%{ transform: rotate(350deg) translateY(#{-$c404-bubble-width*1.1}) rotate(-120deg); } + 0%{ transform: rotate(360deg) translateY(#{-$c404-bubble-width}) rotate(-90deg); } + // 35%{ transform: rotate(320deg) translateY(#{-$c404-bubble-width}) rotate(-90deg); } + 100%{ transform: rotate(0deg) translateY(#{-$c404-bubble-width*1.05}) rotate(-120deg); } + } + + #rocket{ + display: flex; + width: 20vh; + height: 20vh; + + border-radius: 50%; + + justify-content: center; + align-items: center; + background: inherit; + + animation: rocket-round 30s linear infinite; + + z-index: 99; + + a:after{ + content: none; + + } + + & svg{ + transform: scale(2); + cursor: pointer; + + path{ + fill: #333 !important; + transition: fill .2s ease-in-out; + } + + + } - transition: transform .2s ease-in-out; &:hover{ - transform: translateY(-.5em) scale(2); - path{ fill: #222 !important; } + & svg{ + path{ fill: rgb(238, 89, 20) !important; } + } } } + }