fix: landing page broken on small screen (#1592)

* update logo: more precise size & sharper * fix: broken on small screen * add logo role role & text-balance
solidjs · Aug 12, 2024 · 516eb82 · 516eb82
1 parent 65c8ac0
commit 516eb82
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 216 deletions.
diff --git a/docs/components/code-snippet.tsx b/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

diff --git a/docs/components/icons/solidstart-logo.tsx b/docs/components/icons/solidstart-logo.tsx
@@ -4,258 +4,130 @@ interface Props {
 export function SolidStartLogo(props: Props) {
   return (
     <svg
-      role="presentation"
-      width="531"
-      height="454"
-      class={props.class}
-      viewBox="0 0 531 454"
+      width="500"
+      height="500"
+      viewBox="0 0 500 500"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      role="presentation"
+      class={props.class}
     >
-      <mask
-        id="mask0_0_3"
-        style="mask-type:luminance"
-        maskUnits="userSpaceOnUse"
-        x="246"
-        y="369"
-        width="117"
-        height="49"
-      >
-        <path
-          d="M246.285 417.848L321.742 411.963C321.742 411.963 347.548 407.759 362.696 382.817L309.399 369.926L246.285 417.848Z"
-          fill="white"
-        />
-      </mask>
-      <g mask="url(#mask0_0_3)">
-        <path
-          d="M371.952 371.888L358.207 440.548L236.748 415.886L250.773 347.226L371.952 371.888Z"
-          fill="url(#paint0_linear_0_3)"
-        />
-      </g>
-      <mask
-        id="mask1_0_3"
-        style="mask-type:luminance"
-        maskUnits="userSpaceOnUse"
-        x="77"
-        y="241"
-        width="286"
-        height="147"
-      >
-        <path
-          d="M141.937 241.012C119.496 242.133 77.981 246.057 77.981 246.057L258.908 377.493L300.143 387.862L362.696 383.098L180.647 251.381C180.647 251.381 166.06 241.012 145.022 241.012C143.9 241.012 143.059 241.012 141.937 241.012Z"
-          fill="white"
-        />
-      </mask>
-      <g mask="url(#mask1_0_3)">
-        <path
-          d="M157.645 515.654L11.7812 282.209L282.751 113.22L428.895 346.665L157.645 515.654Z"
-          fill="url(#paint1_linear_0_3)"
-        />
-      </g>
-      <mask
-        id="mask2_0_3"
-        style="mask-type:luminance"
-        maskUnits="userSpaceOnUse"
-        x="375"
-        y="167"
-        width="120"
-        height="48"
-      >
-        <path
-          d="M375.319 214.949L453.019 210.185C453.019 210.185 479.667 206.262 494.815 181.6L439.555 167.868L375.319 214.949Z"
-          fill="white"
-        />
-      </mask>
-      <g mask="url(#mask2_0_3)">
-        <path
-          d="M403.65 265.674L355.122 178.798L466.483 116.863L515.011 203.74L403.65 265.674Z"
-          fill="url(#paint2_linear_0_3)"
-        />
-      </g>
-      <mask
-        id="mask3_0_3"
-        style="mask-type:luminance"
-        maskUnits="userSpaceOnUse"
-        x="199"
-        y="35"
-        width="297"
-        height="151"
-      >
-        <path
-          d="M265.36 35.5914C242.078 36.4321 199.441 39.7951 199.441 39.7951L387.941 174.314L430.579 185.243L495.095 181.32L305.472 46.521C305.472 46.521 289.764 35.5914 267.604 35.5914C267.043 35.5914 266.201 35.5914 265.36 35.5914Z"
-          fill="white"
-        />
-      </mask>
-      <g mask="url(#mask3_0_3)">
-        <path
-          d="M447.689 -72.5839L550.074 161.422L246.846 293.699L144.461 59.6926L447.689 -72.5839Z"
-          fill="url(#paint3_linear_0_3)"
-        />
-      </g>
-      <mask
-        id="mask4_0_3"
-        style="mask-type:luminance"
-        maskUnits="userSpaceOnUse"
-        x="32"
-        y="245"
-        width="267"
-        height="173"
-      >
-        <path
-          d="M33.0998 275.203C32.8193 275.483 32.8193 275.763 32.8193 276.043L82.4691 311.915L131.558 347.506L214.027 407.199C241.797 427.096 279.385 418.689 298.46 387.862L248.249 351.71L198.038 315.558L116.41 256.146C106.312 248.859 95.0919 245.496 83.8716 245.496C64.2361 245.496 44.8811 255.865 33.0998 275.203Z"
-          fill="white"
-        />
-      </mask>
-      <g mask="url(#mask4_0_3)">
-        <path
-          d="M384.856 307.711L207.295 553.207L-53.5769 364.882L123.704 119.385L384.856 307.711Z"
-          fill="url(#paint4_linear_0_3)"
-        />
-      </g>
-      <mask
-        id="mask5_0_3"
-        style="mask-type:luminance"
-        maskUnits="userSpaceOnUse"
-        x="154"
-        y="39"
-        width="277"
-        height="177"
-      >
-        <path
-          d="M155.401 68.6605C155.401 68.9407 155.12 69.221 154.84 69.5012L206.453 106.214L258.066 142.646L343.902 203.739C372.794 224.198 411.504 216.07 430.578 185.523L378.404 148.251L326.23 111.258L240.956 50.4444C230.296 42.8778 218.234 39.2346 206.453 39.2346C186.537 39.5148 167.182 49.6037 155.401 68.6605Z"
-          fill="white"
-        />
-      </mask>
-      <g mask="url(#mask5_0_3)">
-        <path
-          d="M489.765 60.8136L398.601 312.475L95.6528 202.619L187.098 -49.0432L489.765 60.8136Z"
-          fill="url(#paint5_linear_0_3)"
-        />
-      </g>
-      <mask
-        id="mask6_0_3"
-        style="mask-type:luminance"
-        maskUnits="userSpaceOnUse"
-        x="118"
-        y="106"
-        width="283"
-        height="231"
-      >
-        <path
-          d="M118.935 110.137L185.415 183.001C188.501 187.205 191.867 191.128 195.794 194.491L325.388 336.857L389.905 332.933C408.979 302.386 401.125 260.91 372.233 240.452L286.398 179.358L235.065 142.926L183.452 106.214L118.935 110.137Z"
-          fill="white"
-        />
-      </mask>
-      <g mask="url(#mask6_0_3)">
-        <path
-          d="M224.967 476.7L7.57373 190.568L303.228 -33.3494L520.341 252.783L224.967 476.7Z"
-          fill="url(#paint6_linear_0_3)"
-        />
-      </g>
-      <mask
-        id="mask7_0_3"
-        style="mask-type:luminance"
-        maskUnits="userSpaceOnUse"
-        x="108"
-        y="110"
-        width="228"
-        height="227"
-      >
-        <path
-          d="M118.374 110.978C99.58 141.244 107.434 182.161 135.765 202.338L220.759 262.872L273.214 299.864L325.388 336.857C344.463 306.31 336.608 264.833 307.716 244.375L222.162 183.562L170.548 146.849L118.935 110.137C118.935 110.417 118.654 110.698 118.374 110.978Z"
-          fill="white"
-        />
-      </mask>
-      <g mask="url(#mask7_0_3)">
-        <path
-          d="M436.189 156.658L294.533 435.784L8.13477 290.896L149.791 11.4902L436.189 156.658Z"
-          fill="url(#paint7_linear_0_3)"
-        />
-      </g>
+      <path
+        d="M233.205 430.856L304.742 425.279C304.742 425.279 329.208 421.295 343.569 397.659L293.041 385.443L233.205 430.856Z"
+        fill="url(#paint0_linear_1_2)"
+      />
+      <path
+        d="M134.278 263.278C113.003 264.341 73.6443 268.059 73.6443 268.059L245.173 392.614L284.265 402.44L343.569 397.925L170.977 273.105C170.977 273.105 157.148 263.278 137.203 263.278C136.139 263.278 135.342 263.278 134.278 263.278Z"
+        fill="url(#paint1_linear_1_2)"
+      />
+      <path
+        d="M355.536 238.58L429.2 234.065C429.2 234.065 454.464 230.348 468.825 206.977L416.435 193.964L355.536 238.58Z"
+        fill="url(#paint2_linear_1_2)"
+      />
+      <path
+        d="M251.289 68.6128C229.217 69.4095 188.795 72.5964 188.795 72.5964L367.503 200.072L407.926 210.429L469.09 206.712L289.318 78.9702C289.318 78.9702 274.426 68.6128 253.417 68.6128C252.885 68.6128 252.087 68.6128 251.289 68.6128Z"
+        fill="url(#paint3_linear_1_2)"
+      />
+      <path
+        d="M31.0946 295.679C30.8287 295.945 30.8287 296.21 30.8287 296.475L77.8993 330.469L202.623 420.764C228.95 439.62 264.586 431.653 282.67 402.44L187.465 333.921L110.077 277.62C100.504 270.715 89.8663 267.528 79.2289 267.528C60.6134 267.528 42.2639 277.354 31.0946 295.679Z"
+        fill="url(#paint4_linear_1_2)"
+      />
+      <path
+        d="M147.043 99.9505C147.043 100.216 146.776 100.482 146.511 100.747L195.442 135.538L244.374 170.062L325.751 227.957C353.142 247.345 389.841 239.642 407.925 210.695L358.461 175.374L308.997 140.318L228.153 82.6881C218.047 75.5177 206.611 72.0652 195.442 72.0652C176.561 72.3308 158.212 81.8915 147.043 99.9505Z"
+        fill="url(#paint5_linear_1_2)"
+      />
+      <path
+        d="M112.471 139.255L175.497 208.305C178.423 212.289 181.614 216.006 185.337 219.193L308.199 354.105L369.364 350.387C387.448 321.439 380.002 282.135 352.611 262.748L271.234 204.852L222.568 170.328L173.636 135.538L112.471 139.255Z"
+        fill="url(#paint6_linear_1_2)"
+      />
+      <path
+        d="M111.939 140.052C94.1213 168.734 101.567 207.509 128.427 226.629L209.005 283.994L258.735 319.049L308.199 354.105C326.283 325.158 318.836 285.852 291.445 266.465L112.471 139.255C112.471 139.521 112.204 139.787 111.939 140.052Z"
+        fill="url(#paint7_linear_1_2)"
+      />
       <defs>
         <linearGradient
-          id="paint0_linear_0_3"
-          x1="379.737"
-          y1="23.1838"
-          x2="280.4"
-          y2="513.227"
+          id="paint0_linear_1_2"
+          x1="359.728"
+          y1="56.8062"
+          x2="265.623"
+          y2="521.28"
           gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="#1593F5" />
           <stop offset="1" stop-color="#0084CE" />
         </linearGradient>
         <linearGradient
-          id="paint1_linear_0_3"
-          x1="370.003"
-          y1="553.992"
-          x2="-46.4523"
-          y2="-113.902"
+          id="paint1_linear_1_2"
+          x1="350.496"
+          y1="559.872"
+          x2="-44.0802"
+          y2="-73.2062"
           gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="#1593F5" />
           <stop offset="1" stop-color="#0084CE" />
         </linearGradient>
         <linearGradient
-          id="paint2_linear_0_3"
-          x1="643.99"
-          y1="565.235"
-          x2="393.19"
-          y2="115.271"
+          id="paint2_linear_1_2"
+          x1="610.25"
+          y1="570.526"
+          x2="372.635"
+          y2="144.034"
           gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="white" />
           <stop offset="1" stop-color="#15ABFF" />
         </linearGradient>
         <linearGradient
-          id="paint3_linear_0_3"
-          x1="199.455"
-          y1="-227.399"
-          x2="412.368"
-          y2="260.387"
+          id="paint3_linear_1_2"
+          x1="188.808"
+          y1="-180.608"
+          x2="390.515"
+          y2="281.703"
           gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="white" />
           <stop offset="1" stop-color="#79CFFF" />
         </linearGradient>
         <linearGradient
-          id="paint4_linear_0_3"
-          x1="438.927"
-          y1="-41.8213"
-          x2="100.518"
-          y2="427.18"
+          id="paint4_linear_1_2"
+          x1="415.84"
+          y1="-4.74684"
+          x2="95.1922"
+          y2="439.83"
           gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="#0057E5" />
           <stop offset="1" stop-color="#0084CE" />
         </linearGradient>
         <linearGradient
-          id="paint5_linear_0_3"
-          x1="362.245"
-          y1="-59.5451"
-          x2="255.798"
-          y2="234.049"
+          id="paint5_linear_1_2"
+          x1="343.141"
+          y1="-21.5427"
+          x2="242.301"
+          y2="256.708"
           gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="white" />
           <stop offset="1" stop-color="#15ABFF" />
         </linearGradient>
         <linearGradient
-          id="paint6_linear_0_3"
-          x1="495.1"
-          y1="526.08"
-          x2="-39.7504"
-          y2="-179.82"
+          id="paint6_linear_1_2"
+          x1="469.095"
+          y1="533.421"
+          x2="-37.6939"
+          y2="-135.731"
           gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="white" />
           <stop offset="1" stop-color="#79CFFF" />
         </linearGradient>
         <linearGradient
-          id="paint7_linear_0_3"
-          x1="401.836"
-          y1="-130.821"
-          x2="127.394"
-          y2="411.47"
+          id="paint7_linear_1_2"
+          x1="380.676"
+          y1="-89.0869"
+          x2="120.669"
+          y2="424.902"
           gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="white" />

diff --git a/docs/components/sections/announcement.tsx b/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" />

diff --git a/docs/components/sections/deploy-anywhere.tsx b/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"