@use "lib/_var";

body {
	background-color: var(--background-color);
	font-family: var(--font-body);
	color: var(--text-color);
}

main {
	margin: 20px;
}

p.warning {
	strong {
		font-weight: 600;
	}
	margin-bottom: 5vh;
	line-height: 1.5;
	font-size: 1.125rem;
	border-left: 5px solid color-mix(in srgb, var(--text-color), transparent 90%);
	padding-left: 20px;
}

header {
	margin-bottom: 1rem;
}

h2 {
	font-family: var(--font-heading);
	font-weight: 300;
	font-size: 2rem;
	letter-spacing: -0.04em;
	margin-bottom: 0.4em;
}

h3 {
	font-family: var(--font-code);
	text-transform: uppercase;
	font-size: 1.25rem;
	color: var(--subtext1-color);
	margin-bottom: 0.4em;
}

section.posts {
	margin-bottom: 5vh;

	&:last-child {
		margin-bottom: 10vh;
	}
}

ul.post-list {
	display: grid;
	grid-template-columns: 1fr 15rem;
	row-gap: 0.8rem;
	column-gap: 1rem;
	align-items: last baseline;

	li {
		display: contents;
		font-size: 1.5rem;
		font-weight: 400;
		// font-family: var(--font-heading);

		span.published-date {
			text-wrap-mode: nowrap;
			display: block;
		}

		span.post-title {
			display: flex;
			align-items: baseline;
			gap: 1rem;

			a {
				color: var(--text-color);
			}

			&::after {
				flex: 1;
				content: "";
				border-bottom: 1px solid var(--text-color);
				transform: translateY(0.12em);
			}
		}
	}
}

@media (max-width: 600px) {
	h2 {
		font-size: 2rem;
	}

	ul.post-list {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 1.5rem;

		li {
			display: flex;
			flex-direction: column-reverse;

			// overflow: hidden;
			// text-overflow: ellipsis;

			span.published-date {
				color: var(--subtext1-color);
				display: inline;
				font-size: 1rem;
			}

			span.post-title {
				display: block;
				font-size: 1.25rem;

				&::after {
					display: none;
				}
			}
		}
	}
}