From 983ebe46542a0fe2140f0b3ec0dee1a5a491aff6 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 19 Jan 2026 06:33:09 +0000 Subject: [PATCH] fix: add responsive breakpoints for mobile and tablet sizing - Add tablet breakpoint (1024px) for grids, typography, and flow diagram - Add mobile breakpoint (600px) with single-column grids and scaled typography - Fix flow diagram to stack vertically on mobile with rotated arrows - Add responsive styles to entity pages (labs, foundation, corporation) - Scale down hero titles, section titles, and padding for smaller screens --- public/global.css | 48 +++++++++++++++++++++++++++++++++++++ src/pages/corporation.astro | 10 ++++++++ src/pages/foundation.astro | 10 ++++++++ src/pages/labs.astro | 10 ++++++++ 4 files changed, 78 insertions(+) diff --git a/public/global.css b/public/global.css index be54df6..4c6e457 100644 --- a/public/global.css +++ b/public/global.css @@ -126,3 +126,51 @@ footer::before { content: ''; position: absolute; top: -2px; left: 0; width: 100 .footer-link { color: #666; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; font-size: 0.85em; transition: color 0.3s; } .footer-link:hover { color: #0066ff; } .copyright { color: #333; font-size: 0.8em; letter-spacing: 2px; } + +/* Tablet breakpoint */ +@media (max-width: 1024px) { + .trinity-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } + .hero-title { font-size: 3.5em; letter-spacing: 4px; } + .section-title { font-size: 2.2em; letter-spacing: 4px; } + .hero { padding: 60px 0 80px 0; } + .flow-diagram { gap: 30px; } + .flow-node { width: 150px; height: 150px; } + .flow-node-title { font-size: 1.2em; } + .flow-arrow { font-size: 2em; } + .infra-viz { padding: 40px 20px; } + .trinity-section { padding: 60px 0; } + .section-header { margin-bottom: 50px; } + .products-section { padding: 60px 0; } +} + +/* Mobile breakpoint */ +@media (max-width: 600px) { + .trinity-grid { grid-template-columns: 1fr; gap: 20px; } + .products-grid { grid-template-columns: 1fr; gap: 20px; } + .hero-title { font-size: 2.2em; letter-spacing: 2px; } + .hero-subtitle { font-size: 1em; letter-spacing: 2px; } + .hero-description { font-size: 1em; } + .section-title { font-size: 1.6em; letter-spacing: 2px; } + .section-subtitle { font-size: 0.9em; } + .hero { padding: 40px 0 60px 0; } + .trinity-section { padding: 40px 0; } + .section-header { margin-bottom: 30px; } + .products-section { padding: 40px 0; } + .trinity-card { padding: 30px 24px; } + .card-icon { font-size: 2.5em; margin-bottom: 20px; } + .card-title { font-size: 1.4em; letter-spacing: 2px; } + .product-card { padding: 24px; } + .product-title { font-size: 1.4em; } + .flow-diagram { flex-direction: column; gap: 20px; } + .flow-node { width: 100%; max-width: 200px; height: 120px; } + .flow-arrow { transform: rotate(90deg); font-size: 1.5em; } + .infra-viz { padding: 30px 16px; } + .viz-title { font-size: 1.2em; margin-bottom: 24px; } + .trinity-badge { flex-direction: column; gap: 10px; align-items: center; } + .badge { padding: 10px 20px; font-size: 0.75em; } + .cta-button { padding: 16px 32px; font-size: 0.9em; letter-spacing: 2px; } + footer { padding: 50px 0 30px 0; } + .footer-logo { font-size: 1.8em; letter-spacing: 4px; } + .footer-links { flex-direction: column; gap: 16px; } + .footer-tagline { font-size: 0.8em; letter-spacing: 2px; } +} diff --git a/src/pages/corporation.astro b/src/pages/corporation.astro index b04923c..34aa0c4 100644 --- a/src/pages/corporation.astro +++ b/src/pages/corporation.astro @@ -71,6 +71,16 @@ import MainLayout from '../layouts/MainLayout.astro'; ul li:hover { color: #0066ff; transform: scale(1.05); } .entity-footer { text-align: center; margin-top: 48px; color: #fff; font-size: 1em; opacity: 0.7; } .entity-footer a { color: #0066ff; margin-left: 16px; text-decoration: underline; } + + @media (max-width: 768px) { + .hero-banner { height: auto; min-height: 280px; padding: 40px 20px; } + .entity-title { font-size: 2em; } + .entity-desc { font-size: 1em; } + .entity-logo { width: 60px; height: 60px; } + .glass-card { margin: 24px 16px; padding: 28px 20px; } + .cta-btn { padding: 10px 24px; font-size: 1em; } + ul li { font-size: 1em; } + } diff --git a/src/pages/foundation.astro b/src/pages/foundation.astro index 4070b49..ff9459d 100644 --- a/src/pages/foundation.astro +++ b/src/pages/foundation.astro @@ -71,6 +71,16 @@ import MainLayout from '../layouts/MainLayout.astro'; ul li:hover { color: #ff0000; transform: scale(1.05); } .entity-footer { text-align: center; margin-top: 48px; color: #fff; font-size: 1em; opacity: 0.7; } .entity-footer a { color: #ff0000; margin-left: 16px; text-decoration: underline; } + + @media (max-width: 768px) { + .hero-banner { height: auto; min-height: 280px; padding: 40px 20px; } + .entity-title { font-size: 2em; } + .entity-desc { font-size: 1em; } + .entity-logo { width: 60px; height: 60px; } + .glass-card { margin: 24px 16px; padding: 28px 20px; } + .cta-btn { padding: 10px 24px; font-size: 1em; } + ul li { font-size: 1em; } + } diff --git a/src/pages/labs.astro b/src/pages/labs.astro index d5b5b67..952a8a3 100644 --- a/src/pages/labs.astro +++ b/src/pages/labs.astro @@ -71,6 +71,16 @@ import MainLayout from '../layouts/MainLayout.astro'; ul li:hover { color: #ffa500; transform: scale(1.05); } .entity-footer { text-align: center; margin-top: 48px; color: #fff; font-size: 1em; opacity: 0.7; } .entity-footer a { color: #ffa500; margin-left: 16px; text-decoration: underline; } + + @media (max-width: 768px) { + .hero-banner { height: auto; min-height: 280px; padding: 40px 20px; } + .entity-title { font-size: 2em; } + .entity-desc { font-size: 1em; } + .entity-logo { width: 60px; height: 60px; } + .glass-card { margin: 24px 16px; padding: 28px 20px; } + .cta-btn { padding: 10px 24px; font-size: 1em; } + ul li { font-size: 1em; } + }