Varia: More code tidying and efficiency improvements

This commit is contained in:
Allan Cole 2019-08-12 18:54:09 -04:00
parent 933b827fc1
commit e8d66c9901
6 changed files with 212 additions and 137 deletions

View file

@ -43,7 +43,7 @@
/**
* Align wide widths
* - Sets negative margin for .alignwide and .alignfull blocks
* - Sets .alignwide widths
*/
@mixin alignwide-width( $width: 100%, $multiplier...) {
@ -51,24 +51,18 @@
$multiplier: (8 * map-deep-get($config-global, "spacing", "horizontal"));
}
width: calc(#{$width} + #{2 * $multiplier}); // calc( #{$width} + #{$positive_multiplier * 2} + ( 100vw - #{$width} ) );
max-width: calc(100vw - #{2 * map-deep-get($config-global, "spacing", "horizontal")}); // calc( #{$width} + #{$positive_multiplier * 2} + ( 100vw - #{$width} ) );
width: calc(#{$width} + #{2 * $multiplier});
max-width: calc(100vw - #{2 * map-deep-get($config-global, "spacing", "horizontal")});
}
/**
* Align right widths
*/
@mixin alignright-margin( $width: 100%, $multiplier...) {
margin-right: calc( 0.5 * (100vw - #{$width}));
}
@mixin alignwide-width-nested( $width: 100%, $multiplier...) {
/**
* Align container widths
* - Sets a fixed-width on content within alignwide and alignfull blocks
*/
@mixin align-container-width( $width: 100% ) {
max-width: calc( #{$width} );
width: calc( #{$width} );
@if length($multiplier) == 0 {
$multiplier: (8 * map-deep-get($config-global, "spacing", "horizontal"));
}
width: calc(#{$width} + #{2 * $multiplier});
max-width: 100%;
}
/**

View file

@ -65,6 +65,33 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
}
}
%responsive-alignwide-nested {
@include alignwide-width-nested( $content-width-flex );
margin-left: auto;
margin-right: auto;
@include media(mobile) {
@include alignwide-width-nested( $content-width-sm );
}
@include media(tablet) {
@include alignwide-width-nested( $content-width-md );
}
@include media(laptop) {
@include alignwide-width-nested( $content-width-lg );
}
@include media(desktop) {
@include alignwide-width-nested( $content-width-lg );
}
@include media(wide) {
@include alignwide-width-nested( $content-width-lg );
}
}
%responsive-alignfull {
/* Letting the box-model do all the work here. */
}
@ -134,26 +161,27 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
%responsive-align-container {
/*
@include align-container-width( calc( #{$content-width-flex} - #{$horizontal-padding} ) );
max-width: calc( #{$content-width-flex} - #{$horizontal-padding} );
width: calc( #{$content-width-flex} - #{$horizontal-padding} );
@include media(mobile) {
@include align-container-width( #{$content-width-sm} );
max-width: #{$content-width-sm};
}
@include media(tablet) {
@include align-container-width( #{$content-width-md} );
max-width: #{$content-width-md};
}
@include media(laptop) {
@include align-container-width( #{$content-width-lg} );
max-width: #{$content-width-lg};
}
@include media(desktop) {
@include align-container-width( #{$content-width-lg} );
max-width: #{$content-width-lg};
}
@include media(wide) {
@include align-container-width( #{$content-width-lg} );
max-width: #{$content-width-lg};
}
*/
}

View file

@ -25,42 +25,46 @@
margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
}
// *.alignnormal, .alignwide & .alignfull
// - More selector specificity needed here to deal with
// group-block expected behavior
// - See: sass/blocks/group/_style.scss
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter) {
/**
* .aligndefault
*/
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
@extend %responsive-aligndefault;
}
.entry-content [class*="inner-container"] {
max-width: inherit;
}
/**
* .alignwide
*/
.alignwide {
clear: both;
}
.entry-content > .alignwide {
@extend %responsive-alignwide;
clear: both;
}
.entry-content > .alignwide [class*="inner-container"] > .alignwide ,
.entry-content > .alignwide [class*="inner-container"] > .alignfull {
margin-left: auto;
margin-right: auto;
max-width: 100%;
width: 100%;
}
.entry-content > .alignfull [class*="inner-container"] > .alignwide {
margin-left: auto;
margin-right: auto;
max-width: calc( 100% - #{4 * map-deep-get($config-global, "spacing", "horizontal")} );
width: calc( 100% - #{4 * map-deep-get($config-global, "spacing", "horizontal")} );
.entry-content > .alignwide [class*="inner-container"] > .alignwide {
@extend %responsive-alignwide-nested;
}
/**
* .alignfull
*/
.alignfull {
clear: both;
}
.entry-content > .alignfull {
@extend %responsive-alignfull;
clear: both;
}
.entry-content [class*="inner-container"] > .alignfull {
max-width: 100%;
width: 100%;
.entry-content > .alignfull [class*="inner-container"] > .alignwide {
@extend %responsive-alignwide-nested;
}
// Content alignment

View file

@ -105,14 +105,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
*/
/**
* Align wide widths
* - Sets negative margin for .alignwide and .alignfull blocks
*/
/**
* Align right widths
*/
/**
* Align container widths
* - Sets a fixed-width on content within alignwide and alignfull blocks
* - Sets .alignwide widths
*/
/**
* Crop Text Boundry

View file

@ -129,14 +129,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
*/
/**
* Align wide widths
* - Sets negative margin for .alignwide and .alignfull blocks
*/
/**
* Align right widths
*/
/**
* Align container widths
* - Sets a fixed-width on content within alignwide and alignfull blocks
* - Sets .alignwide widths
*/
/**
* Crop Text Boundry
@ -1930,34 +1923,27 @@ table th,
margin-bottom: 32px;
}
.entry-content > .alignwide {
/**
* .aligndefault
*/
.entry-content [class*="inner-container"] {
max-width: inherit;
}
/**
* .alignwide
*/
.alignwide {
clear: both;
}
.entry-content > .alignwide [class*="inner-container"] > .alignwide,
.entry-content > .alignwide [class*="inner-container"] > .alignfull {
margin-right: auto;
margin-left: auto;
max-width: 100%;
width: 100%;
}
.entry-content > .alignfull [class*="inner-container"] > .alignwide {
margin-right: auto;
margin-left: auto;
max-width: calc( 100% - 64px);
width: calc( 100% - 64px);
}
.entry-content > .alignfull {
/**
* .alignfull
*/
.alignfull {
clear: both;
}
.entry-content [class*="inner-container"] > .alignfull {
max-width: 100%;
width: 100%;
}
.has-left-content {
justify-content: flex-start;
}
@ -3099,8 +3085,8 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: 100%;
margin-right: auto;
margin-left: auto;
@ -3110,8 +3096,8 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 560px - 32px);
}
}
@ -3120,8 +3106,8 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 640px - 32px);
}
}
@ -3130,8 +3116,8 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 782px - 32px);
}
}
@ -3140,8 +3126,8 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 782px - 32px);
}
}
@ -3150,8 +3136,8 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 782px - 32px);
}
}
@ -3198,6 +3184,48 @@ img#wpstats {
}
}
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
width: calc(100% + 256px);
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
@media only screen and (min-width: 560px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
width: calc(calc( 560px - 32px) + 256px);
max-width: 100%;
}
}
@media only screen and (min-width: 640px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
width: calc(calc( 640px - 32px) + 256px);
max-width: 100%;
}
}
@media only screen and (min-width: 782px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
width: calc(calc( 782px - 32px) + 256px);
max-width: 100%;
}
}
@media only screen and (min-width: 1024px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
width: calc(calc( 782px - 32px) + 256px);
max-width: 100%;
}
}
@media only screen and (min-width: 1280px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
width: calc(calc( 782px - 32px) + 256px);
max-width: 100%;
}
}
.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
/* Letting the box-model do all the work here. */
}

