<commit_before>$ad-width: 300px
$footer-height: 250px
$nav-height: 187px
$slide-width-phone-small: 320px
$slide-width-phone: 480px
$slide-width-tablet: 768px
$slide-width: 1000px

@mixin slide-width($offset: 0)
  width: $slide-width-phone-small
  +respond-to(480)
    width: $slide-width-phone + $offset
  +respond-to(768)
    width: $slide-width-tablet + $offset
  +respond-to(1000)
    width: $slide-width + $offset

@mixin slide-height()
  height: ($slide-width-phone-small / 3) * 2
  +respond-to(480)
    height: ($slide-width-phone / 3) * 2
  +respond-to(768)
    height: ($slide-width-tablet / 16) * 9
  +respond-to(1000)
    height: ($slide-width / 3) * 2

.gallery
  +slide-width()
  margin: auto
  transition: left .5s ease

.gallery__controls
  +slide-height()
  left: 0
  position: absolute
  width: 100%

.gallery__slide-background
  +slide-height()
  background: $body-copy
  left: 0
  position: absolute
  width: 100%
  .gallery-box &
    top: 120px

.gallery__slide-container
  +hardware-acceleration()
  +slide-height()
  clear: both
  position: relative
  transition: margin-left 0.2s ease-in-out
  overflow: hidden
  .is-loading &
    padding-left: 100%

.gallery__slide
  +hardware-acceleration()
  +slide-height()
  +slide-width()
  float: left
  &.is-loading.is-current:after
    content: " "
    position: absolute
    top: 50%
    left: 50%
    width: 1em
    height: 1em
    margin: -0.5em 0 0 -0.5em
    background: rgba(125, 125, 125, 0.5)
    border-radius: 100%
    animation: discmove 2s cubic-bezier(0.6, 1, 1, 1) infinite
  &.is-previous,
  &.is-next
    cursor: pointer
    opacity: .9
    &:hover
      opacity: 1

.gallery__img
  display: block
  min-height: 100%
  opacity: 0
  transition: opacity 0.3s ease-in-out
  width: 100%
  .gallery__slide.is-loaded.is-current &
    opacity: 1
  .gallery__slide.is-loaded.is-previous &,
  .gallery__slide.is-loaded.is-next &
    display: block
    opacity: .7

.gallery__img--portrait
  display: block
  height: 100%
  margin: auto
  width: auto

.gallery__title
  +font-size(20)
  color: $body-copy
  padding-bottom: 10px
  +respond-to(768)
    +font-size(26)
  +respond-to(1000)
    +font-size(30)

.gallery__breadcrumb
  +font-size(11)
  font-weight: bold
  text-transform: uppercase
  +respond-to(480)
    +font-size(12)
  +respond-to(768)
    +font-size(14)
  +respond-to(1000)
    line-height: 2

  &:before
    +size(14px)
    display: inline-block
    vertical-align: middle

.gallery__footer
  +slide-width()
  background: white
  height: $footer-height
  overflow: hidden

.gallery__description
  +slide-width(- $ad-width)
  background: white
  border-radius: 0 0 0 4px
  box-sizing: border-box
  float: left
  height: $footer-height
  padding: 20px
  position: relative

.gallery__social .sharing
  padding: 10px 0 40px 0
  border-top: none
  .split--right
    display: none
  .sharing__label
    display: none
  .facebook-like
    margin: 0
    top: 0

.gallery__subject-leadin
  +font-size(12)
  color: $darkblue
  font-weight: bold
  text-transform: uppercase

.gallery__poi-title
  +font-size(12)
  font-weight: bold
  line-height: 2
  color: $body-copy
  &:before
    width: 20px
    height: 24px
    display: inline-block
    vertical-align: middle

.gallery__quote
  +font-size(14)
  border-left-style: solid
  border-left-width: 2px
  line-height: 1.2
  margin-left: 9px
  padding: 5px 0 5px 15px
  &.gallery__quote--sight
    border-color: $red

.gallery__mpu
  background: white
  display: none
  float: left
  height: $footer-height
  width: $ad-width
  +respond-to(480)
    display: block

