sashaastiadi/www_mycelium_net
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: adjust component spacing and layout for improved mobile display

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-14 15:35:00 +02:00
parent 661e035e19
commit f22a288dd9
5 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
setting.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 107 KiB

2
src/components/About.tsx
View File

@@ -6,7 +6,7 @@ export function About() {
return ( return (
<section <section
id="about" id="about"
className="relative overflow-hidden bg-gray-900 py-20 sm:py-28" className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 -top-12"
> >
<div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2"> <div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
<CircleBackground color="#fff" className="animate-spin-slower" /> <CircleBackground color="#fff" className="animate-spin-slower" />

2
src/components/AppScreen.tsx
View File

@@ -51,7 +51,7 @@ export function AppScreen({
}: React.ComponentPropsWithoutRef<'div'>) { }: React.ComponentPropsWithoutRef<'div'>) {
return ( return (
<div className={clsx('flex flex-col', className)} {...props}> <div className={clsx('flex flex-col', className)} {...props}>
<div className="flex justify-between px-4 pt-4"> <div className="flex justify-between px-4 pt-0">
<MenuIcon className="h-6 w-6 flex-none" /> <MenuIcon className="h-6 w-6 flex-none" />
<Logo className="h-6 flex-none" /> <Logo className="h-6 flex-none" />
<UserIcon className="h-6 w-6 flex-none" /> <UserIcon className="h-6 w-6 flex-none" />

2
src/components/Features.tsx
View File

@@ -6,7 +6,7 @@ import ContentDistribution from '@/components/ContentDistribution'
export function Features() { export function Features() {
return ( return (
<section id="features" className="bg-white py-24 sm:py-32"> <section id="features" className=" py-24">
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8"> <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<p className="mt-2 max-w-lg text-3xl lg:text-4xl lg:text-4xl font-medium tracking-tight text-pretty text-gray-950"> <p className="mt-2 max-w-lg text-3xl lg:text-4xl lg:text-4xl font-medium tracking-tight text-pretty text-gray-950">
Network Capabilities Network Capabilities

6
src/components/PrimaryFeatures.tsx
View File

@@ -194,7 +194,7 @@ type ScreenProps =
function InviteScreen(props: ScreenProps) { function InviteScreen(props: ScreenProps) {
return ( return (
<AppScreen className="w-full"> <AppScreen className="w-full">
<Image src="/images/connector.png" alt="Mycelium Connector" width={366} height={732} /> <Image src="/images/connector.png" alt="Mycelium Connector" width={366} height={732} className="mt-[-2rem]" />
</AppScreen> </AppScreen>
) )
} }
@@ -202,7 +202,7 @@ function InviteScreen(props: ScreenProps) {
function StocksScreen(props: ScreenProps) { function StocksScreen(props: ScreenProps) {
return ( return (
<AppScreen className="w-full"> <AppScreen className="w-full">
<Image src="/images/peers.png" alt="Mycelium Peers" width={366} height={732} /> <Image src="/images/peers.png" alt="Mycelium Peers" width={366} height={732} className="mt-[-2rem]" />
</AppScreen> </AppScreen>
) )
} }
@@ -210,7 +210,7 @@ function StocksScreen(props: ScreenProps) {
function InvestScreen(props: ScreenProps) { function InvestScreen(props: ScreenProps) {
return ( return (
<AppScreen className="w-full"> <AppScreen className="w-full">
<Image src="/images/setting.png" alt="Mycelium Settings" width={366} height={732} /> <Image src="/images/setting.png" alt="Mycelium Settings" width={366} height={732} className="mt-[-2rem]" />
</AppScreen> </AppScreen>
) )
} }