File: D:/HostingSpaces/BVerhoeven/verhoevendak.nl/wwwroot/css/pages/posts/_show.sass
/*==========================================================================
News detail page
========================================================================== */
.news-detail
&: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: 56px 0 0 0
h1
font-size: 42px
font-style: italic
.content-placeholder
.grid-row
.grid-col
vertical-align: top
.top
padding-top: 50px
p
padding-top: 32px
font-size: 26px
line-height: 38px
color: $fontLightGray
h1
margin: 42px 0 34px 0
color: $fontGray
a.back-to-projects
text-decoration: none
font-size: 16.5px
color: $fontGray
opacity: 0.33
&:hover
opacity: 0.8
.icon-grid-view
opacity: 0.8
.icon-grid-view
background: url(/img/svg/icon-grid-view.svg)
width: 16px
height: 16px
display: block
float: left
margin: 9px 10px 0 0
opacity: 0.4
.main
padding-top: 75px
.images
overflow: visible
figure
position: relative
width: 100%
padding-bottom: 75%
margin-bottom: 60px
background-color: #EEEEEE
z-index: 1
&:hover
cursor: pointer
&:after
content: "+"
display: block
width: 50px
position: absolute
left: 47%
top: 45%
background-color: rgba(255, 111, 0, 0.8)
padding: 10px 0
text-align: center
color: white
font-weight: bold
&.img-0
padding-bottom: 42%
&.img-1
width: 43%
padding-bottom: 45%
float: left
&.img-2
width: 48.5%
padding-bottom: 51.5%
float: right
margin-bottom: 75px
// Separate span for different image size
span
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background-size: cover
background-position: center
&.medium
display: none
.big-hexagon-holder
position: absolute
top: 14%
//transform: scale(0.8) rotate(18deg)
left: 9%
z-index: 0
+spinLeftAnimation('spin11', 0.8)
-webkit-animation: spin11 360s linear infinite
animation: spin11 360s linear infinite
-webkit-backface-visibility: hidden
.description
h2
font-size: 32px
line-height: 32px
margin-bottom: 38px
color: $fontGray
table
border-spacing: 0
width: 100%
border-collapse: collapse
color: $fontLightGray
tr
width: 100%
border-bottom: solid 1px
td
height: 52px
font-size: 22px
&:first-child
width: 34%
font-weight: bold
&:last-child
color: $lightOrange
p
letter-spacing: 0.1px
color: $lightOrange
b
font-size: 22px
color: $fontLightGray
.offerte-button
margin-top: 28px
.bottom
.reference-linkholder
text-align: center
margin: 0 0 32px 0
font-size: 0.96rem
a
padding-bottom: 1px
border-bottom: solid 1px
text-decoration: none
color: $fontLightGray
.yellowline
width: 10px
height: 10px
margin: 20px 0
display: inline-block
border-bottom: solid 2px $lightOrange
.nearby-projects
background-color: $fontGray
padding-top: 70px
height: 400px
margin-bottom: 300px
h1, h3
color: white
text-align: center
letter-spacing: -1.8px
h3
letter-spacing: 0px
font-size: 27px
margin: -7px 0 70px 0
.grid-col
text-align: center
article
margin: 0 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: -70%
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: 25px
.home-referenties
background-color: $darkOrange
height: auto
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: 4.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: 0
padding-bottom: 47%
padding-top: 10%
margin: 0
background-repeat: no-repeat
background-size: cover
.image-slider
display: none
position: fixed
z-index: 15
width: 100%
height: 100%
top: 0
left: 0
.slider-bg
position: absolute
display: block
width: 100%
height: 100%
top: 0
left: 0
background-color: rgba(0,0,0,0.5)
.image-holder
position: relative
top: 10%
margin: 0 auto
width: 80%
overflow: visible
padding: 40px 150px
background-color: $fontGray
.close-button
font-weight: bold
font-size: 36px
color: white
position: absolute
top: 2%
right: 3%
cursor: pointer
figure
position: relative
width: 100%
padding-bottom: 60%
left: 0.5%
background-color: $fontLightGray
// Image
.image
position: absolute
top: 0
left: 0
width: 100%
height: 100%
opacity: 0
z-index: 1
transition: opacity 0.4s
&.active
opacity: 1
z-index: 2
// Separate span for different image size
span
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background-size: cover
background-position: center
&.medium
display: none
.image-slider-nav
height: 65%
position: absolute
display: block
width: 100%
left: 0
bottom: 0
.nav-button
height: 50px
width: 50px
cursor: pointer
position: absolute
font-size: 5vw
transform: scaleY(1.9)
font-weight: 100
color: darkorange
&.previous
left: 3%
&.next
right: 3%
+respond-to-width(1025)
.news-detail
.content-placeholder
.main
.images
figure.img-2
top: -32%
.bottom
.reference-linkholder
margin: -90px 0 72px
.nearby-projects
margin-bottom: 250px
.home-referenties
h2
p
font-size: 22px
margin-bottom: 30px
line-height: 36px
.references-text
padding-top: 3.5%
a
padding-top: 0
.content-placeholder
a.button
min-width: 180px
height: 40px
font-size: 14px
line-height: 40px
+respond-to-width(840)
.news-detail
.content-placeholder
.top
padding-top: 0
.grid-col
width: 100%
margin-left: 0
p
font-size: 20px
.main
.images
width: 100%
height: auto
figure
cursor: default
pointer-events: none
&.img-1,
&.img-2
padding-bottom: 50%
&.img-2
top: 0
.big-hexagon-holder
display: none
.description
width: 90%
margin-left: 0
h2
font-size: 28px
table
tr
td
font-size: 16px
&:first-child
width: 50%
p
font-size: 16px
b
font-size: 16px
.bottom
.reference-linkholder
margin: 73px 0 36px
font-size: 1rem
.nearby-projects
margin-bottom: 150px
.home-referenties
.references-text
padding-top: 0
a
padding-top: 0
.content-placeholder
a.button
min-width: 180px
height: 40px
font-size: 14px
line-height: 40px
+respond-to-width(760)
.news-detail
.content-placeholder
.home-referenties
height: auto
padding: 10%
.references-text
width: 100%
margin: 0 5%
max-width: 90%
text-align: center
h2
p
font-size: 28px
line-height: 40px
a.button
font-size: 22px
.references-imgHolder
display: none
+respond-to-width(550)
.news-detail
.content-placeholder
.nearby-projects
height: auto
margin-bottom: 0
.grid-col
article
width: 60%
margin-bottom: 30px
+respond-to-width(435)
.news-detail
.content-placeholder
.top
h1
margin: 0
p
padding-top: 0
.offset-1
margin-left: 0
.grid-col
width: 100%
p
font-size: 16px
line-height: 24px
.main
padding-top: 0
.images
margin-bottom: 30px
figure.img-0,
figure.img-1,
figure.img-2
width: 100%
margin-bottom: 10px
float: none
p
font-size: 16px
line-height: 24px
.description
padding-bottom: 30px
.bottom
display: none
.nearby-projects
margin-bottom: 0
h1
font-size: 28px
line-height: 42px
padding: 0 10% 5%
h3
margin: -7px 0 50px 0
.grid-col
article
width: 75%
.home-referenties
height: auto
padding: 10%
.references-text
width: 100%
margin: 0 5%
max-width: 90%
text-align: center
h2
p
font-size: 28px
line-height: 40px
a.button
font-size: 22px
line-height: 24px
padding-top: 6px
.references-imgHolder
display: none