.gallery-underlay
  background: $body-background
  background: rgba($body-background, 0.95)
  bottom: 0
  left: 0
  opacity: 0
  position: fixed
  right: 0
  top: 0
  transition: opacity 1s
  z-index: 10
  &.is-active
    opacity: 1

.gallery-box
  +hardware-acceleration()
  left: 0
  height: 100%
  opacity: 0
  overflow: hidden
  position: absolute
  top: 0
  transition: opacity .5s, left 1s
  width: 100%
  z-index: 20
  &.is-active
    opacity: 1
  &.is-loading
    left: 100%

.gallery-box__close
  +size(40px)
  margin: 40px 20px
  cursor: pointer
  opacity: .25

.gallery__next,
.gallery__previous
  background: #888
  background: rgba(#000, 0.5)
  padding: 10px 0
  display: inline-block
  font-weight: bold
  height: 50px
  line-height: 50px
  position: absolute
  color: white
  text-decoration: none
  top: 50%
  transition: left 0.2s, right 0.2s, opacity 0.1s
  white-space: nowrap
  width: 100px
  z-index: 10
  &:hover
    text-decoration: none
  .supports-touch &
    display: none

.gallery__next:before,
.gallery__previous:after
  display: inline-block
  height: 50px
  vertical-align: top
  width: 35px

.gallery__previous
  left: -50px
  border-radius: 0 50px 50px 0
  .at-beginning &
    opacity: 0
    pointer-events: none
  &:after
    margin-right: 15px
  &:hover,
  &.is-hover
    left: 0

.gallery__next
  right: -50px
  border-radius: 50px 0 0 50px
  .at-end &
    opacity: 0
    pointer-events: none
  &:before
    margin-left: 15px
  &:hover,
  &.is-hover
    right: 0

.gallery__slide-counter
  bottom: 0
  display: none
  right: 0
  padding: 1em
  position: absolute
  z-index: 10
<commit_msg>alternate the colour on slides so that one might be able to the difference between a portrait image and its neighbour<commit_after>$ad-width: 300px
$footer-height: 250px
$nav-height: 187px
$slide-width-phone-small: 320px
$slide-width-phone: 480px
$slide-width-tablet: 768px
$slide-width: 1000px

@mixin slide-width($offset: 0)
  width: $slide-width-phone-small
  +respond-to(480)
    width: $slide-width-phone + $offset
  +respond-to(768)
    width: $slide-width-tablet + $offset
  +respond-to(1000)
    width: $slide-width + $offset

@mixin slide-height()
  height: ($slide-width-phone-small / 3) * 2
  +respond-to(480)
    height: ($slide-width-phone / 3) * 2
  +respond-to(768)
    height: ($slide-width-tablet / 16) * 9
  +respond-to(1000)
    height: ($slide-width / 3) * 2

.gallery
  +slide-width()
  margin: auto
  transition: left .5s ease

.gallery__controls
  +slide-height()
  left: 0
  position: absolute
  width: 100%

.gallery__slide-background
  +slide-height()
  background: $body-copy
  left: 0
  position: absolute
  width: 100%
  .gallery-box &
    top: 120px

.gallery__slide-container
  +hardware-acceleration()
  +slide-height()
  clear: both
  position: relative
  transition: margin-left 0.2s ease-in-out
  overflow: hidden
  .is-loading &
    padding-left: 100%

.gallery__slide
  +hardware-acceleration()
  +slide-height()
  +slide-width()
  float: left
  &:nth-child(even)
    background-color: #3E4752
  &.is-loading.is-current:after
    content: " "
    position: absolute
    top: 50%
    left: 50%
    width: 1em
    height: 1em
    margin: -0.5em 0 0 -0.5em
    background: rgba(125, 125, 125, 0.5)
    border-radius: 100%
    animation: discmove 2s cubic-bezier(0.6, 1, 1, 1) infinite
  &.is-previous,
  &.is-next
    cursor: pointer
    opacity: .9
    &:hover
      opacity: 1

.gallery__img
  display: block
  min-height: 100%
  opacity: 0
  transition: opacity 0.3s ease-in-out
  width: 100%
  .gallery__slide.is-loaded.is-current &
    opacity: 1
  .gallery__slide.is-loaded.is-previous &,
  .gallery__slide.is-loaded.is-next &
    display: block
    opacity: .7

.gallery__img--portrait
  display: block
  height: 100%
  margin: auto
  width: auto

.gallery__title
  +font-size(20)
  color: $body-copy
  padding-bottom: 10px
  +respond-to(768)
    +font-size(26)
  +respond-to(1000)
    +font-size(30)

.gallery__breadcrumb
  +font-size(11)
  font-weight: bold
  text-transform: uppercase
  +respond-to(480)
    +font-size(12)
  +respond-to(768)
    +font-size(14)
  +respond-to(1000)
    line-height: 2

  &:before
    +size(14px)
    display: inline-block
    vertical-align: middle

.gallery__footer
  +slide-width()
  background: white
  height: $footer-height
  overflow: hidden

.gallery__description
  +slide-width(- $ad-width)
  background: white
  border-radius: 0 0 0 4px
  box-sizing: border-box
  float: left
  height: $footer-height
  padding: 20px
  position: relative

.gallery__social .sharing
  padding: 10px 0 40px 0
  border-top: none
  .split--right
    display: none
  .sharing__label
    display: none
  .facebook-like
    margin: 0
    top: 0

.gallery__subject-leadin
  +font-size(12)
  color: $darkblue
  font-weight: bold
  text-transform: uppercase

.gallery__poi-title
  +font-size(12)
  font-weight: bold
  line-height: 2
  color: $body-copy
  &:before
    width: 20px
    height: 24px
    display: inline-block
    vertical-align: middle

.gallery__quote
  +font-size(14)
  border-left-style: solid
  border-left-width: 2px
  line-height: 1.2
  margin-left: 9px
  padding: 5px 0 5px 15px
  &.gallery__quote--sight
    border-color: $red

.gallery__mpu
  background: white
  display: none
  float: left
  height: $footer-height
  width: $ad-width
  +respond-to(480)
    display: block

.gallery-underlay
  background: $body-background
  background: rgba($body-background, 0.95)
  bottom: 0
  left: 0
  opacity: 0
  position: fixed
  right: 0
  top: 0
  transition: opacity 1s
  z-index: 10
  &.is-active
    opacity: 1

.gallery-box
  +hardware-acceleration()
  left: 0
  height: 100%
  opacity: 0
  overflow: hidden
  position: absolute
  top: 0
  transition: opacity .5s, left 1s
  width: 100%
  z-index: 20
  &.is-active
    opacity: 1
  &.is-loading
    left: 100%

.gallery-box__close
  +size(40px)
  margin: 40px 20px
  cursor: pointer
  opacity: .25

.gallery__next,
.gallery__previous
  background: #888
  background: rgba(#000, 0.5)
  padding: 10px 0
  display: inline-block
  font-weight: bold
  height: 50px
  line-height: 50px
  position: absolute
  color: white
  text-decoration: none
  top: 50%
  transition: left 0.2s, right 0.2s, opacity 0.1s
  white-space: nowrap
  width: 100px
  z-index: 10
  &:hover
    text-decoration: none
  .supports-touch &
    display: none

.gallery__next:before,
.gallery__previous:after
  display: inline-block
  height: 50px
  vertical-align: top
  width: 35px

.gallery__previous
  left: -50px
  border-radius: 0 50px 50px 0
  .at-beginning &
    opacity: 0
    pointer-events: none
  &:after
    margin-right: 15px
  &:hover,
  &.is-hover
    left: 0

.gallery__next
  right: -50px
  border-radius: 50px 0 0 50px
  .at-end &
    opacity: 0
    pointer-events: none
  &:before
    margin-left: 15px
  &:hover,
  &.is-hover
    right: 0

.gallery__slide-counter
  bottom: 0
  display: none
  right: 0
  padding: 1em
  position: absolute
  z-index: 10

{'fraction_non_alphanumeric': 0.12114912114912114, 'fraction_numerical': 0.05452655452655453, 'mean_word_length': 2.9636704119850186, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7581483', 'n_tokens_mistral': 4508, 'n_tokens_neox': 3923, 'n_words': 985}