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

@import url("./variables.css");
@import url("../default/variables.css");
@import url("./nav.css");
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;
}
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;
	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);
		}
	}
}
article {
	background-color: var(--citrus-light);
	border-radius: 0;
	background-image: var(--noise);
	box-shadow: var(--shadow);
	border: 0;
	& code:not(pre *) {
		border-radius: 0;
		color: var(--citrus-primary);
		background-color: #000;
	}
}
/* home.css */
body[id] > main::before {
	content: "";
	height: 100%;
	width: 100%;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	image-rendering: pixelated;
	opacity: 0.1;
	z-index: -10;
}
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-dark);
	background-size: 6px;
	background-attachment: fixed;
	background-repeat: repeat;
	& 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: 0;
			color: var(--citrus-primary);
			background-color: #000;
		}
		& [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);
		}
	}
	& #posts {
		& a {
			background-color: #fff;
			border-color: #fff;
			border-width: 4px;
			transition: border-color var(--trans), color var(--trans);
			& p {
				color: initial;
			}
			&:is(:hover, :focus) {
				border-color: currentColor;
			}
		}
	}
}
/* gallery.css */
#gallery {
	& h2 {
		font-family: "Pangolin", sans-serif;
	}
	& article {
		border-radius: 0;
		border: 0;
		background-image: var(--noise), var(--line);
		background-color: #fff;
		padding: 1rem;
		background-size: auto, 32px;
	}
	& article[id] {
		background-image: var(--noise), var(--paper);
		background-size: auto, 4px;
	}
	& 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 {
				color: #fff;
			}
			& time {
				color: #fffa;
			}
		}
	}
	& figure {
		border-color: #fff;
		background-color: #fff;
	}
	& time {
		color: #666;
	}
}
@media screen and (max-width: 920px) {
	body > nav {
		border-right: 0;
		border-bottom-right-radius: 0;
	}
	body::after {
		content: none;
	}
}