File: D:/HostingSpaces/SBogers10/straffer.komma.nl/wwwroot/css/partials/_header.sass
header
background-color: white
width: 100%
position: fixed
top: 0
left: 0
z-index: 9999
box-sizing: border-box
&.scrolled
border-bottom: 1px solid $gray
.content-container
height: 70px
span.logo
+transform(scale(0.8))
.content-container
+flex(space-between, center)
height: 100px
+transition(height 0.2s)
span.logo
+sprite(0 -59px, 203px, 59px)
display: inline-block
+transition(transform 0.2s)
+transform-origin(0 50%)
nav
ul
list-style: none
padding: 0
margin: 0
+flex(flex-start, center)
li
&.active
a:after
width: 100%
background-color: $black
a
+font-bold(16px, 18px)
text-transform: uppercase
position: relative
&:hover
&:after
width: 100%
background-color: $yellow
&:after
display: block
position: absolute
content: ''
width: 0
height: 2px
right: 0
bottom: -5px
+transition(width 0.2s)
&:not(:first-child)
&:before
content: "/"
opacity: 0.2
padding: 0 30px
.header-image
background: url("/images/structure/slider-bg.jpg")
background-size: cover
background-position: bottom
width: 100%
+flex(center, flex-end)
position: relative
height: initial
margin-top: 100px
.ie10
display: none
&.startAnimation
height: 1080px
+transition(height 0.3s)
img
opacity: 0
.image-container
max-width: 1230px
width: 85%
img
width: 100%
display: block
opacity: 1
+transition(opacity 0.3s)
&.home
.image-container
max-width: 1360px
margin-right: -5.4%
.placeholder
padding-left: 10%
max-width: 1290px
&.our_work
.placeholder
left: 43%
h2
.divider
display: inline-block
height: 5px
width: 15px
&.contact
.placeholder
left: 47%
width: 45%
&.about
.placeholder
left: 48%
width: 42%
white-space: nowrap
h2
text-align: right
&.service
.image-container
max-width: 1308px
width: 90%
margin-right: -3.5%
.placeholder
h2
.divider
display: inline-block
height: 5px
width: 15px
.placeholder
max-width: calc(1230px - 10%)
position: absolute
width: 90%
top: 20%
height: 46%
padding: 5%
h2
margin: 0
padding: 0
color: white
+font-default(54px, 64px)
opacity: 1
+transform(translate3d(0, 0, 0))
+transition(all 0.4s)
+transition-delay(0.3s)
span
display: inline-block
color: white
+font-bold(54px, 64px)
&.startAnimation
+transform(translate3d(-80px, 0, 0))
opacity: 0
.logo-inline.black
+transform(translate3d(200px, 0, 0))
.logo-inline
display: inline-block
+sprite(0 -116px, 203px, 59px)
margin: 0 -12px -12px 0
&.black
+sprite(0 -57.5px, 203px, 59px)
+transform(translate3d(0, 0, 0))
+transition(all 0.6s)
+transition-delay(0.3s)
.logo
+sprite(-210px -150px, 283px, 143px)
margin-top: 5%
opacity: 1
+transform-origin(0 0)
+transform(translate3d(0, 0, 0))
+transition(all 0.4s)
+transition-delay(0.3s)
&.startAnimation
+transform(translate3d(80px, 0, 0))
opacity: 0
.arrows
position: absolute
width: 40px
height: 48px
left: calc(50% - 20px)
bottom: 25px
cursor: pointer
path
stroke: $yellow
fill: transparent
stroke-width: 3px
+animation(arrow 2s infinite)
&.a1
+animation-delay(-1s)
&.a2
+animation-delay(-0.5s)
&.a3
+animation-delay(0s)
+keyframes(arrow)
0%, 80%, 100%
opacity: 0
40%
opacity: 1
+media-query-larger(1525px)
.header-image.about
.placeholder
max-width: 600px
+media-query-larger(1680px)
.header-image
.placeholder
padding: 85px
&.home
.placeholder
padding-left: 170px
+media-query-larger(2000px)
.header-image.our_work
.placeholder
left: 45%
+media-query-larger(3000px)
.header-image.our_work
.placeholder
left: 47%
+media-query(1600px)
.header-image.home
img
margin-right: -5%
+media-query(1350px)
.header-image
.placeholder
.logo
+transform(scale(0.9))
margin-top: 4%
&.service
.placeholder
padding: 5% 7%
+media-query(1150px)
.header-image
.placeholder
h2
font-size: 40px
line-height: 48px
span
font-size: 40px
line-height: 48px
.logo-inline, .logo-inline.black
+transform(scale(0.8))
margin: 0 -28px -16px -18px
.logo
+transform(scale(0.75))
+media-query(1050px)
header
.content-container
>a
margin-left: 1%
+media-query(1000px)
header
width: 100%
.content-container
width: 95%
margin: auto
padding: 0 20px
box-sizing: border-box
.mobile header
margin: 0
.header-image.our_work
.placeholder
h2
font-size: 28px
line-height: 36px
font-family: 'square_serifmedium', 'Roboto Slab', serif
span
font-size: 28px
line-height: 36px
.logo-inline, .logo-inline.black
+transform(scale(0.6))
margin: 0 -48px -20px -36px
.logo
+transform(scale(0.6))
+media-query(990px)
.header-image
.image-container
width: 95%
&.home
.image-container
margin-right: -9.4%
+media-query(870px)
header
.content-container
>a
margin-left: 1.6%
nav ul li:not(:first-child):before
padding: 0 20px
span.logo
+transform(scale(0.8))
margin-right: -20px
.header-image
&.about
.placeholder
left: 56%
.placeholder
h2
font-size: 28px
line-height: 36px
font-family: 'square_serifmedium', 'Roboto Slab', serif
span
font-size: 28px
line-height: 36px
.logo-inline, .logo-inline.black
+transform(scale(0.6))
margin: 0 -48px -20px -36px
.logo
+transform(scale(0.6))
&.service
img
margin-right: -45px
+media-query(700px)
header
nav ul li:not(:first-child):before
padding: 0 15px
span.logo
+transform(scale(0.65))
.header-image
&.about
.placeholder
h2
font-size: 24px
line-height: 30px
span
font-size: 24px
line-height: 30px
+media-query(670px)
header .content-container
height: 60px !important
border: none
.header-image
margin-top: 60px
&.home
.logo
+transform(scale(0.45))
&.service, &.contact
.logo
+transform(scale(0.5))
+media-query(640px)
.header-image
.placeholder
.logo
+transform(scale(0.45))
&.our_work
.placeholder
left: 37%
h2
font-size: 26px
span
font-size: 26px
&.home
.placeholder
padding-left: 6%
.logo
+transform(scale(0.4))
&.service
.placeholder
h2
font-size: 26px
span
font-size: 26px
.logo-inline, .logo-inline.black
+transform(scale(0.45))
margin: -10px -60px -22px -55px
&.contact
.placeholder
h2
font-size: 24px
line-height: 36px
span
font-size: 24px
line-height: 36px
.logo-inline, .logo-inline.black
+transform(scale(0.45))
margin: -10px -60px -22px -55px
+media-query(560px)
.header-image, .header-image.our_work
.placeholder
h2
font-size: 20px
line-height: 28px
span
font-size: 20px
line-height: 28px
.logo-inline, .logo-inline.black
+transform(scale(0.45))
margin: 0 -60px -22px -55px
&.about
.placeholder
left: 53%
h2
font-size: 20px
line-height: 26px
span
font-size: 20px
line-height: 28px
.logo-inline, .logo-inline.black
+transform(scale(0.45))
margin: -20px -60px -22px -55px
&.service
img
margin-right: -30px
&.contact
.placeholder
.logo
display: none
&.home
.placeholder
.logo
+transform(scale(0.38))
+media-query(525px)
.header-image.service
.placeholder
h2
width: 230px
line-height: 28px
span
line-height: 28px
.logo
display: none
.header-image, .header-image.our_work
.placeholder
.logo
+transform(scale(0.3))
h2
font-size: 18px
line-height: 22px
span
font-size: 18px
line-height: 22px
.logo-inline
+transform(scale(0.35))
margin: -40px -70px -24px -60px
.header-image.contact
.placeholder
h2
width: 200px
font-size: 18px
line-height: 22px
span
font-size: 18px
line-height: 22px
+media-query(480px)
.header-image.service
.placeholder
h2
font-size: 18px
width: 160px
span
font-size: 18px
.logo
display: none
.header-image
&.about
.placeholder
padding: 3%
h2
font-size: 18px
line-height: 24px
span
font-size: 18px
line-height: 24px
+media-query(440px)
.header-image.contact
.placeholder
left: 50%
h2
width: 135px
font-size: 18px
line-height: 24px
span
font-size: 18px
line-height: 24px
.logo
display: none
+media-query(400px)
.header-image.service
img
margin-right: -10px
+media-query(380px)
.header-image, .header-image.our_work, .header-image.about
.placeholder
.logo
+transform(scale(0.2))
h2
font-size: 16px
line-height: 20px
span
font-size: 16px
line-height: 20px
.logo-inline, .logo-inline.black
+transform(scale(0.35))
margin: -35px -60px -24px -65px
.header-image.home
.placeholder
.logo
margin-top: 2%
+transform(scale(0.28))
h2
font-size: 17px
line-height: 22px
span
font-size: 17px
line-height: 22px
.header-image.our_work
.placeholder
h2
.logo-inline
+transform(scale(0.35))
margin: -35px -80px -24px -65px