Edit projects section
This commit is contained in:
Paul Nicoué
parent
6c9c179283
commit
51fe86d804
13 changed files with 380 additions and 208 deletions
|
|
@ -17,9 +17,8 @@
|
|||
--extra-bold-font-weight: 800;
|
||||
--black-font-weight: 900;
|
||||
--h1-font-size: 2rem;
|
||||
--h2-font-size: 2rem;
|
||||
--h3-font-size: 1.2rem;
|
||||
--button-font-size: 1.4rem;
|
||||
--h2-font-size: 1.8rem;
|
||||
--h3-font-size: 1.4rem;
|
||||
--text-font-size: 1.2rem;
|
||||
--caption-font-size: 1.1rem;
|
||||
--footnote-font-size: 1rem;
|
||||
|
|
@ -27,7 +26,6 @@
|
|||
--h1-font-height: calc(var(--h1-font-size) * var(--line-height));
|
||||
--h2-font-height: calc(var(--h2-font-size) * var(--line-height));
|
||||
--h3-font-height: calc(var(--h3-font-size) * var(--line-height));
|
||||
--button-font-height: calc(var(--button-font-size) * var(--line-height));
|
||||
--text-font-height: calc(var(--text-font-size) * var(--line-height));
|
||||
--caption-font-height: calc(var(--caption-font-size) * var(--line-height));
|
||||
--footnote-font-height: calc(var(--footnote-font-size) * var(--line-height));
|
||||
|
|
@ -37,10 +35,11 @@
|
|||
|
||||
--large-content-width: Min(100%, 100rem);
|
||||
--medium-content-width: Min(100%, 80rem);
|
||||
--small-content-width: Min(100%, 40rem);
|
||||
--small-content-width: Min(100%, 60rem);
|
||||
--regular-icon-size: 2rem;
|
||||
--regular-icon-wrapper-size: calc(var(--regular-icon-size) + 1rem);
|
||||
--small-icon-size: calc(var(--text-font-size) * var(--line-height));
|
||||
--small-icon-size: var(--text-font-height);
|
||||
--small-icon-wrapper-size: var(--small-icon-size);
|
||||
--button-with-icon-gap: 0.5rem;
|
||||
|
||||
|
||||
|
|
@ -48,25 +47,22 @@
|
|||
|
||||
--eerie-black: #212121;
|
||||
--gray: #7A7A7A;
|
||||
--white-transparent: hsla(0, 0%, 100%, 0.8);
|
||||
--night: #141414;
|
||||
--white-smoke: #F5F5F5;
|
||||
--emerald: #72C080;
|
||||
--emerald-transparent: hsla(131, 38%, 60%, 0.5);
|
||||
--granny-smith-apple: #A3F3B0;
|
||||
--emerald: #72C080; // hsl(131, 38%, 60%)
|
||||
--granny-smith-apple: #A3F3B0; // hsl(130, 77%, 80%)
|
||||
--middle-green: #428F53;
|
||||
--rajah: #F9B262;
|
||||
--earth-yellow: #F9B262; // hsl(32, 93%, 68%)
|
||||
--fawn: #F9BC76; // hsl(32, 92%, 72%)
|
||||
|
||||
--primary-color: var(--eerie-black);
|
||||
--primary-color-light: var(--gray);
|
||||
--primary-color-dark: black;
|
||||
--secondary-color: white;
|
||||
--secondary-color-transparent: var(--white-transparent);
|
||||
--secondary-color-dark: var(--white-smoke);
|
||||
--accent-color: var(--emerald);
|
||||
--accent-color-transparent: var(--emerald-transparent);
|
||||
--accent-color-light: var(--granny-smith-apple);
|
||||
--accent-color-dark: var(--middle-green);
|
||||
--button-gradient: linear-gradient(
|
||||
--primary-color-dark: var(--night);
|
||||
--secondary-color: var(--white-smoke);
|
||||
--primary-accent-color: var(--emerald);
|
||||
--primary-accent-color-light: var(--granny-smith-apple);
|
||||
--primary-accent-color-dark: var(--middle-green);
|
||||
--primary-accent-gradient: linear-gradient(
|
||||
45deg,
|
||||
hsl(131deg 38% 60%) 1%,
|
||||
hsl(131deg 40% 62%) 34%,
|
||||
|
|
@ -79,17 +75,16 @@
|
|||
hsl(130deg 69% 77%) 83%,
|
||||
hsl(130deg 77% 80%) 100%
|
||||
);
|
||||
--error-color: var(--rajah);
|
||||
|
||||
// Shadows
|
||||
|
||||
--regular-box-shadow:
|
||||
0px 0px 2.8px rgba(0, 0, 0, 0.15),
|
||||
0px 0px 6.7px rgba(0, 0, 0, 0.107),
|
||||
0px 0px 12.5px rgba(0, 0, 0, 0.089),
|
||||
0px 0px 22.3px rgba(0, 0, 0, 0.074),
|
||||
0px 0px 41.8px rgba(0, 0, 0, 0.059),
|
||||
0px 0px 100px rgba(0, 0, 0, 0.041);
|
||||
--secondary-accent-color: var(--earth-yellow);
|
||||
--secondary-accent-light: var(--fawn);
|
||||
--secondary-accent-gradient: linear-gradient(
|
||||
5deg,
|
||||
hsl(32deg 93% 68%) 7%,
|
||||
hsl(32deg 92% 69%) 65%,
|
||||
hsl(32deg 92% 70%) 77%,
|
||||
hsl(32deg 92% 71%) 83%,
|
||||
hsl(32deg 92% 72%) 100%
|
||||
);
|
||||
}
|
||||
|
||||
// Media queries
|
||||
|
|
@ -119,14 +114,12 @@ h1 {
|
|||
h2 {
|
||||
font-family: var(--title-font-family);
|
||||
font-size: var(--h2-font-size);
|
||||
|
||||
font-weight: var(--medium-font-weight);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: var(--title-font-family);
|
||||
font-size: var(--h3-font-size);
|
||||
font-weight: var(--semi-bold-font-weight);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -134,7 +127,7 @@ p {
|
|||
}
|
||||
|
||||
strong {
|
||||
font-weight: var(--bold-font-weight);
|
||||
font-weight: var(--medium-font-weight);
|
||||
}
|
||||
|
||||
em {
|
||||
|
|
@ -147,18 +140,18 @@ em {
|
|||
|
||||
a {
|
||||
color: var(--secondary-color);
|
||||
text-decoration: underline var(--accent-color);
|
||||
text-decoration: underline var(--primary-accent-color);
|
||||
border-radius: 2px;
|
||||
transition: color 200ms ease-in-out;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--accent-color);
|
||||
color: var(--primary-accent-color);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 1px dashed var(--accent-color-light);
|
||||
outline: 1px dashed var(--primary-accent-color-light);
|
||||
outline-offset: 2px;
|
||||
animation: expand-outline-2px 200ms ease-in-out;
|
||||
}
|
||||
|
|
@ -179,7 +172,7 @@ ul {
|
|||
button {
|
||||
padding: 1rem 1.5rem;
|
||||
color: var(--primary-color);
|
||||
background-image: var(--button-gradient);
|
||||
background-image: var(--primary-accent-gradient);
|
||||
background-size: 100%;
|
||||
background-position: right center;
|
||||
border: none;
|
||||
|
|
@ -199,7 +192,7 @@ button {
|
|||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 1px dashed var(--accent-color-light);
|
||||
outline: 1px dashed var(--primary-accent-color-light);
|
||||
outline-offset: 4px;
|
||||
animation: expand-outline-4px 200ms ease-in-out;
|
||||
}
|
||||
|
|
@ -211,14 +204,12 @@ button {
|
|||
align-items: center;
|
||||
gap: var(--button-with-icon-gap);
|
||||
|
||||
&__text,
|
||||
&-text {
|
||||
span {
|
||||
transform: translateX(calc((var(--button-with-icon-gap) + var(--small-icon-size)) / 2));
|
||||
transition: transform 200ms ease-in-out;
|
||||
}
|
||||
|
||||
&__icon,
|
||||
&-icon {
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
opacity: 0;
|
||||
width: var(--small-icon-size);
|
||||
|
|
@ -229,21 +220,15 @@ button {
|
|||
transform 200ms ease-in-out;
|
||||
}
|
||||
|
||||
&:hover &__text,
|
||||
&:hover &-text,
|
||||
&:focus &__text,
|
||||
&:focus &-text,
|
||||
&:active &__text,
|
||||
&:active &-text {
|
||||
&:hover span,
|
||||
&:focus span,
|
||||
&:active span {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
&:hover &__icon,
|
||||
&:hover &-icon,
|
||||
&:focus &__icon,
|
||||
&:focus &-icon,
|
||||
&:active &__icon,
|
||||
&:active &-icon {
|
||||
&:hover svg,
|
||||
&:focus svg,
|
||||
&:active svg {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
|
@ -285,7 +270,7 @@ form {
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
border: 1px solid var(--accent-color);
|
||||
border: 1px solid var(--primary-accent-color);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -297,7 +282,7 @@ form {
|
|||
|
||||
p {
|
||||
font-size: var(--caption-font-size);
|
||||
color: var(--accent-color);
|
||||
color: var(--primary-accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -311,7 +296,7 @@ section {
|
|||
padding: 4rem 2rem;
|
||||
|
||||
@media screen and (min-width: $tablet-media-query) {
|
||||
padding: 4rem;
|
||||
padding: 6rem 4rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $desktop-media-query) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue