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

9
assets/styles/_animations.scss
View file

@ -2,6 +2,15 @@
ANIMATIONS
=========================================================================== */
@keyframes expand-outline {
0% {
outline-offset: 0;
}
100% {
outline-offset: 4px;
}
}
@keyframes expand-width {
0% {
width: 0;

50
assets/styles/_variables.scss
View file

@ -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 {
}
}