Minor UI improvements (#100)

- Removed selectability on buttons and logo images.
- Removed unused space between nav items.
- Made logo images non-draggable.

frontend/components/Header.tsx

@@ -52,14 +52,14 @@ export function Header({ user, url }: {
           >
             Browse packages
           </a>
-          <span class="text-gray-200">|</span>
+          <span class="text-gray-200 select-none">|</span>
           <a
             href="/docs"
             class="link-header"
           >
             Docs
           </a>
-          <span class="text-gray-200">|</span>
+          <span class="text-gray-200 select-none">|</span>
           {user
             ? <UserMenu user={user} logoutUrl={logoutUrl} />
             : (

frontend/components/Nav.tsx

@@ -7,7 +7,7 @@ export interface NavProps {
 
 export function Nav(props: NavProps) {
   return (
-    <nav class="mt-3 md:border-b gap-1 border-jsr-cyan-300/30 flex flex-wrap md:flex-nowrap flex-row max-w-full overflow-auto items-end">
+    <nav class="mt-3 md:border-b border-jsr-cyan-300/30 flex flex-wrap md:flex-nowrap flex-row max-w-full overflow-auto items-end">
       {props.children}
     </nav>
   );
@@ -22,7 +22,7 @@ export interface NavItemProps {
 export function NavItem(props: NavItemProps) {
   return (
     <a
-      class={`md:px-3 px-2 py-2 text-sm md:text-base min-h-10 leading-none rounded-md md:rounded-t-md md:rounded-b-none hover:bg-jsr-cyan-100 flex items-center ${
+      class={`md:px-3 px-4 py-2 text-sm md:text-base min-h-10 leading-none rounded-md md:rounded-t-md md:rounded-b-none hover:bg-jsr-cyan-100 flex items-center ${
         props.active
           ? "bg-jsr-cyan-50 md:border-r-1 md:border-t-1 md:border-l-1 md:border-b-0 border-1 border-jsr-cyan-300/30 font-semibold"
           : ""

frontend/routes/index.tsx

@@ -61,7 +61,8 @@ export default function Home({ data }: PageProps<Data>) {
             loading="lazy"
             src="/logos/typescript.svg"
             alt="TypeScript logo"
-            class="w-full max-w-16 lg:max-w-36 lg:col-span-2 lg:mx-auto"
+            class="w-full max-w-16 lg:max-w-36 lg:col-span-2 lg:mx-auto select-none"
+            draggable={false}
           />
           <div class="col-span-3 max-w-screen-sm lg:max-w-none">
             <BenefitHeading>
@@ -86,20 +87,23 @@ export default function Home({ data }: PageProps<Data>) {
             <img
               loading="lazy"
               src="/logos/npm.svg"
-              alt="NPM logo"
-              class="w-full max-w-16 lg:max-w-28"
+              alt="npm logo"
+              class="w-full max-w-16 lg:max-w-28 select-none"
+              draggable={false}
             />
             <img
               loading="lazy"
               src="/logos/yarn.svg"
               alt="Yarn logo"
-              class="w-full max-w-16 lg:max-w-28"
+              class="w-full max-w-16 lg:max-w-28 select-none"
+              draggable={false}
             />
             <img
               loading="lazy"
               src="/logos/pnpm.svg"
-              alt="PNPM logo"
-              class="w-full max-w-16 lg:max-w-28"
+              alt="pnpm logo"
+              class="w-full max-w-16 lg:max-w-28 select-none"
+              draggable={false}
             />
           </div>
           <div class="col-span-3 max-w-screen-sm lg:order-1">
@@ -125,25 +129,29 @@ export default function Home({ data }: PageProps<Data>) {
               loading="lazy"
               src="/logos/node.svg"
               alt="Node logo"
-              class="w-full max-w-9 lg:max-w-20"
+              class="w-full max-w-9 lg:max-w-20 select-none"
+              draggable={false}
             />
             <img
               loading="lazy"
               src="/logos/deno.svg"
               alt="Deno logo"
-              class="w-full max-w-10 lg:max-w-20"
+              class="w-full max-w-10 lg:max-w-20 select-none"
+              draggable={false}
             />
             <img
               loading="lazy"
               src="/logos/bun.svg"
               alt="Bun logo"
-              class="w-full max-w-11 lg:max-w-20"
+              class="w-full max-w-11 lg:max-w-20 select-none"
+              draggable={false}
             />
             <img
               loading="lazy"
               src="/logos/cloudflare-workers.svg"
               alt="Cloudflare Workers logo"
-              class="w-full max-w-10 lg:max-w-20"
+              class="w-full max-w-10 lg:max-w-20 select-none"
+              draggable={false}
             />
           </div>
           <div class="col-span-3 max-w-screen-sm lg:max-w-none">

frontend/static/styles.css

@@ -97,7 +97,7 @@
 @layer components {
   .button {
     @apply text-jsr-gray-700 inline-flex items-center gap-2 py-2.5 px-4.5 rounded-md leading-tight font-medium
-      whitespace-nowrap hover:cursor-pointer disabled:cursor-not-allowed focus:outline-4 focus:outline-offset-2;
+      whitespace-nowrap hover:cursor-pointer disabled:cursor-not-allowed focus:outline-4 focus:outline-offset-2 select-none;
   }
 
   .button-sm {