<commit_before>// =========================================================================
//  Gallery layout
// -> arrange child elements into rows and columns
// =========================================================================

@import '../config/spacing';
@import '../config/scale';
@import '../config/type';

$gallery-gutter: 4px;

// Block
// --------------------------------------------------------------------------

[data-ui-gallery] {
  display: block;
  font-size: 0;
  list-style: none;
  margin: -($gallery-gutter / 2); // offset for column gutters
  position: relative; // in case flexbox isn't supported
  text-align: left;

  > ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
  }

  // use flexbox if supported
  @supports (display: flex) {
    display: flex;
    flex-wrap: wrap;
  }

  // even better: use grid if supported
  @supports (display: grid) {
    // Disable 'spelling' linter b/c it doesn't recognize grid properties
    // scss-lint:disable PropertySpelling
    display: grid;
    grid-column-gap: $gallery-gutter;
    grid-row-gap: $gallery-gutter;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin: 0;
  }
}

// Elements
// --------------------------------------------------------------------------

[data-ui-gallery-item] {
  // Need to break the alphabetical rule order here so it's easier to see how the fallbacks work
  // sass-lint:disable property-sort-order
  display: inline-block;
  font-size: $type-size-default;
  margin: 0;
  padding: ($gallery-gutter / 2);
  position: relative;
  vertical-align: top;

  // fallback fluid sizing method using a calc() hack
  // -> allows grid to be somewhat responsive without media queries
  // -> mainly for IE and old browsers
  // https://www.sitepoint.com/responsive-css-patterns-without-media-queries/
  max-width: 100%;
  min-width: (100% / 3);
  width: calc((800px - 100%) * 1000);

  // CSS grid version
  // -> all the responsive things, all the time, all the glory
  // -> for modern browsers
  @supports (display: grid) {
    // set the grid item as a flex container itself, so it can position its children better
    // use flex here b/c if grid is supported, flex most likely is too
    display: flex;
    max-width: auto;
    min-width: auto;
    padding: 0;
    width: auto;
  }
}


// Traits
// --------------------------------------------------------------------------

// create a variation of .l-gallery with these overrides
// -> example: .l-gallery--small { @include gallery-variation(200px); }
// -> @param NUMBER $min-width: the minimum width of the col, in pixels
// -> @param NUMBER $breakpoint: the point at which the legacy grid will switch to its large view
// -> @param NUMBER $min-percentage: the smallest pecentage width the col can be
// -> @param NUMBER $max-percentage: the largest percentage width the col can be
@mixin gallery-variation(
  $min-width: 240px,
  $breakpoint: 600px,
  $min-percentage: 33%,
  $max-percentage: 100%
) {
  @supports (display: grid) {
    // Disable 'spelling' linter b/c it doesn't recognize grid properties
    // scss-lint:disable PropertySpelling
    grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
  }

  [data-ui-gallery-item] {
    max-width: $max-percentage;
    min-width: $min-percentage;
    width: calc((#{$breakpoint} - 100%) * 1000);
  }
}

[data-ui-gallery~='small'] {
  @include gallery-variation(
    $min-width: 180px,
    $breakpoint: 480px,
    $min-percentage: 25%
  );
}<commit_msg>hotfix for distorted images in image_gallery<commit_after>// =========================================================================
//  Gallery layout
// -> arrange child elements into rows and columns
// =========================================================================

@import '../config/spacing';
@import '../config/scale';
@import '../config/type';

$gallery-gutter: 4px;

// Block
// --------------------------------------------------------------------------

[data-ui-gallery] {
  display: block;
  font-size: 0;
  list-style: none;
  margin: -($gallery-gutter / 2); // offset for column gutters
  position: relative; // in case flexbox isn't supported
  text-align: left;

  > ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
  }

  // use flexbox if supported
  @supports (display: flex) {
    display: flex;
    flex-wrap: wrap;
  }

  // even better: use grid if supported
  @supports (display: grid) {
    // Disable 'spelling' linter b/c it doesn't recognize grid properties
    // scss-lint:disable PropertySpelling
    display: grid;
    grid-column-gap: $gallery-gutter;
    grid-row-gap: $gallery-gutter;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin: 0;
  }
}

// Elements
// --------------------------------------------------------------------------

[data-ui-gallery-item] {
  // Need to break the alphabetical rule order here so it's easier to see how the fallbacks work
  // sass-lint:disable property-sort-order
  display: inline-block;
  font-size: $type-size-default;
  margin: 0;
  padding: ($gallery-gutter / 2);
  position: relative;
  vertical-align: top;

  // fallback fluid sizing method using a calc() hack
  // -> allows grid to be somewhat responsive without media queries
  // -> mainly for IE and old browsers
  // https://www.sitepoint.com/responsive-css-patterns-without-media-queries/
  max-width: 100%;
  min-width: (100% / 3);
  width: calc((800px - 100%) * 1000);

  // CSS grid version
  // -> all the responsive things, all the time, all the glory
  // -> for modern browsers
  @supports (display: grid) and (display: flex) {
    // set the grid item as a flex container itself, so it can position its children better
    // use flex here b/c if grid is supported, flex most likely is too
    display: flex;
    align-items: flex-start;
    max-width: none;
    min-width: auto;
    padding: 0;
    width: auto;
  }
}


// Traits
// --------------------------------------------------------------------------

// create a variation of .l-gallery with these overrides
// -> example: .l-gallery--small { @include gallery-variation(200px); }
// -> @param NUMBER $min-width: the minimum width of the col, in pixels
// -> @param NUMBER $breakpoint: the point at which the legacy grid will switch to its large view
// -> @param NUMBER $min-percentage: the smallest pecentage width the col can be
// -> @param NUMBER $max-percentage: the largest percentage width the col can be
@mixin gallery-variation(
  $min-width: 240px,
  $breakpoint: 600px,
  $min-percentage: 33%,
  $max-percentage: 100%
) {
  @supports (display: grid) {
    // Disable 'spelling' linter b/c it doesn't recognize grid properties
    // scss-lint:disable PropertySpelling
    grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
  }

  [data-ui-gallery-item] {
    max-width: $max-percentage;
    min-width: $min-percentage;
    width: calc((#{$breakpoint} - 100%) * 1000);

    @supports (display: grid) {
      max-width: none;
      min-width: auto;
      width: auto;
    }
  }
}

[data-ui-gallery~='small'] {
  @include gallery-variation(
    $min-width: 180px,
    $breakpoint: 480px,
    $min-percentage: 25%
  );
}
{'fraction_non_alphanumeric': 0.2257127041239967, 'fraction_numerical': 0.016606698034874065, 'mean_word_length': 2.433254156769596, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 25, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, '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': '6882787', 'n_tokens_mistral': 2322, 'n_tokens_neox': 2119, 'n_words': 669}