gahusb
d713d2c4a7
- 모바일에서 봤을 때 UI/UX 이상하고 불편했던 부분 수정 - 블로그 글 모바일 크기 시 리스트 아래로 글이 내려가는 부분 수정 - 전체 배경 이어 붙이기가 아닌 고정으로 스크롤 시에도 어색하지 않게 수정
71 lines
1.3 KiB
CSS
71 lines
1.3 KiB
CSS
:root {
|
|
--bg: #0f0d12;
|
|
--surface: rgba(26, 23, 32, 0.88);
|
|
--text: #f4efe9;
|
|
--muted: #b6b1a9;
|
|
--line: rgba(255, 255, 255, 0.12);
|
|
--accent: #f7a8a5;
|
|
--accent-strong: #fdd4b1;
|
|
--font-display: "DM Serif Display", "Noto Serif KR", serif;
|
|
--font-body: "Manrope", "Noto Sans KR", sans-serif;
|
|
}
|
|
|
|
.app-shell {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.site-main {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 40px 20px 80px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.site-main {
|
|
padding: 20px 16px 60px;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(16px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.site-main > * {
|
|
animation: fadeUp 0.6s ease both;
|
|
}
|
|
|
|
.button {
|
|
border: 1px solid var(--line);
|
|
padding: 10px 18px;
|
|
border-radius: 999px;
|
|
text-decoration: none;
|
|
color: var(--text);
|
|
font-size: 14px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
transition: all 0.2s ease;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.button:hover {
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.button.primary {
|
|
background: linear-gradient(135deg, var(--accent), var(--accent-strong));
|
|
color: #1a1414;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.button.ghost {
|
|
background: transparent;
|
|
}
|