<commit_before>// Show pages

.show
  margin-bottom: $baseline * 2

.show-wrap
  @include grid-wrap

.show-row
  @include grid-row

.show-info
  @include grid-x-col(10)

.show-header
  @include grid-row


.show-poster
  @include grid-x-col(6)
  float: right !important // HACK
  img
    width: 100%
    padding-right: 0 // Remove

  @include respond-down($grid-column-end)
    // Hide on single col
    display: none

.show-synopsys
  @include block

$show-photos-bg: $color-black
$show-photos-mob-gutter: 7px

.show-photos-outer, .show-assets-outer
  // Contain gallery and controlls
  margin-bottom: $baseline * 2
  background: $show-photos-bg

  overflow: hidden

// .show-photos-outer

@mixin gallery-outer
  @include flex-row
  flex-direction: row
  flex-wrap: wrap

@mixin gallery-item

  @include set-property-to-gutter(padding-right)
  @include set-property-to-gutter(margin-bottom)

  flex-shrink: 1
  flex-grow: 1

  // // Mobile, two per line
  // @include flex-basis(50%)

  // @include respond-up(tab-port)
  //   // Desktop 4 per line
  //   @include flex-basis(25%)

.show-photos
  // Contains gallery
  @include grid-wrap

.show-photos__inner
  @include gallery-outer

  padding-top: $show-photos-mob-gutter

  padding-bottom: 0
  margin-bottom: 0

  @include respond-up(tab-port)
    max-height: 17rem
    overflow: hidden
    padding-top: $baseline

  // Show-y hide-y
  transition: max-height 0.3s ease-out

  &.show-photos__inner--show
    // We now calculate a max-height on an ad-hoc basis
    // max-height: 9999px

  .show-photo-single
    @include gallery-item

    // Crop all photos to prevent horrible overflows
    max-height: 200px
    max-width: 75%
    overflow: hidden

    @include respond-up(tab-land)
      max-width: 45%


    &:last-child, &:nth-last-child(2)
      // Last and penultimate items cannot be wider than a 1/3
      max-width: 33.333333%

    img
      position: relative
      width: 100%
      box-shadow: 0px -1px darken($color-black, 20%)

    a
      @include no-underline
      &:focus
        // Set whole element background to focus
        background: $color-focus
        outline: none
        img
          // Semi-trans the image so you can see the colour thru it
          opacity: 0.4

    @include respond-down(mob-land)
      // 2x2 grid
      max-width: 50%
      margin-bottom: $show-photos-mob-gutter
      max-height: 165px

      // Only show 4 photos on mobile
      display: none
      &:nth-child(1)
        display: block
      &:nth-child(2)
        display: block
      &:nth-child(3)
        display: block
      &:nth-child(4)
        display: block

      &:nth-child(2n-1)
        // Add padding between images
        padding-right: 6px

    @include respond-down(mob-port)
      // Rather limiting, put prevents uglyness
      max-height: 100px


.show-photos-controls
  @include grid-wrap
  overflow: visible

.show-photos-controls--sticky
  position: fixed
  bottom: 0
  left: 0
  width: 100%

.show-photos-controls__inner
  @include flex-row
  flex-direction: horizontal
  position: relative // so .fade-out-overlay can be absolute

  margin-bottom: 0

  @include set-property-to-gutter(padding-right)

  .gallery-control, .smugmug-link
    a
      // Full size anchor, is the inner container
      display: block
      padding: $baseline / 3

      @include no-underline

  .gallery-control
    flex-basis: 75%
    background: darken($color-black, 4%)

    a
      text-align: center
      color: $color-text-white

    i
      // Padding between icons and text
      padding: 0 16px

    .hide-label
      // Initial state of this until jQuery fiddles with it
      display: none

    @include respond-down(mob-land)
      display: none

  .smugmug-link
    $color-smugmug: #5B8800

    flex-basis: 25%
    flex: 1
    overflow: hidden

    background: darken($color-smugmug, 22%)

    &:hover
      background: darken($color-smugmug, 15%)

    a
      // Full size anchor, is the inner container
      margin-bottom: 0
      overflow: hidden
      position: relative // For absolute use in .smugmug-link-logo

    .smugmug-link-logo
      position: absolute
      top: 3px
      left: 2px
      img
        // position: relative
        // top: 4px
        opacity: 0.2

    .smugmug-link-text
      padding-left: 41px
      padding-top: 3px
      font-size: 13px
      color: $color-grey
      text-align: center

  .fade-out-overlay
    $fade-out-v-size: 40px
    position: absolute
    top: -$fade-out-v-size
    width: 100%
    height: $fade-out-v-size

    background: rgba($show-photos-bg, 0.8)

    @include respond-down(mob-land)
      display: none

