Add: Search bar

static/css/custom.css

@@ -1538,3 +1538,178 @@ th {
 	border: 1px solid var(--foreground-color);
 	color: var(--foreground-color);
 }
+
+/* ── Navbar search ─────────────────────────────────────────────────────── */
+.menu.language .menu__list {
+	display: flow-root;
+	margin-bottom: 0.2rem;
+}
+
+.menu.language .menu__list > li {
+	list-style: none;
+}
+
+.menu.language .menu__list > li:not(.menu__item--search) {
+	float: left;
+	height: 1.8rem;
+	margin: 0 0.5rem 0.5rem 0;
+}
+
+.menu.language .menu__list > li.menu__item--uninotes {
+	display: none;
+}
+
+.hyzen-user .menu.language .menu__list > li.menu__item--uninotes {
+	display: flex;
+}
+
+.menu__item--search {
+	float: right;
+	height: 1.8rem;
+	margin: 0 0 0.5rem 0.5rem;
+	overflow: hidden;
+}
+
+.site-search {
+	display: flex;
+	align-items: stretch;
+	height: 100%;
+}
+
+.site-search__input {
+	width: 9.3rem;
+	max-width: 32vw;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 0 0.55rem;
+	border: 1px solid var(--background-color1);
+	border-right: none;
+	border-radius: 4px 0 0 4px;
+	background-color: var(--background-color);
+	color: var(--foreground-color);
+	font-size: 0.8rem;
+	font-family: inherit;
+	outline: none;
+	-webkit-appearance: none;
+	appearance: none;
+}
+
+.site-search__input:focus {
+	border-color: var(--accent-color);
+}
+
+.site-search__input::placeholder {
+	color: var(--foreground-color3, #888);
+}
+
+.site-search__input::-webkit-search-cancel-button {
+	-webkit-appearance: none;
+}
+
+.site-search__btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	height: 100%;
+	padding: 0 0.5rem;
+	border-radius: 0 4px 4px 0;
+	border: 1px solid #f26522;
+	background-color: #f26522;
+	color: #fff;
+	cursor: pointer;
+	line-height: 1;
+	transition:
+		background-color 0.2s ease,
+		border-color 0.2s ease,
+		color 0.2s ease;
+}
+
+.site-search__btn:hover,
+.site-search__btn:focus {
+	background-color: transparent;
+	border-color: #f26522;
+	color: #f26522;
+}
+
+@media (prefers-color-scheme: dark) {
+	.site-search__btn {
+		background-color: transparent;
+		border-color: currentColor;
+		color: var(--foreground-color);
+	}
+
+	.site-search__btn:hover,
+	.site-search__btn:focus {
+		background-color: var(--foreground-color) !important;
+		border-color: var(--foreground-color) !important;
+		color: var(--background-color) !important;
+	}
+}
+
+@media (max-width: 600px) {
+	.site-search__input {
+		width: 6.15rem;
+		max-width: 40vw;
+	}
+}
+
+/* ── Search results page ──────────────────────────────────────────────── */
+.search-results__query {
+	color: var(--foreground-color3, #888);
+	font-weight: normal;
+}
+
+.search-results__status {
+	margin: 1rem 0;
+	color: var(--foreground-color3, #888);
+}
+
+.search-results__list {
+	list-style: none;
+	padding: 0;
+	margin: 1.5rem 0 0 0;
+}
+
+.search-results__item {
+	margin-bottom: 1.4rem;
+	border-left: 3px solid var(--accent-color);
+	padding-left: 0.9rem;
+}
+
+.search-results__item-title {
+	margin: 0 0 0.3rem 0;
+	font-size: 1.05rem;
+}
+
+.search-results__item-title a {
+	color: var(--foreground-color);
+	text-decoration: none;
+}
+
+.search-results__item-title a:hover {
+	color: var(--accent-color);
+	text-decoration: underline;
+}
+
+.search-results__item-meta {
+	display: inline-block;
+	font-size: 0.7rem;
+	text-transform: uppercase;
+	letter-spacing: 0.03em;
+	color: var(--accent-color);
+	margin-bottom: 0.3rem;
+}
+
+.search-results__item-snippet {
+	margin: 0;
+	font-size: 0.92rem;
+	color: var(--foreground-color);
+}
+
+.search-results__item-snippet mark {
+	background-color: var(--accent-color);
+	color: var(--background-color);
+	padding: 0 0.1rem;
+	border-radius: 2px;
+}