Add form section
This commit is contained in:
Paul Nicoué
parent
c6705914e0
commit
2a4cf52465
33 changed files with 1031 additions and 311 deletions
|
|
@ -20,6 +20,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes expand-height {
|
||||
0% {
|
||||
height: 0;
|
||||
}
|
||||
100% {
|
||||
height: calc(100% - var(--regular-icon-size));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-from-bottom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -59,3 +59,102 @@
|
|||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Karla
|
||||
|
||||
@font-face {
|
||||
font-family: 'Karla';
|
||||
src: url(~/assets/fonts/karla/Karla-ExtraLight.ttf) format('truetype');
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Karla';
|
||||
src: url(~/assets/fonts/karla/Karla-ExtraLightItalic.ttf) format('truetype');
|
||||
font-weight: 200;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Karla';
|
||||
src: url(~/assets/fonts/karla/Karla-Light.ttf) format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Karla';
|
||||
src: url(~/assets/fonts/karla/Karla-LightItalic.ttf) format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Karla';
|
||||
src: url(~/assets/fonts/karla/Karla-Regular.ttf) format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Karla';
|
||||
src: url(~/assets/fonts/karla/Karla-Italic.ttf) format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Karla';
|
||||
src: url(~/assets/fonts/karla/Karla-Medium.ttf) format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Karla';
|
||||
src: url(~/assets/fonts/karla/Karla-MediumItalic.ttf) format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Karla';
|
||||
src: url(~/assets/fonts/karla/Karla-SemiBold.ttf) format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Karla';
|
||||
src: url(~/assets/fonts/karla/Karla-SemiBoldItalic.ttf) format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Karla';
|
||||
src: url(~/assets/fonts/karla/Karla-Bold.ttf) format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Karla';
|
||||
src: url(~/assets/fonts/karla/Karla-BoldItalic.ttf) format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Karla';
|
||||
src: url(~/assets/fonts/karla/Karla-ExtraBold.ttf) format('truetype');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Karla';
|
||||
src: url(~/assets/fonts/karla/Karla-ExtraBoldItalic.ttf) format('truetype');
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,69 +0,0 @@
|
|||
// --------------------------------------------------
|
||||
// VARIABLES
|
||||
// --------------------------------------------------
|
||||
|
||||
:root {
|
||||
|
||||
// Fonts
|
||||
|
||||
--text-font-family: 'Cairo', sans-serif;
|
||||
--title-font-family: 'Cairo', sans-serif;
|
||||
--extra-light-font-weight: 200;
|
||||
--light-font-weight: 300;
|
||||
--regular-font-weight: 400;
|
||||
--medium-font-weight: 500;
|
||||
--semi-bold-font-weight: 600;
|
||||
--bold-font-weight: 700;
|
||||
--extra-bold-font-weight: 800;
|
||||
--black-font-weight: 900;
|
||||
--h1-font-size: 2rem;
|
||||
--h2-font-size: 1.8rem;
|
||||
--h3-font-size: 1.6rem;
|
||||
--button-font-size: 1.4rem;
|
||||
--text-font-size: 1.2rem;
|
||||
--caption-font-size: 1.1rem;
|
||||
--footnote-font-size: 1rem;
|
||||
--line-height: 1.2;
|
||||
|
||||
// Dimensions
|
||||
|
||||
--regular-icon-size: 2.5rem;
|
||||
--small-icon-size: 1.2rem;
|
||||
|
||||
|
||||
// Colors
|
||||
|
||||
--eerie-black: #212121;
|
||||
--jet: #333333;
|
||||
--silver: #C2C2C2;
|
||||
--emerald: #72C080;
|
||||
--granny-smith-apple: #A3F3B0;
|
||||
--middle-green: #428F53;
|
||||
|
||||
--primary-color: var(--eerie-black);
|
||||
--primary-color-light: var(--jet);
|
||||
--primary-color-dark: black;
|
||||
--secondary-color: white;
|
||||
--secondary-color-dark: var(--silver);
|
||||
--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;
|
||||
251
assets/styles/main.scss
Normal file
251
assets/styles/main.scss
Normal file
|
|
@ -0,0 +1,251 @@
|
|||
// --------------------------------------------------
|
||||
// VARIABLES
|
||||
// --------------------------------------------------
|
||||
|
||||
:root {
|
||||
|
||||
// Fonts
|
||||
|
||||
--text-font-family: 'Karla', sans-serif;
|
||||
--title-font-family: 'Cairo', sans-serif;
|
||||
--extra-light-font-weight: 200;
|
||||
--light-font-weight: 300;
|
||||
--regular-font-weight: 400;
|
||||
--medium-font-weight: 500;
|
||||
--semi-bold-font-weight: 600;
|
||||
--bold-font-weight: 700;
|
||||
--extra-bold-font-weight: 800;
|
||||
--black-font-weight: 900;
|
||||
--h1-font-size: 2rem;
|
||||
--h2-font-size: 2rem;
|
||||
--h3-font-size: 1.8rem;
|
||||
--button-font-size: 1.4rem;
|
||||
--text-font-size: 1.2rem;
|
||||
--caption-font-size: 1.1rem;
|
||||
--footnote-font-size: 1rem;
|
||||
--line-height: 1.2;
|
||||
|
||||
// Dimensions
|
||||
|
||||
--content-width: Min(100%, 120rem);
|
||||
--text-width: Min(100%, 60rem);
|
||||
--regular-icon-size: 2rem;
|
||||
--small-icon-size: calc(var(--text-font-size) * var(--line-height));
|
||||
--button-gap: 0.5rem;
|
||||
|
||||
|
||||
// Colors
|
||||
|
||||
--eerie-black: #212121;
|
||||
--sonic-silver: #7a7a7a;
|
||||
--silver: #C2C2C2;
|
||||
--emerald: #72C080;
|
||||
--granny-smith-apple: #A3F3B0;
|
||||
--middle-green: #428F53;
|
||||
|
||||
--primary-color: var(--eerie-black);
|
||||
--primary-color-light: var(--sonic-silver);
|
||||
--primary-color-dark: black;
|
||||
--secondary-color: white;
|
||||
--secondary-color-dark: var(--silver);
|
||||
--accent-color: var(--emerald);
|
||||
--accent-color-light: var(--granny-smith-apple);
|
||||
--accent-color-dark: var(--middle-green);
|
||||
--button-gradient: linear-gradient(
|
||||
45deg,
|
||||
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;
|
||||
|
||||
// --------------------------------------------------
|
||||
// FONTS AND COLORS
|
||||
// --------------------------------------------------
|
||||
|
||||
body {
|
||||
font-family: var(--text-font-family);
|
||||
font-size: var(--text-font-size);
|
||||
font-weight: var(--regular-font-weight);
|
||||
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);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--title-font-family);
|
||||
font-size: var(--h2-font-size);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: var(--text-font-family);
|
||||
font-size: var(--h3-font-size);
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: var(--light-font-weight);
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: var(--bold-font-weight);
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// --------------------------------------------------
|
||||
// LINK STYLE
|
||||
// --------------------------------------------------
|
||||
|
||||
a {
|
||||
color: var(--secondary-color);
|
||||
text-decoration: underline var(--accent-color);
|
||||
border-radius: 2px;
|
||||
transition: color 200ms ease-in-out;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
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: 40px;
|
||||
cursor: pointer;
|
||||
font-family: var(--title-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;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-with-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&-text {
|
||||
transform: translateX(calc((var(--button-gap) + 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 var(--button-gap);
|
||||
transform: translateX(calc((var(--button-gap) + var(--small-icon-size)) / 2));
|
||||
transition:
|
||||
opacity 200ms ease-in-out,
|
||||
transform 200ms ease-in-out;
|
||||
}
|
||||
|
||||
&:hover &-text,
|
||||
&:focus &-text,
|
||||
&:active &-text {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
&:hover &-icon,
|
||||
&:focus &-icon,
|
||||
&:active &-icon {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
// --------------------------------------------------
|
||||
// FORM STYLE
|
||||
// --------------------------------------------------
|
||||
|
||||
div:has(label) { // Not yet supported in Firefox
|
||||
position: relative;
|
||||
}
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
top: calc(-1 * (var(--text-font-size) / 2));
|
||||
left: 1rem;
|
||||
display: inline-block;
|
||||
padding: 0 0.5rem;
|
||||
font-family: var(--title-font-family);
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
font-family: var(--text-font-family);
|
||||
font-size: var(--text-font-size);
|
||||
font-weight: var(--light-font-weight);
|
||||
line-height: var(--line-height);
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
color: var(--secondary-color);
|
||||
background-color: var(--primary-color);
|
||||
border: 1px solid var( --primary-color-light);
|
||||
border-radius: 10px;
|
||||
transition: border 200ms ease-in-out;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
border: 1px solid var(--accent-color);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 15rem;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue