Skip to content
This repository has been archived by the owner on Jan 15, 2019. It is now read-only.

Update front end margins to match the editor on desktop screens #502

Merged
merged 9 commits into from
Nov 8, 2018
Merged

Update front end margins to match the editor on desktop screens #502

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9771a06
Update margin spacing
kjellr Nov 6, 2018
58ebe03
Adjust aligncenter styles.
kjellr Nov 7, 2018
8228e29
Adjust blockquote margins.
kjellr Nov 7, 2018
c81950b
Adjust location of comment reply link.
kjellr Nov 7, 2018
0127619
Refactor to use mixins more frequently.
kjellr Nov 7, 2018
ef6215b
Remove unnecessary footer max-width.
kjellr Nov 7, 2018
19f0e34
Move entry-content + entry-summary styles outside of _blocks.scss
kjellr Nov 7, 2018
29657b3
Add .entry class wrapper to customizer color styles.
kjellr Nov 7, 2018
9c600b4
Merge 'master' into update/margin-spacing, resolve conflicts.
kjellr Nov 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions inc/color-patterns.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,12 @@ function twentynineteen_custom_colors_css() {
.sticky-post,
.entry-content .wp-block-button .wp-block-button__link,
.button, button, input[type="button"], input[type="reset"], input[type="submit"],
.entry-content > .has-primary-background-color,
.entry-content > *[class^="wp-block-"].has-primary-background-color,
.entry-content > *[class^="wp-block-"] .has-primary-background-color,
.entry-content > *[class^="wp-block-"].is-style-solid-color,
.entry-content > *[class^="wp-block-"].is-style-solid-color .has-primary-background-color,
.entry-content .wp-block-file .wp-block-file__button {
.entry .entry-content > .has-primary-background-color,
.entry .entry-content > *[class^="wp-block-"].has-primary-background-color,
.entry .entry-content > *[class^="wp-block-"] .has-primary-background-color,
.entry .entry-content > *[class^="wp-block-"].is-style-solid-color,
.entry .entry-content > *[class^="wp-block-"].is-style-solid-color .has-primary-background-color,
.entry .entry-content .wp-block-file .wp-block-file__button {
background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
}

Expand Down Expand Up @@ -92,21 +92,21 @@ function twentynineteen_custom_colors_css() {
.comment .comment-metadata .comment-edit-link:hover,
#colophon .site-info a:hover,
.widget a,
.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.entry-content > *[class^="wp-block-"] .has-primary-color,
.entry-content > *[class^="wp-block-"].is-style-solid-color .has-primary-color {
.entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.entry .entry-content > *[class^="wp-block-"] .has-primary-color,
.entry .entry-content > *[class^="wp-block-"].is-style-solid-color .has-primary-color {
color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
}

/*
* Set left border color for:
* wp block quote
*/
.entry-content blockquote,
.entry-content .wp-block-quote:not(.is-large),
.entry-content .wp-block-quote:not(.is-style-large) {
.entry .entry-content blockquote,
.entry .entry-content .wp-block-quote:not(.is-large),
.entry .entry-content .wp-block-quote:not(.is-style-large) {
border-left-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
}

Expand Down
64 changes: 28 additions & 36 deletions sass/blocks/_blocks.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
/* !Block styles */

.entry-content > *,
.entry-summary > * {
@include postContentMaxWidth();

.entry .entry-content > *,
.entry .entry-summary > * {
margin: 32px $size__spacing-unit;
max-width: calc(100vw - (2 * #{ $size__spacing-unit }));

@include postContentMaxWidth();

@include media(tablet) {
margin: 32px calc(2 * (100vw / 12));
margin: 32px 0;
}
/*
// Set top margins for headings
Expand Down Expand Up @@ -35,18 +36,18 @@
margin-right: auto;

@include media(tablet) {
margin-left: calc(2 * (100vw / 12));
margin-right: calc(2 * (100vw / 12));
max-width: calc(8 * (100vw / 12));
width: 100%;
max-width: 100%;
}
}

&.alignfull {
margin-top: calc(2 * #{$size__spacing-unit});
margin-right: 0;
margin-bottom: calc(2 * #{$size__spacing-unit});
margin-left: 0;
max-width: 100%;
position: relative;
left: calc( -12.5% - 75px );
width: calc( 125% + 150px );
max-width: calc( 125% + 150px );
}

&.alignleft {
Expand Down Expand Up @@ -77,28 +78,25 @@

@include media(tablet) {
max-width: calc(4 * (100vw / 12));
margin-left: calc(2 * #{$size__spacing-unit});
/*rtl:ignore*/
margin-right: calc(2 * (100vw / 12));
margin-left: calc(2 * #{$size__spacing-unit});
margin-right: 0;
}
}
&.aligncenter {

margin-left: auto;
margin-right: auto;

@include media(desktop) {
margin-left: calc(2 * (100vw / 12));
margin-right: calc(2 * (100vw / 12));
max-width: calc(10 * (100vw / 12));
position: relative;
left: 25%;
transform: translate(-50%);
@include postContentMaxWidth();

@include media(tablet) {
margin-left: 0;
margin-right: 0;
}
}
}

.entry-content {
.entry .entry-content {

//! Audio
.wp-block-audio {
Expand Down Expand Up @@ -376,8 +374,8 @@

&.is-large,
&.is-style-large {
padding: $size__spacing-unit 0 ($size__spacing-unit) ($size__spacing-unit * 2);
margin: $size__spacing-unit 0;
margin: $size__spacing-unit;
padding: 0;
border-left: none;

p {
Expand All @@ -392,9 +390,8 @@
}

@include media(tablet) {

margin: $size__spacing-unit calc(2 * (100vw / 12));
max-width: calc(6 * (100vw / 12));
margin: $size__spacing-unit 0;
padding: $size__spacing-unit 0;

p {
font-size: $font__size-lg;
Expand Down Expand Up @@ -436,15 +433,15 @@
width: calc(100vw - (2 * #{ $size__spacing-unit }));
max-width: calc(100vw - (2 * #{ $size__spacing-unit }));

@include postContentMaxWidth();

@include media(tablet) {
font-size: $font__size-xl;
width: calc(8 * (100vw / 12));
max-width: calc(8 * (100vw / 12));
width: $size__site-tablet-content;
}

@include media(desktop) {
width: calc(6 * (100vw / 12 ));
max-width: calc(6 * (100vw / 12 ));
width: $size__site-desktop-content;
}
}

Expand All @@ -463,11 +460,6 @@
}
}

&.aligncenter {
margin: 32px calc(2 * (100vw / 12));
max-width: calc(6 * (100vw / 12));
}

&.has-left-content {
justify-content: center;

Expand Down
13 changes: 13 additions & 0 deletions sass/media/_captions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,18 @@
.wp-caption {
margin-bottom: calc(1.5 * #{$size__spacing-unit});

&.aligncenter {

@include media(tablet) {
position: relative;
left: calc( #{$size__site-tablet-content} / 2 );
transform: translateX( -50% );
}

@include media(desktop) {
left: calc( #{$size__site-desktop-content} / 2 );
}
}
}

.wp-caption img[class*="wp-image-"] {
Expand Down
5 changes: 2 additions & 3 deletions sass/mixins/_mixins-master.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,14 +177,13 @@

/* Calculates maximum width for post content */
@mixin postContentMaxWidth() {
max-width: calc(100vw - (2 * #{ $size__spacing-unit }));

@include media(tablet) {
max-width: calc(8 * (100vw / 12));
max-width: $size__site-tablet-content;
}

@include media(desktop) {
max-width: calc(6 * (100vw / 12));
max-width: $size__site-desktop-content;
}
}

Expand Down
12 changes: 6 additions & 6 deletions sass/navigation/_next-previous.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
margin: calc(3 * 1rem) 0;

@include media(tablet) {
margin: calc(3 * 1rem) calc(2 * (100vw / 12));
margin: calc(3 * 1rem) $size__site-margins;
max-width: calc(6 * (100vw / 12));
}

Expand All @@ -28,8 +28,8 @@

@include media(desktop) {
flex-direction: row;
margin: 0 calc(2 * (100vw / 12));
max-width: calc(8 * (100vw / 12));
margin: 0 $size__site-margins;
max-width: $size__site-desktop-content;
}

a {
Expand Down Expand Up @@ -130,7 +130,7 @@

@include media(tablet) {

margin-left: calc(2 * (100vw / 12) );
margin-left: $size__site-margins;
padding: 0;

.prev,
Expand Down Expand Up @@ -158,8 +158,8 @@
margin: 0 $size__spacing-unit;

@include media(desktop) {
margin: 0 calc(2 * (100vw / 12));
max-width: calc(8 * (100vw / 12));
margin: 0 $size__site-margins;
max-width: $size__site-tablet-content;
}
}

Expand Down
4 changes: 1 addition & 3 deletions sass/site/footer/_site-footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,10 @@

.widget-area,
.site-info {

margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;

@include media(tablet) {
margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12));
max-width: calc(8 * (100vw / 12));
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
}

.imprint {
Expand Down
4 changes: 2 additions & 2 deletions sass/site/header/_site-featured-image.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,8 +101,8 @@

@include media (tablet) {

margin-left: calc(2 * (100vw / 12));
margin-right: calc(2 * (100vw / 12));
margin-left: $size__site-margins;
margin-right: $size__site-margins;
}

.entry-title {
Expand Down
2 changes: 1 addition & 1 deletion sass/site/header/_site-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
position: relative;

@include media(tablet) {
margin: 0 calc(2 * (100vw / 12));
margin: 0 $size__site-margins;
}
}

Expand Down
8 changes: 4 additions & 4 deletions sass/site/primary/_archives.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
margin: $size__spacing-unit $size__spacing-unit calc(3 * #{$size__spacing-unit});

@include media(tablet) {
margin: 0 calc(2 * (100vw / 12)) calc(3 * #{$size__spacing-unit});
max-width: calc(8 * (100vw / 12));
margin: 0 calc(2 * (100vw / 12)) $size__site-margins;
max-width: $size__site-tablet-content;
}

.page-title {
Expand Down Expand Up @@ -42,7 +42,7 @@
.hfeed .entry .entry-header {

@include media(tablet) {
margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12)) calc(#{ $size__spacing-unit } / 2);
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins calc(#{ $size__spacing-unit } / 2);
}
}

Expand All @@ -56,7 +56,7 @@
margin: calc(3 * #{$size__spacing-unit}) #{$size__spacing-unit};

@include media(tablet) {
margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12)) calc(#{ $size__spacing-unit } / 2);
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins calc(#{ $size__spacing-unit } / 2);
}
}

Expand Down
30 changes: 22 additions & 8 deletions sass/site/primary/_comments.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,10 @@
.no-comments {
margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;

@include postContentMaxWidth();

@include media(tablet) {
margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12));
max-width: calc(6 * (100vw / 12));
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
}
}

Expand All @@ -36,8 +37,8 @@
align-items: baseline;
display: flex;
justify-content: space-between;
margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12));
max-width: calc(8 * (100vw / 12));
margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
max-width: $size__site-tablet-content;
}

.comments-title {
Expand Down Expand Up @@ -150,9 +151,12 @@
}

.comment-reply {
left: calc(#{$size__spacing-unit} + 100%);
bottom: 0;
position: absolute;

@include media(desktop) {
left: 100%;
bottom: 0;
position: absolute;
}

#respond + & {
display: none;
Expand All @@ -176,9 +180,14 @@
}

.comment-body {
margin: calc(2 * #{$size__spacing-unit}) 0;
margin: calc(2 * #{$size__spacing-unit}) 0 0;

@include media(desktop) {
margin: calc(2 * #{$size__spacing-unit}) 0;
}
}


.comment-meta {
position: relative;

Expand Down Expand Up @@ -257,6 +266,7 @@
margin-left: $size__spacing-unit;
position: relative;
vertical-align: baseline;
line-height: 2.25;
}

> a,
Expand Down Expand Up @@ -312,6 +322,10 @@

margin: $size__spacing-unit 0;

@include media(desktop) {
padding-right: $size__spacing-unit;
}

> *:first-child {
margin-top: 0;
}
Expand Down
Loading