betterplace-content 0.1.3 → 0.1.4

data/_sass/about-us/feature.sass

@@ -0,0 +1,220 @@
+.feature
+  position: relative
+  background: white
+
+  +desktop
+    padding-bottom: 55px
+
+  +phone
+    padding-bottom: 35px
+
+  h2
+    margin-bottom: 57px
+
+  h3
+    text-align: left
+    font-family: "Open Sans", sans-serif
+    margin: 0
+
+    > a
+      position: relative
+      display: block
+      font-weight: 400
+      color: $very-dark-grey
+      background: $very-light-grey
+
+      +desktop
+        font-size: 22px
+        line-height: 66px
+        border-left: 66px solid $medium-green
+        box-shadow: inset 1px 0 0px 0px #FFF
+        -webkit-box-shadow: inset 1px 0 0px 0px #FFF
+        height: 66px
+        padding: 0 20px
+
+      +phone
+        font-size: 16px
+        line-height: 22px
+        padding: 10px 20px 10px 55px
+
+      strong
+        font-weight: 700
+
+      &:hover,
+      &:focus
+        text-decoration: none
+        background: darken($very-light-grey, 2%)
+        border-left-color: darken($medium-green, 2%)
+
+      &:before
+        content: "+"
+        position: absolute
+        top: 50%
+        margin-top: -8px
+        display: block
+        font-size: 19px
+        background: white
+        border-radius: 10px
+        height: 16px
+        width: 16px
+        line-height: 16px
+        font-weight: bold
+        text-align: center
+        -webkit-font-smoothing: antialiased
+
+        +desktop
+          left: -41px
+          color: $medium-green
+
+        +phone
+          left: 20px
+          color: white
+          background: $medium-green
+
+  h4
+    font: 700 18px / 24px "Open Sans", sans-serif
+
+  .btn + br
+    +desktop
+      display: none
+
+  .btn + br + .btn,
+  .btn + br + a
+    +phone
+      margin-top: 10px
+      display: inline-block
+      vertical-align: top
+
+  .btn + .btn
+    margin-right: 10px
+    margin-left: 10px
+
+  .panel-group
+    .panel+.panel
+      margin-top: 0
+
+    +phone
+      margin: 0 -10px
+
+  .panel-heading
+    padding: 0
+
+  .panel-body
+    text-align: left
+    font-size: 16px
+    line-height: 22px
+
+    +desktop
+      padding: 40px 20px  40px 120px
+
+    +phone
+      padding: 30px 20px 30px  20px
+
+  .panel-collapse
+    +phone
+      transition: none
+
+  .panel.expanded:last-child
+    position: relative
+
+    &:before
+      content: ''
+      position: absolute
+      border-bottom: 1px solid $very-light-grey
+      height: 1px
+
+      +desktop
+        width: 60%
+        left: 20%
+        bottom: -10px
+
+      +phone
+        width: 100%
+        left: 0
+        bottom: 0
+
+  li
+    background: url('/assets/images/about-us/feature-list-bullet.png') no-repeat 0 2px
+    font-size: 14px
+    line-height: 20px
+    margin-bottom: 18px
+    padding-left: 22px
+
+  blockquote
+    font: 300 20px / 28px "Open Sans", sans-serif
+    border: 0
+    background-repeat: no-repeat
+    background-position: 0 0
+    position: relative
+
+    +desktop
+      margin-top: 30px
+      width: 80%
+      height: 123px
+      padding: 20px 0 0 130px
+
+    +phone
+      margin-top: 30px
+      margin-bottom: 0
+      padding: 130px 0 0 0
+      font-size: 16px
+      line-height: 22px
+
+    a
+      font-weight: 300
+
+    small
+      font: inherit
+      color: $very-dark-grey
+      font-weight: 300
+      position: absolute
+
+      +desktop
+        top: 130px
+        left: 0
+        font-size: 12px
+        line-height: 16px
+
+      +phone
+        top: 45px
+        left: 120px
+        font-size: 14px
+        line-height: 20px
+
+      em
+        font-weight: 400
+        display: block
+        font-style: normal
+
+        +phone
+          font-size: 16px
+
+      &:before
+        display: none
+
+  .feature-contact-subline
+    font-size: 14px
+    line-height: 22px
+    margin-top: 30px
+
+    a
+      font-size: 16px
+
+  #for-organisations blockquote
+    background-image: url('/assets/images/about-us/testimonial-organisation.jpg')
+
+  #for-companies blockquote
+    background-image: url('/assets/images/about-us/testimonial-companies.jpg')
+
+  #for-birthdays blockquote
+    background-image: url('/assets/images/about-us/testimonial-birthday.jpg')
+
+  #for-everyone blockquote
+    background-image: url('/assets/images/about-us/testimonial-everyone.jpg')
+
+  .panel.expanded h3 > a:before
+    content: '–'
+    line-height: 13px
+
+  .donors h4 ~ h4
+    margin-top: 40px

