host/paulnicoue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit error page

Browse source
This commit is contained in:
Paul Nicoué 2023-01-10 10:28:09 +01:00
parent 0418315f4d
commit 4341a3ff9e
7 changed files with 191 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

50
app.vue
View file

@ -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
// --------------------------------------------------