From c68a46691fcd0767b18db6f9b1a13b85c1fddb63 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 21 Nov 2025 17:51:20 +0100
Subject: [PATCH] refactor: improve MediaHero and MediaType responsive design
 for mobile and tablet viewports

- Changed MediaHero H4 top margin from mt-8 to lg:mt-8 mt-4 for better mobile spacing
- Changed download button icon size from h-12 w-12 to h-5 w-5 md:h-6 md:w-6 with responsive padding and text sizing
- Changed logo_dark grid gap from gap-2 lg:gap-0 to gap-0 for consistent spacing
- Changed logo_dark border color from border-gray-100 to border-gray-800 for better dark background contrast
- Changed Media
---
 src/pages/mediakit/MediaHero.tsx | 14 +++++++-------
 src/pages/mediakit/MediaType.tsx | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/pages/mediakit/MediaHero.tsx b/src/pages/mediakit/MediaHero.tsx
index 4106659..5ff665e 100644
--- a/src/pages/mediakit/MediaHero.tsx
+++ b/src/pages/mediakit/MediaHero.tsx
@@ -61,19 +61,19 @@ export function MediaHero() {
               Download official Mycelium logos for light and dark backgrounds in SVG and PNG formats.
             </P>
 
-            <H4 className="mt-8 text-gray-800 tracking-normal flex items-center gap-2">
+            <H4 className="lg:mt-8 mt-4 text-gray-800 tracking-normal flex items-center gap-2">
               <span>Mycelium Logos (Light)</span>
               <a
                 href="/images/mediakit/logo_light.zip"
                 download
-                className="inline-flex items-center justify-center rounded-full p-1 text-gray-800 hover:text-cyan-600 hover:bg-cyan-50 transition-colors text-xs"
+                className="inline-flex items-center justify-center rounded-full p-1 text-gray-800 hover:text-cyan-600 hover:bg-cyan-50 transition-colors text-[10px] md:text-xs md:p-1.5"
                 aria-label="Download Mycelium light logos zip"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 20 20"
                   fill="currentColor"
-                  className="h-12 w-12"
+                  className="h-5 w-5 md:h-6 md:w-6"
                 >
                   <path d="M10 2a.75.75 0 0 1 .75.75v8.19l2.22-2.22a.75.75 0 1 1 1.06 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 0 1 1.06-1.06l2.22 2.22V2.75A.75.75 0 0 1 10 2Z" />
                   <path d="M3.5 12.75a.75.75 0 0 1 .75.75v1.5h11.5v-1.5a.75.75 0 0 1 1.5 0v2.25a.75.75 0 0 1-.75.75H4.25A.75.75 0 0 1 3.5 15v-1.5a.75.75 0 0 1 .75-.75Z" />
@@ -124,14 +124,14 @@ export function MediaHero() {
               <a
                 href="/images/mediakit/logo_dark.zip"
                 download
-                className="inline-flex items-center justify-center rounded-full p-1 text-gray-800 hover:text-cyan-600 hover:bg-cyan-50 transition-colors text-xs"
+                className="inline-flex items-center justify-center rounded-full p-1 text-gray-800 hover:text-cyan-600 hover:bg-cyan-50 transition-colors text-[10px] md:text-xs md:p-1.5"
                 aria-label="Download Mycelium dark logos zip"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 20 20"
                   fill="currentColor"
-                  className="h-12 w-12"
+                  className="h-5 w-5 md:h-6 md:w-6"
                 >
                   <path d="M10 2a.75.75 0 0 1 .75.75v8.19l2.22-2.22a.75.75 0 1 1 1.06 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 0 1 1.06-1.06l2.22 2.22V2.75A.75.75 0 0 1 10 2Z" />
                   <path d="M3.5 12.75a.75.75 0 0 1 .75.75v1.5h11.5v-1.5a.75.75 0 0 1 1.5 0v2.25a.75.75 0 0 1-.75.75H4.25A.75.75 0 0 1 3.5 15v-1.5a.75.75 0 0 1 .75-.75Z" />
@@ -140,11 +140,11 @@ export function MediaHero() {
             </H4>
 
             <div className="bg-[#121212] w-full max-w-8xl mx-auto mt-6">
-              <dl className="grid grid-cols-1 lg:grid-cols-4 gap-2 lg:gap-0">
+              <dl className="grid grid-cols-1 lg:grid-cols-4 gap-0">
                 {logo_dark.map((item) => (
                   <div
                     key={item.id}
-                    className="group gap-2 bg-[#121212] px-4 py-2 border border-gray-100 lg:border-t lg:border-b border-l-0.5 border-r-0.5 transition-all duration-300 ease-in-out hover:scale-[1.02] hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
+                    className="group gap-2 bg-[#121212] px-4 py-2 border border-gray-800 lg:border-t lg:border-b border-l-0.5 border-r-0.5 transition-all duration-300 ease-in-out hover:scale-[1.02] hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
                   >
                     <img
                       src={item.image}
diff --git a/src/pages/mediakit/MediaType.tsx b/src/pages/mediakit/MediaType.tsx
index 15a6c48..2f1544e 100644
--- a/src/pages/mediakit/MediaType.tsx
+++ b/src/pages/mediakit/MediaType.tsx
@@ -7,19 +7,19 @@ export function MediaType() {
     <div className="">
       {/* Boxed container */}
       <div
-        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden"
+        className="relative  py-12 mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden"
       >
         {/* Inner padding */}
-        <div className="px-6 lg:py-12">
+        <div className="px-6 lg:py-12 ">
           <div className="max-w-7xl lg:pl-6">
-            <div className="flex items-center justify-between gap-4">
-              <H3 as="h1" className="mt-0 text-gray-900">
+            <div className="flex flex-col md:flex-row md:items-center gap-3 md:gap-6">
+              <H3 as="h1" className="text-gray-900">
                 Typography
               </H3>
               <a
                 href="/src/assets/fonts/Mulish.zip"
                 download
-                className="inline-flex items-center gap-2 rounded-full border border-gray-200 px-3 py-1.5 text-xs font-medium text-gray-700 hover:text-cyan-600 hover:border-cyan-500 hover:bg-cyan-50 transition-colors"
+                className="lg:mt-4 mt-4 inline-flex w-auto self-start items-center gap-2 rounded-full border border-gray-200 px-3 py-1 text-xs md:text-sm lg:text-base md:px-3.5 md:py-1.5 font-medium text-gray-700 hover:text-cyan-600 hover:border-cyan-500 hover:bg-cyan-50 transition-colors"
                 aria-label="Download Mulish font family"
               >
                 <span>Download Mulish</span>
@@ -27,7 +27,7 @@ export function MediaType() {
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 20 20"
                   fill="currentColor"
-                  className="h-4 w-4"
+                  className="h-3 w-3 md:h-4 md:w-4"
                 >
                   <path d="M10 2a.75.75 0 0 1 .75.75v8.19l2.22-2.22a.75.75 0 1 1 1.06 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 0 1 1.06-1.06l2.22 2.22V2.75A.75.75 0 0 1 10 2Z" />
                   <path d="M3.5 12.75a.75.75 0 0 1 .75.75v1.5h11.5v-1.5a.75.75 0 0 1 1.5 0v2.25a.75.75 0 0 1-.75.75H4.25A.75.75 0 0 1 3.5 15v-1.5a.75.75 0 0 1 .75-.75Z" />
@@ -35,7 +35,7 @@ export function MediaType() {
               </a>
             </div>
 
-            <P className="mt-4 text-gray-600 max-w-2xl">
+            <P className="mt-6 text-gray-600 max-w-3xl">
               Mycelium uses a consistent type scale built on Mulish and Inter. Below are the primary text
               primitives you can reuse in design and implementation.
             </P>