Maked the whole application responsive for most for of devices.

## Please describe your changes Maked the whole application responsive for most for of devices. ## How did you accomplish your changes? I have updated the page and components. ## How have you tested your changes? I tested the code in the browser and it works perfectly. ## Checklist - [x] The changes are not breaking the editor - [x] Formatted the code before making the PR request - [x] Followed the guidelines - [x] Followed style guidelines ## Related issues No
ashrafchowdury · Jun 22, 2023 · 1cd4006 · 1cd4006 · vercel · Jun 22, 2023
2 parents 63b3d00 + 180c5b1
commit 1cd4006
Show file tree

Hide file tree

Showing 24 changed files with 667 additions and 1,170 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -10,7 +10,7 @@
 
 @layer utilities {
   body {
-    background-image: url(".././public/bg2.svg");
+    background-image: url(".././public/bg.svg");
     background-attachment: fixed;
     background-color: black;
   }

diff --git a/app/page.tsx b/app/page.tsx
@@ -10,18 +10,18 @@ import Logo from "@/components/ui/Logo";
 
 export default function Home() {
   return (
-    <main className="xl:w-[1250px] lg:w-[1020px] md:w-[750px] sm:w-[550px] w-[95%] mx-auto overflow-hidden">
-      <div className="bgDesign absolute -z-50 top-[-400px] w-[800px] h-[800px] rounded-full"></div>
+    <main className="xl:w-[1250px] lg:w-[1020px] md:w-[750px] sm:w-[550px] w-[95%] mx-auto relative overflow-x-hidden">
+      <div className="bgDesign absolute -z-50 top-[-400px] lg:w-[800px] lg:h-[800px] md:w-[600px] md:h-[600px] sm:w-[400px] sm:h-[400px] w-[90%] h-[400px] rounded-full"></div>
       <nav className=" w-full md:h-[120px] h-[100px] flex items-center justify-between">
         <Logo />
         <Link href="/studio">
-          <button className="glass md:text-sm text-xs px-7 py-3 rounded-full font-semibold flex items-center">
-            <StarsIcon style="mr-2 text-[16px]" /> Open Studio
+          <button className="glass md:text-sm text-xs md:px-7 py-3 px-5 rounded-full font-semibold flex items-center">
+            <StarsIcon style="mr-2 md:text-[16px] text-sm" /> Open Studio
           </button>
         </Link>
       </nav>
 
-      <header className=" relative flex flex-col items-center mt-28">
+      <header className=" relative flex flex-col items-center sm:mt-28 mt-20">
         <div className="lg:w-[650px] md:w-[80%] w-[90%] text-center">
           <h1 className="heading lg:text-6xl md:text-5xl sm:text-4xl text-3xl lg:leading-[70px] font-bold">
             Shine Your Post To The World
@@ -32,13 +32,13 @@ export default function Home() {
           </p>
         </div>
         <Link href="/studio">
-          <button className="glass md:text-sm text-xs px-7 py-3 rounded-full font-semibold flex items-center mt-8">
-            <StarsIcon style="mr-2 text-[16px]" /> Open Studio
+          <button className="glass md:text-sm text-xs md:px-7 py-3 px-5 rounded-full font-semibold flex items-center mt-8">
+            <StarsIcon style="mr-2 md:text-[16px] text-sm" /> Open Studio
           </button>
         </Link>
 
-        <div className=" absolute top-[270px] -z-50 flex flex-col items-center justify-center">
-          <div className=" bg-slate-400 mt-16 w-[560px] h-[2px] rounded-lg"></div>
+        <div className="  absolute sm:top-[270px] top-[220px] -z-50 flex flex-col items-center justify-center">
+          <div className=" bg-slate-400 mt-16 lg:w-[560px] md:w-[420px] sm:w-[300px] w-[55%] h-[2px] rounded-lg"></div>
           <Image
             src="/light.svg"
             width={1000}
@@ -49,22 +49,27 @@ export default function Home() {
         </div>
       </header>
 
-      <section className="mt-[240px] flex items-center justify-center">
-        <div className="w-[950px] flex flex-wrap items-center justify-center">
-          <div className="glass xl:w-[400px] xl:h-[400px] lg:w-[330px] lg:h-[330px] rounded-2xl m-2 p-4 overflow-hidden"></div>
-          <div className="glass xl:w-[400px] xl:h-[400px] lg:w-[330px] lg:h-[330px] rounded-2xl m-2 p-4 overflow-hidden"></div>
-          <div className="glass xl:w-[820px] xl:h-[400px] lg:w-[680px] lg:h-[330px] rounded-2xl m-2 p-4 overflow-hidden"></div>
+      <section className="sm:mt-[240px] mt-[130px] w-full flex sm:flex-row flex-col items-center justify-center">
+        <div className="lg:w-[950px] md:w-[620px] sm:w-[350px] w-[90%] flex lg:flex-row flex-col lg:flex-wrap ">
+          <div className="glass xl:w-[400px] xl:h-[400px] lg:w-[330px] lg:h-[330px] md:w-[360px] md:h-[360px] sm:w-[250px] sm:h-[250px] w-full h-[280px] rounded-2xl sm:m-2 my-2 p-4 overflow-hidden"></div>
+          <div className="glass xl:w-[400px] xl:h-[400px] lg:w-[330px] lg:h-[330px] md:w-[360px] md:h-[360px] sm:w-[250px] sm:h-[250px] w-full h-[280px] rounded-2xl sm:m-2 my-2 p-4 overflow-hidden"></div>
+
+          <div className="glass xl:w-[820px] xl:h-[400px] lg:w-[680px] lg:h-[330px] rounded-2xl m-2 p-4 overflow-hidden hidden lg:block"></div>
         </div>
 
-        <div className="glass xl:w-[450px] xl:h-[815px] lg:w-[400px] lg:h-[680px] rounded-2xl m-2 p-4 overflow-hidden"></div>
+        <div className="glass xl:w-[450px] xl:h-[815px] lg:w-[420px] lg:h-[680px] md:w-[550px] md:h-[740px] sm:w-[320px] sm:h-[520px] w-[90%] h-[500px] rounded-2xl sm:m-2 my-2 p-4 overflow-hidden"></div>
       </section>
 
       <footer className=" mt-28">
         <div className="glass w-full h-[2px] my-10"></div>
 
         <div className=" w-full flex md:flex-row flex-col md:items-start items-center justify-between mb-5">
-          <div>
-            <Link href="/" target="_blank">
+          <div className=" md:mb-0 mb-10">
+            <Link
+              href="/"
+              target="_blank"
+              className="md:text-[16px] text-sm text-center block"
+            >
               Desigend & developed by
               <span className="ml-1 whitespace-nowrap underline underline-offset-[6px] decoration-1 decoration-wavy decoration-secondary">
                 Ashraf Chowdury
@@ -73,13 +78,13 @@ export default function Home() {
           </div>
 
           <div className=" flex items-center space-x-3 -mt-2">
-            <button className="glass p-2 rounded-lg text-xl">
+            <button className="glass p-2 rounded-lg lg:text-xl md:text-lg text-sm">
               <GithubIcon />
             </button>
-            <button className="glass p-2 rounded-lg text-xl">
+            <button className="glass p-2 rounded-lg lg:text-xl md:text-lg text-sm">
               <TwitterIcon />
             </button>
-            <button className="glass p-2 rounded-lg text-xl">
+            <button className="glass p-2 rounded-lg lg:text-xl md:text-lg text-sm">
               <LinkedinIcon />
             </button>
           </div>

diff --git a/app/studio/layout.tsx b/app/studio/layout.tsx
@@ -5,7 +5,7 @@ export default function StudioLayout({
   children: React.ReactNode;
 }) {
   return (
-    <section className="xl:w-[1200px] mx-auto h-screen overflow-hidden">
+    <section className="xl:w-[1200px] lg:w-[1000px] md:w-[720px] sm:w-[500px] w-[95%] mx-auto h-screen overflow-hidden">
       <StudioContextProvider>{children}</StudioContextProvider>
     </section>
   );

diff --git a/app/studio/page.tsx b/app/studio/page.tsx
@@ -4,11 +4,11 @@ import Media from "@/components/studio/Media";
 
 const Studio = () => {
   return (
-    <main className="w-full overflow-hidden">
-      <div className="bgDesign absolute -z-50 top-[-400px] w-[800px] h-[800px] rounded-full"></div>
+    <main className="w-full overflow-hidden relative">
+      <div className="bgDesign absolute -z-50 top-[-400px] lg:w-[800px] lg:h-[800px] md:w-[600px] md:h-[600px] sm:w-[400px] sm:h-[400px] w-[90%] h-[400px] rounded-full"></div>
       <Navigation />
 
-      <section className="w-full h-[80vh] flex items-center justify-between">
+      <section className="w-full lg:h-[85vh] sm:h-[70vh] h-[65vh] flex items-center lg:justify-between justify-center">
         <Features />
         <Media />
       </section>

diff --git a/components/studio/FeatureEditor.tsx b/components/studio/FeatureEditor.tsx
@@ -7,8 +7,8 @@ const FeaturesEditor = () => {
 
   if (!isEditor) null;
   return (
-    <section className="glass w-[280px] h-[74vh] rounded-xl -ml-8 pl-12 py-5 pr-4">
-      <div className=" flex items-center justify-between mb-12">
+    <section className="glass xl:w-[280px] lg:h-[720px] lg:w-[260px] md:w-[720px] w-full rounded-xl xl:-ml-8 lg:ml-0 lg:pl-12 lg:pr-4 px-8 py-5 lg:pb-0 pb-6 xl:relative xl:left-0 absolute lg:z-0 z-20 lg:left-10 xl:bottom-0 lg:-bottom-8 sm:bottom-[100px] bottom-[95px]">
+      <div className=" flex items-center justify-between lg:mb-12 md:mb-8 mb-6">
         <p className=" text-sm"> {isEditor} </p>
         <button className="rounded-lg text-sm" onClick={() => setIsEditor("")}>
           <SlideIcon />

diff --git a/components/studio/Features.tsx b/components/studio/Features.tsx
@@ -15,29 +15,32 @@ const Features = () => {
   };
 
   return (
-    <aside className=" flex items-center flex-row-reverse">
+    <aside className="lg:w-auto md:w-[720px] sm:w-[90%] w-full flex items-center flex-row-reverse lg:relative fixed z-30 bottom-0">
       {isEditor && <FeaturesEditor />}
 
-      <section className="glass relative lg:w-[80px] py-4 rounded-xl flex flex-col items-center justify-center space-y-5">
+      <section className="glass relative lg:w-[80px] md:w-[720px] w-full lg:py-4 py-4 lg:rounded-xl rounded-t-lg flex lg:flex-col items-center justify-center lg:space-y-5 lg:space-x-0 sm:space-x-4 sm:overflow-x-hidden overflow-x-auto">
+        <div className=" sm:hidden mx-5 w-[35px] h-[35px]"></div>
+        <div className=" sm:hidden mx-5 w-[35px] h-[35px]"></div>
         {feaures.map((data, ind) => {
           return (
             <div
-              className="w-[55px] overflow-hidden flex flex-col items-center"
+              className="xl:w-[55px] lg:w-[50px] w-full sm:overflow-hidden flex flex-col items-center sm:mx-0 mx-3"
               key={ind}
             >
               <button
-                className="glass w-[45px] h-[45px] text-xl rounded-lg flex items-center justify-center"
+                className="glass xl:w-[45px] xl:h-[45px] lg:w-[42px] lg:h-[42px] md:w-[40px] md:h-[40px] sm:w-[36px] sm:h-[36px] w-[35px] h-[35px] xl:text-xl lg:text-lg md:text-[16px] text-sm rounded-lg flex items-center justify-center"
                 onClick={() => handleEditor(data.title)}
                 disabled={isDownload}
               >
                 {data.icon}
               </button>
-              <p className=" text-start text-xs mt-2 whitespace-nowrap">
+              <p className=" text-start md:text-xs text-[10px] mt-2 whitespace-nowrap">
                 {data.title}
               </p>
             </div>
           );
         })}
+        <div className=" sm:hidden mx-5 w-[35px] h-[35px]"></div>
       </section>
     </aside>
   );

diff --git a/components/studio/Media.tsx b/components/studio/Media.tsx
@@ -13,14 +13,14 @@ const Media = () => {
 
   return (
     <section
-      className=" bg-white w-[850px] h-[560px]"
+      className=" bg-white xl:w-[850px] xl:h-[560px] md:w-[800px] md:h-[520px] sm:w-[700px] sm:h-[450px] w-[600px] h-[420px] lg:scale-100 md:scale-[0.8] sm:scale-[0.7] scale-[0.5]"
       style={{
         borderRadius: `${borders.reduce + 3}px`,
       }}
       ref={mediaRef}
     >
       <div
-        className="w-[850px] h-[560px] flex items-center justify-center overflow-hidden"
+        className="xl:w-[850px] xl:h-[560px] md:w-[800px] md:h-[520px] sm:w-[700px] sm:h-[450px] w-[600px] h-[420px] flex items-center justify-center overflow-hidden"
         style={{
           border: `${borders.border}px solid ${borders.color}`,
           borderRadius: `${borders.reduce}px`,

diff --git a/components/studio/Navigation.tsx b/components/studio/Navigation.tsx
@@ -19,40 +19,40 @@ const Navigation = () => {
     <nav className=" w-full md:h-[120px] h-[100px] flex items-center justify-between">
       <Logo />
 
-      <div className="flex items-center justify-between space-x-3">
+      <div className="flex items-center justify-between md:space-x-3 space-x-2">
         <Link
           href="https://github.com/ashrafchowdury/Poststrome"
           target="_blank"
         >
-          <button className="glass w-[36px] h-[36px] rounded-lg flex items-center justify-center">
-            <GithubIcon style="text-[16px]" />
+          <button className="glass md:w-[36px] md:h-[36px] w-[30px] h-[30px] rounded-lg flex items-center justify-center">
+            <GithubIcon style="md:text-[16px] text-sm" />
           </button>
         </Link>
-        <div className="glass w-[2px] h-7 mx-3"></div>
-        <button className="glass w-[36px] h-[36px] rounded-lg flex items-center justify-center">
-          <SaveIcon style="text-[16px]" />
+        <div className="glass w-[2px] md:h-7 h-5 md:mx-3 mx-2"></div>
+        <button className="glass md:w-[36px] md:h-[36px] w-[30px] h-[30px] rounded-lg flex items-center justify-center">
+          <SaveIcon style="md:text-[16px] text-sm" />
         </button>
         <button
-          className="glass w-[36px] h-[36px] rounded-lg flex items-center justify-center"
+          className="glass md:w-[36px] md:h-[36px] w-[30px] h-[30px] rounded-lg flex items-center justify-center"
           onClick={() => copyImage(mediaRef, setIsDownload)}
           disabled={isDownload}
         >
           {isDownload ? (
-            <LoadingIcon style="text-[16px] animate-spin" />
+            <LoadingIcon style="md:text-[16px] text-sm animate-spin" />
           ) : (
-            <CopyIcon style="text-[16px]" />
+            <CopyIcon style="md:text-[16px] text-sm" />
           )}
         </button>
 
         <button
-          className="glass w-[36px] h-[36px] rounded-lg flex items-center justify-center "
+          className="glass md:w-[36px] md:h-[36px] w-[30px] h-[30px] rounded-lg flex items-center justify-center "
           onClick={() => downloadImage(mediaRef, setIsDownload)}
           disabled={isDownload}
         >
           {isDownload ? (
-            <LoadingIcon style="text-[16px] animate-spin" />
+            <LoadingIcon style="md:text-[16px] text-sm animate-spin" />
           ) : (
-            <DownloadIcon style="text-[16px]" />
+            <DownloadIcon style="md:text-[16px] text-sm" />
           )}
         </button>
       </div>

diff --git a/components/studio/features/Add.tsx b/components/studio/features/Add.tsx
@@ -22,7 +22,7 @@ const Add = () => {
   };
   return (
     <>
-      <p className=" text-sm font-medium mb-4">Add Repository URL</p>
+      <p className=" md:text-sm text-xs font-medium mb-4">Add Repository URL</p>
       <form className=" relative w-full" onSubmit={handleSearchURL}>
         <SearchIcon style=" absolute top-[10px] left-[10px] text-sm text-neutral-600" />
         <input

diff --git a/components/studio/features/Backgorund.tsx b/components/studio/features/Backgorund.tsx
@@ -11,19 +11,25 @@ const Backgorund = () => {
   const { setMediaBg } = useStudio();
   return (
     <>
-      <p className=" text-sm font-medium mb-2">Normal Colors</p>
+      <p className=" md:text-sm text-xs font-medium md:mb-2 mb-1">
+        Normal Colors
+      </p>
       <BgColors
         colors={defaultBg.colors}
         generateBg={() => hexGenerator(setMediaBg)}
       />
 
-      <p className=" text-sm font-medium mb-2 mt-8">Gradiants</p>
+      <p className=" md:text-sm text-xs font-medium md:mb-2 mb-1 md:mt-8 mt-4">
+        Gradiants
+      </p>
       <BgColors
         colors={defaultBg.linear}
         generateBg={() => gradiantGenerator(setMediaBg)}
       />
 
-      <p className=" text-sm font-medium mb-2 mt-8">Mesh Gradiant</p>
+      <p className=" md:text-sm text-xs font-medium md:mb-2 mb-1 md:mt-8 mt-4">
+        Mesh Gradiant
+      </p>
       <BgColors
         colors={defaultBg.mesh}
         generateBg={() => meshGenerator(setMediaBg)}
@@ -47,7 +53,7 @@ export const BgColors = ({ colors, generateBg }: BgColorsType) => {
             <button
               className={` ${
                 data == mediaBg && "ring-2 ring-neutral-200"
-              } w-[35px] h-[35px] rounded-lg mr-3 my-2 duration-200`}
+              } md:w-[35px] md:h-[35px] w-7 h-7 rounded-lg md:mr-3 mr-2 my-2 duration-200`}
               style={{ background: data, backgroundColor: `#${data}` }}
               key={data}
               onClick={() => setMediaBg(data)}
@@ -56,7 +62,7 @@ export const BgColors = ({ colors, generateBg }: BgColorsType) => {
         })}
 
         <button
-          className="glass w-[37px] h-[37px] rounded-lg mr-3 my-2 flex items-center justify-center"
+          className="glass md:w-[35px] md:h-[35px] w-7 h-7 rounded-lg md:mr-3 mr-2 my-2 flex items-center justify-center"
           onClick={generateBg}
         >
           <RotateIcon />

diff --git a/components/studio/features/Border.tsx b/components/studio/features/Border.tsx
@@ -6,7 +6,9 @@ const Border = () => {
 
   return (
     <>
-      <p className=" text-sm font-medium mb-4">Media Border</p>
+      <p className=" md:text-sm text-xs font-medium md:mb-4 mb-2">
+        Media Border
+      </p>
       <input
         type="range"
         min={0}
@@ -18,19 +20,21 @@ const Border = () => {
           setBorders({ ...borders, border: Number(e.target.value) })
         }
       />
-      <p className=" text-sm font-medium mb-3 mt-4">Border Color</p>
+      <p className=" md:text-sm text-xs font-medium mb-3 mt-4">Border Color</p>
       <div className="w-full h-[40px] overflow-hidden rounded-lg">
         <input
           type="color"
-          className="bg-transparent w-[300px] rounded-full h-[55px] cursor-pointer -ml-1 -mt-2"
+          className="bg-transparent w-[110%] rounded-full h-[55px] cursor-pointer -ml-1 -mt-2"
           defaultValue={borders.color}
           onChange={(e: ChangeEvent<HTMLInputElement>) =>
             setBorders({ ...borders, color: e.target.value })
           }
         />
       </div>
 
-      <p className=" text-sm font-medium mb-4 mt-10">Border Reduce</p>
+      <p className=" md:text-sm text-xs font-medium md:mb-4 mb-2 md:mt-10 mt-6">
+        Border Reduce
+      </p>
       <input
         type="range"
         min={0}

diff --git a/components/studio/features/FontSize.tsx b/components/studio/features/FontSize.tsx
@@ -5,7 +5,9 @@ const FontSize = () => {
   const { fontSize, setFontSize } = useStudio();
   return (
     <>
-      <p className=" text-sm font-medium mb-4">Media Font Size</p>
+      <p className=" md:text-sm text-xs font-medium md:mb-4 mb-2">
+        Media Font Size
+      </p>
       <input
         type="range"
         min={14}

diff --git a/components/studio/features/MediaSizes.tsx b/components/studio/features/MediaSizes.tsx
@@ -6,7 +6,9 @@ const MediaSizes = () => {
   const { mediaSizes, setMediaSizes, mediaScale, setMediaScale } = useStudio();
   return (
     <>
-      <p className=" text-sm font-medium mb-4">Different Sizes</p>
+      <p className=" md:text-sm text-xs font-medium md:mb-4 mb-2">
+        Different Sizes
+      </p>
       <div className=" flex flex-wrap items-center">
         {sizes.map((data, ind) => {
           const width = data.size.slice(0, data.size.indexOf("x")).trim();
@@ -18,7 +20,7 @@ const MediaSizes = () => {
                 className={` ${
                   `${height}px` == mediaSizes.height &&
                   "ring-2 ring-neutral-200"
-                } glass w-[37px] h-[37px] rounded-lg flex items-center justify-center`}
+                } glass md:w-[37px] md:h-[37px] w-8 h-8 rounded-lg flex items-center justify-center`}
                 onClick={() => {
                   setMediaSizes({ width: `${width}px`, height: `${height}px` });
                 }}
@@ -31,7 +33,9 @@ const MediaSizes = () => {
         })}
       </div>
 
-      <p className=" text-sm font-medium mb-4 mt-8">Zoom In & Zoom Out</p>
+      <p className=" md:text-sm text-xs font-medium md:mb-4 mb-2 md:mt-8 mt-5">
+        Zoom In & Zoom Out
+      </p>
       <input
         type="range"
         min={0.6}

diff --git a/components/studio/features/Rename.tsx b/components/studio/features/Rename.tsx
@@ -5,10 +5,12 @@ const Rename = () => {
   const { mediaRename, setMediaRename } = useStudio();
   return (
     <>
-      <p className=" text-sm font-medium mb-4">Rename Media</p>
+      <p className=" md:text-sm text-xs font-medium md:mb-4 mb-2">
+        Rename Media
+      </p>
       <textarea
         placeholder="Rewrite The Post"
-        className=" bg-transparent outline-none focus:ring-2 focus:ring-neutral-200 text-sm w-full h-[120px] px-4 py-3 rounded-lg border-2 border-neutral-700 duration-200"
+        className=" md:text-sm text-xs bg-transparent outline-none focus:ring-2 focus:ring-neutral-200 w-full h-[120px] px-4 py-3 rounded-lg border-2 border-neutral-700 duration-200"
         value={mediaRename}
         onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
           setMediaRename(e.target.value)