source ⟩ hypertext ⟩ public ⟩ furry ⟩ ardha ⟩ ardha.css

:root {
	--background: #0a0b18;
	--accent: #04eeff;
	--text: #ffc;

	--mono: "Monaspace Krypton", monospace;

	font-size: 1.3rem;
}

body {
	font-family: var(--sans-serif);
}

main {
	max-inline-size: 66.6667ch;
}

h1 {
	font-size: clamp(1.5em, 8vi, 2em)
}

h1,
h2 {
	font-family: var(--mono);
	font-weight: normal;
	clear: both;
}

h2,
h3 {
	border-block-end: 1px solid #ffc8;
}

h3 {
	font-size: 1.25em;
	font-variant: small-caps;
	letter-spacing: var(--caps-spacing);
}

blockquote.epigram {
	margin-block-end: 1em;
	font-size: 1em;

	color: #9ce;
	font-style: italic;

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

ul.vital-stats {
	float: right;

	max-inline-size: 32.5ch;
	margin-block-start: 0;
	margin-inline-start: 1em;
	padding-inline: 0;

	color: #9ce;
	font-size: 0.8em;
	font-style: italic;
	font-family: var(--mono);

	background-color: var(--background);
	border: 3px double var(--back-background);
	box-shadow: 0 5px 10px #0008;

	& h3 {
		margin: 0;
		padding: 2px;

		font-size: 1em;
		font-style: normal;
		text-transform: uppercase;

		background-color: #0008;
		border-block-end: none;
	}

	& li {
		display: block;
		margin: 0;
		padding: 2px;

		&:nth-child(odd) {
			background-color: #0008;
		}

		& strong {
			font-style: normal;
		}

		& .list-buffer {
			opacity: 0.5;
		}
	}
}

footer {
	clear: both;
}

/* SFW toggle stuff */

dialog {
	--accent: var(--text);
	color: var(--text);
	text-align: center;

	background-color: var(--background);
	border: 1px solid #3c3f68;
	border-radius: 1em;
	box-shadow: 0 2px 5px black;

	z-index: 90;

	&::backdrop {
		backdrop-filter: blur(5px);
	}

	& p {
		text-align: center
	}

	& #disclaimer-buttonbox {
		display: grid;
		grid-template-columns: 1fr 1fr;

		inline-size: 100%;
		gap: 1ch;

		& button {
			padding: 1ch;

			border: none;
			border-radius: 0.5ch;

			& small {
				display: block;
			}

			&#disclaimer-nsfw {
				background-color: #062a;
				border: 1px solid #062;

				&:hover, &:focus {
					background-color: #062;
				}
			}

			&#disclaimer-sfw {
				background-color: #802a;
				border: 1px solid #802;

				&:hover, &:focus {
					background-color: #802;
				}
			}
		}
	}
}

#sfw-toggle {
	position: fixed;
	inset-block-start: 1ch;
	inset-inline-end: 1ch;
	
	text-align: center;

	& button {
		display: flex;

		block-size: 4.5ch;
		inline-size: 9ch;
		padding: 0.5ch;

		font-family: var(--mono);
		font-size: 0.8em;

		background-color: #05060c;
		border: 1px solid #3c3f68;
		border-radius: 1ch;

		& div#sfw-toggle-text {
			display: flex;
			justify-content: center;
			align-items: center;

			aspect-ratio: 1 / 1;
			margin-inline-start: 0;

			color: var(--text);

			background-color: #313356;
			border-radius: 0.5ch;

			transition: color 0.5s, background-color 0.5s, margin 0.5s;
		}

		&[aria-pressed="true"] {
			background-color: #300008;
			border: 1px solid #802;

			& div#sfw-toggle-text {
				margin-inline-start: calc(100% - 3.5ch);

				color: #300008;
				background-color: #fce;
			}
		}
	}

	& label {
		font-size: 0.8em;
		font-weight: bold;
	}
}

body:not(.spice-enabled) aside.spicy {
	display: none;
}

body.spice-enabled aside.spicy {
	padding: 1em;

	color: #fce;

	background-color: #300008;
	border: 1px solid #802;
	border-radius: 1em;
	box-shadow: inset 0 0 1em #100;

	& > p:first-child {
		margin-block-start: 0;
	}
	& > p:last-child {
		margin-block-end: 0;
	}
}

@media screen and (max-width: 900px) {
	#sfw-toggle {
		inset-block-start: auto;
		inset-block-end: 1ch;

		& button {
			box-shadow: 0 2px 5px black;
		}

		& label {
			position: absolute !important;

			block-size: 1px;
			inline-size: 1px;
			clip: rect(0 0 0 0);
			clip-path: inset(50%);
			overflow: hidden;

			white-space: nowrap;
		}
	}
}

@media screen and (max-width: 600px) {
	ul.vital-stats {
		float: none;

		inline-size: 100%;
		max-inline-size: none;
		margin-inline-start: 0;
	}
}

@font-face {
	font-family: "Monaspace Krypton";
	src: url("/fonts/MonaspaceKryptonVar.woff2");
}