Skip to content

Commit cbef9ad

Browse files
markgohomarkgoho
committed
Refactor form components: standardize class names in contact forms, enhance SCSS styles for improved layout and responsiveness, and update JSON configuration with new form-related classes. Adjust button styles and introduce new color variables for better theming.
1 parent 0373136 commit cbef9ad

14 files changed

Lines changed: 359 additions & 321 deletions

File tree

‎hugo/assets/scss/about-cooperative.scss‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
1+
:root {
2+
--board-member-card-width: 18.75rem;
3+
}
4+
15
.board-members {
26
margin-block-start: var(--space-xl);
37
display: grid;
4-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
8+
grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
59
gap: var(--space-l);
610
}
711

812
.board-member-card {
9-
border-radius: 10px;
13+
border-radius: var(--border-radius-md);
1014
text-align: center;
1115
}
1216

1317
.board-member-card__image {
14-
margin-bottom: 1rem;
18+
margin-bottom: var(--space-s);
1519

1620
img {
1721
aspect-ratio: 1 / 1;
1822
object-fit: cover;
19-
width: 300px;
23+
width: var(--board-member-card-width);
2024
height: auto;
2125
border: 5px solid var(--teal-500);
2226
border-radius: var(--border-radius-md);

‎hugo/assets/scss/button.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,7 @@
2222

2323
&:hover,
2424
&:focus {
25-
background: var(--color-text-main);
26-
color: var(--brown-300);
25+
background: var(--teal-600);
2726
}
2827

2928
&-small {

‎hugo/assets/scss/colors.scss‎

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,34 @@
1111
--teal-300: hsl(192, 49%, 53%);
1212
--teal-400: hsl(192, 51%, 33%);
1313
--teal-500: hsl(192, 58%, 25%);
14+
--teal-600: hsl(192, 60%, 15%);
1415

15-
--light-bg: linear-gradient(180deg, var(--brown-100) 0%, var(--brown-200) 100%);
16-
--dark-bg: linear-gradient(180deg, var(--brown-600) 0%, var(--brown-700) 100%);
17-
}
16+
--light-bg: linear-gradient(
17+
180deg,
18+
var(--brown-100) 0%,
19+
var(--brown-200) 100%
20+
);
21+
--dark-bg: linear-gradient(
22+
180deg,
23+
var(--brown-600) 0%,
24+
var(--brown-700) 100%
25+
);
26+
}
27+
28+
@supports (color: oklch(0.9 0.01 76)) {
29+
:root {
30+
--brown-000: oklch(0.9631 0.0189 76.55);
31+
--brown-100: oklch(0.9581 0.0262 74.76);
32+
--brown-200: oklch(0.9258 0.0368 76.4);
33+
--brown-300: oklch(0.9062 0.0613 74.32);
34+
--brown-400: oklch(0.8005 0.0833 73.63);
35+
--brown-500: oklch(0.3188 0.0583 69.76);
36+
--brown-600: oklch(0.2499 0.0255 71.84);
37+
--brown-700: oklch(0.3035 0.0441 217.33);
38+
39+
--teal-300: oklch(0.692 0.0943 216.79);
40+
--teal-400: oklch(0.5022 0.0728 217.3);
41+
--teal-500: oklch(0.422 0.064 217.78);
42+
--teal-500: oklch(0.422 0.064 217.78);
43+
}
44+
}

‎hugo/assets/scss/components/forms.scss‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
.form {
2+
display: grid;
3+
gap: var(--space-m);
4+
max-width: 60ch;
5+
margin-inline: auto;
6+
}
7+
8+
.form__group {
9+
display: grid;
10+
gap: var(--space-2xs);
11+
}
12+
13+
.form__group--checkbox,
14+
.form__group--radio {
15+
display: flex;
16+
align-items: center;
17+
gap: var(--space-2xs);
18+
}
19+
20+
.form__label {
21+
font-size: var(--step-2);
22+
}
23+
24+
fieldset {
25+
border: 3px solid var(--brown-400);
26+
border-radius: var(--border-radius-md);
27+
}
28+
29+
.form__input {
30+
background-color: var(--brown-000);
31+
border: 1px solid var(--brown-500);
32+
border-radius: var(--border-radius-md);
33+
padding: var(--space-s);
34+
font-size: var(--step-2);
35+
}
36+
37+
.form__input[type="checkbox"],
38+
.form__input[type="radio"] {
39+
width: var(--space-l);
40+
height: var(--space-l);
41+
accent-color: var(--brown-400); // Modern browsers, for color
42+
margin-inline-end: var(--space-2xs);
43+
background-color: var(--brown-000);
44+
}
45+
46+
.form__date-fields {
47+
display: flex;
48+
gap: var(--space-s);
49+
50+
/* Override grid display for date field children */
51+
> .form__group {
52+
display: flex;
53+
flex-direction: column;
54+
gap: var(--space-2xs); /* Match the gap from parent .form__group */
55+
max-width: 10ch; /* Reasonable max width for date inputs */
56+
}
57+
}
58+
59+
.form__input--textarea {
60+
resize: vertical;
61+
}
62+
63+
.form__error-message {
64+
color: var(--color-error, #d93025);
65+
display: none;
66+
}
67+
68+
.was-validated .form__input:invalid {
69+
border-color: var(--color-error, #d93025);
70+
}
71+
72+
.was-validated .form__input:invalid + .form__error-message {
73+
display: block;
74+
}
75+
76+
.form__confirmation {
77+
text-align: center;
78+
padding: var(--space-xl);
79+
}

‎hugo/assets/scss/contact-us.scss‎

Lines changed: 1 addition & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,5 @@
11
@use "components/callout";
2+
@use "components/forms";
23

3-
.contact-us-page__form {
4-
display: grid;
5-
gap: var(--space-m);
6-
max-width: 60ch;
7-
margin-inline: auto;
8-
}
94

10-
.contact-us-page__form-group {
11-
display: grid;
12-
gap: var(--space-2xs);
13-
}
145

15-
.contact-us-page__label {
16-
font-family: var(--font-family-main);
17-
font-weight: var(--font-weight-light);
18-
font-size: var(--step-2);
19-
line-height: var(--line-height-tight);
20-
color: var(--color-text-main);
21-
}
22-
23-
.contact-us-page__input {
24-
background-color: var(--brown-100);
25-
border: 1px solid var(--color-text-main);
26-
border-radius: var(--border-radius-md);
27-
padding: var(--space-s);
28-
font-family: inherit;
29-
font-size: var(--step-2);
30-
}
31-
32-
.contact-us-page__input--textarea {
33-
min-height: 200px;
34-
resize: vertical;
35-
}
36-
37-
.contact-us-page__error-message {
38-
color: var(--color-error, #d93025);
39-
display: none;
40-
}
41-
42-
.was-validated .contact-us-page__input:invalid {
43-
border-color: var(--color-error, #d93025);
44-
}
45-
46-
.was-validated
47-
.contact-us-page__input:invalid
48-
+ .contact-us-page__error-message {
49-
display: block;
50-
}
51-
52-
.contact-us-page__confirmation {
53-
text-align: center;
54-
padding: var(--space-xl);
55-
max-width: 1124px;
56-
margin-inline: auto;
57-
}

‎hugo/assets/scss/find-a-doula.scss‎

Lines changed: 1 addition & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use "components/callout";
22
@use "components/nav-card";
3+
@use "components/forms";
34

45
.find-a-doula-nav {
56
display: flex;
@@ -72,73 +73,6 @@
7273
height: 3rem;
7374
}
7475
}
75-
76-
.contact-form {
77-
display: flex;
78-
flex-wrap: wrap;
79-
gap: var(--space-m);
80-
81-
.form-group {
82-
width: 100%;
83-
}
84-
85-
.form-group-half {
86-
width: calc(50% - (var(--space-m) / 2));
87-
}
88-
89-
label,
90-
legend {
91-
display: block;
92-
font-size: var(--step-2);
93-
font-weight: var(--font-weight-light);
94-
margin-bottom: var(--space-xs);
95-
}
96-
97-
input[type="text"],
98-
input[type="tel"],
99-
input[type="email"],
100-
textarea {
101-
width: 100%;
102-
padding: var(--space-s);
103-
border: 1px solid var(--color-text-main);
104-
border-radius: var(--spacing-btn-radius);
105-
background-color: var(--brown-000);
106-
}
107-
108-
fieldset {
109-
border: none;
110-
padding: 0;
111-
margin: 0;
112-
}
113-
114-
.date-fields {
115-
display: flex;
116-
gap: var(--space-s);
117-
}
118-
119-
.checkbox-group {
120-
display: grid;
121-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
122-
gap: var(--space-s);
123-
124-
div {
125-
display: flex;
126-
align-items: center;
127-
gap: var(--space-xs);
128-
}
129-
130-
input[type="checkbox"] {
131-
width: 1.5rem;
132-
height: 1.5rem;
133-
accent-color: var(--teal-500);
134-
}
135-
136-
label {
137-
font-size: var(--step-0);
138-
margin-bottom: 0;
139-
}
140-
}
141-
}
14276
}
14377

14478
.post-submission-section {

‎hugo/assets/scss/join-cooperative.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
li {
1919
background-color: var(--brown-100);
2020
padding: var(--space-s);
21-
border-radius: 8px;
22-
border: 1px solid var(--brown-400);
21+
border-radius: var(--border-radius-md);
22+
border: 3px solid var(--brown-400);
2323
}
2424
}
2525
}
@@ -28,8 +28,8 @@
2828
display: flex;
2929
flex-direction: column;
3030
align-items: center;
31-
border: 2px solid var(--brown-400);
32-
border-radius: 12px;
31+
border: 3px solid var(--brown-400);
32+
border-radius: var(--border-radius-md);
3333
padding: var(--space-l);
3434
max-width: max-content;
3535
margin-inline: auto;

‎hugo/content/join-the-doula-cooperative.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
---
2-
title: "Join the Doula cooperative"
2+
title: "Join the Doula Cooperative"
33
type: "join-cooperative"
44
---

‎hugo/hugo_stats.json‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,18 @@
9292
"footer__social",
9393
"footer__social-link",
9494
"footer__social-link--circled",
95+
"form",
9596
"form-group",
9697
"form-group-half",
98+
"form__confirmation",
99+
"form__date-fields",
100+
"form__error-message",
101+
"form__group",
102+
"form__group--checkbox",
103+
"form__group--radio",
104+
"form__input",
105+
"form__input--textarea",
106+
"form__label",
97107
"header",
98108
"headshot",
99109
"headshot__image",
@@ -135,12 +145,14 @@
135145
"board",
136146
"classes",
137147
"confirmation-message",
148+
"day",
138149
"email",
139150
"highland",
140151
"home-birth",
141152
"lactation",
142153
"message",
143154
"mission",
155+
"month",
144156
"name",
145157
"other-hospital",
146158
"other-info",
@@ -149,7 +161,8 @@
149161
"postpartum-doula",
150162
"rochester-general",
151163
"strong",
152-
"who-we-are"
164+
"who-we-are",
165+
"year"
153166
]
154167
}
155168
}

0 commit comments

Comments
 (0)