note-articles/src/css/custom.css
koide 7a509d5dc5
All checks were successful
Deploy Docusaurus Site / deploy (push) Successful in 29s
style: Blog/Tech/Worksページのテック感統一
2026-02-28 02:11:46 +00:00

78 lines
2.1 KiB
CSS

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');
:root {
--ifm-color-primary: #2e8555;
--ifm-color-primary-dark: #29784c;
--ifm-color-primary-darker: #277148;
--ifm-color-primary-darkest: #205d3b;
--ifm-color-primary-light: #33925d;
--ifm-color-primary-lighter: #359962;
--ifm-color-primary-lightest: #3cad6e;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
--site-font-mono: 'JetBrains Mono', monospace;
}
[data-theme='dark'] {
--ifm-color-primary: #25c2a0;
--ifm-color-primary-dark: #21af90;
--ifm-color-primary-darker: #1fa588;
--ifm-color-primary-darkest: #1a8870;
--ifm-color-primary-light: #29d5b0;
--ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
/* ===== Markdown Pages - Tech Style ===== */
@keyframes mdFadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.theme-doc-markdown {
animation: mdFadeInUp 0.5s ease both;
}
.theme-doc-markdown h1,
.theme-doc-markdown h2 {
font-family: var(--site-font-mono, "JetBrains Mono", monospace);
color: var(--ifm-color-primary);
}
.theme-doc-markdown ul > li {
list-style: none;
margin-bottom: 0.5rem;
}
.theme-doc-markdown ul {
padding-left: 0;
}
.theme-doc-markdown ul > li > a {
display: block;
padding: 0.9rem 1.1rem;
border-radius: 8px;
background: var(--ifm-background-surface-color);
border: 1px solid var(--ifm-color-emphasis-200);
border-left: 3px solid var(--ifm-color-primary);
text-decoration: none;
color: inherit;
transition: all 0.2s ease;
font-family: var(--site-font-mono, "JetBrains Mono", monospace);
font-size: 0.95rem;
}
.theme-doc-markdown ul > li > a:hover {
border-color: var(--ifm-color-primary);
border-left-color: var(--ifm-color-primary);
transform: scale(1.02);
box-shadow: 0 0 16px rgba(46,133,85,0.25);
text-decoration: none;
color: inherit;
}
[data-theme="dark"] .theme-doc-markdown ul > li > a:hover {
box-shadow: 0 0 16px rgba(37,194,160,0.25);
}