data/_sass/about-us/freundeskreis.sass

@@ -0,0 +1,125 @@
+// in blog "about us" reinschieben
+
+.freundeskreis
+  background: white
+
+  h1,
+  h2
+    font-family: "Open Sans", sans-serif
+
+  h1
+    +desktop
+      margin-top: 270px !important
+
+  p
+    font-size: 14px
+    line-height: 18px
+
+  ul.benefits
+    list-style-type: disc
+    text-align: left
+
+    li
+      font-size: 16px
+      line-height: 22px
+      margin-bottom: 5px
+      font-family: "Open Sans", sans-serif
+
+  .navbar-toggle
+    display: none
+
+  .supporter-tiles
+
+    .tile
+      background: $very-light-grey
+      margin-bottom: 20px
+      margin-top: 50px
+      padding: 30px
+      position: relative
+
+      &:before
+        content: ''
+        position: absolute
+        left: 50%
+        top: -40px
+        margin-left: (115px / -2)
+        width: 115px
+        height: 115px
+        background: $very-light-grey
+        border-radius: 100%
+
+      img
+        width: auto
+        height: 70px
+        margin-top: -90px
+        position: relative
+
+      h3
+        font-family: "Caveat", "Comic Sans", serif
+        font-size: 28px
+        line-height: 28px
+        margin: 0
+
+      p
+        margin-bottom: 0
+        margin-top: 20px
+
+  .introduction
+    background: white
+    position: relative
+    z-index: 20
+
+    +desktop
+      box-shadow: 15px 0px 0 0px white, -15px 0px 0 0px white
+      margin-top: -115px
+      padding: 30px 90px 0
+
+    +phone
+      padding: 15px
+
+    p
+      font-size: 18px
+      line-height: 24px
+      font-weight: 300
+      font-family: "Open Sans", sans-serif
+
+    h2
+      margin-bottom: 5px
+
+  .grey-background
+    background: $very-light-grey
+    padding: 30px 0
+    margin: 50px 0 0 0
+
+    h2
+      margin-bottom: 0
+
+    .btn
+      margin: 20px  0 0 0
+
+  #betterplace_donation_iframe
+    background: white !important
+    margin-top: -40px
+
+    +desktop
+      margin-bottom: 50px
+
+  .hides-appended-social-media + .social-sharing
+    display: none
+
+  #betterplace_donation_iframe iframe
+    margin-top: 50px
+
+  .header-illustration
+    background: $very-light-grey
+    border-radius: 100%
+    width: 90px
+    height: 90px
+    margin: -70px auto 0 auto
+    position: relative
+    z-index: 20
+
+    img
+      height: 60px
+      width: auto
+      margin-top: 14px

data/_sass/about-us/generic_content_header.sass

@@ -0,0 +1,46 @@
+.generic-content-header.large-content-header
+  color: white
+  z-index: 10
+
+  +desktop
+    margin-top: -56px
+    padding-top: 41px
+    height: 560px
+    background: url('../images/about-us/generic-content-header_desktop.jpg') no-repeat 50% 0 $very-light-grey
+
+  +phone
+    height: 380px
+    background: url('../images/about-us/generic-content-header_phone.jpg') no-repeat 50% 0
+    padding: 0 20px
+    background-size: cover
+
+  h1
+    text-shadow: 1px 1px 0px #000
+
+    +desktop
+      font: 300 38px/42px 'Open Sans', Arial
+      margin: 303px 0 20px 0
+
+    +phone
+      font: 300 28px/32px 'Open Sans', Arial
+      margin: 180px 0 10px 0
+
+    strong
+      font-weight: 500
+
+  &:before
+    display: none
+
+  .container
+    position: relative
+
+  .subheadline p
+    text-shadow: 1px 1px 0px #000
+
+    +desktop
+      font-size: 18px
+      margin-top: 5px
+
+    +phone
+      font-size: 14px
+      margin-top: 5px

data/_sass/about-us/headlines.sass

