diff options
Diffstat (limited to 'themes/twentynineteen/sass/media/_galleries.scss')
| -rw-r--r-- | themes/twentynineteen/sass/media/_galleries.scss | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/themes/twentynineteen/sass/media/_galleries.scss b/themes/twentynineteen/sass/media/_galleries.scss new file mode 100644 index 00000000..fbc0bb18 --- /dev/null +++ b/themes/twentynineteen/sass/media/_galleries.scss @@ -0,0 +1,52 @@ +.gallery { + display: flex; + flex-flow: row wrap; + justify-content: center; + margin-bottom: calc(1.5 * #{$size__spacing-unit}); +} + +.gallery-item { + display: inline-block; + margin-right: 16px; + margin-bottom: 16px; + text-align: center; + vertical-align: top; + width: 100%; + + // Loops to enumerate the classes for gallery columns. + @for $i from 2 through 9 { + .gallery-columns-#{$i} & { + max-width: calc((100% - 16px * #{ $i - 1 }) / #{ $i }); + + &:nth-of-type(#{$i}n+#{$i}) { + margin-right: 0; + } + } + } + + &:last-of-type { + padding-right: 0; + } +} + +.gallery-caption { + display: block; + font-size: $font__size-xs; + @include font-family( $font__heading ); + line-height: $font__line-height-pre; + margin: 0; + padding: ( $size__spacing-unit * .5 ); +} + +.gallery-item > div > a { + display: block; + line-height: 0; + + // Accessibility + box-shadow: 0 0 0 0 transparent; + + &:focus { + box-shadow: 0 0 0 2px rgba( $color__link, 1 ); + } +} + |