diff --git a/varia/sass/blocks/utilities/_style.scss b/varia/sass/blocks/utilities/_style.scss index aa999a759..f1c7315af 100644 --- a/varia/sass/blocks/utilities/_style.scss +++ b/varia/sass/blocks/utilities/_style.scss @@ -1,6 +1,9 @@ -/* Text Alignments */ +/* Block Alignments */ + +/** + * .alignleft + */ .alignleft { - @extend %responsive-alignleft; /*rtl:ignore*/ text-align: left; /*rtl:ignore*/ @@ -11,23 +14,41 @@ margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")}; } +.entry-content > .alignleft { + @extend %responsive-alignleft; +} + +/** + * .aligncenter + */ .aligncenter { clear: both; float: none; text-align: center; } +/** + * .alignright + */ .alignright { - @extend %responsive-alignright; /*rtl:ignore*/ float: right; - /*rtl:ignore*/ margin-top: 0; margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")}; /*rtl:ignore*/ margin-left: #{map-deep-get($config-global, "spacing", "horizontal")}; } +.entry-content > .alignright { + @extend %responsive-alignright; +} + +// Make sure siblings of floated elements are top-aligned when nested +.entry-content * > .alignleft + *, +.entry-content * > .alignright + * { + margin-top: 0; +} + /** * .aligndefault */ diff --git a/varia/style-rtl.css b/varia/style-rtl.css index a81dbc404..ac7f855c8 100644 --- a/varia/style-rtl.css +++ b/varia/style-rtl.css @@ -1921,7 +1921,10 @@ table th, vertical-align: middle; } -/* Text Alignments */ +/* Block Alignments */ +/** + * .alignleft + */ .alignleft { text-align: left; float: left; @@ -1930,12 +1933,18 @@ table th, margin-bottom: 32px; } +/** + * .aligncenter + */ .aligncenter { clear: both; float: none; text-align: center; } +/** + * .alignright + */ .alignright { float: right; margin-top: 0; @@ -1943,6 +1952,11 @@ table th, margin-left: 16px; } +.entry-content * > .alignleft + *, +.entry-content * > .alignright + * { + margin-top: 0; +} + /** * .aligndefault */ @@ -3242,70 +3256,70 @@ img#wpstats { /* Letting the box-model do all the work here. */ } -.alignright { +.entry-content > .alignright { margin-right: 16px; } @media only screen and (min-width: 560px) { - .alignright { + .entry-content > .alignright { margin-right: calc( 0.5 * (100vw - calc( 560px - 32px))); } } @media only screen and (min-width: 640px) { - .alignright { + .entry-content > .alignright { margin-right: calc( 0.5 * (100vw - calc( 640px - 32px))); } } @media only screen and (min-width: 782px) { - .alignright { + .entry-content > .alignright { margin-right: calc( 0.5 * (100vw - calc( 782px - 32px))); } } @media only screen and (min-width: 1024px) { - .alignright { + .entry-content > .alignright { margin-right: calc( 0.5 * (100vw - calc( 782px - 32px))); } } @media only screen and (min-width: 1280px) { - .alignright { + .entry-content > .alignright { margin-right: calc( 0.5 * (100vw - calc( 782px - 32px))); } } -.alignleft { +.entry-content > .alignleft { margin-left: 16px; } @media only screen and (min-width: 560px) { - .alignleft { + .entry-content > .alignleft { margin-left: calc( 0.5 * (100vw - calc( 560px - 32px))); } } @media only screen and (min-width: 640px) { - .alignleft { + .entry-content > .alignleft { margin-left: calc( 0.5 * (100vw - calc( 640px - 32px))); } } @media only screen and (min-width: 782px) { - .alignleft { + .entry-content > .alignleft { margin-left: calc( 0.5 * (100vw - calc( 782px - 32px))); } } @media only screen and (min-width: 1024px) { - .alignleft { + .entry-content > .alignleft { margin-left: calc( 0.5 * (100vw - calc( 782px - 32px))); } } @media only screen and (min-width: 1280px) { - .alignleft { + .entry-content > .alignleft { margin-left: calc( 0.5 * (100vw - calc( 782px - 32px))); } } diff --git a/varia/style.css b/varia/style.css index aad18eb04..67507cd68 100644 --- a/varia/style.css +++ b/varia/style.css @@ -1921,7 +1921,10 @@ table th, vertical-align: middle; } -/* Text Alignments */ +/* Block Alignments */ +/** + * .alignleft + */ .alignleft { /*rtl:ignore*/ text-align: left; @@ -1933,22 +1936,32 @@ table th, margin-bottom: 32px; } +/** + * .aligncenter + */ .aligncenter { clear: both; float: none; text-align: center; } +/** + * .alignright + */ .alignright { /*rtl:ignore*/ float: right; - /*rtl:ignore*/ margin-top: 0; margin-bottom: 32px; /*rtl:ignore*/ margin-left: 16px; } +.entry-content * > .alignleft + *, +.entry-content * > .alignright + * { + margin-top: 0; +} + /** * .aligndefault */ @@ -3248,81 +3261,81 @@ img#wpstats { /* Letting the box-model do all the work here. */ } -.alignright { +.entry-content > .alignright { /*rtl:ignore*/ margin-right: 16px; } @media only screen and (min-width: 560px) { - .alignright { + .entry-content > .alignright { /*rtl:ignore*/ margin-right: calc( 0.5 * (100vw - calc( 560px - 32px))); } } @media only screen and (min-width: 640px) { - .alignright { + .entry-content > .alignright { /*rtl:ignore*/ margin-right: calc( 0.5 * (100vw - calc( 640px - 32px))); } } @media only screen and (min-width: 782px) { - .alignright { + .entry-content > .alignright { /*rtl:ignore*/ margin-right: calc( 0.5 * (100vw - calc( 782px - 32px))); } } @media only screen and (min-width: 1024px) { - .alignright { + .entry-content > .alignright { /*rtl:ignore*/ margin-right: calc( 0.5 * (100vw - calc( 782px - 32px))); } } @media only screen and (min-width: 1280px) { - .alignright { + .entry-content > .alignright { /*rtl:ignore*/ margin-right: calc( 0.5 * (100vw - calc( 782px - 32px))); } } -.alignleft { +.entry-content > .alignleft { /*rtl:ignore*/ margin-left: 16px; } @media only screen and (min-width: 560px) { - .alignleft { + .entry-content > .alignleft { /*rtl:ignore*/ margin-left: calc( 0.5 * (100vw - calc( 560px - 32px))); } } @media only screen and (min-width: 640px) { - .alignleft { + .entry-content > .alignleft { /*rtl:ignore*/ margin-left: calc( 0.5 * (100vw - calc( 640px - 32px))); } } @media only screen and (min-width: 782px) { - .alignleft { + .entry-content > .alignleft { /*rtl:ignore*/ margin-left: calc( 0.5 * (100vw - calc( 782px - 32px))); } } @media only screen and (min-width: 1024px) { - .alignleft { + .entry-content > .alignleft { /*rtl:ignore*/ margin-left: calc( 0.5 * (100vw - calc( 782px - 32px))); } } @media only screen and (min-width: 1280px) { - .alignleft { + .entry-content > .alignleft { /*rtl:ignore*/ margin-left: calc( 0.5 * (100vw - calc( 782px - 32px))); }