path: root/css/page.scss

#page {
	margin:    auto;
	max-width: calc($contentWidth + $padding * 2);
	padding:   $padding;

	h1 {
		font-family: $specialFont;
		font-size:   2em;
		font-weight: bold;
		width:       100%;

		&:nth-of-type(even) {
			text-align: right;
		}

		&::after {
			@include separator;

			margin-top: $separatorWidth;
		}

		a.anchor {
			aspect-ratio:     1;
			background-color: var(--textColour);
			display:          inline-block;
			mask-image:       url("/svg/glyph/chain.svg");
			mask-size:        cover;
			vertical-align:   middle;
			width:            0.5em;
		}
	}

	section {
		line-height: 2em;
		max-width:   calc($contentWidth / 2 - $padding);
		text-align:  justify;
		width:       100%;

		&:nth-of-type(even):not(.fullWidth) {
			margin-left:     auto;
			text-align-last: right;
		}

		&.fullWidth {
			max-width:  100%;
			text-align: center;
		}

		p.codeblock {
			background-color: var(--textColour);
			border-radius:    calc($padding / 2);
			color:            var(--backgroundColour);
			font-family:      $codeFont;
			line-height:      normal;
			padding:          $padding;
			text-align:       left;
			text-align-last:  left;
			white-space:      preserve;
		}

		p.note {
			font-style:      italic;
			font-weight:     bold;
			text-align:      left;
			text-align-last: left;

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

		code {
			$padding: 0.25rem;

			background-color: var(--foregroundColour);
			border-radius:    calc($padding / 2);
			padding:          $padding;
		}

		ul {
			background-color: var(--foregroundColour);
			border-radius:    calc($padding / 2);
			display:          block;
			padding:          $padding;
			text-align:       left;
			text-align-last:  left;
			width:            100%;
		}

		div.image {
			position: relative;
			width:    100%;

			a {
				border-radius: calc($padding / 2);
				display:       block;
				position:      relative;
			}

			img {
				border-radius: calc($padding / 2);
				display:       block;
				width:         100%;

				&.blur {
					filter:         blur($padding) saturate(200%);
					pointer-events: none;
					position:       absolute;
				}
			}
		}
	}

	h1 + section, section + h1 {
		margin-top: $padding;
	}

	@import "overview";
}