fix: broken on small screen

docs/components/code-snippet.tsx

@@ -17,7 +17,7 @@ const getSolidStartVersion = async () => {
 export function CodeSnippet() {
   const [npmVersion] = createResource(() => getSolidStartVersion());
   return (
-    <aside class="pt-20 px-8 sm:px-4 md:px-0 md:max-w-96 max-w-screen mx-auto w-5/6">
+    <aside class="pt-20 px-4 sm:px-4 md:px-0 md:max-w-96 max-w-screen mx-auto w-5/6">
       <Tabs defaultValue="pnpm">
         <Tabs.List class="flex justify-center space-x-4 pb-10">
           <Tabs.Trigger

docs/components/sections/announcement.tsx

@@ -10,7 +10,7 @@ export function Announcement() {
         </SectionTitle>
       </header>
       <div
-        class="relative w-full flex justify-center items-center opacity-25 top-24"
+        class="relative w-full overflow-x-clip flex justify-center items-center opacity-25 top-24"
         role="presentation"
       >
         <div class="sonar relative w-24 h-24 rounded-full -z-10" />

docs/components/sections/deploy-anywhere.tsx

@@ -60,7 +60,7 @@ export function DeployAnywhere() {
         </p>
       </header>
       <div class="mx-auto w-fit pt-12">
-        <pre class="bg-gradient-to-tr p-14 dark:from-sky-950/20 dark:to-sky-800/20 from-sky-50 to-sky-100 dark:shadow-[0px_0px_35px_rgb(125,211,252,0.10)] ring-1 ring-sky-950 relative rounded-md">
+        <pre class="bg-gradient-to-tr px-4 py-14 sm:p-14 dark:from-sky-950/20 dark:to-sky-800/20 from-sky-50 to-sky-100 dark:shadow-[0px_0px_35px_rgb(125,211,252,0.10)] ring-1 ring-sky-950 relative rounded-md">
           <div
             id="upper-line"
             class="absolute -top-px left-20 right-11 h-px bg-gradient-to-r from-blue-300/0 via-blue-300/70 to-blue-300/0 animate-bounce"
@@ -95,12 +95,12 @@ export function DeployAnywhere() {
           </code>
         </pre>
       </div>
-      <ul class="pt-16 grid grid-cols-2  place-items-center gap-6 md:grid-cols-3">
+      <ul class="pt-16 grid grid-cols-2 place-items-center gap-4 sm:gap-6 md:grid-cols-3">
         <Index each={PLATFORMS}>
           {platform => (
             <li>
               <a
-                class={`group w-44 h-44 grid gap-5 place-items-center border-2 rounded-md py-4 px-2 hover:border-sky-950 dark:border-sky-950 border-sky-200 dark:hover:border-sky-200 z-10 relative`}
+                class={`group size-36 sm:size-44 grid gap-5 place-items-center border-2 rounded-md py-4 px-2 hover:border-sky-950 dark:border-sky-950 border-sky-200 dark:hover:border-sky-200 z-10 relative`}
                 href={platform().url}
                 target="_blank"
                 rel="noopener"

docs/components/sections/hero.tsx

@@ -9,33 +9,33 @@ export function Hero() {
   return (
     <header class="w-full mx-auto pb-24 md:px-10 bg-gradient-to-b from-transparent dark:to-[#081924] via-white dark:via-white/0 to-white">
       <div class="max-w-5xl mx-auto">
-        <SolidStartLogo class="drop-shadow-[10px_20px_35px_rgb(125,211,252,0.3)] w-[400px] mx-auto" />
+        <SolidStartLogo class="drop-shadow-[10px_20px_35px_rgb(125,211,252,0.3)] size-52 md:size-[400px] mx-auto" />
         <div class="flex flex-col">
           <div class="text-center text-6xl font-semibold">
             Solid<span class="text-[#017AD4]">Start</span>
           </div>
           <strong class="dark:font-thin font-normal text-3xl block pt-3 text-center">
             Fine-grained reactivity goes fullstack
           </strong>
-          <div class="pt-10 flex gap-4 justify-center">
+          <div class="pt-10 flex flex-col items-center sm:flex-row gap-4 justify-center px-6">
             <a
               href="https://github.com/solidjs/solid-start"
-              class={`border-none hover:shadow-[0_0_35px_rgb(125,211,252,0.3)] hover:bg-transparent ${buttonOutlineStyles}`}
+              class={`border-none w-max hover:shadow-[0_0_35px_rgb(125,211,252,0.3)] hover:bg-transparent ${buttonOutlineStyles}`}
               target="_blank"
               rel="noopener"
             >
               <GithubIcon />
               <span class="sr-only">SolidStart GitHub repository</span>
             </a>
             <a
-              class="hover:shadow-[0_0_35px_rgb(125,211,252,0.3)]  hover:bg-transparent dark:border-sky-800 hover:border-sky-800 dark:hover:border-transparent  flex items-center justify-center  border-2 border-transparent px-4 rounded-sm dark:bg-sky-800 bg-sky-200 transition-colors ease-in-out"
+              class="hover:shadow-[0_0_35px_rgb(125,211,252,0.3)] max-w-52 sm:w-max w-full py-1.5 hover:bg-transparent dark:border-sky-800 hover:border-sky-800 dark:hover:border-transparent  flex items-center justify-center  border-2 border-transparent px-4 rounded-sm dark:bg-sky-800 bg-sky-200 transition-colors ease-in-out"
               href="https://docs.solidjs.com/solid-start"
               rel="noopener"
             >
               Get Started
             </a>
             <a
-              class="hover:shadow-[0_0_35px_rgb(21,126,182,0.2)]  hover:bg-transparent dark:border-sky-800 hover:border-sky-800 dark:hover:border-transparent  flex items-center justify-center  border-2 border-transparent px-4 rounded-sm dark:bg-sky-800 bg-sky-200 transition-colors ease-in-out"
+              class="hover:shadow-[0_0_35px_rgb(21,126,182,0.2)] max-w-52 sm:w-max w-full py-1.5 hover:bg-transparent dark:border-sky-800 hover:border-sky-800 dark:hover:border-transparent  flex items-center justify-center  border-2 border-transparent px-4 rounded-sm dark:bg-sky-800 bg-sky-200 transition-colors ease-in-out"
               href="https://start.solid.new/"
               rel="noopener"
             >