fix(a11y): 글로벌 prefers-reduced-motion 추가 + Blog 버튼 위치 수정
- App.css: 글로벌 reduced-motion 블록 (모든 animation/transition 비활성화) - index.css: scroll-behavior: smooth → auto (reduced-motion) - BlogMarketing.css: 스피너 reduced-motion 처리 - Blog.css: 플로팅 토글 버튼 bottom-nav 위로 재배치 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
12
src/App.css
12
src/App.css
@@ -492,3 +492,15 @@
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Accessibility: Reduced Motion ──────────────────────────────────── */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -115,6 +115,10 @@ html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -148,3 +148,7 @@
|
||||
.bm-write-actions { flex-direction: column; }
|
||||
.bm-post-card__actions { flex-wrap: wrap; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.bm-spinner { animation: none; }
|
||||
}
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
display: none;
|
||||
position: fixed;
|
||||
/* 사이드바 토글 버튼(top-left) 과 겹치지 않도록 오른쪽 하단 배치 */
|
||||
bottom: 24px;
|
||||
bottom: calc(var(--bottom-nav-h, 64px) + var(--safe-area-bottom, 0px) + 16px);
|
||||
right: 24px;
|
||||
top: auto;
|
||||
left: auto;
|
||||
|
||||
Reference in New Issue
Block a user