Skip to content

Commit dac72ae

Browse files
markgohomarkgoho
committed
initial cleanup of scss
1 parent 944abe8 commit dac72ae

38 files changed

Lines changed: 800 additions & 1092 deletions

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,11 @@
2020
}
2121

2222
.board-member-card {
23-
border: 1px solid var(--color-border-accent);
23+
border: 1px solid var(--brown-400);
2424
border-radius: 10px;
2525
padding: 1.5rem;
2626
text-align: center;
27-
background-color: var(--color-lightest-bg);
27+
background-color: var(--brown-100);
2828
}
2929

3030
.board-member-card__image {
@@ -35,7 +35,7 @@
3535
max-width: 200px;
3636
height: auto;
3737
border-radius: 50%;
38-
border: 5px solid var(--color-accent-bg);
38+
border: 5px solid var(--teal-500);
3939
}
4040
}
4141

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ section {
1414

1515
.faq {
1616
details {
17-
border-bottom: 1px solid var(--color-border-accent);
17+
border-bottom: 1px solid var(--brown-400);
1818
padding-block: 1rem;
1919
height: 3rem; /* Set a fixed height for the collapsed state */
2020
transition: height 400ms ease-in-out;

‎hugo/assets/scss/base.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ body {
4747
line-height: 1.5;
4848
-webkit-font-smoothing: antialiased;
4949
font-family: "Geologica", sans-serif;
50+
margin: 0;
5051
}
5152

5253
/* Set shorter line heights on headings and interactive elements */

‎hugo/assets/scss/button.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
:root {
2+
--spacing-btn-padding-x: 1.25rem; /* 20px */
3+
--spacing-btn-radius: 0.625rem; /* 10px */
4+
}
5+
6+
.button {
7+
font-family: var(--font-family-main);
8+
font-weight: var(--font-weight-boldest);
9+
font-size: var(--font-size-md);
10+
color: var(--brown-100);
11+
background: var(--teal-500);
12+
border-radius: var(--spacing-btn-radius);
13+
padding: var(--spacing-btn-padding-x) calc(var(--spacing-btn-padding-x) * 1.2);
14+
text-decoration: none;
15+
border: none;
16+
cursor: pointer;
17+
transition:
18+
background 0.2s,
19+
color 0.2s;
20+
21+
justify-self: start;
22+
23+
&:hover,
24+
&:focus {
25+
background: var(--color-text-main);
26+
color: var(--brown-300);
27+
}
28+
}

‎hugo/assets/scss/colors.scss‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
:root {
2-
/* Colors */
3-
--color-primary-bg: #ffffff;
4-
--color-accent-bg: #1b5665;
5-
--color-highlight-bg: #f9dcb5;
6-
--color-light-bg: #f5e4cd;
7-
--color-lightest-bg: #fcefde;
8-
--color-text-main: #442c0c;
9-
--color-border-accent: #dfb781;
10-
}
2+
--brown-000: hsl(35, 69%, 94%);
3+
--brown-100: hsl(34, 83%, 93%);
4+
--brown-200: hsl(35, 67%, 88%);
5+
--brown-300: hsl(34, 85%, 84%);
6+
--brown-400: hsl(34, 59%, 69%);
7+
--brown-500: hsl(34, 70%, 16%);
8+
--brown-600: hsl(33, 35%, 12%);
9+
--brown-700: hsl(35, 74%, 5%);
10+
11+
--teal-300: hsl(192, 49%, 53%);
12+
--teal-400: hsl(192, 51%, 33%);
13+
--teal-500: hsl(192, 58%, 25%);
14+
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+
}

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

Lines changed: 2 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,3 @@
1-
.contact-us-page {
2-
background: linear-gradient(
3-
180deg,
4-
var(--color-lightest-bg) 0%,
5-
var(--color-light-bg) 100%
6-
);
7-
padding: var(--spacing-xxl);
8-
}
9-
101
.contact-us-page__title {
112
font-family: var(--font-family-main);
123
font-weight: var(--font-weight-boldest);
@@ -18,7 +9,7 @@
189
}
1910

2011
.contact-us-page__callout {
21-
border: var(--border-width-md) solid var(--color-border-accent);
12+
border: var(--border-width-md) solid var(--brown-400);
2213
border-radius: var(--border-radius-md);
2314
padding: var(--spacing-md) var(--spacing-lg);
2415
margin-bottom: var(--spacing-xl);
@@ -70,7 +61,7 @@
7061
}
7162

7263
.contact-us-page__input {
73-
background-color: var(--color-lightest-bg);
64+
background-color: var(--brown-100);
7465
border: 1px solid var(--color-text-main);
7566
border-radius: var(--border-radius-md);
7667
padding: var(--spacing-md);
@@ -83,23 +74,7 @@
8374
resize: vertical;
8475
}
8576

86-
.contact-us-page__submit-btn {
87-
background-color: var(--color-accent-bg);
88-
color: var(--color-primary-bg);
89-
border: none;
90-
border-radius: var(--spacing-btn-radius);
91-
padding: var(--spacing-md) var(--spacing-lg);
92-
font-size: var(--font-size-body-lg);
93-
font-weight: var(--font-weight-bold);
94-
cursor: pointer;
95-
transition: background-color 0.2s;
96-
justify-self: start;
97-
}
9877

99-
.contact-us-page__submit-btn:hover,
100-
.contact-us-page__submit-btn:focus {
101-
background-color: var(--color-text-main);
102-
}
10378

10479
.contact-us-page__error-message {
10580
color: var(--color-error, #d93025);
@@ -123,12 +98,3 @@
12398
max-width: 1124px;
12499
margin-inline: auto;
125100
}
126-
127-
.contact-us-page__confirmation h2 {
128-
font-size: var(--font-size-lg);
129-
margin-bottom: var(--spacing-md);
130-
}
131-
132-
.contact-us-page__confirmation p {
133-
font-size: var(--font-size-body-lg);
134-
}

‎hugo/assets/scss/doula-profile.scss‎

Lines changed: 41 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,52 @@
1-
.doula-profile {
2-
container-type: inline-size;
3-
container-name: doula-profile;
1+
.profile-body {
2+
display: grid;
3+
gap: var(--space-size-7);
4+
grid-template-columns: 1fr;
45

5-
.profile-body {
6-
display: grid;
7-
gap: var(--space-size-7);
8-
grid-template-columns: 1fr;
9-
10-
@container (width > 45rem) {
11-
grid-template-columns: 1fr 2fr;
12-
}
6+
@container (width > 45rem) {
7+
grid-template-columns: 1fr 2fr;
138
}
9+
}
1410

15-
header {
16-
margin-block-end: var(--space-size-5);
17-
h1 {
18-
font-size: var(--ts-xl);
19-
font-weight: 900;
20-
}
21-
.credentials {
22-
font-size: var(--ts-m);
23-
color: var(--primary-700);
24-
font-weight: 300;
25-
}
26-
}
11+
.profile-header {
12+
margin-block-end: var(--space-size-5);
2713

28-
.main-content {
29-
.headshot {
30-
width: 100%;
31-
height: auto;
32-
aspect-ratio: 1 / 1;
33-
object-fit: cover;
34-
border-radius: 7px;
35-
border: 1px solid var(--primary-700);
36-
padding: var(--space-size-2);
37-
}
14+
.credentials {
15+
font-size: var(--ts-m);
16+
color: var(--primary-700);
17+
font-weight: 300;
3818
}
19+
}
3920

40-
.sidebar {
41-
.contact-info,
42-
.tags {
43-
margin-block-end: var(--space-size-5);
44-
}
45-
46-
h3 {
47-
font-size: var(--ts-l);
48-
font-weight: 700;
49-
margin-block-end: var(--space-size-3);
50-
}
51-
52-
.tags ul {
53-
list-style: none;
54-
padding: 0;
55-
display: flex;
56-
flex-wrap: wrap;
57-
gap: var(--space-size-2);
21+
.headshot {
22+
width: 100%;
23+
height: auto;
24+
aspect-ratio: 1 / 1;
25+
object-fit: cover;
26+
border-radius: 7px;
27+
border: 1px solid var(--primary-700);
28+
padding: var(--space-size-2);
29+
}
5830

59-
li {
60-
background-color: var(--secondary-200);
61-
padding: var(--space-size-1) var(--space-size-3);
62-
border-radius: 50px;
63-
font-size: var(--ts-s);
64-
font-weight: 900;
65-
}
66-
}
31+
.sidebar {
32+
.contact-info,
33+
.tags {
34+
margin-block-end: var(--space-size-5);
35+
}
6736

68-
.contact-info {
69-
p {
70-
display: flex;
71-
align-items: center;
72-
gap: var(--space-size-2);
73-
margin-block-end: var(--space-size-2);
74-
}
37+
.tags ul {
38+
list-style: none;
39+
padding: 0;
40+
display: flex;
41+
flex-wrap: wrap;
42+
gap: var(--space-size-2);
43+
44+
li {
45+
background-color: var(--secondary-200);
46+
padding: var(--space-size-1) var(--space-size-3);
47+
border-radius: 50px;
48+
font-size: var(--ts-s);
49+
font-weight: 900;
7550
}
7651
}
7752
}

0 commit comments

Comments
 (0)