source ⟩ hypertext ⟩ public ⟩ basa ⟩ estil.css

:root {
	--background: #205;
	--text: #e8ffff;
	--accent: var(--text);

	--inner-background: #e8ffff;
	--inner-text: #242028;
	--inner-accent: #205;
}

body {
	background: linear-gradient(to bottom right, #105, #405),
		url("/basa/purple.png");
	background-attachment: fixed;
	background-blend-mode: hue, normal;
	background-size: 100% 100%, auto;
}

#body-container {
	position: relative;

	display: grid;
	grid-template-columns: 30ch 1fr;
	grid-template-rows: auto 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;

	block-size: auto;
	min-block-size: 100vh;
	inline-size: 50rem;
	max-inline-size: 100vw;
	margin-inline: auto;

	backdrop-filter: blur(1em);
	box-shadow: 0 0 3em #000c;
}

#body-container > header {
	display: flex;
	justify-content: stretch;
	align-items: center;
	grid-column: 1 / 3;

	inline-size: 100%;

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

	background-color: #0004;
}

#body-container > header > * {
	text-align: center;
}

#body-container > header a {
	text-decoration: none;
}

h1 {
	margin-block: 0;
	flex-grow: 1;
}

h1 a {
	display: block;

	block-size: 100%;
	inline-size: 100%;
	padding-block: 0.5em;
}

h1 strong {
	font-size: 2.25rem;
	font-weight: 900;
}

h1 small.subtitle {
	font-size: 0.5em;
	font-style: italic;
	font-weight: normal;
}

.menu-button {
	display: none;
}

#open-menu {
	font-family: var(--sans-serif);
}

#open-menu ul {
	margin-block: 0;
	padding-inline: 0.5em;
	padding-block: 0.5em;
}

#open-menu li {
	margin: 0;
}

#open-menu li::marker {
	content: none;
}

#open-menu li a {
	display: grid;
	grid-template-columns: 2em 1fr;
	grid-template-rows: auto auto;

	inline-size: 100%;
	padding: 0.5em;

	line-height: 1;
	text-decoration: none;

	border-radius: 0.5em;
}

#open-menu li a:hover,
#open-menu li a:focus {
	background-color: #fff2;
}

#open-menu li a .icon {
	grid-row: 1 / 3;
	align-self: center;

	font-size: 1.25rem;
}

.local-page-name {
	font-size: 0.9em;
	font-weight: bold;
}

.basa-page-name {
	font-size: 0.8em;
	font-style: italic;
}

main {
	--background: var(--inner-background);
	--text: var(--inner-text);
	--accent: var(--inner-accent);

	position: relative;

	block-size: 100%;
	inline-size: 100%;
	max-inline-size: none;

	color: var(--text);
	text-shadow: 1px 1px #fff4, -1px -1px #0151;

	background-color: var(--background);
}

main :lang(art-x-basa),
.ipa.basa {
	color: var(--accent);
}

h2,
h3,
h4,
h5,
h6 {
	font-family: var(--sans-serif);
	text-align: center;
}

main h2:first-child, #source-link + h2 {
	margin-block-start: 0;
}

h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
	font-weight: 900;
}

small.subtitle {
	display: block;
	font-style: italic;
}

.mobile-only {
	display: none;
}

table.fullwidth {
	inline-size: 100%;
}

table.zebra th,
table.zebra td {
	padding-inline: 1ch 0.25ch;
}

table.zebra tbody th {
	text-align: start;
}

table.zebra th {
	background-color: #ccc6ff;
}

table.zebra tbody tr:nth-child(2n) td {
	background-color: #e5e2ff;
}

table.zebra tbody tr:nth-child(2n + 1) td {
	background-color: #eeecff;
}

.two-tables {
	display: flex;
	align-items: start;
	gap: 1ch;
}

/* Multilingual support */

:lang(ar-Arab),
:lang(fa-Arab) {
	font-family: Amiri, var(--serif);
}

:lang(hi-Deva) {
	font-family: Sahitya, var(--serif);
}

:lang(ur-Arab) {
	font-family: "Noto Nastaliq Urdu", var(--serif);
}

/* Vocab specific */

.language-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;

	padding-inline-start: 0;
}
.language-list li {
	display: block;

	text-align: center;
}
.language-list li .names {
	color: var(--accent);
	font-weight: bold;
	line-height: 1.2;
}

#alphabet {
	color: var(--accent);
	font-family: var(--sans-serif);
	font-size: 1.667em;
	font-weight: bold;
	text-align: center;
}

/* Dictionary specific */

ul.dictionary {
	padding: 0;
	margin: 0;

	font-size: 0.9em;
	text-align: justify;

	column-count: 2;
	column-rule: 1px solid #2058;
}

ul.dictionary ul {
	margin-block-start: 0.667ch;
	padding-inline-start: 1em;
}

ul.dictionary li {
	line-height: 1.2;
	margin-bottom: 0.667ch;
}

ul.dictionary li::marker {
	content: none;
}

ul.dictionary ul li::before {
	content: "» ";
}

ul.dictionary-index {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1ch;

	margin-block-start: 0;
	padding: 0;

	font-family: var(--sans-serif);
	font-size: 0.9em;
}

ul.dictionary-index li::marker {
	content: none;
}

.definition abbr {
	font-style: italic;
}

.etymon {
	font-size: 0.9em;
	line-height: 1;
}

.etymon :lang(ur-Arab),
:lang(hi-Deva),
:lang(ar-Arab),
:lang(fa-Arab) {
	line-height: 0;
}

.usage-note {
	font-size: 0.9em;
	font-style: italic;
}

h3.letter {
	margin-block-end: 0.5em;
}

#source-link {
	position: absolute;
	inset-block-start: 2ch;
	inset-inline-end: 2ch;
}

@media only screen and (max-width: 800px) {
	#body-container {
		grid-template-columns: 100vw;
		grid-template-rows: auto 1fr auto;

		margin-bottom: 3.5em;

		backdrop-filter: none;
	}

	#body-container > header {
		grid-column: 1 / 2;
	}

	#open-menu {
		order: 2;
		position: fixed;
		bottom: 0;

		width: 100vw;
		z-index: 100;
	}

	#open-menu ul {
		display: flex;
		align-items: center;
		gap: 1ch;

		height: 3.5em;
		padding-block: 0.25em;
		overflow-x: auto;

		background: linear-gradient(to right, #105, #405);
	}

	#open-menu li {
		flex-grow: 1;
		white-space: nowrap;
	}

	#open-menu li a {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		text-align: center;
		padding: 0;
	}

	.local-page-name {
		font-size: 0.8em;
	}

	.basa-page-name {
		font-size: 0.75em;
	}

	.mobile-only {
		display: initial;
	}

	.desktop-only {
		display: none;
	}
}

@font-face {
	font-family: "Alegreya Sans TSF";
	src: url("/fonts/alegreyasans-black.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: fallback;
}