diff options
Diffstat (limited to 'srcs/wordpress/wp-content/themes/twentynineteen/sass/media')
3 files changed, 125 insertions, 0 deletions
diff --git a/srcs/wordpress/wp-content/themes/twentynineteen/sass/media/_captions.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/media/_captions.scss new file mode 100644 index 0000000..761eb2f --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentynineteen/sass/media/_captions.scss @@ -0,0 +1,32 @@ +.wp-caption { + margin-bottom: calc(1.5 * #{$size__spacing-unit}); + + &.aligncenter { + + @include media(tablet) { + position: relative; + left: calc( #{$size__site-tablet-content} / 2 ); + transform: translateX( -50% ); + } + + @include media(desktop) { + left: calc( #{$size__site-desktop-content} / 2 ); + } + } +} + +.wp-caption img[class*="wp-image-"] { + display: block; + margin-left: auto; + margin-right: auto; +} + +.wp-caption-text { + color: $color__text-light; + font-size: $font__size-xs; + @include font-family( $font__heading ); + line-height: $font__line-height-pre; + margin: 0; + padding: ( $size__spacing-unit * .5 ); + text-align: center; +} diff --git a/srcs/wordpress/wp-content/themes/twentynineteen/sass/media/_galleries.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/media/_galleries.scss new file mode 100644 index 0000000..fbc0bb1 --- /dev/null +++ b/srcs/wordpress/wp-content/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 ); + } +} + diff --git a/srcs/wordpress/wp-content/themes/twentynineteen/sass/media/_media.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/media/_media.scss new file mode 100644 index 0000000..3fba8c6 --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentynineteen/sass/media/_media.scss @@ -0,0 +1,41 @@ +.page-content .wp-smiley, +.entry-content .wp-smiley, +.comment-content .wp-smiley { + border: none; + margin-bottom: 0; + margin-top: 0; + padding: 0; +} + +embed, +iframe, +object { + max-width: 100%; +} + +.custom-logo-link { + display: inline-block; +} + +.avatar { + border-radius: 100%; + display: block; + height: calc(2.25 * #{$size__spacing-unit}); + min-height: inherit; + width: calc(2.25 * #{$size__spacing-unit}); +} + +svg { + transition: fill $icon_transition ease-in-out; + fill: currentColor; +} + +/*-------------------------------------------------------------- +## Captions +--------------------------------------------------------------*/ +@import "captions"; + +/*-------------------------------------------------------------- +## Galleries +--------------------------------------------------------------*/ +@import "galleries"; |