style: updating UI styling

astro.config.mjs

@@ -22,7 +22,7 @@ export const locales = locals;
 export default defineConfig({
   output: "server",
   image: {
-    service: { entrypoint: "astro/assets/services/noop" },
+    service: { entrypoint: "astro/assets/services/sharp" },
   },
 
   integrations: [

src/components/override-components/Header.astro

@@ -30,11 +30,11 @@ const hasSidebar = Astro.locals.starlightRoute.hasSidebar;
     for="nav-toggle"
     class="order-3 cursor-pointer flex items-center lg:hidden dark:text-white lg:order-1 hamburger-menu"
   >
-    <svg id="show-button" class="h-6 fill-current block" viewBox="0 0 20 20">
+    <svg id="show-button" class="h-4 fill-current block" viewBox="0 0 20 20">
       <title>Menu Open</title>
       <path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z"></path>
     </svg>
-    <svg id="hide-button" class="h-6 fill-current hidden" viewBox="0 0 20 20">
+    <svg id="hide-button" class="h-4 fill-current hidden" viewBox="0 0 20 20">
       <title>Menu Close</title>
       <polygon
         points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2"

src/components/override-components/Hero.astro

@@ -1,5 +1,4 @@
 ---
-import Search from "./Search.astro";
 const { data } = Astro.locals.starlightRoute.entry;
 const { title = data.title, tagline } = data.hero || {};
 const { sidebar } = Astro.locals.starlightRoute;
@@ -27,12 +26,6 @@ const is404 = Astro.locals.starlightRoute?.id === "404";
   {
     !is404 && (
       <div class="mt-12 w-sm sm:w-3xl">
-        <div class="search-container rounded-2xl p-2 mb-6">
-          <div class="search-bar">
-            <Search />
-          </div>
-        </div>
-
         <div class="flex justify-center items-center flex-wrap gap-4">
           <p class="text-base font-normal">
             {Astro.locals.t("hero.popular", "Popular")}:
@@ -66,13 +59,6 @@ const is404 = Astro.locals.starlightRoute?.id === "404";
       letter-spacing: -4px;
       color: var(--sl-color-white);
     }
-    .search-container {
-      width: 90%;
-      margin: auto;
-      border: 1px solid
-        color-mix(in srgb, var(--sl-color-white) 5%, transparent);
-    }
-
     .badges {
       background-color: color-mix(
         in srgb,
@@ -94,9 +80,6 @@ const is404 = Astro.locals.starlightRoute?.id === "404";
         line-height: 3.5rem !important;
         letter-spacing: -2px;
       }
-      .search-container {
-        width: 100%;
-      }
     }
   }
 </style>

src/components/override-components/SiteTitle.astro

@@ -28,9 +28,21 @@ const {
   {
     src || srcDarkmode || logo || logo_darkmode ? (
       <>
+        <ImageMod
+          src="/src/assets/logo-small.svg"
+          class={`inline-block md:hidden`}
+          width={logo_height.replace("px", "") * 2}
+          height={logo_height.replace("px", "") * 2}
+          alt={title}
+          style={{
+            height: logo_height.replace("px", "") + "px",
+            width: "auto",
+          }}
+          format="webp"
+        />
         <ImageMod
           src={src ? src : logo}
-          class={`inline-block  ${theme_switcher && "dark:hidden"}`}
+          class={`hidden md:inline-block ${theme_switcher && "dark:hidden"}`}
           width={logo_width.replace("px", "") * 2}
           height={logo_height.replace("px", "") * 2}
           alt={title}
@@ -44,7 +56,7 @@ const {
         {theme_switcher && (
           <ImageMod
             src={srcDarkmode ? srcDarkmode : logo_darkmode}
-            class={`hidden dark:inline-block`}
+            class={`hidden md:dark:inline-block`}
             width={logo_width.replace("px", "") * 2}
             height={logo_height.replace("px", "") * 2}
             alt={title}