style tweaks for mobile

dxe · Jan 16, 2024 · 12ee383 · 12ee383
1 parent 67a41af
commit 12ee383
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 17 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -49,7 +49,7 @@ const App = () => {
         className="gap-12 items-center bg-slate-200 xl:rounded-lg py-12 md:px-16"
         id="petition-section"
       >
-        <h2 className="font-semibold text-xl uppercase text-left self-start">
+        <h2 className="font-semibold text-xl uppercase self-start text-center md:text-left w-full">
           Contact the District Attorney Now
         </h2>
         <Petition />
@@ -103,12 +103,6 @@ const App = () => {
         </div>
       </Section>
       <Section className="flex md:flex-row gap-8 text-center items-center bg-slate-200 xl:rounded-lg py-12 md:py-4">
-        <iframe
-          src="https://player.vimeo.com/video/899045165?h=2603019680&autoplay=0&title=0&byline=0&portrait=0&badge=0"
-          allow="autoplay; fullscreen"
-          allowFullScreen
-          className="border-0 h-[500px] md:h-[700px] aspect-[9/16]"
-        ></iframe>
         <div className="flex gap-6 flex-col items-center flex-grow">
           <h4 className="text-3xl uppercase font-medium">
             Ducklings Trapped In Wire
@@ -117,31 +111,51 @@ const App = () => {
             Investigators found dozens of ducklings trapped in wire on one night
             in October.
           </p>
-          <Button size="lg" onClick={scrollToPetition}>
+          <Button
+            size="lg"
+            onClick={scrollToPetition}
+            className="hidden md:flex"
+          >
             Tell the DA to prosecute Reichardt
           </Button>
         </div>
-      </Section>
-      <Section className="flex md:flex-row gap-8 text-center items-center bg-slate-200 xl:rounded-lg py-12 md:py-4">
         <iframe
-          src="https://player.vimeo.com/video/899042025?h=d2d319d36b&autoplay=0&title=0&byline=0&portrait=0&badge=0"
+          src="https://player.vimeo.com/video/899045165?h=2603019680&autoplay=0&title=0&byline=0&portrait=0&badge=0"
           allow="autoplay; fullscreen"
           allowFullScreen
-          className="border-0 h-[500px] md:h-[700px] aspect-[9/16]"
-        ></iframe>
+          className="border-0 h-[500px] md:h-[700px] aspect-[9/16] md:order-first"
+        ></iframe>{" "}
+        <Button size="lg" onClick={scrollToPetition} className="flex md:hidden">
+          Tell the DA to prosecute Reichardt
+        </Button>
+      </Section>
+      <Section className="flex md:flex-row gap-8 text-center items-center bg-slate-200 xl:rounded-lg py-12 md:py-4">
         <div className="flex gap-6 flex-col items-center flex-grow">
           <h4 className="text-3xl uppercase font-medium">Meet River</h4>
           <p className="max-w-md">
             River was on the verge of death at Reichardt Duck Farm.
             Investigators knew they couldn't leave him behind so they rushed him
             to the vet.
           </p>
-          <Button size="lg" onClick={scrollToPetition}>
+          <Button
+            size="lg"
+            onClick={scrollToPetition}
+            className="hidden md:flex"
+          >
             Tell the DA to prosecute Reichardt
           </Button>
         </div>
+        <iframe
+          src="https://player.vimeo.com/video/899042025?h=d2d319d36b&autoplay=0&title=0&byline=0&portrait=0&badge=0"
+          allow="autoplay; fullscreen"
+          allowFullScreen
+          className="border-0 h-[500px] md:h-[700px] aspect-[9/16] md:order-first"
+        ></iframe>
+        <Button size="lg" onClick={scrollToPetition} className="flex md:hidden">
+          Tell the DA to prosecute Reichardt
+        </Button>
       </Section>
-      <Section className="text-center pt-4 pb-12 text-sm border-t border-slate-300 text-slate-600">
+      <Section className="text-center pt-4 pb-12 text-sm md:border-t border-slate-300 text-slate-600">
         &copy; {new Date().getFullYear()} Help The Ducks
       </Section>
     </div>

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
+          "flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-base md:text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
           className,
         )}
         ref={ref}

diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
+          "flex min-h-[80px] w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-base md:text-sm ring-offset-white placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
           className,
         )}
         ref={ref}