source ⟩ hypertext ⟩ public ⟩ srb2 ⟩ style.css

:root {
	--background: #fcfcfc;
	--text: #0a2554;
	--accent: #0a2554;

	--mod-accent: #1f25e6;
	--mod-textaccent: var(--background);
}

body {
	background-image: url("/srb2/srb-bg.png");

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

a[href^="http"] {
	text-decoration-style: wavy;
	text-decoration-color: var(--mod-accent);

	aside.note & {
		text-decoration-color: #e01310;
	}
}

main {
	padding: 0;

	background-color: var(--background);
	box-shadow: 0 0 1em black;
}

main p {
	padding-inline: 1em;
}

h1,
h2 {
	margin: 0;
	padding-block: 0.5rem;

	background-color: #e01310;
	border-top: 5px solid #ff5e4e;
	border-left: 5px solid #ff5e4e;
	border-bottom: 5px solid #8a0000;
	border-right: 5px solid #8a0000;

	color: white;
	font-family: "Ferrite Core DX", sans-serif;
	letter-spacing: 1px;
	text-shadow: 3px 3px #0008;
	text-transform: lowercase;
}

h1 > * {
	display: block;
}
h1 strong {
	color: inherit;
}
h1 small {
	color: #fff700;
}
h2 {
	padding-inline-start: 1rem;
}

#rolling-gallery {
	display: flex;
	block-size: 300px;
	inline-size: 100%;

	overflow-x: hidden;

	& .image-group {
		display: flex;
		min-inline-size: max-content;

		animation: scrolling 40s linear infinite;
	}

	& img {
		max-block-size: 100%;
		inline-size: auto;

		margin: 0;
	}
}

/* For some reason the scrolling doesn’t work on mobile and i’m too lazy to figure out why */
@media screen and (max-width: 900px) {
	#rolling-gallery {
		display: block;
		block-size: auto;

		& .image-group {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr;

			min-inline-size: initial;

			animation: none;

			&[aria-hidden] {
				display: none;
			}
		}
	}
}

#cool-mods-list {
	padding-inline-start: 0;

	& li {
		display: grid;
		grid-template-columns: calc(96px + 2rem) 1fr;
		grid-template-rows: auto 1fr;

		margin-inline: 1rem;
		margin-block-end: 1rem;

		border: 5px solid var(--mod-accent);
		border-radius: 10px;

		& img.mod-thumbnail {
			grid-row: 1 / 3;
			margin-block: 1rem;
		}

		& .mod-titlebar {
			display: flex;
			justify-content: space-between;

			margin-block-start: -3px;
			padding-inline: 1ch;

			background-color: var(--mod-accent);
			border-bottom-left-radius: 5px;

			color: var(--mod-textaccent);
			text-decoration: none;
			text-shadow: 2px 2px #0008;

			& .mod-name {
				font-weight: bold;
				font-variant: small-caps;
				letter-spacing: var(--caps-spacing);
			}

			& .mod-cite {
				font-style: italic;
			}
		}
	}
}

@media screen and (max-width: 500px) {
	#cool-mods-list li {
		grid-template-columns: calc(48px + 1rem) 1fr;

		& img.mod-thumbnail {
			grid-row: 1 / 3;
			margin-block: 0.5rem;

			inline-size: 48px;
			block-size: 48px;
		}

		& .mod-titlebar {
			flex-wrap: wrap;
		}
	}
}

aside.note {
	padding: 0.6em;
	padding-bottom: 0.6em;

	background-color: #fff700;
	border-top: 5px solid #fdf982;
	border-left: 5px solid #fdf982;
	border-bottom: 5px solid #aaa400;
	border-right: 5px solid #aaa400;

	#sidenotes & {
		box-shadow: 0 0 1em black;
	}
}

.page-footer {
	margin-block-end: 1rem;
}

.comments-form {
	margin-inline: 1rem;
}

@font-face {
	font-family: "Ferrite Core DX";
	font-style: normal;
	font-weight: 700;
	src: local("Ferrite Core DX Black"),
		url("/fonts/Ferrite Core DX Black.woff2") format("woff2");
}

@keyframes scrolling {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}