File: D:/HostingSpaces/BVerhoeven/verhoevendak.nl/wwwroot/css/pages/posts/_index.sass
.projects-overview
&:after
content: ""
opacity: 0.5
top: 0
left: 0
bottom: 0
right: 0
position: absolute
z-index: -1
background: white url('/img/clouds_bg.jpg') no-repeat
.breadcrumb
margin: 108px 0 0 column(0.5, 12)
.overview-placeholder
padding: 75px column(0.6) 0 column(0.6)
h1
font-size: 40px
line-height: 48px
letter-spacing: -0.2px
font-style: italic
margin-top: 0
vertical-align: top
color: $fontGray
.overview-header
vertical-align: top
.pagination
text-align: right
.pagination
text-align: center
li
color: $fontLightGray
border-left: solid 1px $fontLightGray
padding-left: 10px
&:first-child
border-left: none
&.active
color: $lightOrange
font-weight: bold
a
color: $fontLightGray
.categorie-holder
width: column(6.5)
margin-left: column(0.85)
max-width: 600px
.categories
line-height: 0.9rem
display: flex
justify-content: space-between
background-color: $fontGray
padding: 10px 20px 0 20px
height: 50px
list-style: none
border-radius: 10px
font-weight: bold
font-size: 20px
color: white
margin: 0
margin-bottom: 16px
li
input[type="checkbox"]
display: none
& + label
cursor: pointer
line-height: 1.4em
color: #d0d0d0
&:hover
color: white
span
display: inline-block
width: 40px
height: 30px
vertical-align: middle
background: url(../../img/svg/checkboxes.svg) -30px top no-repeat
background-size: 160%
position: relative
right: 10px
top: -2px
&:checked + label span
display: inline-block
width: 40px
height: 30px
vertical-align: middle
background: url(../../img/svg/checkboxes.svg) 6px top no-repeat
background-size: 160%
position: relative
right: 12px
top: -2px
&:first-child
font-style: italic
font-weight: normal
color: #a0a0a0
line-height: 1.4em
.articles
padding: 80px column(0.6) 0 column(0.6)
display: flex
flex-direction: row
flex-wrap: wrap
justify-content: space-between
article
margin-bottom: 3.5%
text-align: center
a
text-decoration: none
figure
background-color: #EEEEEE
background-size: cover
background-repeat: no-repeat
width: 100%
height: 0
padding-top: 105%
position: relative
overflow: hidden
.overlay
&:before
content: "\003e"
width: 7px
height: 40px
display: block
color: white
position: absolute
right: 5%
bottom: 0
text-align: right
z-index: 1
font-size: 26px
font-weight: bold
transform: scale(0.6, 1)
&:after
content: ""
display: block
width: 0
height: 0
bottom: -80%
position: absolute
border-top: 500px solid transparent
border-right: 475px solid $lightOrange
transition: bottom .25s ease-in-out
&:hover
figure
&:before
content: "Meer informatie"
width: 170px
height: 50px
display: block
position: absolute
bottom: -10px
right: 40px
z-index: 1
color: white
opacity: 1
font-size: 18px
font-weight: bold
&:after
bottom: 0
.overlay:before
width: 25px
height: 46px
.content
padding-top: 5px
h3
font-size: 18px
line-height: 28px
color: $fontGray
.bottom-categories
margin-top: 50px
text-align: center
.categorie-holder
width: column(6.15)
margin: 0
.referencesLink
width: 100%
font-size: 18px
line-height: 28px
text-align: center
margin: 74px 0 50px 0
&:after
content: "-"
color: $darkOrange
font-weight: bold
display: block
margin: 18px
font-size: 32px
a
color: $fontLightGray
text-decoration: none
border-bottom: solid 2px $fontLightGray
padding-bottom: 1px
&:hover
color: $darkOrange
border-bottom-color: $darkOrange
.project-referenties
background-color: $darkOrange
height: 28.57vw
max-height: 550px
position: relative
z-index: 1
box-shadow: 0 5px 10px rgba(0,0,0,0.15)
.references-text
margin-left: column(1.9)
max-width: column(3.5)
vertical-align: top
padding-top: 6.5%
h2
color: white
font-style: italic
font-size: 32px
margin-bottom: 30px
line-height: 42px
p
color: white
font-style: italic
font-size: 32px
margin-bottom: 30px
line-height: 42px
a
font-size: 18px
line-height: 28px
letter-spacing: -0.36px
padding-top: 12px
.references-imgHolder
margin-left: column(1.6)
figure
display: block
width: 100%
height: 28.58vw
max-height: 550px
margin: 0
background-repeat: no-repeat
background-size: cover
body.IE
.projects-overview
.categorie-holder
.categories
li
input[type="checkbox"]
& + label
span
background-position: -42px -18px
&:checked + label
span
background-position: left -18px
+respond-to-width(1450)
.projects-overview
.categorie-holder
.categories
font-size: 20px
li
input[type="checkbox"]
& + label
span
width: 35px
height: 33px
margin: -3px 8px -8px 0
background: url(../../img/svg/checkboxes.svg) -30px top no-repeat
background-size: 175%
right: 0
input[type="checkbox"]:checked
& + label
span
width: 35px
height: 33px
margin: -9px 0px -14px 0
background: url(../../img/svg/checkboxes.svg) 3px top no-repeat
background-size: 175%
right: 8px
+respond-to-width(1130)
.projects-overview
.categorie-holder
.categories
font-size: 16px
padding: 14px 20px 0 20px
li
input[type="checkbox"]
& + label
span
width: 30px
height: 28px
margin: 0px 0px -8px 0
background: url(../../img/svg/checkboxes.svg) -24px top no-repeat
background-size: 150%
right: 0
input[type="checkbox"]:checked
& + label
span
width: 30px
height: 28px
margin: -6px 0px -14px 0
background: url(../../img/svg/checkboxes.svg) 9px top no-repeat
background-size: 150%
right: 10px
.project-referenties
.references-text
padding-top: 4.5%
h2
font-size: 22px
margin-bottom: 30px
line-height: 36px
a.button
padding-top: 8px
min-width: 180px
height: 45px
+respond-to-width(900)
.projects-overview
.breadcrumb
margin-top: 40px
.categorie-holder
width: column(8)
.bottom-categories
.categorie-holder
width: column(8)
.project-referenties
.references-text
padding-top: 2%
.articles
article
width: 45%
+respond-to-width(760)
.projects-overview
.overview-placeholder
padding-top: 20px
.overview-header
h1
margin-bottom: 20px
.categorie-holder
width: 105%
ul.categories
li:first-child
display: none
.pagination
text-align: center
.articles
padding-top: 30px
padding-bottom: 30px
article
a, a:hover
figure
&:after
display: none
.overlay
display: none
&:before
display: none
.bottom-categories
.categorie-holder
width: 100%
ul.categories
li:first-child
display: none
.project-referenties
height: auto
padding: 10%
.references-text
width: 100%
margin: 0 5%
max-width: 90%
text-align: center
h2
font-size: 28px
line-height: 40px
a.button
font-size: 22px
line-height: 24px
.references-imgHolder
display: none
+respond-to-width(500)
.projects-overview
.articles
article
width: 100%
+respond-to-width(435)
.projects-overview
> .grid-row
width: 100%
.overview-header
.categorie-holder
width: 110%
float: none
margin-left: -5%
ul
border-radius: 0
.bottom-categories
margin-top: 0
.categorie-holder
.categories
border-radius: 0
margin-bottom: 0
.referencesLink
display: none