-
Notifications
You must be signed in to change notification settings - Fork 16
/
_homepage.scss
161 lines (128 loc) · 7.39 KB
/
_homepage.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
/* Homepage-specific styles */
.homepage {
.page-header {
height: auto;
}
.primary-nav {
top: 0 !important; // Top nav sticks on the homepage only
transition: all 0.35s;
}
.primary-nav--scrolled {
background-color: rgba($light-grey, 0.5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: $warm-black;
.dropdown__link {
color: $white;
}
.logo, .label {
color: $warm-black;
}
}
.secondary-nav {
margin-bottom: 25px;
}
a {
text-decoration: none;
}
h3 {
margin-top: $spacing-03;
font-weight: 600;
}
time {
color: $dark-grey;
}
.page-header {
background-color: transparent;
color: $warm-black;
button, input {
padding: $spacing-03;
}
button[type="submit"] {
border: 1px solid $warm-black;
background-color: $yellow;
&:hover, &:active, &:focus {
background-color: $warm-black;
color: $grapefruit;
}
}
}
.page-content > section {
padding-top: $spacing-05;
padding-bottom: $spacing-05;
h2 {
margin-bottom: $spacing-04;
}
}
&__background {
background: url("data:image/svg+xml,%3Csvg width='444' height='248' viewBox='0 0 444 248' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M443.072 123.775C443.072 55.4159 387.656 -2.42231e-06 319.297 -5.41038e-06L319.297 247.55C387.656 247.55 443.072 192.134 443.072 123.775Z' fill='%233A5959'/%3E%3Cpath d='M195.522 123.775C195.522 55.4159 250.938 -2.42231e-06 319.297 -5.41038e-06L319.297 247.55C250.938 247.55 195.522 192.134 195.522 123.775Z' fill='%2347A178'/%3E%3Cpath d='M139.705 176.17C103.331 176.17 73.8433 205.815 73.8433 242.384H205.567C205.567 205.815 176.08 176.17 139.705 176.17Z' fill='%23A3C386'/%3E%3Crect x='16.082' y='5' width='82.4154' height='72.5537' fill='%23A3C386'/%3E%3Crect x='18.8994' y='176.17' width='118.34' height='66.2141' fill='%2347A178'/%3E%3Cpath d='M173.869 80.3713C173.869 38.7449 140.124 5 98.4973 5L98.4973 155.743C140.124 155.743 173.869 121.998 173.869 80.3713Z' fill='%233A5959'/%3E%3Cpath d='M18.0156 155.563C-6.0052 179.584 -6.00519 218.529 18.0156 242.55L105.003 155.563C80.9818 131.542 42.0364 131.542 18.0156 155.563Z' fill='%233A5959'/%3E%3Cpath d='M112.586 80.0191C112.586 106.668 90.9825 128.271 64.3338 128.271C37.6851 128.271 16.082 106.668 16.082 80.0191C16.082 53.3704 37.6851 31.7674 64.3338 31.7674C90.9825 31.7674 112.586 53.3704 112.586 80.0191Z' fill='%2347A178'/%3E%3C/svg%3E") no-repeat right bottom;
background-size: 50% auto;
}
&__search {
transition: all 0.35s;
background-color: rgba(255, 255, 255, 0.65);
@media screen and (max-width: 1279px) {
background-color: rgba($white, 0.85);
}
.container {
padding-top: $spacing-05;
padding-bottom: $spacing-06;
}
.input-group input[type="text"] {
width: 40%;
}
.input-group select {
width: 40%;
margin-left: -1px;
}
.input-group input[type="submit"] {
width: 20%;
margin-left: -1px;
}
}
&__about article:first-of-type {
margin-top: $spacing-04;
margin-bottom: $spacing-04;
padding-top: $spacing-04;
border-width: 0 0 1px 0;
border-style: solid;
border-color: $light-green;
@media (min-width: 769px) {
margin-top: 0;
padding-top: 0;
border-width: 0 1px 0 0;
}
}
&__blog {
h3 {
@include typescale-05;
line-height: 1.25;
}
article {
margin-bottom: $spacing-04;
a {
display: block;
padding-top: $spacing-03;
border-top: 1px solid $grapefruit;
}
&:nth-of-type(4) {
clear: both; // Make sure fifth blog post starts on new line
}
}
}
&__volunteers {
background-image: url("data:image/svg+xml,%3Csvg width='1440' height='963' viewBox='0 0 1440 963' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 803C0 891.366 71.6344 963 160 963L160 643C71.6344 643 0 714.634 0 803Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M160 160C160 248.366 231.634 320 320 320V0C231.634 0 160 71.6344 160 160Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M1280 483C1280 571.366 1351.63 643 1440 643V323C1351.63 323 1280 394.634 1280 483Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M1120 483C1120 571.366 1048.37 643 960 643V323C1048.37 323 1120 394.634 1120 483Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M800 160C800 71.6344 728.366 0 640 0V320C728.366 320 800 248.366 800 160Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M160 160C160 248.366 88.3656 320 0 320L0 0C88.3656 0 160 71.6344 160 160Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M1280 483C1280 571.366 1208.37 643 1120 643V323C1208.37 323 1280 394.634 1280 483Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M160 323C71.6344 323 0 394.634 0 483L9.15527e-05 643C88.3657 643 160 571.366 160 483L160 323Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M960 0C871.634 0 800 71.6344 800 160L800 320C888.366 320 960 248.366 960 160V0Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M1120 0C1031.63 0 960 71.6344 960 160L960 320C1048.37 320 1120 248.366 1120 160V0Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M960 643C960 554.634 888.366 483 800 483L640 483C640 571.366 711.634 643 800 643H960Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M960 323C960 411.366 888.366 483 800 483L640 483C640 394.634 711.634 323 800 323H960Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M960 643C871.634 643 800 714.634 800 803L800 963C888.366 963 960 891.366 960 803V643Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M960 643C1048.37 643 1120 714.634 1120 803L1120 963C1031.63 963 960 891.366 960 803V643Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M320 803C231.634 803 160 874.634 160 963H320V803Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M320 803C231.634 803 160 731.366 160 643H320V803Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M640 643C551.634 643 480 571.366 480 483H640V643Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M640 323C551.634 323 480 394.634 480 483H640V323Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M320 963C408.366 963 480 891.366 480 803H320V963Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M320 643C408.366 643 480 714.634 480 803H320V643Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M480 483C480 394.634 408.366 323 320 323V483H160C160 571.366 231.634 643 320 643C408.366 643 480 571.366 480 483Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M1280 643C1191.63 643 1120 714.634 1120 803H1280V963C1368.37 963 1440 891.366 1440 803C1440 714.634 1368.37 643 1280 643Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M640 643C728.366 643 800 714.634 800 803C800 891.366 728.366 963 640 963C551.634 963 480 891.366 480 803C480 714.634 551.634 643 640 643Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M480 0C568.366 0 640 71.6344 640 160C640 248.366 568.366 320 480 320C391.634 320 320 248.366 320 160C320 71.6344 391.634 0 480 0Z' fill='white' fill-opacity='0.025'/%3E%3Cpath d='M1280 0C1368.37 0 1440 71.6344 1440 160C1440 248.366 1368.37 320 1280 320C1191.63 320 1120 248.366 1120 160C1120 71.6344 1191.63 0 1280 0Z' fill='white' fill-opacity='0.025'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: left bottom;
background-size: auto 75%;
article {
margin-bottom: $spacing-05;
&:nth-of-type(5) {
clear: both;
}
}
p {
margin-bottom: $spacing-03;
}
}
}