<div class="crooked-line " data-crooked-line></div>
<div class="crooked-line {{ ultraWide ? 'crooked-line--ultra-wide' }}" data-crooked-line></div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark"
}
.crooked-line
@extends $contentContainer
width 100%
position relative
z-index 2
transition transform 1000ms ease-out
transform rotate(-3deg) translateX(-50%)
&--animate
transform rotate(-3deg) translateX(0)
&:after
content ''
width 100%
height 2px
background-color illiniOrange
display flex
margin-top -2px
&--ultra-wide
&:before
content: '';
width: 50%;
position: absolute;
left: 0;
height: 2px;
transform: translateX(calc(-100% + 48px));
background-color: #ff552e;
display: flex;
There are no notes for this item.