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

@import url("./variables.css");
@import url("../default/variables.css");
@import url("./nav.css");
#bio,
#interests,
#badges,
#artworks,
#art {
	font-family: "Pangolin", sans-serif;
}
body {
	background-attachment: local, fixed;
	background-color: var(--citrus-primary);
	background-image: var(--checker),
		linear-gradient(var(--citrus-primary), var(--citrus-secondary));
	background-size: 32px, contain;
	background-blend-mode: overlay, normal;
}
body > nav {
	background-attachment: fixed;
	background-blend-mode: screen;
	background-image: var(--dot),
		linear-gradient(var(--citrus-primary), var(--citrus-secondary) 20%);
	background-size: 6px;
	background-blend-mode: screen;
	border-color: var(--citrus-dark);
	color: var(--citrus-dark);
	& a,
	button {
		background-image: linear-gradient(
			var(--citrus-light),
			var(--citrus-primary) 20%,
			var(--citrus-primary) 80%,
			var(--citrus-light) 100%
		);
		box-shadow: 0 0 0 2px var(--citrus-dark),
			inset 0 0 8px 2px var(--citrus-primary);
		border-radius: var(--pad-l);
		color: inherit;
		&[aria-current] {
			box-shadow: 0 0 0 2px var(--citrus-dark),
				inset 0 0 4px 2px var(--citrus-dark);
			background-image: linear-gradient(
				var(--citrus-mix),
				var(--citrus-dark) 10%,
				chocolate
			);
			color: var(--citrus-light);
		}
		&:is(:hover, :focus):not([aria-current="page"]) {
			box-shadow: 0 0 0 2px var(--citrus-dark);
			transition: background-image var(--trans), border-color var(--trans),
				box-shadow var(--trans);
		}
	}
	& details {
		background-image: linear-gradient(
			-45deg,
			var(--citrus-primary),
			var(--citrus-secondary),
			var(--citrus-primary)
		);
	}
}
article {
	background-color: var(--citrus-light);
	border-radius: 0;
	background-image: var(--noise);
	box-shadow: var(--shadow);
	border: 0;
	& .header-anchor {
		border-radius: inherit;
		background-color: color-mix(in lch, magenta, white);
		&:is(:hover, :focus) {
			background-color: magenta;
		}
	}
	& code:not(pre *) {
		border-radius: inherit;
		background-color: yellow;
		box-shadow: 2px 2px 8px 0 color-mix(in lch, yellow, black 10%);
	}
}
/* home.css */
#interests div:has(img)::after {
	display: none !important;
}
#interests li:has(div img) {
	margin: var(--pad-sm);
	box-shadow: var(--shadow);
	background: color-mix(in lch, yellow, white);
	&:nth-child(odd) {
		transform: rotate(1deg);
	}
}
ul:not([role]) li::before {
	background-color: #000;
}
a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
	filter: drop-shadow(4px 6px 0 var(--citrus-dark));
}
/* blog.css */
#blog {
	background-color: #fff;
	background-image: var(--dot);
	background-size: 6px;
	background-attachment: local;
	background-repeat: repeat;
	background-blend-mode: difference;
	& main {
		&::before {
			background-image: var(--bg-sky);
			background-size: cover;
			background-repeat: no-repeat;
		}
	}
	& article {
		border-radius: 0;
		background-color: #fff;
		background-image: var(--noise);
		background-size: auto;
		background-repeat: repeat;
		box-shadow: inset 0 0 2rem -0.5rem #ccc;
		& > [aria-label="Postscript"]::after {
			background-color: var(--citrus-primary);
		}
		& aside {
			border-width: 2px;
			border-style: solid;
			background-color: var(--citrus-light);
			border-color: var(--citrus-primary);
			border-radius: 0;
		}
		& pre {
			border-radius: 4px;
			color: var(--citrus-secondary);
			background-color: color-mix(in lch, var(--citrus-secondary), black 90%);
			background-size: 4px;
			text-shadow: 2px 2px 0
				color-mix(in lch, var(--citrus-secondary), black 60%);
		}
		& [aria-label="Post warning"] {
			background-color: var(--citrus-primary);
		}
		& [aria-label="Addendum"] {
			border-image-source: linear-gradient(
				45deg,
				var(--citrus-primary),
				var(--citrus-secondary)
			);
			background-color: var(--citrus-primary);
		}
		& s {
			text-decoration-color: #d00;
		}
	}
	& #posts {
		& a {
			background-color: #fff;
			border-color: #fff;
			border-width: 4px;
			box-shadow: var(--shadow);
			transition: border-color var(--trans), color var(--trans);
			& p {
				color: initial;
			}
			&:is(:hover, :focus) {
				border-color: currentColor;
			}
		}
	}
}
/* gallery.css */
#gallery {
	& article {
		border-radius: 0;
		border: 0;
	}
	& a:has(figure) {
		transition: border-color var(--trans), background-color var(--trans);
		box-shadow: var(--shadow);
		&:is(:hover, :focus) {
			& figure {
				transition: inherit;
				background-color: currentColor;
				border-color: currentColor;
			}
			& figcaption,
			time {
				color: #fff;
			}
		}
	}
	& figure {
		border-color: #fff;
		background-color: #fff;
	}
}
#artworks {
	article {
		margin: var(--pad-xl) 0 0 0;
		background-color: #fff;
		background-image: var(--noise), var(--lined);
		background-size: auto, 32px;
		&:last-child:not(:first-of-type) {
			margin: calc(var(--pad-xl) + var(--pad-xl)) 0 0 0;
		}
		&::before {
			content: "";
			display: flex;
			height: 32px;
			width: calc(100% + var(--pad-xl) * 2);
			margin: -4rem 0 var(--pad-l) calc(var(--pad-xl) * -1);
			background-image: var(--border), var(--lined);
			background-size: 32px, 32px;
			background-blend-mode: darken;
		}
	}
}
#art {
	background-image: var(--noise);
	& p,
	time {
		padding: 0;
		line-height: 32px;
	}
	& img {
		border-radius: 0;
	}
	& figcaption {
		font-family: "Urbanist", sans-serif;
	}
}
@media screen and (max-width: 920px) {
	body > nav {
		border-right: 0;
		border-bottom-right-radius: 0;
	}
	body::after {
		content: none;
	}
}
@media screen and (max-width: 450px) {
	#artworks & article {
		&::before {
			width: calc(100% + var(--pad-l) * 2) !important;
			margin: -3rem 0 0 -16px;
		}
	}
}