Skip to content

Commit 65b6802

Browse files
sarmsteadsarmstead
committed
feat(about): add team markup, assets, and styles
1 parent 4816536 commit 65b6802

3 files changed

Lines changed: 223 additions & 0 deletions

File tree

‎about.hbs‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,4 +80,79 @@
8080
</section>
8181
</div>
8282
</section>
83+
<section class='page-about__team'>
84+
<header class='page-about__team__header'>
85+
{{#get 'pages' filter="title:'About::Team - Header'" limit='1'}}
86+
{{#foreach pages}}
87+
{{content}}
88+
{{/foreach}}
89+
{{/get}}
90+
</header>
91+
<section class='page-about__team__staff'>
92+
<header class='page-about__team__staff__header'>
93+
{{#get 'pages' filter="title:'About::Team::Staff - Header'" limit='1'}}
94+
{{#foreach pages}}
95+
{{content}}
96+
{{/foreach}}
97+
{{/get}}
98+
</header>
99+
<section class='page-about__team__staff__inner'>
100+
{{#get "pages" order="featured desc, title asc" filter="tags:hash-staff" limit="all"}}
101+
{{#foreach pages}}
102+
<figure class='page-about__team__member'>
103+
{{#if feature_image}}
104+
<img
105+
alt="{{title}}"
106+
class='page-about__team__member__image'
107+
src="{{feature_image}}"
108+
/>
109+
{{else}}
110+
<img
111+
alt='White Ruby Central logo on red background'
112+
class='page-about__team__member__image'
113+
src={{asset 'images/global__placeholder.svg'}}
114+
/>
115+
{{/if}}
116+
<div class='page-about__team__member--details'>
117+
<h4>{{title}}</h4>
118+
{{content}}
119+
</div>
120+
</figure>
121+
{{/foreach}}
122+
{{/get}}
123+
</section>
124+
</section>
125+
<section class='page-about__team__directors'>
126+
<header class='page-about__team__directors__header'>
127+
{{#get 'pages' filter="title:'About::Team::Directors - Header'" limit='1'}}
128+
{{#foreach pages}}
129+
{{content}}
130+
{{/foreach}}
131+
{{/get}}
132+
</header>
133+
<section class='page-about__team__directors__inner'>
134+
{{#get "pages" order="featured desc, title asc" filter="tags:hash-director" limit="all"}}
135+
{{#foreach pages}}
136+
<figure class='page-about__team__member'>
137+
{{#if feature_image}}
138+
<img
139+
alt="{{title}}"
140+
class='page-about__team__member__image'
141+
src="{{feature_image}}"
142+
/>
143+
{{else}}
144+
<img
145+
alt='White Ruby Central logo on red background'
146+
class='page-about__team__member__image'
147+
src={{asset 'images/global__placeholder.svg'}}
148+
/>
149+
{{/if}}
150+
<h4>{{title}}</h4>
151+
{{content}}
152+
</figure>
153+
{{/foreach}}
154+
{{/get}}
155+
</section>
156+
</section>
157+
</section>
83158
{{> 'get-involved' }}

‎assets/images/global__placeholder.svg‎

Lines changed: 32 additions & 0 deletions
Loading

‎src/css/pages/about.css‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,93 @@
138138
width: 100%;
139139
}
140140

141+
.page-about__team {
142+
display: flex;
143+
flex-direction: column;
144+
gap: 24px;
145+
margin: auto;
146+
max-width: 1135px;
147+
padding: 96px 40px;
148+
}
149+
150+
.page-about__team__header {
151+
h2 {
152+
color: var(--red);
153+
margin-bottom: 16px;
154+
text-transform: uppercase;
155+
}
156+
157+
hr {
158+
margin-bottom: 16px;
159+
}
160+
161+
p {
162+
font-family: 'Rubik', sans-serif;
163+
font-size: 1.5rem;
164+
font-style: italic;
165+
font-weight: 300;
166+
line-height: 3rem;
167+
margin: 0;
168+
}
169+
}
170+
171+
.page-about__team__member {
172+
margin: 0;
173+
174+
h4,
175+
p {
176+
margin: 0;
177+
}
178+
}
179+
180+
.page-about__team__member__image {
181+
border-radius: 8px;
182+
height: 300px;
183+
margin-bottom: 16px;
184+
object-fit: cover;
185+
width: 100%;
186+
}
187+
188+
.page-about__team__member--details {
189+
display: flex;
190+
flex-direction: column;
191+
gap: 8px;
192+
}
193+
194+
.page-about__team__staff,
195+
.page-about__team__directors {
196+
background-color: var(--offwhite);
197+
border-radius: 8px;
198+
padding: 36px;
199+
}
200+
201+
.page-about__team__staff__header,
202+
.page-about__team__directors__header {
203+
margin-bottom: 36px;
204+
205+
h3 {
206+
margin-bottom: 8px;
207+
}
208+
209+
p {
210+
margin: 0;
211+
}
212+
}
213+
214+
.page-about__team__staff__inner,
215+
.page-about__team__directors__inner {
216+
display: grid;
217+
gap: 24px;
218+
grid-template-columns: 1fr;
219+
}
220+
221+
@media (min-width: 600px) {
222+
.page-about__team__staff__inner,
223+
.page-about__team__directors__inner {
224+
grid-template-columns: repeat(2, minmax(0, 1fr));
225+
}
226+
}
227+
141228
@media (min-width: 834px) {
142229
.page-about__hero {
143230
min-height: 834px;
@@ -184,6 +271,21 @@
184271
.page-about__history__section-two--image {
185272
height: 300px;
186273
}
274+
275+
.page-about__team {
276+
gap: 48px;
277+
}
278+
279+
.page-about__team__header {
280+
p {
281+
font-size: 2rem;
282+
}
283+
}
284+
285+
.page-about__team__staff__inner,
286+
.page-about__team__directors__inner {
287+
grid-template-columns: repeat(3, minmax(0, 1fr));
288+
}
187289
}
188290

189291
@media (min-width: 1440px) {
@@ -221,5 +323,19 @@
221323
.page-about__history__section-two--image {
222324
height: 375px;
223325
}
326+
327+
.page-about__team {
328+
gap: 96px;
329+
padding: 96px 0;
330+
}
331+
332+
.page-about__team__header {
333+
margin-bottom: -24px;
334+
}
335+
336+
.page-about__team__staff__inner,
337+
.page-about__team__directors__inner {
338+
grid-template-columns: repeat(4, minmax(0, 1fr));
339+
}
224340
}
225341
}

0 commit comments

Comments
 (0)