diff --git a/public_html/page/404.php b/public_html/page/404.php index 4daa28d..e8a37fb 100644 --- a/public_html/page/404.php +++ b/public_html/page/404.php @@ -1,15 +1,40 @@ - + + - + - Erreur 404 - Ressource introuvable + + + 404 - Ressource introuvable + + + + + + + + + + + + + - La ressource est introuvable. + + +
+

Vous êtes sur la mauvaise planète

+

+ +

+

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

+
+ diff --git a/webpack/scss/constants.scss b/webpack/scss/constants.scss index adca5a8..9cdc397 100644 --- a/webpack/scss/constants.scss +++ b/webpack/scss/constants.scss @@ -17,3 +17,6 @@ $rd-form-valid-color: '27a560'; $rd-form-neutral-color: '2193e6'; $rd-form-search-color: '5630ed'; $rd-form-invalid-color: 'd52918'; + + +$c404-bubble-width: 40vh; \ No newline at end of file diff --git a/webpack/scss/global.scss b/webpack/scss/global.scss index 49f6f47..d76c193 100644 --- a/webpack/scss/global.scss +++ b/webpack/scss/global.scss @@ -263,4 +263,28 @@ button.neutral.active, button.search.active, .search > button.active{ background-image: url('/src/static/container/active@#{$rd-form-search-color}.svg') !important; +} + + +// Liens +a{ + color: inherit; + text-decoration: none; + + &:after{ + content: ''; + display: block; + + width: 0%; + height: .1em; + + background-color: #ddd; + + transition: width .1s ease-in-out; + + } + + &:hover:after{ + width: 100%; + } } \ No newline at end of file diff --git a/webpack/scss/layout.scss b/webpack/scss/layout.scss index 6f9bdf0..87ade8d 100644 --- a/webpack/scss/layout.scss +++ b/webpack/scss/layout.scss @@ -1,3 +1,5 @@ +@import 'constants'; + * { margin: 0; padding: 0; @@ -19,6 +21,68 @@ body{ color: #333; } + + +#WRAPPER{ + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + background: #eee; + + + &.login{ + background: #ddd; + } +} + + +#cont404{ + display: flex; + position: fixed; + top: calc( 50% - #{$c404-bubble-width / 2} - 2em ); + left: calc( 50% - #{$c404-bubble-width / 2} - 2em ); + width: #{$c404-bubble-width}; + height: $c404-bubble-width; + + padding: 2em; + + 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; + align-items: center; + + p{ + text-align: center; + } + + svg{ + + path{ fill: #888 !important; } + transform: translateY(0em) scale(2); + cursor: pointer; + + transition: transform .2s ease-in-out; + &:hover{ + transform: translateY(-.5em) scale(2); + path{ fill: #222 !important; } + } + } +} + + + /* [4] Popup background - window ==========================================*/ #POPUP{