zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

사용자 화면 사이드바 스타일을 Thred 기준으로 정렬.

Browse Source 
좌측 네비게이션과 카테고리의 간격 및 hover 인터랙션을 원본 패턴에 맞게 보정하고, 테마 전환/사이드바 전환 애니메이션과 샘플 폴더 Git 제외 설정을 함께 반영해 사용자 화면 일관성을 높였다.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zenn
2026-05-07 17:52:18 +09:00
parent 97d2d8ffb3
commit d47134c46d
15 changed files with 252 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
assets/css/main.css
View File

@@ -4,22 +4,37 @@
@layer base {
:root {
--site-bg: #fbfbfa;
--site-panel: #f6f6f5;
--site-panel-strong: #ffffff;
--site-bg: #fcfcfc;
--site-panel: #fcfcfc;
--site-panel-strong: #fcfcfc;
--site-text: #111111;
--site-muted: #454545;
--site-soft: #6f7480;
--site-line: #e2e2e0;
--site-input: #f2f2f1;
--site-input: #fcfcfc;
--site-accent: #ff4f2e;
--site-accent-text: #ffffff;
--site-invert: #111111;
--site-invert-text: #ffffff;
}
:root[data-theme='dark'] {
--site-bg: #050505;
--site-panel: #080808;
--site-panel-strong: #0d0d0d;
--site-text: #f4f4f2;
--site-muted: #c7c7c2;
--site-soft: #8b8e96;
--site-line: #252525;
--site-input: #171717;
--site-accent: #ff4f2e;
--site-accent-text: #ffffff;
--site-invert: #f4f4f2;
--site-invert-text: #111111;
}
@media (prefers-color-scheme: dark) {
:root {
:root:not([data-theme='light']) {
--site-bg: #050505;
--site-panel: #080808;
--site-panel-strong: #0d0d0d;
@@ -62,17 +77,6 @@
background: var(--site-bg);
}
.site-content-grid {
@apply mx-auto grid max-w-[1294px] grid-cols-1 px-4 lg:grid-cols-[287px_minmax(0,720px)_287px] lg:px-0;
min-height: calc(100vh - 57px);
background: var(--site-bg);
}
.site-content-grid--menu-closed {
@apply lg:grid-cols-[minmax(0,720px)_287px];
max-width: 1007px;
}
.site-section {
border-bottom: 1px solid var(--site-line);
background: var(--site-bg);
@@ -131,15 +135,48 @@
border: 1px solid var(--site-line);
background: var(--site-input);
color: var(--site-text);
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.site-button {
background: var(--site-invert);
color: var(--site-invert-text);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.site-button:hover {
opacity: 0.9;
}
.site-accent-button {
background: var(--site-accent);
color: var(--site-accent-text);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.site-accent-button:hover {
opacity: 0.92;
}
.site-interactive {
transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.site-interactive:hover {
color: var(--site-text);
}
.site-input:hover,
.site-input:focus-visible {
border-color: color-mix(in srgb, var(--site-text) 24%, var(--site-line));
}
.site-panel-hover {
transition: background-color 0.2s ease;
}
.site-panel-hover:hover {
background: color-mix(in srgb, var(--site-panel) 72%, var(--site-text));
}
}