<div class="homepage-overview">
<div class="homepage-overview__container">
<div class="homepage-overview__box">
<div class="homepage-overview__content">
<h2 class="homepage-overview__summary">
Urban planning means finding creative approaches to community needs and challenges
</h2>
<div class="homepage-overview__description">
We think about how the environments we create affect social conditions and communities, especially for underserved and vulnerable populations.
</div>
<div class="homepage-overview__conclusion">
People. Places. Planet. Plan it.
</div>
</div>
<div class="homepage-overview__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/1000/480?random=1" alt="" width="960" height="480">
</figure>
</div>
</div>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="homepage-overview">
<div class="homepage-overview__container">
<div class="homepage-overview__box">
<div class="homepage-overview__content">
<h2 class="homepage-overview__summary">
{{ overview.summary }}
</h2>
<div class="homepage-overview__description">
{{ overview.description }}
</div>
<div class="homepage-overview__conclusion">
{{ overview.conclusion }}
</div>
</div>
<div class="homepage-overview__image">
{{ imageMacros.create(overview.image, 960, 480, background) }}
</div>
</div>
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"overview": {
"summary": "Urban planning means finding creative approaches to community needs and challenges",
"description": "We think about how the environments we create affect social conditions and communities, especially for underserved and vulnerable populations.",
"conclusion": "People. Places. Planet. Plan it.",
"image": {
"src": "https://picsum.photos/1000/480?random=1",
"alt": "Example alt text"
}
}
}
breakpointSmall = 784px
breakpointLarge = 1300px
.homepage-overview
background-color cloud
padding-top 80px
+above(breakpointSmall)
padding-top 128px
+above(breakpointLarge)
padding-top 0
+between(breakpointSmall, breakpointLarge)
padding-bottom 128px
&__container
@extends $contentContainer
&__box
+above(breakpointSmall)
align-items center
@supports (display: grid)
display grid
grid-template-columns 5fr 3fr
+above(breakpointLarge)
grid-template-columns 8fr 4fr
+between(breakpointSmall, breakpointLarge)
align-items start
&__content
padding-right 32px
&__summary
@extends $tertiaryTitle
margin-bottom 16px
&__description
@extends $primaryParagraph
margin-bottom 24px
&__conclusion
@extends $headline1
color altgeld
margin-top 24px
&__image
position relative
height 256px
margin-bottom 80px
+below(breakpointSmall)
margin-top 48px
fullViewportWidthInContainer()
+above(breakpointSmall)
margin-top 0
+above(breakpointLarge)
height 480px
margin-bottom 160px
& figure
position absolute
width 100%
height 256px
+above(breakpointSmall)
width 512px
+above(breakpointLarge)
width s('calc(%s - (%s * (8 / 12)) + ((100vw - %s) / 2) + 16px)', maxContentWidth, maxContentWidth, maxContentWidth)
height 480px
&:before
background-color illiniOrange
content ""
display block
height 128px
left 0
mix-blend-mode multiply
position absolute
right 0
top 208px
z-index 1
+above(breakpointLarge)
height 224px
top 416px
There are no notes for this item.