fix(mobile style): fix programs section mobile style

ringecosystem · Nov 21, 2024 · 322755a · 322755a
1 parent 6e22977
commit 322755a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/src/components/program.tsx b/src/components/program.tsx
@@ -1,11 +1,11 @@
 export default function Program() {
   return (
     <>
-      <div className="p-[60px] relative border-b-solid border-b-black border-b-[1px]">
-        <div className="absolute bg-black w-[25px] h-[25px] top-0 left-0" />
+      <div className="p-[50px_20px] sm:p-[60px] relative border-b-solid border-b-black border-b-[1px]">
+        <div className="absolute bg-black w-[15px] h-[15px] sm:w-[25px] sm:h-[25px] top-0 left-0" />
         <h2 className="text-[50px] leading-[64px] font-bold">Programs</h2>
       </div>
-      <div className="flex gap-[60px] border-b-solid border-b-[1px] border-b-black p-[60px]">
+      <div className="sm:flex gap-[60px] border-b-solid border-b-[1px] border-b-black p-[60px]">
         <video
           src="/videos/program1.mp4"
           autoPlay
@@ -35,7 +35,7 @@ export default function Program() {
           </a>
         </div>
       </div>
-      <div className="flex gap-[60px] border-b-solid border-b-[1px] border-b-black p-[60px]">
+      <div className="flex flex-col-reverse sm:flex-row  gap-[60px] border-b-solid border-b-[1px] border-b-black p-[60px]">
         <div className="flex flex-col gap-[20px] justify-center">
           <h2 className="text-[30px] leading-[38px] font-[600]">Bug Bounty </h2>
           <p className="text-[16px] leading-[26px]">
@@ -63,7 +63,7 @@ export default function Program() {
           className="w-[436px] h-[436px]"
         />
       </div>
-      <div className="flex gap-[60px] border-b-solid border-b-[1px] border-b-black p-[60px]">
+      <div className="sm:flex gap-[60px] border-b-solid border-b-[1px] border-b-black p-[60px]">
         <video
           src="/videos/program3.mp4"
           autoPlay

diff --git a/src/components/project.tsx b/src/components/project.tsx
@@ -1,12 +1,12 @@
 export default function Project() {
   return (
     <>
-      <div className="p-[60px] relative border-b-solid border-b-black border-b-[1px]">
-        <div className="absolute bg-black w-[25px] h-[25px] top-0 left-0" />
+      <div className="p-[50px_20px] sm:p-[60px] relative border-b-solid border-b-black border-b-[1px]">
+        <div className="absolute bg-black w-[15px] h-[15px] sm:w-[25px] sm:h-[25px] top-0 left-0" />
         <h2 className="text-[50px] leading-[64px] font-bold">Project</h2>
       </div>
-      <div className="flex border-b-solid border-b-[1px] border-b-black">
-        <div className="flex-grow flex-shrink-0 w-[50%] border-r-[1px] border-r-black border-r-solid p-[60px] h-full self-stretch">
+      <div className="sm:flex border-b-solid border-b-[1px] border-b-black">
+        <div className="flex-grow flex-shrink-0 sm:w-[50%] border-b-solid border-b-[1px] sm:border-b-0 border-b-black border-r-0 sm:border-r-[1px] border-r-black border-r-solid p-[100px_20px] sm:p-[60px] h-full self-stretch">
           <div className="py-[15px] mb-[40px]">
             <img
               src="/images/darwinia.svg"
@@ -34,7 +34,7 @@ export default function Project() {
             </a>
           </div>
         </div>
-        <div className="flex-grow flex-shrink-0 w-[50%] p-[60px] self-stretch">
+        <div className="flex-grow flex-shrink-0 sm:w-[50%] p-[100px_20px] sm:p-[60px] self-stretch">
           <div className="py-[15px] mb-[40px]">
             <img
               src="/images/paralink.svg"
@@ -65,8 +65,8 @@ export default function Project() {
           </div>
         </div>
       </div>
-      <div className="flex border-b-solid border-b-[1px] border-b-black">
-        <div className="flex-grow flex-shrink-0 w-[50%] border-r-[1px] border-r-black border-r-solid p-[60px] h-full">
+      <div className="sm:flex border-b-solid border-b-[1px] border-b-black">
+        <div className="flex-grow flex-shrink-0 sm:w-[50%] border-b-solid border-b-[1px] sm:border-b-0 border-b-black border-r-0 sm:border-r-[1px] border-r-black border-r-solid p-[100px_20px] sm:p-[60px] h-full">
           <div className="py-[15px] mb-[40px]">
             <img
               src="/images/msgport.svg"
@@ -94,7 +94,7 @@ export default function Project() {
             </a>
           </div>
         </div>
-        <div className="flex-grow flex-shrink-0 w-[50%] p-[60px] h-full">
+        <div className="flex-grow flex-shrink-0 sm:w-[50%] p-[100px_20px] sm:p-[60px] h-full">
           <div className="py-[15px] mb-[40px]">
             <img
               src="/images/xapi.svg"