@@ -0,0 +1,13 @@
+h2:not(.large-h2-style):not(.small-h2-style):not(.large-h1-style):not(.small-h1-style)
+  font-family: "Open Sans", Arial, sans-serif
+  font-weight: 400
+
+  +desktop
+    font-size: 38px
+    line-height: 40px
+    margin: 50px 0 45px 0
+
+  +phone
+    font-size: 28px
+    line-height: 32px
+    margin: 38px 0 30px 0

data/_sass/about-us/history.sass

@@ -0,0 +1,35 @@
+.history
+  position: relative
+  color: #ffffff
+
+  +desktop
+    background: url('/assets/images/about-us/history-banner-desktop.jpg') no-repeat 50% 0 $very-light-grey
+    height: 560px
+
+  +phone
+    background: url('/assets/images/about-us/history-banner-phone.jpg') no-repeat 40% 0
+    background-size: cover
+    padding-bottom: 20px
+
+  h2
+    color: $very-dark-grey
+
+    +desktop
+      margin-bottom: 165px
+
+    +phone
+      margin-bottom:  25px
+      margin-top: 25px
+
+  p
+    font-family: "Open Sans", sans-serif
+    font-weight: 400
+    text-shadow: 0px 0px 10px #000
+
+    +desktop
+      font-size: 20px
+      line-height: 32px
+
+    +phone
+      font-size: 14px
+      line-height: 20px

data/_sass/about-us/scroll-down.sass

@@ -0,0 +1,47 @@
+.scroll-down
+
+  +desktop
+    position: absolute
+    left: 50%
+    bottom: 0
+    margin-left: -40px
+    border-style: dashed
+    border-width: 1px 1px 0 1px
+    border-color: white
+    display: block
+    width: 80px
+    height: 30px
+    border-radius: 5px 5px 0 0
+    cursor: pointer
+    transition: all 0.025s linear
+
+    &:before
+      content: ''
+      position: absolute
+      top: 10px
+      left: 50%
+      margin-left: -10px
+      width: 0
+      height: 0
+      border-style: solid
+      border-width: 10px 10px 0 10px
+      border-color: white transparent transparent transparent
+
+    &:hover
+      background: rgba(255, 255, 255, 0.1)
+
+    &.dark-style
+      border-color: $light-grey
+
+      &:before
+        border-top-color: $light-grey
+
+      &:hover
+        background: inherit
+        border-color: darken($light-grey, 5%)
+
+        &:before
+          border-top-color: darken($light-grey, 5%)
+
+  +phone
+    display: none

data/_sass/about-us/social-sharing.sass

@@ -0,0 +1,14 @@
+.social-sharing
+  padding-bottom: 55px
+  background: white
+
+  h2
+    +desktop
+      margin-top:  66px
+      font-size:   32px
+      line-height: 40px
+
+    +phone
+      margin-top:  39px
+      font-size:   28px
+      line-height: 32px

data/_sass/about-us/team.sass

@@ -0,0 +1,30 @@
+.team
+  position: relative
+  color: white
+
+  +desktop
+    background: url('../images/about-us/team-teaser-desktop.jpg') no-repeat 50% 0 $very-light-grey
+    height: 560px
+
+  +phone
+    background: url('../images/about-us/team-teaser-phone.jpg') no-repeat 40% center $very-light-grey
+    height: 380px
+    background-size: cover
+
+  h2
+    text-shadow: 1px 1px 0px #000
+
+    +desktop
+      margin-bottom: 292px
+
+    +phone
+      margin-bottom: 182px
+      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65)
+
+  .btn
+    margin-bottom: 43px
+
+  a:not(.btn)
+    color: white
+    text-decoration: none
+    font-weight: normal

data/_sass/about-us/transparency.sass

@@ -0,0 +1,48 @@
+.transparency
+  background: #eeefea
+  position: relative
+
+  +desktop
+    padding-bottom: 30px
+
+  h2
+    margin-bottom: 23px
+
+  p
+    font-size: 20px
+    line-height: 32px
+    font-family: "Open Sans", sans-serif
+    font-weight: 300
+    margin-bottom: 20px
+
+  .transparency-international
+    margin-top: 50px
+    margin-bottom: 20px
+
+    img
+      display: inline-block
+      width: 260px
+      vertical-align: top
+      margin-right: 25px
+
+      +phone
+        margin-bottom: 20px
+
+    .copytext
+      display: inline-block
+
+      vertical-align: top
+      font-size: 14px
+      line-height: 18px
+      font-weight: 400
+
+      +desktop
+        text-align: left
+        width: 400px
+
+      a
+        display: inline-block
+        margin-top: 5px
+
+    p:empty
+      display: none