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

refactor: make Button text responsive and hide HomeAurora background on mobile

Browse Source 
- Changed Button text size from text-base to text-sm md:text-base for both solid and outline variants
- Updated HomeAurora background image to only display on md+ screens using bg-none md:bg-[url(...)]
- Removed inline style attribute in favor of Tailwind class for background image
- Cleaned up extra spacing in className
This commit is contained in:
sasha-astiadi
2025-11-18 12:12:05 +01:00
parent 3213179ff6
commit d53f2d943f
2 changed files with 3 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Button.tsx
View File

@@ -3,9 +3,9 @@ import clsx from 'clsx'
const baseStyles = { const baseStyles = {
solid: solid:
'inline-flex justify-center rounded-full py-2 px-5 text-base font-semibold transition-colors', 'inline-flex justify-center rounded-full py-2 px-5 text-sm md:text-base font-semibold transition-colors',
outline: outline:
'inline-flex justify-center bg-transparent rounded-full border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(5)-1px)] text-base transition-colors', 'inline-flex justify-center bg-transparent rounded-full border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(5)-1px)] text-sm md:text-base transition-colors',
} }
const variantStyles = { const variantStyles = {

3
src/pages/home/HomeAurora.tsx
View File

@@ -6,8 +6,7 @@ export function HomeAurora() {
<div className="px-4"> <div className="px-4">
{/* Boxed container */} {/* Boxed container */}
<div <div
className="relative mx-auto max-w-7xl border border-t-0 border-gray-100 bg-white overflow-hidden bg-size-[65%] bg-right bg-no-repeat" className="relative mx-auto max-w-7xl border border-t-0 border-gray-100 bg-white overflow-hidden bg-size-[65%] bg-right bg-no-repeat bg-none md:bg-[url('/images/hero11.webp')]"
style={{ backgroundImage: "url('/images/hero11.webp')" }}
> >
{/* Inner padding */} {/* Inner padding */}
<div className="px-6 py-16 lg:py-32 "> <div className="px-6 py-16 lg:py-32 ">