forked from emre/www_projectmycelium_com
refactor: make Button text responsive and hide HomeAurora background on mobile
- 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:
@@ -3,9 +3,9 @@ import clsx from 'clsx'
|
||||
|
||||
const baseStyles = {
|
||||
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:
|
||||
'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 = {
|
||||
|
||||
@@ -6,8 +6,7 @@ export function HomeAurora() {
|
||||
<div className="px-4">
|
||||
{/* Boxed container */}
|
||||
<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"
|
||||
style={{ backgroundImage: "url('/images/hero11.webp')" }}
|
||||
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')]"
|
||||
>
|
||||
{/* Inner padding */}
|
||||
<div className="px-6 py-16 lg:py-32 ">
|
||||
|
||||
Reference in New Issue
Block a user