Merge pull request #58 from dazzlingxrpl/feature/mobile-responsive-ui

Fix mobile responsive layout for network statistics section
This commit is contained in:
Thomas Silkjær
2025-08-26 20:20:44 +02:00
committed by GitHub

View File

@@ -57,28 +57,28 @@ const { frontmatter } = Astro.props
<div class="flex-none container mx-auto py-12 text-left max-w-7xl p-6">
<h1 class="text-3xl md:text-4xl font-extrabold text-black mb-4">Network statistics</h1>
<h2 class="text-xl md:text-2xl font-semibold text-black mb-8">Xahau in numbers</h2>
<div class="items-end grid grid-cols-3 md:grid-cols-9 gap-4">
<div class="text-black flex flex-col col-span-2 md:col-span-3 min-h-40 items-start justify-end p-4 bg-white border-black border-2">
<div class="items-end grid grid-cols-6 md:grid-cols-9 gap-4">
<div class="text-black flex flex-col col-span-4 md:col-span-3 min-h-40 items-start justify-end p-4 bg-white border-black border-2">
<h3 class="text-xl md:text-2xl font-semibold">Accounts</h3>
<h4 class="text-4xl md:text-6xl font-extrabold">130K+</h4>
</div>
<div class="text-black flex flex-col col-span-1 md:col-span-2 min-h-40 items-start justify-end p-4 bg-white border-black border-2">
<div class="text-black flex flex-col col-span-2 md:col-span-2 min-h-40 items-start justify-end p-4 bg-white border-black border-2">
<h3 class="text-xl md:text-2xl font-semibold">Hooks installed</h3>
<h4 class="text-4xl md:text-6xl font-extrabold">5K+</h4>
</div>
<div class="text-xahau-secondary flex flex-col col-span-1 md:col-span-2 min-h-40 items-start justify-end p-4 bg-xahau-gray border-black border-2">
<div class="text-xahau-secondary flex flex-col col-span-2 md:col-span-2 min-h-40 items-start justify-end p-4 bg-xahau-gray border-black border-2">
<h3 class="text-xl md:text-2xl font-semibold">Nodes</h3>
<h4 class="text-4xl md:text-6xl font-extrabold">300+</h4>
</div>
<div class="text-xahau-secondary flex flex-col col-span-1 md:col-span-2 row-start-auto md:row-start-2 min-h-40 items-start justify-end p-4 bg-xahau-gray border-black border-2">
<div class="text-xahau-secondary flex flex-col col-span-4 md:col-span-2 row-start-auto md:row-start-2 min-h-40 items-start justify-end p-4 bg-xahau-gray border-black border-2">
<h3 class="text-xl md:text-2xl font-semibold">Transactions/24h</h3>
<h4 class="text-4xl md:text-6xl font-extrabold">1.5M+</h4>
</div>
<div class="text-black flex flex-col col-span-2 md:col-span-3 row-start-auto md:row-start-2 min-h-40 items-start justify-end p-4 bg-white border-black border-2">
<div class="text-black flex flex-col col-span-6 md:col-span-3 row-start-auto md:row-start-2 min-h-40 items-start justify-end p-4 bg-white border-black border-2">
<h3 class="text-xl md:text-2xl font-semibold">Ledgers closed</h3>
<h4 class="text-4xl md:text-6xl font-extrabold">16M+</h4>
</div>
<a href="/docs/infrastructure/node-requirements/" class="col-span-3 row-start-auto md:row-start-2 px-10 h-12 flex items-center justify-center bg-xahau-green text-black text-base font-bold hover:bg-black hover:text-white transition">Want to run a node?</a>
<a href="/docs/infrastructure/node-requirements/" class="col-span-6 row-start-auto md:row-start-2 px-10 h-12 flex items-center justify-center bg-xahau-green text-black text-base font-bold hover:bg-black hover:text-white transition">Want to run a node?</a>
</div>
</div>
</div>