View file

@ -129,14 +129,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
*/
/**
* Align wide widths
* - Sets negative margin for .alignwide and .alignfull blocks
*/
/**
* Align right widths
*/
/**
* Align container widths
* - Sets a fixed-width on content within alignwide and alignfull blocks
* - Sets .alignwide widths
*/
/**
* Crop Text Boundry
@ -1934,34 +1927,27 @@ table th,
margin-bottom: 32px;
}
.entry-content > .alignwide {
/**
* .aligndefault
*/
.entry-content [class*="inner-container"] {
max-width: inherit;
}
/**
* .alignwide
*/
.alignwide {
clear: both;
}
.entry-content > .alignwide [class*="inner-container"] > .alignwide,
.entry-content > .alignwide [class*="inner-container"] > .alignfull {
margin-left: auto;
margin-right: auto;
max-width: 100%;
width: 100%;
}
.entry-content > .alignfull [class*="inner-container"] > .alignwide {
margin-left: auto;
margin-right: auto;
max-width: calc( 100% - 64px);
width: calc( 100% - 64px);
}
.entry-content > .alignfull {
/**
* .alignfull
*/
.alignfull {
clear: both;
}
.entry-content [class*="inner-container"] > .alignfull {
max-width: 100%;
width: 100%;
}
.has-left-content {
justify-content: flex-start;
}
@ -3103,8 +3089,8 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: 100%;
margin-left: auto;
margin-right: auto;
@ -3114,8 +3100,8 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 560px - 32px);
}
}
@ -3124,8 +3110,8 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 640px - 32px);
}
}
@ -3134,8 +3120,8 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 782px - 32px);
}
}
@ -3144,8 +3130,8 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 782px - 32px);
}
}
@ -3154,8 +3140,8 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 782px - 32px);
}
}
@ -3202,6 +3188,48 @@ img#wpstats {
}
}
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
width: calc(100% + 256px);
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
@media only screen and (min-width: 560px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
width: calc(calc( 560px - 32px) + 256px);
max-width: 100%;
}
}
@media only screen and (min-width: 640px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
width: calc(calc( 640px - 32px) + 256px);
max-width: 100%;
}
}
@media only screen and (min-width: 782px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
width: calc(calc( 782px - 32px) + 256px);
max-width: 100%;
}
}
@media only screen and (min-width: 1024px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
width: calc(calc( 782px - 32px) + 256px);
max-width: 100%;
}
}
@media only screen and (min-width: 1280px) {
.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
width: calc(calc( 782px - 32px) + 256px);
max-width: 100%;
}
}
.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
/* Letting the box-model do all the work here. */
}