.show-assets-list
  @include list-unformatted
  @include gallery-outer

  .show-asset-file, .show-asset-image, .show-asset-video
    @include gallery-item
    @include respond-down(mob-land)
      max-width: 33%
      padding-right: 6px
      &:nth-child(3n)
        padding-right: 0
    @include respond-up(tab-port)
      max-width: 25%
    a
      display: block
      height: 100%
      min-height: 160px // I measured this, 110

      display: flex
      flex-direction: column
      justify-content: space-between

      color: $color-text-white
      @include no-underline

    .show-asset-video__title, .show-asset-file__title
      padding: 0.5rem

  .show-asset-image
    a
      background: grayscale($color-background)
      justify-content: center
    img
      width: 100%

  .show-asset-video
    a
      background: lighten(grayscale($color-background), 05%)

    .show-asset-video__clapper
      background: url('/images/svg/clapper-chevron.svg')
      background-repeat: repeat-x
      // Offset, makes look slightly better
      background-position: -19px
      opacity: 0.8

    img
      width: 100%

  .show-asset-file
    a
      background: darken($color-nnt-purple, 25%)

    .show-asset-file__icon
      font-size: 91px
      opacity: 0.2
      text-align: center

.show-cast, .show-crew
  @include grid-x-col(8)
<commit_msg>Up contrast of show asset backgrounds a little<commit_after>// Show pages

.show
  margin-bottom: $baseline * 2

.show-wrap
  @include grid-wrap

.show-row
  @include grid-row

.show-info
  @include grid-x-col(10)

.show-header
  @include grid-row


.show-poster
  @include grid-x-col(6)
  float: right !important // HACK
  img
    width: 100%
    padding-right: 0 // Remove

  @include respond-down($grid-column-end)
    // Hide on single col
    display: none

.show-synopsys
  @include block

$show-photos-bg: $color-black
$show-photos-mob-gutter: 7px

.show-photos-outer, .show-assets-outer
  // Contain gallery and controlls
  margin-bottom: $baseline * 2
  background: $show-photos-bg

  overflow: hidden

// .show-photos-outer

@mixin gallery-outer
  @include flex-row
  flex-direction: row
  flex-wrap: wrap

@mixin gallery-item

  @include set-property-to-gutter(padding-right)
  @include set-property-to-gutter(margin-bottom)

  flex-shrink: 1
  flex-grow: 1

  // // Mobile, two per line
  // @include flex-basis(50%)

  // @include respond-up(tab-port)
  //   // Desktop 4 per line
  //   @include flex-basis(25%)

.show-photos
  // Contains gallery
  @include grid-wrap

.show-photos__inner
  @include gallery-outer

  padding-top: $show-photos-mob-gutter

  padding-bottom: 0
  margin-bottom: 0

  @include respond-up(tab-port)
    max-height: 17rem
    overflow: hidden
    padding-top: $baseline

  // Show-y hide-y
  transition: max-height 0.3s ease-out

  &.show-photos__inner--show
    // We now calculate a max-height on an ad-hoc basis
    // max-height: 9999px

  .show-photo-single
    @include gallery-item

    // Crop all photos to prevent horrible overflows
    max-height: 200px
    max-width: 75%
    overflow: hidden

    @include respond-up(tab-land)
      max-width: 45%


    &:last-child, &:nth-last-child(2)
      // Last and penultimate items cannot be wider than a 1/3
      max-width: 33.333333%

    img
      position: relative
      width: 100%
      box-shadow: 0px -1px darken($color-black, 20%)

    a
      @include no-underline
      &:focus
        // Set whole element background to focus
        background: $color-focus
        outline: none
        img
          // Semi-trans the image so you can see the colour thru it
          opacity: 0.4

    @include respond-down(mob-land)
      // 2x2 grid
      max-width: 50%
      margin-bottom: $show-photos-mob-gutter
      max-height: 165px

      // Only show 4 photos on mobile
      display: none
      &:nth-child(1)
        display: block
      &:nth-child(2)
        display: block
      &:nth-child(3)
        display: block
      &:nth-child(4)
        display: block

      &:nth-child(2n-1)
        // Add padding between images
        padding-right: 6px

    @include respond-down(mob-port)
      // Rather limiting, put prevents uglyness
      max-height: 100px


