Add responsive styling to docs (#106)

* Add esponsive styling * Padding-Top and Size * Fix SVG fill
wanjohiryan · Oct 14, 2023 · 670ee46 · 670ee46
1 parent e933552
commit 670ee46
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 50 deletions.
diff --git a/docs/app/page.tsx b/docs/app/page.tsx
@@ -31,9 +31,9 @@ export default function Home() {
           </Marquee>
         </div>
       </header>
-      <section className='pt-40 relative w-full items-center justify-center flex flex-col gap-10 h-min overflow-hidden'>
+      <section className='pt-[7rem] relative w-full items-center justify-center flex flex-col gap-10 h-min overflow-hidden'>
         {/**LOGO */}
-        <div className='h-[256px] w-[256px] relative'>
+        <div className='h-[220px] w-[220px] relative'>
           {/**BG */}
           <div className='relative flex items-center justify-center h-full w-full'>
             <div className="blur-logo scale-80" />
@@ -44,14 +44,14 @@ export default function Home() {
           </div>
         </div>
         <div className='outline-none flex flex-col justify-center relative items-center'>
-          <div className="mb-20 self-center items-center flex flex-col w-1/2 text-center text-[80px]">
-            <h1 className=" leading-[1.1em] delay-500">
+          <div className="mb-20 self-center items-center flex flex-col w-1/2 text-center">
+            <h1 className="min-[1200px]:text-[60px] min-[810px]:text-[48px] max-[809px]:text-[32px] -tracking-[1px] leading-[1.1em] delay-500">
               You’ve never shipped a game this fast before. Really.
             </h1>
-            <Link href="/" className="group delay-700 m-0 relative inline-flex items-center overflow-hidden py-4 sm:px-[3.25rem] px-0  outline-none transition duration-300 cursor-pointer " >
-              <div className="ease text-center text-accent translate-x-0 duration-300 font-bold">Get started</div>
+            <Link href="/" className="group delay-700 m-0 relative inline-flex items-center overflow-hidden py-4 sm:px-[3.25rem] px-0 outline-none transition duration-300 cursor-pointer " >
+              <div className="ease min-[1200px]:text-[60px] min-[810px]:text-[48px] max-[809px]:text-[32px] -tracking-[1px] leading-[1.1em] text-center text-accent translate-x-0 duration-300 font-bold">Get started</div>
               <div className="ease transition duration-300 group-hover:translate-x-[10px] text-accent relative">
-                <ChevronRight className="sm:h-[60px] sm:w-[60px] h-[23px] w-[23px] stroke-current stroke-2" />
+                <ChevronRight className="min-[810px]:h-[44px] min-[1200px]:h-[60px] max-[809px]:h-[30px] aspect-square stroke-current stroke-2" />
               </div>
             </Link>
           </div>

diff --git a/docs/src/svg/LogoGradient.tsx b/docs/src/svg/LogoGradient.tsx
@@ -46,61 +46,25 @@ const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
             />
         </defs>
         <g
-            style={{
-                fillOpacity: 1,
-                fill: "url(#c)",
-                stroke: "url(#linearGradient11938)",
-                strokeOpacity: 1,
-            }}
+            fill="url(#c)"
         >
             <g
-                fill="#C35BA8"
-                stroke="#C35BA8"
-                strokeWidth={1}
-                style={{
-                    fill: "url(#c)",
-                    fillOpacity: 1,
-                    stroke: "url(#linearGradient11938)",
-                    strokeOpacity: 1,
-                    strokeWidth: 3,
-                    strokeDasharray: "none",
-                }}
-            >
+                fill="#000"
+                stroke="#000"
+                strokeWidth={1}>
                 <path
                     d="M147.224 263.615q11.9 1.4 18-3l71-41 6.5-6.5 4-8v-14q-3.2-9.3-10.5-14.5-2.2-3.8-9-3l-22.5 13.5 16 10-1.5 3.5-59 34-8.5 3v-63.5l-4.5-6.5-20.5-11v86.5q2.1 9.4 8.5 14.5z"
                     opacity={0.98}
-                    style={{
-                        fill: "url(#c)",
-                        fillOpacity: 1,
-                        stroke: "url(#linearGradient11938)",
-                        strokeOpacity: 1,
-                        strokeWidth: 3,
-                        strokeDasharray: "none",
-                    }}
-                />
+                    fill="url(#c)"/>
                 <path
                     d="M91.224 231.615q16.7 1.7 23.5-6.5l-.5-28.5q-7.3 6.5-17.5 9v-78.5l2.5-.5 46 27 8 4h6l21.5-12.5-74.5-43.5q-5.5-2.5-15-1-9.9 3.1-15.5 10.5l-4 9v92q2.4 9.6 9.5 14.5z"
                     opacity={0.98}
-                    style={{
-                        fill: "url(#c)",
-                        fillOpacity: 1,
-                        stroke: "url(#linearGradient11938)",
-                        strokeOpacity: 1,
-                        strokeWidth: 3,
-                        strokeDasharray: "none",
-                    }}
+                    fill="url(#c)"
                 />
                 <path
                     d="m162.724 196.615 6.5-2 64-37 9.5-8.5q6.2-6.3 4-21-2.1-9.9-9.5-14.5l-72-42q-6.1-4.4-18-3-10.1 2.4-15.5 9.5l-5 11v10l3.5 3.5 19 11h2.5v-18.5l3.5-.5 65.5 38.5-1.5 3.5-48 27-6.5 5.5-1 2v22z"
                     opacity={0.98}
-                    style={{
-                        fill: "url(#c)",
-                        fillOpacity: 1,
-                        stroke: "url(#linearGradient11938)",
-                        strokeOpacity: 1,
-                        strokeWidth: 3,
-                        strokeDasharray: "none",
-                    }}
+                    fill="url(#c)"
                 />
             </g>
         </g>