AeThex-Corporation/aethex-us
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: add responsive breakpoints for mobile and tablet sizing

Browse source 
- 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
This commit is contained in:
Claude 2026-01-19 06:33:09 +00:00
parent 680438af37
commit 983ebe4654
No known key found for this signature in database
4 changed files with 78 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
public/global.css
View file

@ -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; }
}

10
src/pages/corporation.astro
View file

@ -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; }
}
</style>
</main>
</MainLayout>

10
src/pages/foundation.astro
View file

@ -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; }
}
</style>
</main>
</MainLayout>

10
src/pages/labs.astro
View file

@ -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; }
}
</style>
</main>
</MainLayout>