<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-outer, .show-assets-outer
  @include grid-wrap
  margin-bottom: $baseline * 2
  @include set-property-to-gutter(padding-top)
  background: $show-photos-bg

  overflow: hidden

// .show-photos-outer

@mixin gallery-outer
  @include flex-row
  @include flex-direction(horizontal)
  @include flex-wrap(wrap)

@mixin gallery-item

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

  flex-grow: 1
  flex-shrink: 1

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

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

.show-photos
  @include gallery-outer

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

  padding-bottom: 0
  margin-bottom: 0

  // Show-y hide-y

  @include transition(max-height 0.3s ease-out)

  max-height: 17rem
  overflow: hidden

  &.toggle-show
    // max-height: 9999px

  .show-photo-single
    @include gallery-item

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

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

    @include respond-down(mob-land)
      // Only show 4 photos on mobile
      // VERY HACKY, the remaining images are still loaded
      // We should stop this with JS
      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

.show-photos-controls-bar
  @include flex-row
  @include 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

      &:hover
        text-decoration: none


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

    &:hover
      background: darken($color-nnt-purple, 10%)

    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

    @include flex-basis(25%)
    @include 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: 4rem
    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
    @include gallery-item
    max-width: 25%
  .show-asset-file
    background: darken($color-nnt-purple, 20%)
    position: relative
    i
      position: absolute
      font-size: 91px
      top: -18px
      right: 10px
      opacity: 0.2
      pointer-events: none // Ensure clicks go though to the anchor
    a
      display: block
      text-decoration: none
      color: $color-text-white<commit_msg>Mobile styling tweaks for photo gallery<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
  @include grid-wrap
  margin-bottom: $baseline * 2
  background: $show-photos-bg

  overflow: hidden

// .show-photos-outer

@mixin gallery-outer
  @include flex-row
  @include flex-direction(horizontal)
  @include flex-wrap(wrap)

@mixin gallery-item

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

  flex-grow: 1
  flex-shrink: 1

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

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

.show-photos
  @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
  @include transition(max-height 0.3s ease-out)

  &.toggle-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: 45%
    overflow: hidden

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

    @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-bar
  @include flex-row
  @include 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

      &:hover
        text-decoration: none


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

    &:hover
      background: darken($color-nnt-purple, 10%)

    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

    @include flex-basis(25%)
    @include 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: 3rem
    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
    @include gallery-item
    max-width: 25%
  .show-asset-file
    background: darken($color-nnt-purple, 20%)
    position: relative
    i
      position: absolute
      font-size: 91px
      top: -18px
      right: 10px
      opacity: 0.2
      pointer-events: none // Ensure clicks go though to the anchor
    a
      display: block
      text-decoration: none
      color: $color-text-white
{'fraction_non_alphanumeric': 0.11461665747380033, 'fraction_numerical': 0.022614451185879757, 'mean_word_length': 2.249462365591398, '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': '6153908', 'n_tokens_mistral': 3303, 'n_tokens_neox': 2995, 'n_words': 776}