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

Varia: Revise negative margins in header and footer for better box-model behavior

Browse source
This commit is contained in:
Allan Cole 2019-08-12 13:08:37 -04:00
parent 4562a4c035
commit b637fc6b1d
8 changed files with 190 additions and 236 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,6 +13,7 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
%responsive-width-normal {
/*
max-width: $content-width-flex;
@include media(mobile) {
@ -34,10 +35,12 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
@include media(wide) {
max-width: $content-width-lg;
}
*/
}
%responsive-width-wide {
/*
@include align-width( $content-width-flex, -0.25 );
@include media(mobile) {
@ -59,10 +62,12 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
@include media(wide) {
@include alignwide-width( $content-width-lg );
}
*/
}
%responsive-width-full {
/*
@include align-width( $content-width-flex, -0.5 );
@include media(mobile) {
@ -84,6 +89,7 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
@include media(wide) {
@include align-width( $content-width-lg, -0.5 );
}
*/
}
%responsive-align-container {

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

@ -25,10 +25,15 @@
margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
}
// Alignwide & Alignfull
// *.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) {
@extend %responsive-width-normal;
clear: both;
}
.entry-content > .alignwide {
@extend %responsive-width-wide;
clear: both;

13
varia/sass/components/footer/_footer-navigation.scss
View file

@ -17,9 +17,8 @@
.footer-menu {
color: #{map-deep-get($config-footer, "color", "text")};
margin: 0;
padding-left: 0;
margin-left: -#{map-deep-get($config-global, "spacing", "unit")};
margin-right: -#{map-deep-get($config-global, "spacing", "unit")};
@include media(tablet) {
display: flex;
@ -27,8 +26,16 @@
justify-content: flex-end;
}
li {
& > li {
display: inline;
&:first-of-type {
margin-left: -#{map-deep-get($config-global, "spacing", "unit")};
}
&:last-of-type {
margin-right: -#{map-deep-get($config-global, "spacing", "unit")};
}
}
a {

2
varia/sass/components/footer/_footer.scss
View file

@ -1,5 +1,7 @@
.site-footer {
overflow: hidden;
@include media(tablet) {
align-items: flex-end;
display: flex;

10
varia/sass/components/header/_site-main-navigation.scss
View file

@ -61,8 +61,8 @@
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
max-width: none;
margin: 0 #{-1 * map-deep-get($config-header, "main-nav", "link-padding")};
position: relative;
li {
@ -85,6 +85,14 @@
display: inherit;
width: inherit;
&:first-of-type {
margin-left: -#{map-deep-get($config-global, "spacing", "unit")};
}
&:last-of-type {
margin-right: -#{map-deep-get($config-global, "spacing", "unit")};
}
/* Submenu display */
&:hover > ul,
&:focus-within > ul,

10
varia/sass/components/header/_site-social-navigation.scss
View file

@ -6,7 +6,15 @@
align-content: center;
display: flex;
list-style: none;
margin: 0 calc(-0.5 * #{map-deep-get($config-global, "spacing", "unit")});
margin: 0;
& > li:first-of-type {
margin-left: calc(-0.5 * #{map-deep-get($config-global, "spacing", "unit")})
}
& > li:last-of-type {
margin-right: calc(-0.5 * #{map-deep-get($config-global, "spacing", "unit")})
}
}
a {

189
varia/style-rtl.css
View file

@ -1928,6 +1928,10 @@ table th,
margin-bottom: 32px;
}
.entry-content > *:not(.alignwide):not(.alignfull) {
clear: both;
}
.entry-content > .alignwide {
clear: both;
}
@ -2300,8 +2304,8 @@ table th,
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
max-width: none;
margin: 0 -16px;
position: relative;
/* Sub-menus Flyout */
}
@ -2329,6 +2333,12 @@ table th,
width: inherit;
/* Submenu display */
}
.main-navigation > div > ul li:first-of-type {
margin-right: -16px;
}
.main-navigation > div > ul li:last-of-type {
margin-left: -16px;
}
.main-navigation > div > ul li:hover > ul,
.main-navigation > div > ul li[focus-within] > ul,
.main-navigation > div > ul li ul:hover,
@ -2449,7 +2459,15 @@ table th,
align-content: center;
display: flex;
list-style: none;
margin: 0 calc(-0.5 * 16px);
margin: 0;
}
.social-navigation > div > ul > li:first-of-type {
margin-right: calc(-0.5 * 16px);
}
.social-navigation > div > ul > li:last-of-type {
margin-left: calc(-0.5 * 16px);
}
.social-navigation a {
@ -2467,6 +2485,10 @@ table th,
vertical-align: middle;
}
.site-footer {
overflow: hidden;
}
@media only screen and (min-width: 640px) {
.site-footer {
align-items: flex-end;
@ -2527,9 +2549,8 @@ table th,
.footer-navigation .footer-menu {
color: #767676;
margin: 0;
padding-right: 0;
margin-right: -16px;
margin-left: -16px;
}
@media only screen and (min-width: 640px) {
@ -2540,10 +2561,18 @@ table th,
}
}
.footer-navigation .footer-menu li {
.footer-navigation .footer-menu > li {
display: inline;
}
.footer-navigation .footer-menu > li:first-of-type {
margin-right: -16px;
}
.footer-navigation .footer-menu > li:last-of-type {
margin-left: -16px;
}
.footer-navigation .footer-menu a {
font-family: sans-serif;
font-size: 0.83333rem;
@ -3047,154 +3076,84 @@ img#wpstats {
* Page Layout Styles & Repsonsive Styles
*/
/* Responsive width-content overrides */
.responsive-max-width {
max-width: 100%;
}
.responsive-max-width, .entry-content > *:not(.alignwide):not(.alignfull) {
/*
max-width: $content-width-flex;
@media only screen and (min-width: 560px) {
.responsive-max-width {
max-width: calc( 560px - 32px);
@include media(mobile) {
max-width: $content-width-sm;
}
}
@media only screen and (min-width: 640px) {
.responsive-max-width {
max-width: calc( 640px - 32px);
@include media(tablet) {
max-width: $content-width-md;
}
}
@media only screen and (min-width: 782px) {
.responsive-max-width {
max-width: calc( 782px - 32px);
@include media(laptop) {
max-width: $content-width-lg;
}
}
@media only screen and (min-width: 1024px) {
.responsive-max-width {
max-width: calc( 782px - 32px);
@include media(desktop) {
max-width: $content-width-lg;
}
}
@media only screen and (min-width: 1280px) {
.responsive-max-width {
max-width: calc( 782px - 32px);
@include media(wide) {
max-width: $content-width-lg;
}
*/
}
.wp-block-group.alignwide .alignwide,
.wp-block-group.alignwide .alignfull,
.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
margin-right: calc( -0.25 * ( 100vw - 100% ));
margin-left: calc( -0.25 * ( 100vw - 100% ));
width: calc( 100% + (0.25 * 2) * ( 100vw - 100% ));
max-width: calc( 100% + (0.25 * 2) * ( 100vw - 100% ));
}
/*
@include align-width( $content-width-flex, -0.25 );
@media only screen and (min-width: 560px) {
.wp-block-group.alignwide .alignwide,
.wp-block-group.alignwide .alignfull,
.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
margin-right: calc( -0.25 * ( 100vw - calc( 560px - 32px) ));
margin-left: calc( -0.25 * ( 100vw - calc( 560px - 32px) ));
width: calc( calc( 560px - 32px) + (0.25 * 2) * ( 100vw - calc( 560px - 32px) ));
max-width: calc( calc( 560px - 32px) + (0.25 * 2) * ( 100vw - calc( 560px - 32px) ));
@include media(mobile) {
@include align-width( $content-width-sm, -0.25 );
}
}
@media only screen and (min-width: 640px) {
.wp-block-group.alignwide .alignwide,
.wp-block-group.alignwide .alignfull,
.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
margin-right: calc( -0.25 * ( 100vw - calc( 640px - 32px) ));
margin-left: calc( -0.25 * ( 100vw - calc( 640px - 32px) ));
width: calc( calc( 640px - 32px) + (0.25 * 2) * ( 100vw - calc( 640px - 32px) ));
max-width: calc( calc( 640px - 32px) + (0.25 * 2) * ( 100vw - calc( 640px - 32px) ));
@include media(tablet) {
@include align-width( $content-width-md, -0.25 );
}
}
@media only screen and (min-width: 782px) {
.wp-block-group.alignwide .alignwide,
.wp-block-group.alignwide .alignfull,
.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
margin-right: calc( -0.25 * ( 100vw - calc( 782px - 32px) ));
margin-left: calc( -0.25 * ( 100vw - calc( 782px - 32px) ));
width: calc( calc( 782px - 32px) + (0.25 * 2) * ( 100vw - calc( 782px - 32px) ));
max-width: calc( calc( 782px - 32px) + (0.25 * 2) * ( 100vw - calc( 782px - 32px) ));
@include media(laptop) {
@include align-width( $content-width-lg, -0.25 );
}
}
@media only screen and (min-width: 1024px) {
.wp-block-group.alignwide .alignwide,
.wp-block-group.alignwide .alignfull,
.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
margin-right: -128px;
margin-left: -128px;
width: calc(calc( 782px - 32px) + 256px);
max-width: calc(calc( 782px - 32px) + 256px);
@include media(desktop) {
@include alignwide-width( $content-width-lg );
}
}
@media only screen and (min-width: 1280px) {
.wp-block-group.alignwide .alignwide,
.wp-block-group.alignwide .alignfull,
.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
margin-right: -128px;
margin-left: -128px;
width: calc(calc( 782px - 32px) + 256px);
max-width: calc(calc( 782px - 32px) + 256px);
@include media(wide) {
@include alignwide-width( $content-width-lg );
}
*/
}
.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
margin-right: calc( -0.5 * ( 100vw - 100% ));
margin-left: calc( -0.5 * ( 100vw - 100% ));
width: calc( 100% + (0.5 * 2) * ( 100vw - 100% ));
max-width: calc( 100% + (0.5 * 2) * ( 100vw - 100% ));
}
/*
@include align-width( $content-width-flex, -0.5 );
@media only screen and (min-width: 560px) {
.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
margin-right: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
margin-left: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
width: calc( calc( 560px - 32px) + (0.5 * 2) * ( 100vw - calc( 560px - 32px) ));
max-width: calc( calc( 560px - 32px) + (0.5 * 2) * ( 100vw - calc( 560px - 32px) ));
@include media(mobile) {
@include align-width( $content-width-sm, -0.5 );
}
}
@media only screen and (min-width: 640px) {
.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
margin-right: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
margin-left: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
width: calc( calc( 640px - 32px) + (0.5 * 2) * ( 100vw - calc( 640px - 32px) ));
max-width: calc( calc( 640px - 32px) + (0.5 * 2) * ( 100vw - calc( 640px - 32px) ));
@include media(tablet) {
@include align-width( $content-width-md, -0.5 );
}
}
@media only screen and (min-width: 782px) {
.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
max-width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
@include media(laptop) {
@include align-width( $content-width-lg, -0.5 );
}
}
@media only screen and (min-width: 1024px) {
.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
max-width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
@include media(desktop) {
@include align-width( $content-width-lg, -0.5 );
}
}
@media only screen and (min-width: 1280px) {
.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
max-width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
@include media(wide) {
@include align-width( $content-width-lg, -0.5 );
}
*/
}
.wp-block-cover.alignwide .wp-block-cover__inner-container,

189
varia/style.css
View file

@ -1933,6 +1933,10 @@ table th,
margin-bottom: 32px;
}
.entry-content > *:not(.alignwide):not(.alignfull) {
clear: both;
}
.entry-content > .alignwide {
clear: both;
}
@ -2305,8 +2309,8 @@ table th,
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
max-width: none;
margin: 0 -16px;
position: relative;
/* Sub-menus Flyout */
}
@ -2334,6 +2338,12 @@ table th,
width: inherit;
/* Submenu display */
}
.main-navigation > div > ul li:first-of-type {
margin-left: -16px;
}
.main-navigation > div > ul li:last-of-type {
margin-right: -16px;
}
.main-navigation > div > ul li:hover > ul,
.main-navigation > div > ul li[focus-within] > ul,
.main-navigation > div > ul li ul:hover,
@ -2454,7 +2464,15 @@ table th,
align-content: center;
display: flex;
list-style: none;
margin: 0 calc(-0.5 * 16px);
margin: 0;
}
.social-navigation > div > ul > li:first-of-type {
margin-left: calc(-0.5 * 16px);
}
.social-navigation > div > ul > li:last-of-type {
margin-right: calc(-0.5 * 16px);
}
.social-navigation a {
@ -2472,6 +2490,10 @@ table th,
vertical-align: middle;
}
.site-footer {
overflow: hidden;
}
@media only screen and (min-width: 640px) {
.site-footer {
align-items: flex-end;
@ -2532,9 +2554,8 @@ table th,
.footer-navigation .footer-menu {
color: #767676;
margin: 0;
padding-left: 0;
margin-left: -16px;
margin-right: -16px;
}
@media only screen and (min-width: 640px) {
@ -2545,10 +2566,18 @@ table th,
}
}
.footer-navigation .footer-menu li {
.footer-navigation .footer-menu > li {
display: inline;
}
.footer-navigation .footer-menu > li:first-of-type {
margin-left: -16px;
}
.footer-navigation .footer-menu > li:last-of-type {
margin-right: -16px;
}
.footer-navigation .footer-menu a {
font-family: sans-serif;
font-size: 0.83333rem;
@ -3052,154 +3081,84 @@ img#wpstats {
* Page Layout Styles & Repsonsive Styles
*/
/* Responsive width-content overrides */
.responsive-max-width {
max-width: 100%;
}
.responsive-max-width, .entry-content > *:not(.alignwide):not(.alignfull) {
/*
max-width: $content-width-flex;
@media only screen and (min-width: 560px) {
.responsive-max-width {
max-width: calc( 560px - 32px);
@include media(mobile) {
max-width: $content-width-sm;
}
}
@media only screen and (min-width: 640px) {
.responsive-max-width {
max-width: calc( 640px - 32px);
@include media(tablet) {
max-width: $content-width-md;
}
}
@media only screen and (min-width: 782px) {
.responsive-max-width {
max-width: calc( 782px - 32px);
@include media(laptop) {
max-width: $content-width-lg;
}
}
@media only screen and (min-width: 1024px) {
.responsive-max-width {
max-width: calc( 782px - 32px);
@include media(desktop) {
max-width: $content-width-lg;
}
}
@media only screen and (min-width: 1280px) {
.responsive-max-width {
max-width: calc( 782px - 32px);
@include media(wide) {
max-width: $content-width-lg;
}
*/
}
.wp-block-group.alignwide .alignwide,
.wp-block-group.alignwide .alignfull,
.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
margin-left: calc( -0.25 * ( 100vw - 100% ));
margin-right: calc( -0.25 * ( 100vw - 100% ));
width: calc( 100% + (0.25 * 2) * ( 100vw - 100% ));
max-width: calc( 100% + (0.25 * 2) * ( 100vw - 100% ));
}
/*
@include align-width( $content-width-flex, -0.25 );
@media only screen and (min-width: 560px) {
.wp-block-group.alignwide .alignwide,
.wp-block-group.alignwide .alignfull,
.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
margin-left: calc( -0.25 * ( 100vw - calc( 560px - 32px) ));
margin-right: calc( -0.25 * ( 100vw - calc( 560px - 32px) ));
width: calc( calc( 560px - 32px) + (0.25 * 2) * ( 100vw - calc( 560px - 32px) ));
max-width: calc( calc( 560px - 32px) + (0.25 * 2) * ( 100vw - calc( 560px - 32px) ));
@include media(mobile) {
@include align-width( $content-width-sm, -0.25 );
}
}
@media only screen and (min-width: 640px) {
.wp-block-group.alignwide .alignwide,
.wp-block-group.alignwide .alignfull,
.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
margin-left: calc( -0.25 * ( 100vw - calc( 640px - 32px) ));
margin-right: calc( -0.25 * ( 100vw - calc( 640px - 32px) ));
width: calc( calc( 640px - 32px) + (0.25 * 2) * ( 100vw - calc( 640px - 32px) ));
max-width: calc( calc( 640px - 32px) + (0.25 * 2) * ( 100vw - calc( 640px - 32px) ));
@include media(tablet) {
@include align-width( $content-width-md, -0.25 );
}
}
@media only screen and (min-width: 782px) {
.wp-block-group.alignwide .alignwide,
.wp-block-group.alignwide .alignfull,
.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
margin-left: calc( -0.25 * ( 100vw - calc( 782px - 32px) ));
margin-right: calc( -0.25 * ( 100vw - calc( 782px - 32px) ));
width: calc( calc( 782px - 32px) + (0.25 * 2) * ( 100vw - calc( 782px - 32px) ));
max-width: calc( calc( 782px - 32px) + (0.25 * 2) * ( 100vw - calc( 782px - 32px) ));
@include media(laptop) {
@include align-width( $content-width-lg, -0.25 );
}
}
@media only screen and (min-width: 1024px) {
.wp-block-group.alignwide .alignwide,
.wp-block-group.alignwide .alignfull,
.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
margin-left: -128px;
margin-right: -128px;
width: calc(calc( 782px - 32px) + 256px);
max-width: calc(calc( 782px - 32px) + 256px);
@include media(desktop) {
@include alignwide-width( $content-width-lg );
}
}
@media only screen and (min-width: 1280px) {
.wp-block-group.alignwide .alignwide,
.wp-block-group.alignwide .alignfull,
.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
margin-left: -128px;
margin-right: -128px;
width: calc(calc( 782px - 32px) + 256px);
max-width: calc(calc( 782px - 32px) + 256px);
@include media(wide) {
@include alignwide-width( $content-width-lg );
}
*/
}
.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
margin-left: calc( -0.5 * ( 100vw - 100% ));
margin-right: calc( -0.5 * ( 100vw - 100% ));
width: calc( 100% + (0.5 * 2) * ( 100vw - 100% ));
max-width: calc( 100% + (0.5 * 2) * ( 100vw - 100% ));
}
/*
@include align-width( $content-width-flex, -0.5 );
@media only screen and (min-width: 560px) {
.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
margin-left: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
margin-right: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
width: calc( calc( 560px - 32px) + (0.5 * 2) * ( 100vw - calc( 560px - 32px) ));
max-width: calc( calc( 560px - 32px) + (0.5 * 2) * ( 100vw - calc( 560px - 32px) ));
@include media(mobile) {
@include align-width( $content-width-sm, -0.5 );
}
}
@media only screen and (min-width: 640px) {
.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
margin-left: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
margin-right: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
width: calc( calc( 640px - 32px) + (0.5 * 2) * ( 100vw - calc( 640px - 32px) ));
max-width: calc( calc( 640px - 32px) + (0.5 * 2) * ( 100vw - calc( 640px - 32px) ));
@include media(tablet) {
@include align-width( $content-width-md, -0.5 );
}
}
@media only screen and (min-width: 782px) {
.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
max-width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
@include media(laptop) {
@include align-width( $content-width-lg, -0.5 );
}
}
@media only screen and (min-width: 1024px) {
.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
max-width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
@include media(desktop) {
@include align-width( $content-width-lg, -0.5 );
}
}
@media only screen and (min-width: 1280px) {
.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
max-width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
@include media(wide) {
@include align-width( $content-width-lg, -0.5 );
}
*/
}
.wp-block-cover.alignwide .wp-block-cover__inner-container,