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

Dalston: Cleaning up Project Block Styles

Browse source
This commit is contained in:
Allan Cole 2019-09-24 16:12:36 -04:00
parent c76f029d96
commit a4edc3cda8
5 changed files with 87 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
dalston/block-extends/extend-columns-block.css
View file

@ -66,28 +66,38 @@
/* Project */
.wp-block-columns.is-style-project.alignfull {
padding-left: 0;
padding-left: 16px;
padding-right: 0;
}
@media (min-width: 600px) {
.wp-block-columns.is-style-project .wp-block-column:nth-child(2n) {
.wp-block-columns.is-style-project.alignfull {
padding-left: 32px;
padding-right: 0;
}
.wp-block-columns.is-style-project > .wp-block-column:nth-child(2n) {
margin-left: 0;
}
}
@media (min-width: 782px) {
@media (min-width: 1024px) {
.wp-block-columns.is-style-project .wp-block-column:not(:first-child) {
.wp-block-columns.is-style-project > .wp-block-column:first-child {
padding-right: 32px;
}
.wp-block-columns.is-style-project > .wp-block-column:not(:first-child) {
margin-left: 0;
}
.wp-block-columns.is-style-project .wp-block-column {
.wp-block-columns.is-style-project > .wp-block-column,
.wp-block-columns.is-style-project > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] {
flex-basis: 100% !important;
}
.wp-block-columns.is-style-project .wp-block-column:first-of-type {
.wp-block-columns.is-style-project > .wp-block-column:first-of-type,
.wp-block-columns.is-style-project > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"]:first-of-type {
flex-shrink: 0;
flex-basis: auto !important;
width: calc( 0.5 * (100vw - calc( 782px - 96px) - 64px)) !important;
width: calc( 0.5 * (100vw - calc( 782px - 32px) - 64px)) !important;
}
}

26
dalston/sass/_extra-child-theme.scss
View file

@ -6,7 +6,7 @@
$spacing_unit: map-deep-get($config-global, "spacing", "unit");
$spacing_horizontal: map-deep-get($config-global, "spacing", "horizontal");
$spacing_vertical: map-deep-get($config-global, "spacing", "vertical");
$header-css-grid-width: calc( 0.5 * (100vw - #{$content-width-lg} - #{4 * $spacing_unit}) );
$header-css-grid-width: calc( 0.5 * (100vw - #{$content-width-lg} - #{8 * $spacing_unit}) );
$primary_color: map-deep-get($config-global, "color", "primary", "default");
a {
@ -36,7 +36,7 @@ a {
}
@include media(desktop) {
width: calc(#{$content-width-flex} - #{$spacing_vertical});
width: calc(#{$content-width-flex} - #{2 * $spacing_vertical});
}
}
@ -155,12 +155,29 @@ a {
}
}
@include media(mobile) {
.site-header {
.site-title {
margin-top: 0;
margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
}
.site-description {
margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
}
&[class*="navigation"] {
margin-bottom: 0;
}
}
}
@include media(desktop) {
.site-header {
grid-template-columns: $header-css-grid-width auto $header-css-grid-width;
grid-template-rows: auto;
grid-auto-flow: row;
grid-column-gap: $spacing_unit;
grid-column-gap: #{2 * $spacing_unit};
grid-template-areas:
". main-navigation social-navigation"
"site-branding site-description social-navigation";
@ -184,6 +201,7 @@ a {
.site-description {
color: #{map-deep-get($config-header, "branding", "color", "text")};
line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
}
.site-title + .site-description {
@ -247,8 +265,6 @@ a {
*/
#colophon {
@extend %responsive-alignwide;
max-width: 100%;
}
.footer-navigation .footer-menu a {

1
dalston/style-editor.css
View file

@ -329,6 +329,7 @@ object {
.wp-block-cover-image {
background-color: black;
color: white;
min-height: 480px;
/* Treating H2 separately to account for legacy /core styles */
}

37
dalston/style-rtl.css
View file

@ -1220,6 +1220,7 @@ input.has-focus[type="submit"],
.wp-block-cover,
.wp-block-cover-image {
background-color: black;
min-height: 480px;
margin: inherit;
/* Treating H2 separately to account for legacy /core styles */
/**
@ -3196,7 +3197,7 @@ img#wpstats {
}
}
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
.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(100% - 32px);
margin-right: auto;
@ -3204,35 +3205,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, #colophon {
.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);
}
}
@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, #colophon {
.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);
}
}
@media only screen and (min-width: 782px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 782px - 32px) + 256px);
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, #colophon {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 782px - 32px) + 256px);
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, #colophon {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 782px - 32px) + 256px);
max-width: calc(100% - 32px);
}
@ -3435,7 +3436,7 @@ a {
@media only screen and (min-width: 1024px) {
#masthead {
width: calc(100% - 32px);
width: calc(100% - 64px);
}
}
@ -3534,12 +3535,25 @@ a {
}
}
@media only screen and (min-width: 560px) {
.site-header .site-title {
margin-top: 0;
margin-bottom: 32px;
}
.site-header .site-description {
margin-bottom: 32px;
}
.site-header[class*="navigation"] {
margin-bottom: 0;
}
}
@media only screen and (min-width: 1024px) {
.site-header {
grid-template-columns: calc( 0.5 * (100vw - calc( 782px - 32px) - 64px)) auto calc( 0.5 * (100vw - calc( 782px - 32px) - 64px));
grid-template-columns: calc( 0.5 * (100vw - calc( 782px - 32px) - 128px)) auto calc( 0.5 * (100vw - calc( 782px - 32px) - 128px));
grid-template-rows: auto;
grid-auto-flow: row;
grid-column-gap: 16px;
grid-column-gap: 32px;
grid-template-areas: ". main-navigation social-navigation" "site-branding site-description social-navigation";
}
}
@ -3557,6 +3571,7 @@ a {
.site-description {
color: #000000;
line-height: 1.2;
}
.site-title + .site-description {
@ -3615,10 +3630,6 @@ a {
/**
* Footer
*/
#colophon {
max-width: 100%;
}
.footer-navigation .footer-menu a {
font-size: 0.75614rem;
}

37
dalston/style.css
View file

@ -1220,6 +1220,7 @@ input.has-focus[type="submit"],
.wp-block-cover,
.wp-block-cover-image {
background-color: black;
min-height: 480px;
margin: inherit;
/* Treating H2 separately to account for legacy /core styles */
/**
@ -3213,7 +3214,7 @@ img#wpstats {
}
}
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
.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(100% - 32px);
margin-left: auto;
@ -3221,35 +3222,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, #colophon {
.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);
}
}
@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, #colophon {
.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);
}
}
@media only screen and (min-width: 782px) {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 782px - 32px) + 256px);
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, #colophon {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 782px - 32px) + 256px);
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, #colophon {
.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
width: calc(calc( 782px - 32px) + 256px);
max-width: calc(100% - 32px);
}
@ -3464,7 +3465,7 @@ a {
@media only screen and (min-width: 1024px) {
#masthead {
width: calc(100% - 32px);
width: calc(100% - 64px);
}
}
@ -3563,12 +3564,25 @@ a {
}
}
@media only screen and (min-width: 560px) {
.site-header .site-title {
margin-top: 0;
margin-bottom: 32px;
}
.site-header .site-description {
margin-bottom: 32px;
}
.site-header[class*="navigation"] {
margin-bottom: 0;
}
}
@media only screen and (min-width: 1024px) {
.site-header {
grid-template-columns: calc( 0.5 * (100vw - calc( 782px - 32px) - 64px)) auto calc( 0.5 * (100vw - calc( 782px - 32px) - 64px));
grid-template-columns: calc( 0.5 * (100vw - calc( 782px - 32px) - 128px)) auto calc( 0.5 * (100vw - calc( 782px - 32px) - 128px));
grid-template-rows: auto;
grid-auto-flow: row;
grid-column-gap: 16px;
grid-column-gap: 32px;
grid-template-areas: ". main-navigation social-navigation" "site-branding site-description social-navigation";
}
}
@ -3586,6 +3600,7 @@ a {
.site-description {
color: #000000;
line-height: 1.2;
}
.site-title + .site-description {
@ -3644,10 +3659,6 @@ a {
/**
* Footer
*/
#colophon {
max-width: 100%;
}
.footer-navigation .footer-menu a {
font-size: 0.75614rem;
}