Edit error page
This commit is contained in:
Paul Nicoué
parent
0418315f4d
commit
4341a3ff9e
7 changed files with 191 additions and 34 deletions
50
app.vue
50
app.vue
|
|
@ -42,29 +42,26 @@
|
|||
font-family: var(--text-font-family);
|
||||
font-size: var(--text-font-size);
|
||||
font-weight: var(--regular-font-weight);
|
||||
line-height: var(--text-line-height);
|
||||
color: white;
|
||||
background-color: var(--eerie-black);
|
||||
line-height: var(--line-height);
|
||||
color: var(--secondary-color);
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--title-font-family);
|
||||
font-size: var(--h1-font-size);
|
||||
font-weight: var(--medium-font-weight);
|
||||
line-height: var(--h1-line-height);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--title-font-family);
|
||||
font-size: var(--h2-font-size);
|
||||
line-height: var(--h2-line-height);
|
||||
margin: 0 0 4rem 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: var(--text-font-family);
|
||||
font-size: var(--h3-font-size);
|
||||
line-height: var(--h3-line-height);
|
||||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
|
||||
|
|
@ -81,24 +78,57 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: underline var(--emerald);
|
||||
color: var(--secondary-color);
|
||||
text-decoration: underline var(--accent-color);
|
||||
border-radius: 2px;
|
||||
transition: color 200ms ease-in-out;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--emerald);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 1px dashed var(--emerald);
|
||||
outline: 1px dashed var(--accent-color);
|
||||
outline-offset: 2px;
|
||||
animation: expand-outline 200ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
// --------------------------------------------------
|
||||
// BUTTON STYLE
|
||||
// --------------------------------------------------
|
||||
|
||||
button {
|
||||
padding: 1rem 1.5rem;
|
||||
color: var(--primary-color);
|
||||
background-image: var(--button-gradient);
|
||||
background-size: 100%;
|
||||
background-position: right center;
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
cursor: pointer;
|
||||
font-family: var(--text-font-family);
|
||||
font-size: var(--text-font-size);
|
||||
font-weight: var(--semi-bold-font-weight);
|
||||
line-height: var(--line-height);
|
||||
text-align: center;
|
||||
transition: background-size 200ms ease-in-out;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-size: 300%;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 1px dashed var(--accent-color);
|
||||
outline-offset: 4px;
|
||||
animation: expand-outline 200ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
// --------------------------------------------------
|
||||
// LAYOUT
|
||||
// --------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -2,6 +2,15 @@
|
|||
ANIMATIONS
|
||||
=========================================================================== */
|
||||
|
||||
@keyframes expand-outline {
|
||||
0% {
|
||||
outline-offset: 0;
|
||||
}
|
||||
100% {
|
||||
outline-offset: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes expand-width {
|
||||
0% {
|
||||
width: 0;
|
||||
|
|
|
|||
|
|
@ -16,22 +16,20 @@
|
|||
--bold-font-weight: 700;
|
||||
--extra-bold-font-weight: 800;
|
||||
--black-font-weight: 900;
|
||||
--text-font-size: 1.2rem;
|
||||
--text-line-height: calc(var(--text-font-size) * 1.2);
|
||||
--caption-font-size: 1.1rem;
|
||||
--caption-line-height: calc(var(--caption-font-size) * 1.2);
|
||||
--footnote-font-size: 1rem;
|
||||
--footnote-line-height: calc(var(--footnote-font-size) * 1.2);
|
||||
--h1-font-size: 2rem;
|
||||
--h1-line-height: calc(var(--h1-font-size) * 1.2);
|
||||
--h2-font-size: 1.8rem;
|
||||
--h2-line-height: calc(var(--h2-font-size) * 1.2);
|
||||
--h3-font-size: 1.6rem;
|
||||
--h3-line-height: calc(var(--h3-font-size) * 1.2);
|
||||
--button-font-size: 1.4rem;
|
||||
--text-font-size: 1.2rem;
|
||||
--caption-font-size: 1.1rem;
|
||||
--footnote-font-size: 1rem;
|
||||
--line-height: 1.2;
|
||||
|
||||
// Dimensions
|
||||
|
||||
--icon-size: 2.5rem;
|
||||
--regular-icon-size: 2.5rem;
|
||||
--small-icon-size: 1.2rem;
|
||||
|
||||
|
||||
// Colors
|
||||
|
||||
|
|
@ -39,16 +37,34 @@
|
|||
--emerald: #72C080;
|
||||
--granny-smith-apple: #A3F3B0;
|
||||
--middle-green: #428F53;
|
||||
|
||||
--primary-color: var(--eerie-black);
|
||||
--primary-color-dark: black;
|
||||
--secondary-color: white;
|
||||
--accent-color: var(--emerald);
|
||||
--accent-color-light: var(--granny-smith-apple);
|
||||
--accent-color-dark: var(--middle-green);
|
||||
--button-gradient: linear-gradient(
|
||||
30deg,
|
||||
hsl(131deg 38% 60%) 1%,
|
||||
hsl(131deg 40% 62%) 34%,
|
||||
hsl(130deg 43% 64%) 46%,
|
||||
hsl(130deg 46% 66%) 54%,
|
||||
hsl(130deg 49% 69%) 60%,
|
||||
hsl(130deg 53% 71%) 66%,
|
||||
hsl(130deg 58% 73%) 71%,
|
||||
hsl(130deg 63% 75%) 76%,
|
||||
hsl(130deg 69% 77%) 83%,
|
||||
hsl(130deg 77% 80%) 100%
|
||||
);
|
||||
|
||||
// Media queries
|
||||
|
||||
--tablet-media-query: 48rem;
|
||||
--desktop-media-query: 62rem;
|
||||
}
|
||||
|
||||
// Media queries
|
||||
|
||||
$tablet-media-query: 48rem;
|
||||
$desktop-media-query: 62rem;
|
||||
|
||||
@media screen and (min-width: $tablet-media-query) {
|
||||
|
||||
:root {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,18 @@
|
|||
<template>
|
||||
|
||||
<main>
|
||||
<button class="app__error" @click="$emit('handleError')">Clear errors</button>
|
||||
<div class="error">
|
||||
<h1 class="error__title">{{ errorMessage }}</h1>
|
||||
<div class="error__separator" aria-hidden="true"></div>
|
||||
<div class="error__emoticon" aria-hidden="true">¯\(°_o)/¯</div>
|
||||
<button class="error__button" @click="$emit('handleError')">
|
||||
<span class="error__button-text">Retourner à la page d'accueil</span>
|
||||
<svg class="error__button-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M 2 8.7 L 12 1 L 22 8.7 L 22 20.8 C 22 22.016 21.006 23 19.778 23 L 4.222 23 C 2.995 23 2 22.016 2 20.8 L 2 8.7 Z"/>
|
||||
<polyline points="8.667 23 8.667 12 15.333 12 15.333 23"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</template>
|
||||
|
|
@ -12,8 +23,99 @@
|
|||
// DATA
|
||||
// --------------------------------------------------
|
||||
|
||||
const props = defineProps({
|
||||
errorMessage: String
|
||||
});
|
||||
const emit = defineEmits([
|
||||
'handleError'
|
||||
]);
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
main {
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 30vw;
|
||||
text-align: center;
|
||||
|
||||
&__title {
|
||||
opacity: 0;
|
||||
margin: 0 2rem;
|
||||
animation: fade-in-from-bottom 400ms ease-in-out 600ms forwards;
|
||||
}
|
||||
|
||||
&__separator {
|
||||
width: 0;
|
||||
height: 1px;
|
||||
margin: 0.5rem 0;
|
||||
background-color: var(--accent-color);
|
||||
animation: expand-width 400ms ease-in-out 200ms forwards;
|
||||
}
|
||||
|
||||
&__emoticon {
|
||||
opacity: 0;
|
||||
margin: 0 2rem;
|
||||
font-size: var(--h1-font-size);
|
||||
font-weight: var(--medium-font-weight);
|
||||
animation: fade-in-from-top 400ms ease-in-out 600ms forwards;
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin: 6rem 0 0 0;
|
||||
|
||||
&-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48rem) {
|
||||
|
||||
&__button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&-text {
|
||||
transform: translateX(calc((0.8rem + var(--small-icon-size)) / 2));
|
||||
transition: transform 200ms ease-in-out;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
display: inherit;
|
||||
flex-shrink: 0;
|
||||
opacity: 0;
|
||||
width: var(--small-icon-size);
|
||||
height: var(--small-icon-size);
|
||||
margin: 0 0 0 0.8rem;
|
||||
transform: translateX(calc((0.8rem + var(--small-icon-size)) / 2));
|
||||
transition:
|
||||
opacity 200ms ease-in-out,
|
||||
transform 200ms ease-in-out;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.error__button-text {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.error__button-icon {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
span {
|
||||
color: var(--emerald);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
|
||||
<div class="app">
|
||||
<AppError class="app__error" @handle-error="handleError" />
|
||||
<AppError class="app__error" :error-message="errorMessage" @handle-error="handleError" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
|
@ -15,13 +15,13 @@
|
|||
const props = defineProps({
|
||||
error: Object
|
||||
});
|
||||
const pageTitleChunk = `Erreur ${props.error.statusCode}`;
|
||||
const errorMessage = `Erreur ${props.error.statusCode}`;
|
||||
|
||||
// --------------------------------------------------
|
||||
// HEAD
|
||||
// --------------------------------------------------
|
||||
|
||||
useAppHead(pageTitleChunk);
|
||||
useAppHead(errorMessage);
|
||||
|
||||
// --------------------------------------------------
|
||||
// LOGIC
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<main>
|
||||
<div class="title">
|
||||
<h1 class="title__name">Paul Nicoué</h1>
|
||||
<div class="title__separator"></div>
|
||||
<div class="title__separator" aria-hidden="true"></div>
|
||||
<h2 class="title__job">Intégrateur web & développeur full stack</h2>
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
width: 0;
|
||||
height: 1px;
|
||||
margin: 0.5rem auto;
|
||||
background-color: var(--emerald);
|
||||
background-color: var(--accent-color);
|
||||
animation: expand-width 400ms ease-in-out 200ms forwards;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue