source ⟩ hypertext ⟩ public ⟩ vinyl ⟩ vinyl.css

:root {
	--background: #eef4f7;
	--text: #446688;
	--accent: #56c3ed;
	--accent-shadow: #4bc9ff88;

	--accent-pink: #ff4485;
	--accent-pink-shadow: #ff45c188;

	--display: "Ferrite Core DX", sans-serif;
	--noto: "Noto Sans VF", "Noto Sans", "Noto Sans Symbols", "Noto Symbols",
		"Noto Emoji", "Segoe UI Symbol", var(--system);
	--display-shadow: 0px 1px 6px var(--accent-shadow), 0px 0px 10px #fff8;
}

body {
	font-stretch: 25%;
	font-variant-numeric: normal;

	background-image: url(/vinyl/vinyl.png), url(/music/y2k_bg.png);
	background-repeat: no-repeat, repeat;
	background-size: min(532px, 80vw), 1em;
}

main {
	max-inline-size: none;
	font-size: min(4vw, 0.8rem);
	font-family: var(--noto);
}

a, .page-footer > ul {
	color: var(--text);
}

a {
	text-decoration-color: var(--accent);
}

a:hover,
a:focus {
	text-decoration-color: var(--accent-pink);
}

h1 {
	font-family: var(--display);
	font-size: 2.5rem;
	hyphens: none;
	text-shadow: var(--display-shadow);
	text-transform: lowercase;
}

main > p {
	max-inline-size: 75ch;
	margin-inline: auto;
}

.appendix-name {
	font-size: 1rem;
	font-variant-caps: small-caps;
}

.normal {
	font-style: normal;
}

code {
	margin: 0;
	padding: 0;

	background-color: transparent;
}

ul {
	margin-block-start: 0;
	margin-block-end: 0;
}

.table-container {
	max-inline-size: 100%;
	margin-block-start: 2em;
	overflow-x: auto;

	box-shadow: var(--display-shadow);
}

table {
	margin: auto;

	font-family: var(--noto);
	font-size: min(4vw, 0.7rem);

	background: #eef4f7;
	border-collapse: collapse;
}

thead {
	position: sticky;
	inset-block-start: 0px;
}

td,
th {
	padding: 0.125rem 1ch;

	text-align: start;

	border: 1px solid var(--accent);
}

table.sortable
	th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(
		.sorttable_nosort
	)::after {
	content: " ⇅";
}

th {
	white-space: nowrap;

	cursor: pointer;
}

@media (pointer: none) {
	th {
		padding: 10px;
	}
}

td:nth-child(1) {
	min-inline-size: 25ch;
	padding: none;
	vertical-align: top;
}

td:nth-child(1) > div > *,
td:nth-child(1) > div > a > * {
	display: block;
}

td:nth-child(1) strong {
	font-size: 1.125em;

	color: inherit;
}

figure {
	block-size: 2.3rem;
	inline-size: 2.3rem;
	flex-shrink: 0;
}

.album-cover {
	background: url("/vinyl/albums.webp");
	background-size: 1000%;
	background-position-x: calc(-100% * var(--x, 0));
	background-position-y: calc(-100% * var(--y, 0));
}

td:nth-child(1) > div > a {
	padding: 0.125rem 1ch;
}

td:nth-child(1) > div {
	display: flex;
}

/* vinyl.css | https://satyrs.eu/vinyl/vinyl.css */

td:nth-child(1) {
	padding: 0;
}

td:nth-child(3) {
	min-inline-size: 6.5em;
	vertical-align: middle;
}

td:nth-child(3) img {
	display: inline-block;

	margin: -0.5em auto;
}

td:nth-child(4) {
	white-space: nowrap;
}

td:nth-child(5) .accent {
	line-height: 1;
}

td:nth-child(10) img {
	display: inline;

	margin: 0;
}

.lp {
	block-size: 24px;
}

.cd {
	block-size: 20px;
	padding-block-end: 2px;
}

tbody tr:nth-child(odd) {
	background-color: #4bc9ff11;
}

td:nth-child(10) {
	min-inline-size: 8em;
}

td:nth-child(11)[sorttable_customkey="0"] {
	background-color: #d6eaf4;
}

