path: root/css/page.scss

div.page {
	background-color:var(--backgroundColour);
	border-radius:   1rem;
	color:           var(--foregroundColour);
	padding:         1rem 2rem;
	text-align:      left;
	width:           100%;

	p.heading {
		font-family:  $sansSerifFont;
		font-size:    3rem;
		font-weight:  bold;
		margin-bottom:1rem;
		text-align:   right;
	}

	span.footnote {
		font-size:     calc(2rem / 3);
		vertical-align:sub;

		&::before {
			content:"\0020";
		}
	}

	p.vocable {
		font-style:italic;
		margin-top:calc(1rem / 2);
	}

	p.note {
		font-style:italic;

		&::before {
			content:"\002E\002E\002E\0020";
		}

		span.emphasis {
			font-weight:bold;
		}
	}

	p.footnote {
		font-size: calc(2rem / 3);
		font-style:italic;
		margin-top:calc(1rem / 2);
	}

	div.group {
		* + & {
			margin-top:1rem;
		}

		* {
			margin-top:0;
		}
	}

	div.section  {
		& + div.section {
			margin-top:1rem;
		}

		p.heading {
			border-top-style:solid;
			border-top-width:calc(1rem / 3);
			font-size:       2rem;
			padding-top:     1rem;
			width:           fit-content; // We don't need to change alignement with this.
		}

		p.subheading {
			font-size:  calc(2rem / 3);
			font-weight:bold;
			margin-top: 0;

			&::before {
				content:    "\0020\2014\0020";
				font-weight:normal;
			}
		}
	}
}