Website: responsive fixes

brefphp · Oct 9, 2023 · 0b609bb · 0b609bb
1 parent 61a01aa
commit 0b609bb
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 11 deletions.
diff --git a/website/src/components/home/companies.jsx b/website/src/components/home/companies.jsx
@@ -31,7 +31,7 @@ export default function Companies() {
                             </a>
                         </div>
                     </div>
-                    <div className="mx-auto grid w-full max-w-xl grid-cols-2 items-center gap-y-12 sm:gap-y-14 lg:mx-0 lg:max-w-none lg:pl-8">
+                    <div className="mx-auto grid w-full max-w-xl grid-cols-2 items-center gap-x-6 gap-y-12 sm:gap-y-14 lg:mx-0 lg:max-w-none lg:pl-8">
                         <Image
                             className="max-h-12 max-w-[10rem] w-full object-contain object-left brightness-0 invert"
                             src={phpStanLogo}

diff --git a/website/src/components/home/intro.jsx b/website/src/components/home/intro.jsx
@@ -26,7 +26,7 @@ export default function Intro() {
     return (
         <div className="overflow-hidden home-container home-section">
             <div className="grid grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-center">
-                <div className="px-6 lg:px-0 lg:pr-4 lg:pt-4">
+                <div className="lg:px-0 lg:pr-4 lg:pt-4">
                     <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-lg">
                         <h2 className="mt-2 text-3xl font-black tracking-tight text-gray-900 sm:text-4xl">
                             Why Bref? Why serverless?
@@ -55,15 +55,15 @@ export default function Intro() {
                         </dl>
                     </div>
                 </div>
-                <div className="sm:px-6 lg:px-0">
+                <div className="-mx-6 sm:px-6 lg:px-0">
                     <div className="relative isolate overflow-hidden bg-blue-500 px-6 pt-8 sm:mx-auto sm:max-w-2xl sm:rounded-3xl sm:pl-16 sm:pr-0 sm:pt-16 lg:mx-0 lg:max-w-none">
                         <div
                             className="absolute -inset-y-px -left-3 -z-10 w-full origin-bottom-left skew-x-[-30deg] bg-blue-100 opacity-20 ring-1 ring-inset ring-white"
                             aria-hidden="true"
                         />
                         <div className="mx-auto max-w-2xl sm:mx-0 sm:max-w-none">
                             <div className="w-screen overflow-hidden rounded-tl-xl bg-gray-900">
-                                <div className=" px-6 pb-14 pt-6 text-gray-200 font-mono text-sm">
+                                <div className=" px-6 pb-14 pt-6 text-gray-200 font-mono text-sm overflow-hidden whitespace-nowrap">
                                     <p><span className="text-gray-400">$</span> serverless deploy</p>
                                     <p>&nbsp;</p>
                                     <p>Deploying demo to stage dev <span className="text-gray-500">(us-east-1)</span></p>

diff --git a/website/src/components/home/invocations.jsx b/website/src/components/home/invocations.jsx
@@ -1,6 +1,6 @@
 export default function Invocations({ invocations }) {
     return (
-        <div className="home-container home-section !py-12 sm:!py-16">
+        <div className="home-container home-section !px-0 sm:!px-6 !py-12 sm:!py-16">
             <div
                 className="relative isolate overflow-hidden bg-gray-900 px-6 py-16 text-center shadow-2xl sm:rounded-3xl sm:px-16">
                 <h2 className="mx-auto max-w-2xl text-3xl font-black tracking-tight text-white sm:text-5xl">
@@ -19,12 +19,11 @@ export default function Invocations({ invocations }) {
                       method="post" data-sv-form="5696241" data-uid="ee838f35c4" data-format="inline" data-version="5"
                       data-options="{&quot;settings&quot;:{&quot;after_subscribe&quot;:{&quot;action&quot;:&quot;message&quot;,&quot;success_message&quot;:&quot;Success! Now check your email to confirm your subscription.&quot;,&quot;redirect_url&quot;:&quot;&quot;},&quot;analytics&quot;:{&quot;google&quot;:null,&quot;fathom&quot;:null,&quot;facebook&quot;:null,&quot;segment&quot;:null,&quot;pinterest&quot;:null,&quot;sparkloop&quot;:null,&quot;googletagmanager&quot;:null},&quot;modal&quot;:{&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15},&quot;powered_by&quot;:{&quot;show&quot;:true,&quot;url&quot;:&quot;https://convertkit.com/features/forms?utm_campaign=poweredby&amp;utm_content=form&amp;utm_medium=referral&amp;utm_source=dynamic&quot;},&quot;recaptcha&quot;:{&quot;enabled&quot;:false},&quot;return_visitor&quot;:{&quot;action&quot;:&quot;show&quot;,&quot;custom_content&quot;:&quot;&quot;},&quot;slide_in&quot;:{&quot;display_in&quot;:&quot;bottom_right&quot;,&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15},&quot;sticky_bar&quot;:{&quot;display_in&quot;:&quot;top&quot;,&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15}},&quot;version&quot;:&quot;5&quot;}">
                     <ul className="text-red-400 font-bold" data-element="errors" data-group="alert"></ul>
-                    <div data-element="fields" data-stacked="false" className="flex gap-x-4">
-                        <div className="formkit-field">
-                            <input
-                                className="min-w-0 flex-auto rounded-md border-0 bg-white/10 px-3.5 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-white/75 focus:ring-2 focus:ring-inset focus:ring-white sm:text-sm sm:leading-6"
-                                name="email_address" aria-label="Email" placeholder="Email" required type="email" />
-                        </div>
+                    <div data-element="fields" data-stacked="false"
+                         className="flex flex-col sm:flex-row w-full sm:w-auto gap-4">
+                        <input
+                            className="min-w-0 flex-auto rounded-md border-0 bg-white/10 px-3.5 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-white/75 focus:ring-2 focus:ring-inset focus:ring-white sm:text-sm sm:leading-6"
+                            name="email_address" aria-label="Email" placeholder="[email protected]" required type="email" />
                         <button data-element="submit" type="submit"
                                 className="flex-none rounded-md !bg-blue-600 hover:!bg-blue-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500">
                             <div className="formkit-spinner">