themes-wordpress/varia/sass/layout/_structure.scss

/**
 * Site Structure
 *
 * - Set vertical margins and responsive widths on
 *   top-level wrappers and content wrappers
 * - `--global--width-content` is a responsive veriable
 * - See: globals/_global-width-responsive.scss
 */

/**
 * Top Level Wrappers (header, main, footer)
 * - Set vertical padding and horizontal margins
 */
.site-header,
.site-main,
.site-footer {
	padding: map-deep-get($config-global, "spacing", "unit") map-deep-get($config-global, "spacing", "horizontal");
	margin-left: auto;
	margin-right: auto;

	@include media(mobile) {
		padding-top: map-deep-get($config-global, "spacing", "vertical");
		padding-right: 0;
		padding-bottom: map-deep-get($config-global, "spacing", "vertical");
		padding-left: 0;
	}
}

/**
 * Site-main children wrappers
 * - Add double vertical margins here for clearer heirarchy
 */
.site-main > * {

	margin-top: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
	margin-bottom: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});

	&:first-child {
		margin-top: 0;
	}

	&:last-child {
		margin-bottom: 0;
	}
}

/**
 * Major content sections (article, author-bio, pagination, comments, etc.)
 * - Set a maximum responsive content-width
 *
 * .responsive-max-width is a group selector replacing the following:
 * .site-header,
 * .site-main,
 * .site-footer
 * .entry-header,
 * .post-thumbnail,
 * .entry-content,
 * .entry-footer,
 * .author-bio,
 * .widget-area
 */
.responsive-max-width {
	@extend %responsive-aligndefault;
}

/*
 * Block & non-gutenberg content wrappers
 * - Set margins
 */
.entry-header,
.post-thumbnail,
.entry-content,
.entry-footer,
.author-bio,
.widget-area {
	margin-top: map-deep-get($config-global, "spacing", "vertical");
	margin-right: auto;
	margin-bottom: map-deep-get($config-global, "spacing", "vertical");
	margin-left: auto;
}

/*
 * Block & non-gutenberg content wrapper children
 * - Sets spacing-vertical margin logic
 */
.site-footer > *,
.site-main > article > *, // apply vertical margins to article level
.site-main > .not-found > *, // apply vertical margins to article level
.entry-content > *,
.entry-content-child,
[class*="inner-container"] > *,
.widget-area > * {

	margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
	margin-bottom: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };

	@include media(mobile) {
		margin-top: map-deep-get($config-global, "spacing", "vertical");
		margin-bottom: map-deep-get($config-global, "spacing", "vertical");
	}

	&:first-child {
		margin-top: 0;
	}

	&:last-child {
		margin-bottom: 0;
	}
}

/*
 * Block & non-gutenberg content wrapper children
 * - Sets spacing-unit margins
 */
.site-header > *,
.entry-header > *,
.post-thumbnail > *,
.page-content > *,
.comment-content > *,
.author-bio > *,
.widget-area > .widget > * {
	margin-top: map-deep-get($config-global, "spacing", "unit");
	margin-bottom: map-deep-get($config-global, "spacing", "unit");

	&:first-child {
		margin-top: 0;
	}

	&:last-child {
		margin-bottom: 0;
	}
}


/*
 * .entry-content children specific controls
 * - Adds special margin overrides for alignment utility classes
 */
.entry-content > * {

	&.alignleft,
	&.alignright,
	&.alignleft:first-child + *,
	&.alignright:first-child + *,
	&.alignfull {
		margin-top: 0;
	}

	&:last-child,
	&.alignfull {
		margin-bottom: 0;
	}

	/* Reset alignleft and alignright margins after alignfull */
	&.alignfull + .alignleft {
		float: left;
		margin-top: map-deep-get($config-global, "spacing", "vertical");
		margin-left: #{map-deep-get($config-global, "spacing", "horizontal")};
		margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
	}

	&.alignfull + .alignright {
		float: right;
		margin-top: map-deep-get($config-global, "spacing", "vertical");
		margin-left: #{map-deep-get($config-global, "spacing", "horizontal")};
		margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
	}
}