Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: landing page broken on small screen #1592

Merged
merged 3 commits into from
Aug 12, 2024
Merged

fix: landing page broken on small screen #1592

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a90d78a
update logo: more precise size & sharper
renomureza Aug 1, 2024
b34d66c
fix: broken on small screen
renomureza Aug 1, 2024
1b70818
add logo role role & text-balance
renomureza Aug 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/components/code-snippet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
282 changes: 77 additions & 205 deletions docs/components/icons/solidstart-logo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,258 +4,130 @@ interface Props {
export function SolidStartLogo(props: Props) {
return (
<svg
role="presentation"
renomureza marked this conversation as resolved.
Show resolved Hide resolved
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" />
Expand Down
2 changes: 1 addition & 1 deletion docs/components/sections/announcement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
6 changes: 3 additions & 3 deletions docs/components/sections/deploy-anywhere.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Loading