castad/o2o-infinith-demo
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(supporters): 태블릿·모바일 헤더 규칙 이식 (브랜드+언어 전환 한 줄, 메뉴 가로 스크롤) · 로고와 메뉴 겹침 해결

Browse Source 
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Haewon Kam 2026-09-11 14:07:10 +09:00
parent 0108fe1ff1
commit 5263593816
2 changed files with 30 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
supporters/src/styles/global.css
View File

@ -496,3 +496,18 @@ td { color: var(--slate-700); }
background: rgba(255, 255, 255, 0.82); color: var(--slate-600, #475569);
font-size: 0.66rem; padding: 0.1rem 0.35rem; border-top-left-radius: 6px;
}
/* 뷰 사이트 헤더 규칙 이식 (2026-09-11) */
.site-header .lang-switch { display: inline-grid; place-items: center; min-width: 2.4rem; height: 2rem; padding: 0 0.6rem; border-radius: 999px; border: 1px solid var(--slate-200); color: var(--slate-600); font-family: Inter, Pretendard, sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; }
.site-header .lang-switch:hover { color: var(--primary-900); border-color: var(--primary-900); text-decoration: none; }
/* 태블릿·모바일 헤더 (≤900px): 첫 줄 브랜드 + 상담 예약, 둘째 줄 메뉴 가로 스크롤. 메뉴 6개가 두 줄로 겹치던 문제를 DOM 변경 없이 CSS만으로 해결한다 (2026-09-10) */
@media (max-width: 900px) {
.site-header .bar { height: auto; flex-wrap: wrap; padding-top: 0.6rem; padding-bottom: 0; row-gap: 0.1rem; }
.site-header .brand { flex: 1; }
.site-header .right { display: contents; }
.site-header .lang-switch, .site-header .langswitch { order: 2; margin-right: 0.5rem; }
.site-header .cta { order: 2; }
.site-header .nav { order: 3; display: flex; gap: 1rem; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0.35rem 0 0.7rem; width: 100%; }
.site-header .nav::-webkit-scrollbar { display: none; }
.site-header .nav a { margin-left: 0; flex: none; font-size: 0.9rem; }
}

15
templates/supporters-astro/src/styles/global.css
View File

@ -496,3 +496,18 @@ td { color: var(--slate-700); }
background: rgba(255, 255, 255, 0.82); color: var(--slate-600, #475569);
font-size: 0.66rem; padding: 0.1rem 0.35rem; border-top-left-radius: 6px;
}
/* 뷰 사이트 헤더 규칙 이식 (2026-09-11) */
.site-header .lang-switch { display: inline-grid; place-items: center; min-width: 2.4rem; height: 2rem; padding: 0 0.6rem; border-radius: 999px; border: 1px solid var(--slate-200); color: var(--slate-600); font-family: Inter, Pretendard, sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; }
.site-header .lang-switch:hover { color: var(--primary-900); border-color: var(--primary-900); text-decoration: none; }
/* 태블릿·모바일 헤더 (≤900px): 첫 줄 브랜드 + 상담 예약, 둘째 줄 메뉴 가로 스크롤. 메뉴 6개가 두 줄로 겹치던 문제를 DOM 변경 없이 CSS만으로 해결한다 (2026-09-10) */
@media (max-width: 900px) {
.site-header .bar { height: auto; flex-wrap: wrap; padding-top: 0.6rem; padding-bottom: 0; row-gap: 0.1rem; }
.site-header .brand { flex: 1; }
.site-header .right { display: contents; }
.site-header .lang-switch, .site-header .langswitch { order: 2; margin-right: 0.5rem; }
.site-header .cta { order: 2; }
.site-header .nav { order: 3; display: flex; gap: 1rem; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0.35rem 0 0.7rem; width: 100%; }
.site-header .nav::-webkit-scrollbar { display: none; }
.site-header .nav a { margin-left: 0; flex: none; font-size: 0.9rem; }
}