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

style: improve responsive layout and spacing for mobile devices

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-14 16:04:32 +02:00
parent 36a37cb48c
commit e90d57b9e3
4 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/About.tsx
View File

@@ -7,7 +7,7 @@ export function About() {
return (
<section
id="about"
className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 -top-12"
className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 lg:-top-12 top-0"
>
<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" />

2
src/components/Container.tsx
View File

@@ -6,7 +6,7 @@ export function Container({
}: React.ComponentPropsWithoutRef<'div'>) {
return (
<div
className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
className={clsx('mx-auto max-w-7xl px-6 lg:px-8', className)}
{...props}
/>
)

20
src/components/Hero.tsx
View File

@@ -98,20 +98,20 @@ function PlayIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
export function Hero() {
return (
<div className="overflow-hidden py-32">
<div className="overflow-hidden lg:py-32 pb-4">
<Container>
<div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
<div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
<div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
<h1 className="text-5xl lg:text-6xl font-medium tracking-tight text-gray-900">
<h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
Mycelium
</h1>
<h2 className="mt-6 text-2xl tracking-tight text-gray-600">
Unleashing the Power of Decentralized Networks
<h2 className="mt-6 lg:text-2xl text-xl tracking-tight leading-normal text-gray-600">
Unleashing the Power of Decentralized Networks
</h2>
<p className="mt-6 text-lg text-gray-600">
<p className="mt-6 lg:text-xl text-lg text-gray-600 lg:leading-normal leading-tight">
Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.
</p>
<p className="mt-6 text-lg text-gray-600">
<p className="mt-6 text-lg text-gray-600 ">
Coming Soon: New Decentralized Features
</p>
<div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
@@ -125,9 +125,9 @@ export function Hero() {
</Button>
</div>
</div>
<div className="relative mt-10 sm:mt-20 lg:col-span-5 lg:row-span-2 lg:mt-0 xl:col-span-6">
<BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/3 mask-[linear-gradient(to_bottom,white_20%,transparent_75%)] stroke-gray-300/70 sm:top-16 sm:-translate-x-1/2 lg:-top-16 lg:ml-12 xl:-top-14 xl:ml-0" />
<div className="-mx-4 h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)] px-9 sm:mx-0 lg:absolute lg:-inset-x-10 lg:-top-10 lg:-bottom-20 lg:h-auto lg:px-0 lg:pt-10 xl:-bottom-32">
<div className="relative lg:mt-10 mt-0 lg:col-span-5 lg:row-span-2 xl:col-span-6">
<BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-16 lg:ml-12 xl:-top-14 ml-0" />
<div className="-mx-auto h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:px-0 lg:absolute lg:-inset-x-10 lg:-top-10 lg:-bottom-20 lg:h-auto lg:pt-10 xl:-bottom-32">
<Image
src="/images/phoneframe.png"
alt="Mycelium application demo"

2
src/components/PhoneFrame.tsx
View File

@@ -16,7 +16,7 @@ export function PhoneFrame({
fill
priority={priority}
/>
<div className="absolute inset-x-[6.3%] top-[3.15%] bottom-[2.75%] rounded-3xl overflow-hidden bg-gray-900">
<div className="absolute inset-x-[6.3%] top-[3.15%] bottom-[2.75%] rounded-3xl overflow-y-auto bg-gray-900">
{children}
</div>
</div>