Varia: More code tidying and efficiency improvements
This commit is contained in:
parent
933b827fc1
commit
e8d66c9901
6 changed files with 212 additions and 137 deletions
|
@ -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%;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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};
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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. */
|
||||
}
|
||||
|
|
112
varia/style.css
112
varia/style.css
|
@ -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. */
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue