Skip to content

Commit 3e47888

Browse files
committed
fix: improve hero/nav layout and locale copy
1 parent a29f91f commit 3e47888

File tree

3 files changed

+117
-14
lines changed

3 files changed

+117
-14
lines changed

src/components/astro/HeroSection.astro

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,15 @@ const fullTitle = t('hero.title');
1313
const brand = 'RushDB';
1414
const rawMotto = fullTitle.startsWith(brand) ? fullTitle.slice(brand.length) : fullTitle;
1515
const mottoText = rawMotto.replace(/^[\s,、,]+/, '');
16+
const panelWidthByLang: Record<Lang, string> = {
17+
zh: '620px',
18+
en: '580px',
19+
ja: '630px',
20+
};
21+
const heroStyle = `--hero-panel-width: ${panelWidthByLang[lang]};`;
1622
---
1723

18-
<section class="hero">
24+
<section class="hero" style={heroStyle}>
1925
<div class="container">
2026
<div class="hero-grid">
2127
<div class="hero-content">

src/i18n/ui.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,7 @@ export const ui = {
242242
panel: {
243243
kicker: 'Systems Team',
244244
title: 'Database-first, engineering you can verify',
245-
body: 'Design, optimize, build: from queries to systems, from competitions to open source.',
245+
body: 'Design, optimize, build: from query engines to open source.',
246246
metrics: {
247247
members: 'Members',
248248
awards: 'Awards',
@@ -427,14 +427,14 @@ export const ui = {
427427
},
428428
ja: {
429429
nav: {
430-
about: '私たちについて',
431-
achievements: '競技成果',
430+
about: '概要',
431+
achievements: '実績',
432432
projects: 'プロジェクト',
433-
members: 'チームメンバー',
434-
news: '関連報道',
435-
contact: 'お問い合わせ',
433+
members: 'メンバー',
434+
news: '報道',
435+
contact: '連絡',
436436
blog: 'ブログ',
437-
github: 'View Our Github',
437+
github: 'GitHub',
438438
openMenu: 'メニューを開く',
439439
switchToLight: 'ライトモードに切替',
440440
switchToDark: 'ダークモードに切替',

src/styles/global.css

Lines changed: 103 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2369,7 +2369,7 @@
23692369
transform: translateY(0) rotate(-45deg);
23702370
}
23712371

2372-
@media (max-width: 980px) {
2372+
@media (max-width: 1180px) {
23732373
.nav-toggle {
23742374
display: inline-flex;
23752375
}
@@ -2487,7 +2487,7 @@
24872487
}
24882488

24892489
/* Show mobile menu structure only on mobile */
2490-
@media (min-width: 981px) {
2490+
@media (min-width: 1181px) {
24912491
.nav-toggle {
24922492
display: none;
24932493
}
@@ -2640,8 +2640,25 @@
26402640
box-shadow: 0 10px 44px rgba(0, 0, 0, 0.35);
26412641
}
26422642

2643+
.nav-content {
2644+
max-width: 1200px;
2645+
padding: 0 2rem;
2646+
gap: clamp(12px, 1.8vw, 24px);
2647+
}
2648+
2649+
.nav-actions {
2650+
flex: 1 1 auto;
2651+
justify-content: flex-end;
2652+
gap: clamp(12px, 1.5vw, 24px);
2653+
}
2654+
2655+
.nav-links {
2656+
gap: clamp(8px, 1.1vw, 20px);
2657+
}
2658+
26432659
.nav-logo {
26442660
color: var(--c1);
2661+
flex: 0 0 auto;
26452662
}
26462663

26472664
.nav-logo-img {
@@ -2654,7 +2671,7 @@
26542671
.nav-links a {
26552672
color: var(--text-2);
26562673
font-weight: 650;
2657-
padding: 10px 10px;
2674+
padding: 9px clamp(6px, 0.8vw, 10px);
26582675
border-radius: 12px;
26592676
border: 1px solid transparent;
26602677
}
@@ -2674,16 +2691,21 @@
26742691
align-items: center;
26752692
justify-content: center;
26762693
gap: 8px;
2677-
padding: 10px 14px;
2694+
padding: 10px clamp(11px, 1vw, 14px);
26782695
border-radius: 14px;
26792696
background: rgba(34, 211, 238, 0.1);
26802697
border: 1px solid rgba(34, 211, 238, 0.22);
26812698
color: var(--text);
26822699
text-decoration: none;
26832700
font-weight: 750;
2701+
white-space: nowrap;
26842702
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
26852703
}
26862704

2705+
.nav-cta span {
2706+
white-space: nowrap;
2707+
}
2708+
26872709
.nav-cta-icon {
26882710
width: 16px;
26892711
height: 16px;
@@ -2696,23 +2718,65 @@
26962718
border-color: rgba(168, 85, 247, 0.28);
26972719
}
26982720

2721+
.language-trigger {
2722+
min-width: 104px;
2723+
padding: 8px 10px;
2724+
}
2725+
2726+
@media (max-width: 1420px) {
2727+
.nav-content {
2728+
max-width: 1200px;
2729+
padding: 0 2rem;
2730+
}
2731+
2732+
.nav-actions {
2733+
gap: 10px;
2734+
}
2735+
2736+
.nav-links {
2737+
gap: 6px;
2738+
}
2739+
2740+
.nav-links a {
2741+
padding: 8px 6px;
2742+
font-size: 0.96rem;
2743+
}
2744+
2745+
.language-trigger {
2746+
min-width: 96px;
2747+
}
2748+
2749+
.nav-cta {
2750+
padding: 9px 11px;
2751+
font-size: 0.96rem;
2752+
}
2753+
}
2754+
26992755
.hero {
27002756
padding: 120px 0 70px;
27012757
text-align: left;
27022758
align-items: center;
2759+
--hero-max-width: 1320px;
2760+
--hero-panel-width: 560px;
2761+
}
2762+
2763+
.hero .container {
2764+
max-width: var(--hero-max-width);
27032765
}
27042766

27052767
.hero-content {
27062768
display: flex;
27072769
flex-direction: column;
27082770
align-items: center;
27092771
text-align: center;
2772+
width: 100%;
2773+
max-width: 720px;
27102774
}
27112775

27122776
.hero-grid {
27132777
display: grid;
2714-
grid-template-columns: 1.15fr 0.85fr;
2715-
gap: 40px;
2778+
grid-template-columns: minmax(0, 1fr) auto;
2779+
gap: clamp(28px, 3vw, 40px);
27162780
align-items: center;
27172781
}
27182782

@@ -2743,6 +2807,11 @@
27432807

27442808
html[lang="en-US"] .hero-title {
27452809
line-height: 1.16;
2810+
font-size: clamp(2.35rem, 4.9vw, 4.2rem);
2811+
}
2812+
2813+
html[lang="ja-JP"] .hero-title {
2814+
font-size: clamp(2.75rem, 6.6vw, 5.4rem);
27462815
}
27472816

27482817
.hero-subtitle {
@@ -2794,11 +2863,28 @@
27942863
}
27952864

27962865
.hero-panel {
2866+
width: min(100%, var(--hero-panel-width));
2867+
justify-self: end;
27972868
opacity: 0;
27982869
transform: translateY(18px);
27992870
animation: fadeInUp 1s ease-out 0.45s forwards;
28002871
}
28012872

2873+
@media (max-width: 1280px) {
2874+
.hero {
2875+
min-height: auto;
2876+
}
2877+
2878+
.hero-grid {
2879+
grid-template-columns: 1fr;
2880+
}
2881+
2882+
.hero-panel {
2883+
width: 100%;
2884+
justify-self: stretch;
2885+
}
2886+
}
2887+
28022888
.panel {
28032889
position: relative;
28042890
border-radius: var(--r-lg);
@@ -2860,6 +2946,17 @@
28602946
font-size: 0.98rem;
28612947
}
28622948

2949+
@media (min-width: 1200px) {
2950+
html[lang="en-US"] .hero-motto {
2951+
white-space: nowrap;
2952+
}
2953+
2954+
html[lang="en-US"] .panel-body {
2955+
white-space: nowrap;
2956+
font-size: 0.94rem;
2957+
}
2958+
}
2959+
28632960
.panel-metrics {
28642961
display: grid;
28652962
grid-template-columns: repeat(3, minmax(0, 1fr));

0 commit comments

Comments
 (0)