.show-photos-controls
  @include grid-wrap
  overflow: visible

.show-photos-controls--sticky
  position: fixed
  bottom: 0
  left: 0
  width: 100%

.show-photos-controls__inner
  @include flex-row
  flex-direction: horizontal
  position: relative // so .fade-out-overlay can be absolute

  margin-bottom: 0

  @include set-property-to-gutter(padding-right)

  .gallery-control, .smugmug-link
    a
      // Full size anchor, is the inner container
      display: block
      padding: $baseline / 3

      @include no-underline

  .gallery-control
    flex-basis: 75%
    background: darken($color-black, 4%)

    a
      text-align: center
      color: $color-text-white

    i
      // Padding between icons and text
      padding: 0 16px

    .hide-label
      // Initial state of this until jQuery fiddles with it
      display: none

    @include respond-down(mob-land)
      display: none

  .smugmug-link
    $color-smugmug: #5B8800

    flex-basis: 25%
    flex: 1
    overflow: hidden

    background: darken($color-smugmug, 22%)

    &:hover
      background: darken($color-smugmug, 15%)

    a
      // Full size anchor, is the inner container
      margin-bottom: 0
      overflow: hidden
      position: relative // For absolute use in .smugmug-link-logo

    .smugmug-link-logo
      position: absolute
      top: 3px
      left: 2px
      img
        // position: relative
        // top: 4px
        opacity: 0.2

    .smugmug-link-text
      padding-left: 41px
      padding-top: 3px
      font-size: 13px
      color: $color-grey
      text-align: center

  .fade-out-overlay
    $fade-out-v-size: 40px
    position: absolute
    top: -$fade-out-v-size
    width: 100%
    height: $fade-out-v-size

    background: rgba($show-photos-bg, 0.8)

    @include respond-down(mob-land)
      display: none

.show-assets-list
  @include list-unformatted
  @include gallery-outer

  .show-asset-file, .show-asset-image, .show-asset-video
    @include gallery-item
    @include respond-down(mob-land)
      max-width: 33%
      padding-right: 6px
      &:nth-child(3n)
        padding-right: 0
    @include respond-up(tab-port)
      max-width: 25%
    a
      display: block
      height: 100%
      min-height: 160px // I measured this, 110

      display: flex
      flex-direction: column
      justify-content: space-between

      color: $color-text-white
      @include no-underline

    .show-asset-video__title, .show-asset-file__title
      padding: 0.5rem

  .show-asset-image
    a
      background: lighten(grayscale($color-background), 05%)
      justify-content: center
    img
      width: 100%

  .show-asset-video
    a
      background: lighten(grayscale($color-background), 10%)

    .show-asset-video__clapper
      background: url('/images/svg/clapper-chevron.svg')
      background-repeat: repeat-x
      // Offset, makes look slightly better
      background-position: -19px
      opacity: 0.8

    img
      width: 100%

  .show-asset-file
    a
      background: darken($color-nnt-purple, 25%)

    .show-asset-file__icon
      font-size: 91px
      opacity: 0.2
      text-align: center

.show-cast, .show-crew
  @include grid-x-col(8)

{'fraction_non_alphanumeric': 0.11222711048393791, 'fraction_numerical': 0.025400514650950445, 'mean_word_length': 2.1797307996832935, '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': '3661871', 'n_tokens_mistral': 4402, 'n_tokens_neox': 3960, 'n_words': 1024}