website/_src/assets/css/blog.css

:root {
	--avatar: 3rem;
}

@media (prefers-color-scheme: light) {
	article {
		& p[aria-label="Post warning"] {
			border-color: currentColor;
			background-color: var(--primary-dark-200);
			color: var(--primary);
		}

		& [aria-label="Addendum"] {
			box-shadow: inset 0 0 0 2px var(--primary);
			border-image-source: linear-gradient(
				45deg,
				var(--primary),
				var(--primary-600),
				var(--primary)
			);
			background-color: var(--primary-400);
		}
	}

	#posts {
		& a {
			border-color: var(--primary-600);
			background-color: var(--primary-300);
			color: var(--primary-dark-400);

			&:is(:hover, :focus) {
				background-color: var(--primary-500);
			}
		}

		& p:not(:last-child) {
			color: var(--primary-dark-700);
		}
	}
}

@media (prefers-color-scheme: dark) {
	article {
		& p[aria-label="Post warning"] {
			border-color: currentColor;
			background-color: var(--secondary-100);
			color: var(--secondary);
		}

		& [aria-label="Addendum"] {
			box-shadow: inset 0 0 0 2px var(--secondary);
			border-image-source: linear-gradient(
				45deg,
				var(--secondary),
				var(--secondary-600),
				var(--secondary)
			);
			background-color: var(--secondary-400);
		}
	}

	#posts {
		& a {
			border-color: var(--secondary-600);
			background-color: var(--secondary-300);
			color: var(--secondary-light-400);

			&:is(:hover, :focus) {
				background-color: var(--secondary-500);
			}
		}

		& p:not(:last-child) {
			color: var(--secondary-light-700);
		}
	}
}

article {
	margin: 0 auto;
	background-image: var(--paw);
	background-position-x: center;
	background-position-y: bottom;
	background-size: 64px;
	background-repeat: no-repeat;
	background-origin: content-box;
	font-family: "Rubik", sans-serif;
	& time {
		font-size: initial;
	}
	& p[aria-label="Post warning"] {
		border-style: solid;
		border-width: 2px;
		border-radius: 0.4rem;
		padding: 0.4rem 0;
		font-size: 1.4rem;
		font-weight: bold;
		text-align: center;

		&::before,
		&::after {
			content: "⚠️";
		}
	}

	& aside,
	[aria-label="Addendum"] {
		margin: 1rem 0;
		border-image-slice: 1;
		border-image-width: 2px;
		border-image-outset: 4px;
		padding: 1rem;
		background-image: var(--noise);
	}
}

article > [aria-label="Addendum"] {
	& > p:first-child {
		display: flex;
		justify-content: center;
		margin-block-start: 0;
		font-weight: bold;
	}
}

article > [aria-label="Postscript"] {
	margin: 0 0 auto auto;
	padding: 2rem 0 4rem 0;

	& p {
		display: flex;
		flex-direction: column;
		transition: background-color var(--trans);
		margin-top: inherit;
		margin-left: inherit;
		margin-right: var(--avatar);
		border-radius: var(--round);
		border-bottom-right-radius: 0;
		width: fit-content;
		padding: 0.8rem;
		background-color: #0060df;
		color: #fff;
		font-family: "Rubik", sans-serif;
		font-size: 0.8rem;
		word-wrap: anywhere;

		&:hover {
			background-color: #3a76f0;
		}

		&:not(:last-of-type) {
			margin-bottom: 1rem;
		}
	}

	& p:has(img:nth-child(n + 2)) {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 40%), 1fr));
		align-items: center;
		gap: 0.8rem;
	}
	& p > img {
		transition: height var(--trans), border-radius var(--trans),
			background-color var(--trans);
		border-radius: var(--round);
		min-height: fit-content;
		max-height: 300px;
	}
	& img:not(p > img) {
		display: flex;
		box-sizing: content-box;
		margin: 0 0 0 auto;
		border-radius: 100%;
		width: var(--avatar);
		height: var(--avatar);
	}
}

#posts {
	max-width: 75ch;

	& ul {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	& li p {
		margin-block-start: 0;
	}

	& a {
		display: flex;
		flex-direction: column;
		overflow: scroll;
		transition: border-color var(--trans);
		border-style: solid;
		border-width: 2px;
		border-radius: var(--round);
		padding: 0.8rem;
		font-size: 1.125rem;
		font-weight: bold;
		text-decoration: none;
		word-break: break-word;

		&:is(:hover, :focus) {
			border-color: currentColor;
		}

		& time,
		p {
			display: flex;
			font-size: 1rem;
			font-weight: normal;
		}
	}
}
@media screen and (max-width: 920px) {
	#posts {
		max-width: unset;
		width: auto;
	}
	[aria-label="Postscript"] {
		& p {
			margin-right: unset;
			& > img {
				height: auto ;
				max-height: var(--view);
			}
		}
}