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

Add contact form validation

Browse source
This commit is contained in:
Paul Nicoué 2023-01-27 16:12:44 +01:00
parent 2a4cf52465
commit d3465c6ea3
12 changed files with 429 additions and 204 deletions
Download patch file Download diff file Expand all files Collapse all files

80
assets/styles/main.scss
View file

@ -27,8 +27,8 @@
// Dimensions
--content-width: Min(100%, 120rem);
--text-width: Min(100%, 60rem);
--regular-content-max-width: Min(100%, 80rem);
--small-content-max-width: Min(100%, 60rem);
--regular-icon-size: 2rem;
--small-icon-size: calc(var(--text-font-size) * var(--line-height));
--button-gap: 0.5rem;
@ -42,6 +42,7 @@
--emerald: #72C080;
--granny-smith-apple: #A3F3B0;
--middle-green: #428F53;
--rajah: #F9B262;
--primary-color: var(--eerie-black);
--primary-color-light: var(--sonic-silver);
@ -64,12 +65,13 @@
hsl(130deg 69% 77%) 83%,
hsl(130deg 77% 80%) 100%
);
--error-color: var(--rajah);
}
// Media queries
$tablet-media-query: 48rem;
$desktop-media-query: 62rem;
$tablet-media-query: 48rem; // 768px
$desktop-media-query: 62rem; // 992px
// --------------------------------------------------
// FONTS AND COLORS
@ -209,42 +211,52 @@ button {
// FORM STYLE
// --------------------------------------------------
div:has(label) { // Not yet supported in Firefox
position: relative;
}
form {
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);
}
div {
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;
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;
&:hover,
&:focus,
&:active {
border: 1px solid var(--accent-color);
outline: none;
}
}
p {
font-size: var(--caption-font-size);
color: var(--accent-color);
}
}
}
textarea {
resize: vertical;
min-height: 15rem;