website/_src/assets/css/citrus/citrus.css

@import url("./nav.css");
@import url("./variables.css");

body {
	font-family: "Nosey Rodent";
	background-attachment: local;
	background-blend-mode: soft-light;
	background-color: var(--citrus-primary);
	background-image: var(--paw-tiled);
	background-repeat: repeat;
	background-size: 128px;
	color: var(--citrus-dark-extra);
}
main article {
	background:
		var(--noise),
		linear-gradient(
			var(--citrus-light) 70%,
			color-mix(in lch, var(--citrus-mix-light), var(--citrus-light)) 100%
		);
	box-shadow: var(--shadow-heavy);
	border-radius: 2px;
	& a,
	button {
		background-color: var(--citrus-mix-light);
		color: var(--citrus-dark);
		&:hover {
			background-color: var(--citrus-primary);
		}
	}
	& ul li::before {
		background-color: var(--citrus-dark-extra);
	}
}
#interests {
	& li {
		& a {
			& span:has(img)::after {
				display: none;
			}
		}
		&:nth-child(odd) {
			transform: var(--rot-minus);
		}
	}
}
#gallery {
	& main article {
		border-radius: 4px;
		box-shadow:
			inset 0 0 0 4px color-mix(in lch, var(--light), var(--dark) 2%),
			inset 0 0 0 8px var(--citrus-mix-dark),
			var(--shadow-heavy);
		background-color: color-mix(
			in lch,
			var(--citrus-mix-dark),
			var(--citrus-mix)
		);
		background-image:
			var(--noise),
			linear-gradient(
				135deg,
				color-mix(in lch, var(--citrus-mix-dark), var(--citrus-mix)),
				var(--citrus-mix-dark)
			);
	}
	& a:has(figure) {
		font-family: "Urbanist", sans-serif;
		transition:
			border-color var(--trans),
			background-color var(--trans);
		box-shadow: var(--shadow-light);
		&:is(:hover, :focus) {
			& figure {
				transition: inherit;
				border-color: currentColor;
			}
		}
	}
	& a:is(:not(:hover, :focus)) figure {
		border-color: var(--light);
		background-color: var(--light);
	}
}
:is(#art li, #art section a):nth-child(odd) {
	transform: var(--rot-minus);
}
#art div {
	background-color: var(--citrus-light);
	background-image: var(--noise), var(--paper);
	background-size: auto, 4px;
	box-shadow: var(--shadow-light);
	margin-bottom: var(--pad-xl);
	padding: var(--pad-xl);
	transform: var(--rot-plus);
	& p {
		line-height: 32px;
	}
}
#blog {
	animation: none;
	background-attachment: local, fixed;
	background-blend-mode: overlay, normal;
	background-color: var(--light);
	background-image:
		var(--dot),
		linear-gradient(var(--citrus-mix-dark) 0% 10%, var(--citrus-dark) 100%);
	background-size: 6px, contain;
	& main article {
		background-color: var(--citrus-light);
		background-image: var(--noise);
		background-repeat: repeat;
		background-size: auto;
		border-radius: 0;
		box-shadow:
			inset 0 -2rem 3rem -4rem var(--dark),
			var(--shadow-heavy);
		& aside,
		.addendum {
			border-radius: 0;
			border-width: 4px;
			border-style: solid;
		}
		& aside {
			border-color: var(--citrus-mix-light);
			background-image: linear-gradient(
				135deg,
				var(--citrus-light-extra) 5%,
				var(--citrus-light) 50%,
				var(--citrus-light-extra)
			);
		}
		& .addendum {
			border-color: var(--citrus-primary);
			background-image: linear-gradient(
				135deg,
				var(--citrus-mix-light) 5%,
				var(--citrus-light) 50%,
				var(--citrus-mix-light)
			);
		}
		& pre {
			border-radius: 4px;
			color: var(--citrus-secondary);
			background-color: var(--citrus-dark-extra);
			background-size: 4px;
		}
		& .post-warning {
			background-color: var(--citrus-primary);
		}
		& s {
			text-decoration-color: #d00;
		}
		& .postscript {
			& span:has([alt]) {
				&::after {
					content: "";
					width: var(--avatar);
					height: var(--avatar);
					position: absolute;
					margin: 5px;
					background-image:
						radial-gradient(circle at 0px 0px, var(--light), transparent 50%),
						linear-gradient(
							135deg,
							transparent 15%,
							var(--light) 20%,
							color-mix(in lch, var(--light), transparent 90%) 50%
						);
				}
			}
			& [alt="Profile picture"] {
				color: unset;
				border-radius: inherit;
				border: 2px solid;
				border-image-source: linear-gradient(
					to bottom,
					var(--citrus-mix-light),
					var(--citrus-secondary)
				);
				border-image-slice: 1;
				border-width: 3px;
				box-sizing: inherit;
				padding: 2px;
				background-image:
					radial-gradient(
						ellipse at 50% -0%,
						var(--light) 20%,
						var(--dark) 150%
					),
					var(--pansexual);
				background-blend-mode: overlay, normal;
				background-size: cover, 100%;
				background-position: center;
				background-repeat: no-repeat;
				box-shadow:
					0 0 0 2px var(--citrus-mix-dark),
					inset 0 0 0 2px var(--citrus-mix),
					var(--shadow-light);
				font-size: 0;
			}
		}
	}
	& #posts {
		& a {
			border-width: 4px;
			box-shadow: var(--shadow-light);
			border-radius: 0;
			& p {
				color: initial;
			}
			& p:not(:last-child) {
				color: var(--citrus-dark);
			}
		}
	}
}

@media screen and (max-width: 916px) {
	body::after {
		content: none;
	}
}
@media screen and (min-width: 916px) {
	nav#default {
		height: max-content;
	}
	header {
		margin-top: 0;
	}
}