0ct0pu5/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Varia: Make alignwide blocks work like normal blocks up to the desktop breakpoint

Browse source
This commit is contained in:
Allan Cole 2019-09-06 17:43:55 -04:00
parent 4ebc8e3e8b
commit 00a9b16e16
4 changed files with 13 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
varia/sass/abstracts/_responsive-logic.scss
View file

@ -40,19 +40,20 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
%responsive-alignwide {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
max-width: $content-width-flex;
@include media(mobile) {
@include alignwide-width( $content-width-sm );
max-width: $content-width-sm;
}
@include media(tablet) {
@include alignwide-width( $content-width-md );
max-width: $content-width-md;
}
/* Matches normal width until laptop breakpoint */
@include media(laptop) {
@include alignwide-width( $content-width-lg );
}

4
varia/sass/blocks/utilities/_style.scss
View file

@ -57,10 +57,6 @@
@extend %responsive-aligndefault;
}
.entry-content [class*="inner-container"] {
max-width: inherit;
}
/**
* .alignwide
*/

10
varia/style-rtl.css
View file

@ -3167,23 +3167,21 @@ img#wpstats {
}
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: 100%;
max-width: 100%;
margin-right: auto;
margin-left: auto;
max-width: 100%;
/* Matches normal width until laptop breakpoint */
}
@media only screen and (min-width: 560px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 560px - 32px) + 256px);
max-width: calc(100% - 32px);
max-width: calc( 560px - 32px);
}
}
@media only screen and (min-width: 640px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 640px - 32px) + 256px);
max-width: calc(100% - 32px);
max-width: calc( 640px - 32px);
}
}

14
varia/style.css
View file

@ -1986,10 +1986,6 @@ table th,
/**
* .aligndefault
*/
.entry-content [class*="inner-container"] {
max-width: inherit;
}
/**
* .alignwide
*/
@ -3172,23 +3168,21 @@ img#wpstats {
}
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
max-width: 100%;
/* Matches normal width until laptop breakpoint */
}
@media only screen and (min-width: 560px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 560px - 32px) + 256px);
max-width: calc(100% - 32px);
max-width: calc( 560px - 32px);
}
}
@media only screen and (min-width: 640px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 640px - 32px) + 256px);
max-width: calc(100% - 32px);
max-width: calc( 640px - 32px);
}
}