Stratford: Recompile styles with fixed .alignfull logic.

This commit is contained in:
Allan Cole 2019-08-22 14:02:01 -04:00
parent edba2e7de9
commit 153ae44f67
3 changed files with 177 additions and 78 deletions

View file

@ -17,7 +17,7 @@
* 6.8. Search Block
* 7. Widgets
*/
$color_background: #{map-deep-get($config-global, "color", "background", "default")};
$color_background_light: #{map-deep-get($config-global, "color", "background", "light")};
$color_foreground: #{map-deep-get($config-global, "color", "foreground", "default")};
@ -38,7 +38,7 @@ $button_line_height: #{map-deep-get($config-button, "font", "line-height")};
$button_font_weight: #{map-deep-get($config-button, "font", "weight")};
$button_font_family: #{map-deep-get($config-button, "font", "family")};
$button_font_size: #{map-deep-get($config-button, "font", "size")};
$button_spacing_vertical: #{map-deep-get($config-button, "padding", "vertical")};
$button_spacing_vertical: #{map-deep-get($config-button, "padding", "vertical")};
$button_spacing_horizontal: #{map-deep-get($config-button, "padding", "horizontal")};
$button_color_hover: #{map-deep-get($config-button, "color", "text-hover")};
$button_background_hover: #{map-deep-get($config-button, "color", "background-hover")};
@ -93,7 +93,7 @@ a {
transition: all .25s ease-in-out;
.site-header-wrapper {
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
z-index: 1;
-webkit-align-items: center;
@ -172,7 +172,7 @@ a {
}
}
}
}
@include media(mobile) {
.main-navigation {
@ -242,7 +242,7 @@ a {
padding-top: 4.75em;
}
.home.page.hide-homepage-title {
.home.page.hide-homepage-title {
.site-content {
.site-main {
padding-top: 0;
@ -296,7 +296,7 @@ a {
/**
* 6.1. Column Block
*/
/**
* 6.2. Quote Block
@ -325,7 +325,7 @@ a {
/**
* 6.3. Hero Block and Cover Block
*/
/**
* 6.4. File Block
@ -373,11 +373,11 @@ a {
}
}
button,
.button,
input[type="submit"],
.wp-block-button__link,
.wp-block-file__button,
button,
.button,
input[type="submit"],
.wp-block-button__link,
.wp-block-file__button,
.a8c-posts-list__view-all {
border: 0;
border-radius: 5em;
@ -440,7 +440,7 @@ input[type="submit"],
}
}
.wp-block-preformatted,
.wp-block-preformatted,
.wp-block-verse {
font-family: $font_family_code;
font-size: $font_size_base;

View file

@ -1962,25 +1962,40 @@ table th,
vertical-align: middle;
}
/* Text Alignments */
/* Block Alignments */
/**
* .alignleft
*/
.alignleft {
text-align: left;
float: left;
margin-top: 0;
margin-right: 16px;
margin-bottom: 32px;
}
/**
* .aligncenter
*/
.aligncenter {
clear: both;
float: none;
text-align: center;
}
/**
* .alignright
*/
.alignright {
float: right;
margin-left: 16px;
margin-top: 0;
margin-bottom: 32px;
margin-left: 16px;
}
.entry-content * > .alignleft + *,
.entry-content * > .alignright + * {
margin-top: 0;
}
/**
@ -2415,12 +2430,12 @@ table th,
}
}
.main-navigation > div > ul > li:first-of-type {
margin-right: -16px;
.main-navigation > div > ul > li:first-of-type > a {
padding-right: 0;
}
.main-navigation > div > ul > li:last-of-type {
margin-left: -16px;
.main-navigation > div > ul > li:last-of-type > a {
padding-left: 0;
}
.main-navigation > div > ul > li > a {
@ -2528,12 +2543,12 @@ table th,
margin: 0;
}
.social-navigation > div > ul > li:first-of-type {
margin-right: calc(-0.5 * 16px);
.social-navigation > div > ul > li:first-of-type > a {
padding-right: 0;
}
.social-navigation > div > ul > li:last-of-type {
margin-left: calc(-0.5 * 16px);
.social-navigation > div > ul > li:last-of-type > a {
padding-left: 0;
}
.social-navigation a {
@ -2631,12 +2646,12 @@ table th,
display: inline;
}
.footer-navigation .footer-menu > li:first-of-type {
margin-right: -16px;
.footer-navigation .footer-menu > li:first-of-type > a {
padding-right: 0;
}
.footer-navigation .footer-menu > li:last-of-type {
margin-left: -16px;
padding-left: 0;
}
.footer-navigation .footer-menu a {
@ -3196,7 +3211,7 @@ img#wpstats {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(100% + 256px);
max-width: calc(100vw - 32px);
max-width: calc(100% - 32px);
margin-right: auto;
margin-left: auto;
}
@ -3204,35 +3219,35 @@ img#wpstats {
@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(100vw - 32px);
max-width: calc(100% - 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(100vw - 32px);
max-width: calc(100% - 32px);
}
}
@media only screen and (min-width: 932px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 932px - 32px) + 256px);
max-width: calc(100vw - 32px);
max-width: calc(100% - 32px);
}
}
@media only screen and (min-width: 1024px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 932px - 32px) + 256px);
max-width: calc(100vw - 32px);
max-width: calc(100% - 32px);
}
}
@media only screen and (min-width: 1280px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 932px - 32px) + 256px);
max-width: calc(100vw - 32px);
max-width: calc(100% - 32px);
}
}
@ -3279,73 +3294,84 @@ img#wpstats {
}
.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. */
margin-right: -16px;
margin-left: -16px;
width: calc(100% + 32px);
/* Letting the box-model do most of the work here. */
}
.alignright {
@media only screen and (min-width: 560px) {
.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
margin-right: inherit;
margin-left: inherit;
width: inherit;
}
}
.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: 932px) {
.alignright {
.entry-content > .alignright {
margin-right: calc( 0.5 * (100vw - calc( 932px - 32px)));
}
}
@media only screen and (min-width: 1024px) {
.alignright {
.entry-content > .alignright {
margin-right: calc( 0.5 * (100vw - calc( 932px - 32px)));
}
}
@media only screen and (min-width: 1280px) {
.alignright {
.entry-content > .alignright {
margin-right: calc( 0.5 * (100vw - calc( 932px - 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: 932px) {
.alignleft {
.entry-content > .alignleft {
margin-left: calc( 0.5 * (100vw - calc( 932px - 32px)));
}
}
@media only screen and (min-width: 1024px) {
.alignleft {
.entry-content > .alignleft {
margin-left: calc( 0.5 * (100vw - calc( 932px - 32px)));
}
}
@media only screen and (min-width: 1280px) {
.alignleft {
.entry-content > .alignleft {
margin-left: calc( 0.5 * (100vw - calc( 932px - 32px)));
}
}
@ -3358,6 +3384,29 @@ img#wpstats {
* Vendors
* - 3rd-party compatibility styles
*/
/**
* Subscription Form
*/
.wp-block-jetpack-subscriptions form > * {
margin-top: 21.312px;
margin-bottom: 21.312px;
}
@media only screen and (min-width: 560px) {
.wp-block-jetpack-subscriptions form > * {
margin-top: 32px;
margin-bottom: 32px;
}
}
.wp-block-jetpack-subscriptions form > *:first-child {
margin-top: 0;
}
.wp-block-jetpack-subscriptions form > *:last-child {
margin-bottom: 0;
}
/**
* Child Theme Extra Styles
*/

View file

@ -1962,29 +1962,45 @@ table th,
vertical-align: middle;
}
/* Text Alignments */
/* Block Alignments */
/**
* .alignleft
*/
.alignleft {
/*rtl:ignore*/
text-align: left;
/*rtl:ignore*/
float: left;
margin-top: 0;
/*rtl:ignore*/
margin-right: 16px;
margin-bottom: 32px;
}
/**
* .aligncenter
*/
.aligncenter {
clear: both;
float: none;
text-align: center;
}
/**
* .alignright
*/
.alignright {
/*rtl:ignore*/
float: right;
/*rtl:ignore*/
margin-left: 16px;
margin-top: 0;
margin-bottom: 32px;
/*rtl:ignore*/
margin-left: 16px;
}
.entry-content * > .alignleft + *,
.entry-content * > .alignright + * {
margin-top: 0;
}
/**
@ -2419,12 +2435,12 @@ table th,
}
}
.main-navigation > div > ul > li:first-of-type {
margin-left: -16px;
.main-navigation > div > ul > li:first-of-type > a {
padding-left: 0;
}
.main-navigation > div > ul > li:last-of-type {
margin-right: -16px;
.main-navigation > div > ul > li:last-of-type > a {
padding-right: 0;
}
.main-navigation > div > ul > li > a {
@ -2532,12 +2548,12 @@ table th,
margin: 0;
}
.social-navigation > div > ul > li:first-of-type {
margin-left: calc(-0.5 * 16px);
.social-navigation > div > ul > li:first-of-type > a {
padding-left: 0;
}
.social-navigation > div > ul > li:last-of-type {
margin-right: calc(-0.5 * 16px);
.social-navigation > div > ul > li:last-of-type > a {
padding-right: 0;
}
.social-navigation a {
@ -2635,12 +2651,12 @@ table th,
display: inline;
}
.footer-navigation .footer-menu > li:first-of-type {
margin-left: -16px;
.footer-navigation .footer-menu > li:first-of-type > a {
padding-left: 0;
}
.footer-navigation .footer-menu > li:last-of-type {
margin-right: -16px;
padding-right: 0;
}
.footer-navigation .footer-menu a {
@ -3200,7 +3216,7 @@ img#wpstats {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(100% + 256px);
max-width: calc(100vw - 32px);
max-width: calc(100% - 32px);
margin-left: auto;
margin-right: auto;
}
@ -3208,35 +3224,35 @@ img#wpstats {
@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(100vw - 32px);
max-width: calc(100% - 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(100vw - 32px);
max-width: calc(100% - 32px);
}
}
@media only screen and (min-width: 932px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 932px - 32px) + 256px);
max-width: calc(100vw - 32px);
max-width: calc(100% - 32px);
}
}
@media only screen and (min-width: 1024px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 932px - 32px) + 256px);
max-width: calc(100vw - 32px);
max-width: calc(100% - 32px);
}
}
@media only screen and (min-width: 1280px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 932px - 32px) + 256px);
max-width: calc(100vw - 32px);
max-width: calc(100% - 32px);
}
}
@ -3283,84 +3299,95 @@ img#wpstats {
}
.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. */
margin-left: -16px;
margin-right: -16px;
width: calc(100% + 32px);
/* Letting the box-model do most of the work here. */
}
.alignright {
@media only screen and (min-width: 560px) {
.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
margin-left: inherit;
margin-right: inherit;
width: inherit;
}
}
.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: 932px) {
.alignright {
.entry-content > .alignright {
/*rtl:ignore*/
margin-right: calc( 0.5 * (100vw - calc( 932px - 32px)));
}
}
@media only screen and (min-width: 1024px) {
.alignright {
.entry-content > .alignright {
/*rtl:ignore*/
margin-right: calc( 0.5 * (100vw - calc( 932px - 32px)));
}
}
@media only screen and (min-width: 1280px) {
.alignright {
.entry-content > .alignright {
/*rtl:ignore*/
margin-right: calc( 0.5 * (100vw - calc( 932px - 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: 932px) {
.alignleft {
.entry-content > .alignleft {
/*rtl:ignore*/
margin-left: calc( 0.5 * (100vw - calc( 932px - 32px)));
}
}
@media only screen and (min-width: 1024px) {
.alignleft {
.entry-content > .alignleft {
/*rtl:ignore*/
margin-left: calc( 0.5 * (100vw - calc( 932px - 32px)));
}
}
@media only screen and (min-width: 1280px) {
.alignleft {
.entry-content > .alignleft {
/*rtl:ignore*/
margin-left: calc( 0.5 * (100vw - calc( 932px - 32px)));
}
@ -3374,6 +3401,29 @@ img#wpstats {
* Vendors
* - 3rd-party compatibility styles
*/
/**
* Subscription Form
*/
.wp-block-jetpack-subscriptions form > * {
margin-top: 21.312px;
margin-bottom: 21.312px;
}
@media only screen and (min-width: 560px) {
.wp-block-jetpack-subscriptions form > * {
margin-top: 32px;
margin-bottom: 32px;
}
}
.wp-block-jetpack-subscriptions form > *:first-child {
margin-top: 0;
}
.wp-block-jetpack-subscriptions form > *:last-child {
margin-bottom: 0;
}
/**
* Child Theme Extra Styles
*/