diff --git a/themes/wporg-5ftf/css/components/_about.scss b/themes/wporg-5ftf/css/components/_about.scss index 9931a19..fff6bcc 100644 --- a/themes/wporg-5ftf/css/components/_about.scss +++ b/themes/wporg-5ftf/css/components/_about.scss @@ -22,13 +22,16 @@ body.page-about .entry-content { > h4, > h5, > h6, - > .wp-block-quote, > .wp-block-media-text, > .wp-block-button, > .wp-block-group { margin-left: 17.5rem; } + > .wp-block-quote { + margin-left: calc( 17.5rem - 62px ); + } + p.is-style-wporg-tldr { margin-left: auto; } diff --git a/themes/wporg-5ftf/css/objects/_gallery.scss b/themes/wporg-5ftf/css/objects/_gallery.scss new file mode 100644 index 0000000..c5c41c3 --- /dev/null +++ b/themes/wporg-5ftf/css/objects/_gallery.scss @@ -0,0 +1,6 @@ +.wp-block-gallery { + + ul { + margin-left: 0; + } +} diff --git a/themes/wporg-5ftf/css/objects/_media-text.scss b/themes/wporg-5ftf/css/objects/_media-text.scss new file mode 100644 index 0000000..4e31c63 --- /dev/null +++ b/themes/wporg-5ftf/css/objects/_media-text.scss @@ -0,0 +1,16 @@ +.wp-block-media-text { + + &.has-media-on-the-right { + + .wp-block-media-text__content { + padding-left: 0; + } + } + + &.has-media-on-the-left { + + .wp-block-media-text__content { + padding-right: 0; + } + } +} diff --git a/themes/wporg-5ftf/css/objects/_objects.scss b/themes/wporg-5ftf/css/objects/_objects.scss index 6608b90..aff0945 100644 --- a/themes/wporg-5ftf/css/objects/_objects.scss +++ b/themes/wporg-5ftf/css/objects/_objects.scss @@ -7,8 +7,11 @@ @import "../../../pub/wporg/css/objects/links"; @import "../../../pub/wporg/css/objects/notices"; @import "buttons"; +@import "gallery"; @import "hero"; @import "image"; +@import "media-text"; @import "pledge-form"; @import "pledge"; @import "pullquote"; +@import "quote"; diff --git a/themes/wporg-5ftf/css/objects/_quote.scss b/themes/wporg-5ftf/css/objects/_quote.scss new file mode 100644 index 0000000..e518ea9 --- /dev/null +++ b/themes/wporg-5ftf/css/objects/_quote.scss @@ -0,0 +1,36 @@ +.wp-block-quote { + padding-left: 0; + border-left: none; + font-family: $font__serif; + font-size: ms(2); + + p { + color: $color__text; + } + + cite { + font-size: ms(-1); + } + + @include breakpoint( $breakpoint-tablet ) { + margin-left: -62px; + padding-left: 62px; + background-repeat: no-repeat; + background-position: top left; + background-image: url("data:image/svg+xml,#{$icon__quote}"); + } + + @include breakpoint( 0, #{ $breakpoint-tablet - 1 } ) { + :first-child:before { + display: inline-block; + vertical-align: bottom; + content: ''; + width: 32px; + height: 32px; + margin-right: 12px; + background-repeat: no-repeat; + background-position: top left; + background-image: url("data:image/svg+xml,#{$icon__quote}"); + } + } +} diff --git a/themes/wporg-5ftf/css/settings/_icons.scss b/themes/wporg-5ftf/css/settings/_icons.scss new file mode 100644 index 0000000..c476b84 --- /dev/null +++ b/themes/wporg-5ftf/css/settings/_icons.scss @@ -0,0 +1 @@ +$icon__quote: "%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='%239EA3A8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M11.4933 24H4.50667L7.17333 18.6667H4V8H14.6667V17.6533L11.4933 24ZM17.84 24H24.8267L28 17.6533V8H17.3333V18.6667H20.5067L17.84 24ZM23.1733 21.3333H22.16L24.8267 16H20V10.6667H25.3333V17.0133L23.1733 21.3333ZM9.84 21.3333H8.82667L11.4933 16H6.66667V10.6667H12V17.0133L9.84 21.3333Z' /%3E%3C/svg%3E%0A"; diff --git a/themes/wporg-5ftf/css/settings/_settings.scss b/themes/wporg-5ftf/css/settings/_settings.scss index cdfd770..6ca61d0 100644 --- a/themes/wporg-5ftf/css/settings/_settings.scss +++ b/themes/wporg-5ftf/css/settings/_settings.scss @@ -3,5 +3,6 @@ @import "../../../pub/wporg/css/settings/structure"; @import "../../../pub/wporg/css/settings/typography"; @import "colors"; +@import "icons"; @import "structure"; @import "typography";