Iosevka/shared/styles-scss/page-parts/grand-intro.scss

@use "sass:math";

@use "../shared/chroma.scss";
@use "../shared/metrics.scss";

.grand-intro {
	padding-top: 0;
	padding-bottom: 0;
}

.grand-intro-text {
	margin: math.div(8em, 3) 0;
	text-align: left;
	width: 18em;
	line-height: 1.66667;
	font-size: 3.2rem;
	font-weight: 200;
	@include chroma.gradient-text-bg(chroma.$accent1, chroma.$azure1);
	@include metrics.AutoFontSize(48, 2.4rem);
	@include metrics.AutoFontSize(48, 2rem);
	@include metrics.AutoFontSize(48, 1.6rem);
	@include metrics.AutoFontSize(48, 1.2rem);
	@include metrics.AutoFontSize(48, 0.8rem);

	strong,
	em {
		font-weight: 300;
		font-style: normal;
		white-space: nowrap;
		@include chroma.gradient-text-enable();
	}
}

.grand-intro-family {
	$qtyNoWidthFamilies: 2;
	$itemPadding: math.div(2.4em, 2.4);
	$itemHeight: math.div(3em, 2.4);
	$staticColumnWidth: math.div(2em, 2.4);
	$numberColumnWidth: math.div(8em, 2.4);

	margin: math.div(8em, 2.4) 0;
	font-size: 2.4rem;

	@include metrics.AutoFontSize(48, 2.4rem, math.div(2.4, 3.2));
	@include metrics.AutoFontSize(48, 2rem, math.div(2.4, 3.2));
	@include metrics.AutoFontSize(48, 1.6rem, math.div(2.4, 3.2));
	@include metrics.AutoFontSize(48, 1.2rem, math.div(2.4, 3.2));

	.family-item {
		position: relative;
		display: flex;
		@include chroma.gradient-text-bg(chroma.$accent1, chroma.$azure1);
		align-items: flex-start;
		padding-top: $itemPadding;

		.spacing-type {
			position: absolute;
			font-size: 0.8rem;
			font-stretch: expanded;
			font-weight: 300;
			text-transform: uppercase;
			top: math.div(0.8em, 2.4 * 0.8);
			left: 0;
			@include metrics.AutoFontSize(48, 0.8rem);
		}
		.family-name,
		.stat {
			font-size: 1em;
			font-weight: 300;
			line-height: $itemHeight;
			height: $itemHeight;
			margin: 0;
			padding: 0;
		}
		.family-name {
			color: chroma.$light2;
			flex: 3;
		}
		.stat {
			flex: none;
			width: $numberColumnWidth;

			@media (max-width: metrics.sectionTotalWidthChars(36, 1.6rem)) {
				display: none;
			}
			&.static {
				width: 2rem;
				margin-left: math.div(-($numberColumnWidth - $staticColumnWidth + 0.25em), 2);
				margin-right: math.div($numberColumnWidth - $staticColumnWidth + 0.25em, 2);
			}
			&.hidden {
				visibility: hidden;
			}
		}
		.stat.dynamic .quantity {
			@include chroma.gradient-text-enable();
		}
		.stat.static .quantity {
			text-align: center;
		}
		.stat .desc {
			font-size: 0.8rem;
			font-weight: 400;
			font-stretch: expanded;
			height: 1rem;
			line-height: 1rem;
		}
		&.enumeration {
			font-weight: 400;
			font-stretch: expanded;
			padding-top: calc(#{$itemPadding} + 1rem);
			.stat.refer {
				position: relative;
				height: auto;
				.enumeration-item {
					font-size: 0.8rem;
					line-height: 1.5em;
				}
				&:before {
					content: "";
					display: block;
					position: absolute;
					border-left: 1px solid chroma.$dark4;
					top: -1.5rem;
					height: 1rem;
					left: 0.4rem;
					width: 0;
				}
				&.ext-4:before {
					top: calc(-1.5rem - #{$qtyNoWidthFamilies * ($itemHeight + $itemPadding)});
					height: calc(1rem + #{$qtyNoWidthFamilies * ($itemHeight + $itemPadding)});
				}
			}
		}
	}
}