ourworld_web/www_projectmycelium_com
22
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 3 Pull Requests 1 Projects Releases Activity

refactor: improve MediaHero and MediaType responsive design for mobile and tablet viewports

Browse Source 
- 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
This commit is contained in:
sasha-astiadi
2025-11-21 17:51:20 +01:00
parent 5a6d58dd85
commit c68a46691f
2 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/mediakit/MediaHero.tsx
View File

@@ -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}

14
src/pages/mediakit/MediaType.tsx
View File

@@ -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>