td:nth-child(11)[sorttable_customkey="1"] {
	background-color: #e3f1f8;
}

td:nth-child(11)[sorttable_customkey="2"] {
	background-color: #e6e9f8;
}

td:nth-child(11)[sorttable_customkey="3"] {
	background-color: #e0d6f4;
}

td:nth-child(11)[sorttable_customkey="4"] {
	background-color: #eae3f8;
}

td:nth-child(11)[sorttable_customkey="5"] {
	background-color: #f0e3f4;
}

td:nth-child(11)[sorttable_customkey="6"] {
	background-color: #f8e3f1;
}

td:nth-child(11)[sorttable_customkey="7"] {
	background-color: #f4d6ea;
}

td:nth-child(13) {
	min-inline-size: 6em;
}

td:nth-child(14) {
	min-inline-size: 12em;
}

td[colour] {
	background-position: right;
	background-size: 1.667em;
	background-repeat: no-repeat;
	padding-inline-end: 1.667em;
}

td[colour="black"] {
	background-image: url("/vinyl/lp_black.png");
}

td[colour="white"] {
	background-image: url("/vinyl/lp_white.png");
}

td[colour="orange"] {
	background-image: url("/vinyl/lp_orange.png");
}

td[colour="purple"] {
	background-image: url("/vinyl/lp_purple.png");
}

td[colour="clear"] {
	background-image: url("/vinyl/lp_clear.png");
}

td[colour="azure"], td[colour="translucent azure"] {
	background-image: url("/vinyl/lp_azure.png");
}

td[colour="blue"], td[colour="translucent blue"] {
	background-image: url("/vinyl/lp_blue.png");
}

td[colour="mountain dew"] {
	background-image: url("/vinyl/lp_mtdew.png");
}

td[colour="copper"], td[colour="translucent copper"] {
	background-image: url("/vinyl/lp_copper.png");
}

td[colour="demon eyes"] {
	background-image: url("/vinyl/lp_demoneyes.png");
}

td[colour="floral"] {
	background-image: url("/vinyl/lp_floral.png");
}

td[colour="cd"] {
	background-image: url("/vinyl/lp_cd.png");
	background-size: 1.25em;
}

td[colour="pink"] {
	background-image: url("/vinyl/lp_pink.png");
}

td[colour="red"] {
	background-image: url("/vinyl/lp_red.png");
}

td[colour="translucent gold"] {
	background-image: url("/vinyl/lp_gold.png");
}

td[colour="translucent green"] {
	background-image: url("/vinyl/lp_green.png");
}

.translit {
	font-weight: normal;
}

.translation {
	font-weight: normal;
}

.comment-section,
.map-container {
	block-size: auto;
	inline-size: auto;
	max-inline-size: min(75ch, 100%);
	margin-block-start: 1em;
	margin-inline: auto;
	padding: 1em;

	background-color: var(--background);
	border: 1px solid var(--accent);
	box-shadow: var(--display-shadow);
}

.comment-section h2 {
	font-family: var(--display);
	text-shadow: var(--display-shadow);
	text-align: center;
	letter-spacing: 2px;
	text-transform: lowercase;
}

.comment-section :is(select, textarea, input),
#comments-form-comment {
	font-size: min(4vw, 0.8rem);
	font-stretch: extra-condensed;
	background-color: #4bc9ff11;
}

.comment-section label {
	color: var(--text);
}

figure.map-container {
	max-inline-size: 100%;
	inline-size: min(68.667em, calc(1802px + 2em), 100%);
}

#map-canvas {
	inline-size: min(66.667em, 1802px, 100%);
	aspect-ratio: 1802 / 878;
	position: relative;
	background: url("/vinyl/mapbase.png");
	background-size: 100% 100%;
}

#map-canvas .dot {
	display: block;
	position: absolute;

	inline-size: min(12px, 1.667%);
	margin: 0;
	padding: 0;
	aspect-ratio: 1 / 1;
	translate: -50% -50%;
	background-color: blue;
}

@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");
}

@font-face {
	font-family: "Noto Sans VF";
	src: url("/fonts/NotoSans-VF.woff2") format("woff2-variations");
	font-style: normal;
	font-weight: 200 900;
	font-stretch: 66% 100%;
}