_galleries.scss 922 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. .gallery {
  2. display: flex;
  3. flex-flow: row wrap;
  4. justify-content: center;
  5. margin-bottom: calc(1.5 * #{$size__spacing-unit});
  6. }
  7. .gallery-item {
  8. display: inline-block;
  9. margin-right: 16px;
  10. margin-bottom: 16px;
  11. text-align: center;
  12. vertical-align: top;
  13. width: 100%;
  14. // Loops to enumerate the classes for gallery columns.
  15. @for $i from 2 through 9 {
  16. .gallery-columns-#{$i} & {
  17. max-width: calc((100% - 16px * #{ $i - 1 }) / #{ $i });
  18. &:nth-of-type(#{$i}n+#{$i}) {
  19. margin-right: 0;
  20. }
  21. }
  22. }
  23. &:last-of-type {
  24. padding-right: 0;
  25. }
  26. }
  27. .gallery-caption {
  28. display: block;
  29. font-size: $font__size-xs;
  30. font-family: $font__heading;
  31. line-height: $font__line-height-pre;
  32. margin: 0;
  33. padding: ( $size__spacing-unit * .5 );
  34. }
  35. .gallery-item > div > a {
  36. display: block;
  37. line-height: 0;
  38. // Accessibility
  39. box-shadow: 0 0 0 0 transparent;
  40. &:focus {
  41. box-shadow: 0 0 0 2px rgba( $color__link, 1 );
  42. }
  43. }