twentynineteen width and margin code

compiled.scss

//Why vw instead of percentage?
$columns: (
	1: calc(1 * (100vw / 12)),
	2: calc(2 * (100vw / 12)),
	3: calc(3 * (100vw / 12)),
	4: calc(4 * (100vw / 12)),
	5: calc(5 * (100vw / 12)),
	6: calc(6 * (100vw / 12)),
	7: calc(7 * (100vw / 12)),
	8: calc(8 * (100vw / 12)),
	9: calc(9 * (100vw / 12)),
	10: calc(10 * (100vw / 12)),
	11: calc(11 * (100vw / 12)),
	12: calc(12 * (100vw / 12))
);

$columns__margin: $size__spacing-unit;

// Responsive widths.

$size__spacing-unit: 1rem;
$size__site-main: 100%;
$size__site-sidebar: 25%;
//Unclear why this math equation, why a percentage plus pixels especially when columns are just vw calculations
$size__site-margins: calc(10% + 60px);
//What is the purpose of the -28px what does that number represent?
$size__site-tablet-content: calc(8 * (100vw / 12) - 28px);
$size__site-desktop-content: calc(6 * (100vw / 12) - 28px);


/* Calculates maximum width for post content */
@mixin postContentMaxWidth() {

	@include media(tablet) {
		max-width: $size__site-tablet-content;
	}

	@include media(desktop) {
		max-width: $size__site-desktop-content;
	}
}

/** === Content Width on backend === */

.wp-block {
	width: calc(100vw - (2 * #{$size__spacing-unit}));
	max-width: 100%;
	//Not the same width as frontend
	@include media(tablet) {
		width: calc(8 * (100vw / 12));
	}
	//Not the same width as frontend
	@include media(desktop) {
		width: calc(6 * (100vw / 12 ));
	}

	// Only the top level blocks need specific widths, therefore override for every nested block.
	.wp-block {
		width: 100%;
	}
}

/** === Editor Frame === */

body {

	.wp-block[data-align="full"] {
		width: 100%;
	}

	@include media(mobile) {

		.wp-block[data-align="full"] {
			width: calc( 100% + 90px );
			max-width: calc( 100% + 90px );
		}
	}

	@include media(tablet) {

		.editor-writing-flow {
			max-width: 80%;
			margin: 0 10%;
		}

		.editor-post-title__block,
		.editor-default-block-appender,
		.editor-block-list__block {
			margin-left: 0;
			margin-right: 0;
		}
		
		// Doesn't show wide in backend like it does frontend
		.wp-block[data-align="wide"] {
			width: 100%;
		}

		.wp-block[data-align="full"] {
			position: relative;
			left: calc( -12.5% - 14px );
			width: calc( 125% + 116px );
			max-width: calc( 125% + 115px ); // Subtract 1px here to avoid the rounding errors that happen due to the usage of percentages.
		}

		.wp-block[data-align="right"] {
			max-width: 125%;
		}
	}
}

.entry-header {
	//This appears to be a more consistent pattern
	margin: calc(3 * #{ $size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
	//margin: calc( 3 * 1rem) calc(10% + 60px) 1rem);
	//margin-top: 3rem;
	//margin-left: 1rem;
	//margin-right: 1rem;
	//margin-bottom: 1rem;
	position: relative;

	@include media(tablet) {
		margin: calc(3 * #{ $size__spacing-unit}) $size__site-margins $size__spacing-unit;
		//margin: calc( 3 * 1rem) calc(10% + 60px) 1rem);
		//margin-top: 3rem;
		//margin-left: calc(10% + 60px);
		//margin-right: calc(10% + 60px);
		//margin-bottom: 1rem;
	}
}

//This seems a one off to the rest of the patterns of .entry-header and .entry-footer
.entry-content,
.entry-summary {
	margin: 0 $size__spacing-unit;

	@include media(tablet) {
		max-width: 80%;
		margin: 0 10%;
		padding: 0 60px;
	}
}

/* This basically accomplishes the same thing as above and seems more in line with theme pattern
.entry-content,
.entry-summary {
	margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit;

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

.entry-footer {
	// Compare with entry-content/entry-summary.
	// Also, why does this have max-widths but header does not?
	margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit;

	@include media(tablet) {
		margin: $size__spacing-unit $size__site-margins calc(3 * #{$size__spacing-unit});
		max-width: $size__site-tablet-content;
	}

	@include media(tablet) {
		max-width: $size__site-desktop-content;
	}
}


.entry .entry-content > *,
.entry .entry-summary > * {
	margin: 32px 0;
	max-width: 100%;

	@include postContentMaxWidth(); 
	/* 
		@include media(tablet) {
			max-width: calc(6 * (100vw / 12) - 28px);
		}

		@include media(desktop) {
			max-width: calc(8 * (100vw / 12) - 28px);
		}
	*/

	@include media(tablet) {
		margin: 32px 0;
	}

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

	> *:last-child {
		margin-bottom: 0;
	}

	&.alignwide {
		margin-left: auto;
		margin-right: auto;
		clear: both;

		@include media(tablet) {
			width: 100%;
			max-width: 100%;
		}
	}

	&.alignfull {
		position: relative;
		left: -#{$size__spacing-unit };
		//left: -1rem; ** This compensates for [margin: 0 $size__spacing-unit] in entry-content/entry-summary
		width: calc( 100% + (2 * #{$size__spacing-unit}));
		max-width: calc( 100% + (2 * #{$size__spacing-unit}));
		clear: both;

		@include media(tablet) {
			margin-top: calc(2 * #{$size__spacing-unit});
			margin-bottom: calc(2 * #{$size__spacing-unit});
			//Why these random pixels and percentages? I get that -12.5% * 2 = 25% to account for the 125% wdith, but why the -75px and extra 150px
			left: calc( -12.5% - 75px );
			width: calc( 125% + 150px );
			max-width: calc( 125% + 150px );
		}
	}
}

//Helpful commits
// Merge pull request #447 from anevins12/fix/dot-separator-not-centred