gahusb/web-page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(responsive): standardize Subscription, MusicStudio, BlogMarketing breakpoints

Browse Source 
- Subscription.css: 1100px → 1024px; merge 900px into 768px block
- MusicStudio.css: 960px → 1024px; both 640px blocks → 480px
- BlogMarketing.css: 640px → 480px

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
gahusb
2026-04-23 14:30:07 +09:00
parent 1e60524cfc
commit 2cdecd918e
3 changed files with 6 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/blog-marketing/BlogMarketing.css
View File

@@ -125,7 +125,7 @@
.bm-empty { text-align: center; padding: 48px 20px; color: rgba(255,255,255,.25); font-size: 0.85rem; } .bm-empty { text-align: center; padding: 48px 20px; color: rgba(255,255,255,.25); font-size: 0.85rem; }
/* ── 모바일 ───────────────────────────────────────────────────────────────── */ /* ── 모바일 ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) { @media (max-width: 480px) {
.bm { padding: 16px 10px 60px; } .bm { padding: 16px 10px 60px; }
.bm-header h1 { font-size: 1.2rem; } .bm-header h1 { font-size: 1.2rem; }
.bm-status { display: none; } .bm-status { display: none; }

6
src/pages/music/MusicStudio.css
View File

@@ -317,7 +317,7 @@
align-items: start; align-items: start;
} }
@media (max-width: 960px) { @media (max-width: 1024px) {
.ms-layout { .ms-layout {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@@ -487,7 +487,7 @@
gap: 8px; gap: 8px;
} }
@media (max-width: 640px) { @media (max-width: 480px) {
.ms-genre-grid { .ms-genre-grid {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
@@ -1696,7 +1696,7 @@
/* ═══════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════
MOBILE MOBILE
═══════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════ */
@media (max-width: 640px) { @media (max-width: 480px) {
.ms-header__title { .ms-header__title {
font-size: clamp(44px, 14vw, 70px); font-size: clamp(44px, 14vw, 70px);
} }

7
src/pages/subscription/Subscription.css
View File

@@ -1139,19 +1139,16 @@
/* ── 반응형 ───────────────────────────────────────────────────────────── */ /* ── 반응형 ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) { @media (max-width: 1024px) {
.sub-list-layout { grid-template-columns: 1fr 360px; } .sub-list-layout { grid-template-columns: 1fr 360px; }
} }
@media (max-width: 900px) { @media (max-width: 768px) {
.sub-list-layout { grid-template-columns: 1fr; } .sub-list-layout { grid-template-columns: 1fr; }
.sub-detail-panel { position: static; } .sub-detail-panel { position: static; }
.sub-profile-card { grid-template-columns: 1fr; } .sub-profile-card { grid-template-columns: 1fr; }
.sub-profile-card__right { flex-direction: column; align-items: flex-start; } .sub-profile-card__right { flex-direction: column; align-items: flex-start; }
.sub-profile-score__breakdown { min-width: 0; width: 100%; } .sub-profile-score__breakdown { min-width: 0; width: 100%; }
}
@media (max-width: 768px) {
.sub-header { grid-template-columns: 1fr; } .sub-header { grid-template-columns: 1fr; }
.sub-stats-bar { display: grid; grid-template-columns: repeat(2, 1fr); } .sub-stats-bar { display: grid; grid-template-columns: repeat(2, 1fr); }
.sub-stat-item { border-right: none; border-bottom: 1px solid var(--line); } .sub-stat-item { border-right: none; border-bottom: 1px solid var(--line); }