Contact class lacks enough specificity

[SteelWagstaff]

The CSS for Aldine has a rule that targets the .contact class in order to style the contact form designed to go on the home page:

pressbooks-aldine/assets/styles/components/_forms.scss

Lines 109 to 117 in 47ec185

	.contact {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: rem(65) 0 rem(120);
	background: var(--body-bg-alt);

If a user creates a page with the title (& permalink) of 'Contact' the body element for the page itself also receives a .contact class, resulting in flex styling and padding being applied to the page. It can be overridden, but a better solution would be to add additional specification to the .contact class designed to target just the contact form and not other elements which may happen to have this class applied. I recommend using #page

[SteelWagstaff]

@cmurtagh and @tw77 -- this came up in our support checkin today. I've submitted a PR that I think should fix it by adding an additional selector to the rule which targets the .contact class: #457. The CSS workaround was simply to apply something like:

body.contact {
	align-items: normal;
	padding: 0;
}