Center the search control in the header

Author: botder

packages/starlight-theme-mtasa/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multitheftauto/starlight-theme-mtasa",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Starlight theme for Multi Theft Auto",
   "type": "module",
   "repository": {

packages/starlight-theme-mtasa/theme.css

@@ -37,6 +37,16 @@
     height: var(--sl-nav-height-original);
 }
 
+/* Overwrite the template for the grid of the header, so we can move the search to the actual center. */
+.page > .header > .header {
+    grid-template-columns: auto 1fr auto;
+}
+
+/* Center the search control in the header. */
+.page > .header > .header div:has(site-search) {
+    justify-content: center;
+}
+
 /* Fix the height of the logo that depends on the original height of the header. */
 .page > .header > .header .site-title img {
     height: calc(var(--sl-nav-height-original) - 2 * var(--sl-nav-pad-y));