:root{--bg-color:#f5f5f5;--text-color:#333;--heading-color:#111;--link-color:#0066cc;--link-hover-color:#003366;--link-visited-color:#551A8B;--card-bg-color:#fff;--border-color:#eee;--code-bg-color:#f8f8f8;--inline-code-bg-color:rgba(0, 0, 0, 0.05);--tag-bg-color:#f0f0f0;--tag-hover-bg-color:#e0e0e0;--category-bg-color:#e6f2ff;--category-hover-bg-color:#cce6ff;--shadow-color:rgba(0, 0, 0, 0.1);--footer-color:#666;--date-color:#666;--theme-transition:0.4s ease-out}*,*::before,*::after{transition:background-color var(--theme-transition),color var(--theme-transition),border-color var(--theme-transition),box-shadow var(--theme-transition)}:root[data-theme=dark]{--bg-color:#1a1a1a;--text-color:#e8e8e8;--heading-color:#ffffff;--link-color:#7cc0fa;--link-hover-color:#a0d2ff;--link-visited-color:#d8a6e6;--card-bg-color:#252525;--border-color:#3a3a3a;--code-bg-color:#252525;--inline-code-bg-color:rgba(255, 255, 255, 0.12);--tag-bg-color:#333333;--tag-hover-bg-color:#444444;--category-bg-color:#234175;--category-hover-bg-color:#345286;--shadow-color:rgba(0, 0, 0, 0.25);--footer-color:#b0b0b0;--date-color:#b8b8b8}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg-color:#1a1a1a;--text-color:#e8e8e8;--heading-color:#ffffff;--link-color:#7cc0fa;--link-hover-color:#a0d2ff;--link-visited-color:#d8a6e6;--card-bg-color:#252525;--border-color:#3a3a3a;--code-bg-color:#252525;--inline-code-bg-color:rgba(255, 255, 255, 0.12);--tag-bg-color:#333333;--tag-hover-bg-color:#444444;--category-bg-color:#234175;--category-hover-bg-color:#345286;--shadow-color:rgba(0, 0, 0, 0.25);--footer-color:#b0b0b0;--date-color:#b8b8b8}}html{min-height:100%;display:flex;flex-direction:column;font-family:roboto,helvetica neue,Arial,sans-serif;font-size:16px}@media screen and (max-width:768px){html{font-size:15px}}@media screen and (max-width:480px){html{font-size:14px}}body{flex:1;max-width:800px;width:100%;padding:20px;box-sizing:border-box;line-height:1.6;text-align:left;margin:0 auto;font-size:1rem;background-color:var(--bg-color);color:var(--text-color);@media screen and (max-width:480px){padding: 12px; } } p { text-align: left; color: var(--text-color); } nav { margin-bottom: 20px; width: 100%; } nav ul { list-style-type: none; padding: 0; margin: 0; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 12px; } nav ul li { margin-bottom: 8px; } nav ul li a { text-decoration: none; color: var(--text-color); display: inline-block; padding: 5px 0; position: relative; transition: color 0.2s ease; } nav ul li a:hover { color: var(--link-color); } nav ul li a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: var(--link-color); transition: width 0.3s ease; } nav ul li a:hover::after { width: 100%; } nav ul li a[href^=http]::after { cursor: alias; } nav ul li a.active { font-weight: bold; } nav ul li a.active::after { width: 100%; } nav ul ul { display: block; margin-left: 20px; } nav ul ul li { margin-top: 5px; } @media screen and (max-width: 480px) { nav ul { flex-direction: column; gap: 8px; } nav ul li { margin-bottom: 0; } .social-links { flex-direction: row !important; gap: 20px !important; margin-top: 5px; } .social-links li { margin-right: 0; } } .site-footer { text-align: center; padding: 1rem 0; font-size: 0.9rem; color: var(--footer-color); border-top: 1px solid var(--border-color); margin-top: 2rem; background-color: var(--bg-color); width: 100%; } .site-footer a { color: var(--text-color); text-decoration: none; } .site-footer a:hover { text-decoration: underline; } header h1 a { color: var(--heading-color); text-decoration: none; } header h1 a:hover { text-decoration: underline; } h1,h2,h3,h4,h5,h6 { font-family: 'Montserrat','Helvetica Neue',arial,sans-serif; color: var(--heading-color); } h2 a { color: var(--heading-color); text-decoration: none; } h2 a:hover { text-decoration: none; } .home h2 a:hover { text-decoration: none; } h3 { margin-top: 1rem; margin-bottom: 0.5rem; } .posts-list { list-style-type: none; padding: 0; font-size: 1.1rem; } .posts-list li { margin-bottom: 0.8rem; display: flex; align-items: baseline; transition: transform 0.2s ease; } .posts-list li:hover { transform: translateX(3px); } .posts-list a { text-decoration: none; color: var(--text-color); display: flex; align-items: baseline; width: 100%; } @media screen and (max-width: 480px) { .posts-list a { flex-direction: column; align-items: flex-start; } } .posts-list a:hover { text-decoration: none; } .posts-list .post-date { color: var(--date-color); font-size: 0.9rem; margin-right: 0.8rem; flex-shrink: 0; transition: color 0.2s ease; } .posts-list a:hover .post-date { color: #444; } @media screen and (max-width: 480px) { .posts-list .post-date { margin-bottom: 0.2rem; font-size: 0.8rem; } } .posts-list .post-title { color: var(--text-color); position: relative; padding-bottom: 2px; } .posts-list a .post-title { color: var(--link-color); transition: color 0.2s ease; } .posts-list a:visited .post-title { color: var(--link-visited-color); } .posts-list a:hover .post-title { color: var(--link-hover-color); text-decoration: underline; } .taxonomy-type-tag h1 { font-family: 'Montserrat','Helvetica Neue',arial,sans-serif; font-size: 1.2em; } pre,code { font-family: 'Fira Code','Consolas','Monaco','Andale Mono',monospace; font-size: 0.9em; background-color: var(--code-bg-color); border-radius: 5px; margin: 0; border: none; } pre { padding: 1em 1em 1em 3.8em; overflow-x: auto; box-shadow: 0 2px 6px rgba(0,0,0,0.1); margin: 1.5em 0; position: relative; counter-reset: line; } pre code { display: grid; } pre code>* { counter-increment: line; } pre code>*::before { content: counter(line); position: absolute; left: 0; margin-left: 1em; color: #888; text-align: right; width: 2em; user-select: none; } pre code { background-color: transparent; padding: 0; border-radius: 0; display: block; } @media screen and (max-width: 480px) { pre { padding: 0.8em 0.8em 0.8em 3.5em; font-size: 0.85em; margin: 1.2em 0; } pre code>*::before { margin-left: 0.8em; } } code { padding: 0.2em 0.4em; background-color: var(--inline-code-bg-color); border-radius: 3px; } .tags-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; margin-bottom: 2rem; } .tags-list li { margin: 0; } .tag { display: inline-block; background-color: var(--tag-bg-color); color: var(--text-color); padding: 0.3rem 0.7rem; border-radius: 3px; font-size: 0.9rem; text-decoration: none; transition: background-color 0.2s ease; } .tag:hover { background-color: var(--tag-hover-bg-color); text-decoration: none; } .taxonomy-type-tag .tags-list { justify-content: flex-start; } .taxonomy-type-tag .tag { margin-bottom: 0.5rem; } .categories-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; margin-bottom: 2rem; } .categories-list li { margin: 0; } .category { display: inline-block; background-color: var(--category-bg-color); color: var(--text-color); padding: 0.3rem 0.7rem; border-radius: 3px; font-size: 0.9rem; text-decoration: none; transition: background-color 0.2s ease; } .category:hover { background-color: var(--category-hover-bg-color); text-decoration: none; } .taxonomy-type-category .categories-list { justify-content: flex-start; } .taxonomy-type-category .category { margin-bottom: 0.5rem; } .back-link { display: inline-block; margin-bottom: 1rem; color: #0066cc; text-decoration: none; font-size: 0.9rem; } .back-link:hover { text-decoration: underline; } .image-container { position: relative; cursor: pointer; } .lightbox-toggle { display: none; } .image-container label { cursor: zoom-in; display: block; } .image-container img { max-width: 100%; height: auto; display: block; margin: 1.5rem auto; border-radius: 5px; box-shadow: 0 3px 10px var(--shadow-color); transition: transform 0.3s ease,box-shadow 0.3s ease; } .image-container:hover img { transform: scale(1.01); box-shadow: 0 5px 15px var(--shadow-color); } .lightbox { display: none; position: fixed; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; padding: 0; background: rgba(0,0,0,0.9); } .lightbox label { cursor: zoom-out; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .lightbox img { max-height: 90vh; max-width: 90vw; object-fit: contain; margin: 0; padding: 0; } .lightbox-toggle:checked~.lightbox { display: flex; animation: fadein 0.3s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } body:has(.lightbox-toggle:checked) { overflow: hidden; } figure { margin: 2rem 0; } figcaption { text-align: center; font-size: 0.9rem; color: var(--footer-color); margin-top: 0.5rem; } @media screen and (max-width: 768px) { .lightbox { padding: 0.5em; } .lightbox img { max-height: 95vh; max-width: 95vw; } } img { max-width: 100%; height: auto; display: block; margin: 1.5rem auto; border-radius: 5px; box-shadow: 0 3px 10px var(--shadow-color); transition: transform 0.3s ease,box-shadow 0.3s ease; } img:hover { transform: scale(1.01); box-shadow: 0 5px 15px var(--shadow-color); } @media screen and (min-width: 768px) { img { max-height: 450px; } } @media screen and (max-width: 767px) { img { max-height: 350px; margin: 1rem auto; } } @media screen and (max-width: 480px) { img { max-height: 250px; margin: 0.8rem auto; box-shadow: 0 2px 8px var(--shadow-color); } } article img { margin-bottom: 1rem; } .mermaid { background-color: transparent !important; margin: 1.5rem 0; text-align: center; border: none !important; box-shadow: none !important; } pre.mermaid { border: none !important; box-shadow: none !important; padding: 0 !important; background-color: transparent !important; } :root[data-theme=dark] .mermaid * { color: #e8e8e8 !important; } :root[data-theme=dark] .mermaid svg text { fill: #e8e8e8 !important; } :root[data-theme=dark] .mermaid text { fill: #e8e8e8 !important; color: #e8e8e8 !important; } :root[data-theme=dark] .mermaid .messageText { fill: #e8e8e8 !important; stroke: none !important; } :root[data-theme=dark] .mermaid .actor { fill: #252525 !important; stroke: #7cc0fa !important; } :root[data-theme=dark] .mermaid g.actor text,:root[data-theme=dark] .mermaid g.actor tspan,:root[data-theme=dark] .mermaid text tspan,:root[data-theme=dark] .mermaid .actor tspan,:root[data-theme=dark] .mermaid .actor>text,:root[data-theme=dark] .mermaid g>text,:root[data-theme=dark] .mermaid tspan.actor,:root[data-theme=dark] .mermaid text.actor { fill: #e8e8e8 !important; stroke: none !important; color: #e8e8e8 !important; } :root[data-theme=dark] .mermaid .actor-line,:root[data-theme=dark] .mermaid line,:root[data-theme=dark] .mermaid .messageLine0,:root[data-theme=dark] .mermaid .messageLine1 { stroke: #e8e8e8 !important; } :root[data-theme=dark] .mermaid .note { fill: #252525 !important; stroke: #7cc0fa !important; } :root[data-theme=dark] .mermaid .noteText { fill: #e8e8e8 !important; } :root[data-theme=dark] .mermaid .loopText,:root[data-theme=dark] .mermaid .loopLine,:root[data-theme=dark] .mermaid .labelBox,:root[data-theme=dark] .mermaid .labelText { fill: #e8e8e8 !important; color: #e8e8e8 !important; } :root[data-theme=dark] .mermaid .label { color: #e8e8e8 !important; } :root[data-theme=dark] .mermaid .cluster-label text { fill: #e8e8e8 !important; } :root[data-theme=dark] .mermaid .messageText,:root[data-theme=dark] .mermaid #arrowhead path { stroke-width: 0 !important; fill: #e8e8e8 !important; } :root[data-theme=dark] .mermaid .sequenceNumber { fill: #252525 !important; color: #e8e8e8 !important; } .theme-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 999; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background-color: var(--card-bg-color); color: var(--text-color); box-shadow: 0 2px 10px var(--shadow-color); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; outline: none; } .theme-toggle:hover { transform: scale(1.1); } .theme-toggle .icon { font-size: 1.5rem; line-height: 1; } .theme-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; } .icon-dark { display: inline-block; } .icon-light { display: none; } :root[data-theme=dark] .icon-dark { display: none; } :root[data-theme=dark] .icon-light { display: inline-block; } blockquote { margin: 1.5rem 0; padding: 1rem 1.5rem; border-left: 4px solid var(--link-color); background-color: var(--card-bg-color); border-radius: 4px; box-shadow: 0 2px 4px var(--shadow-color); } blockquote p { margin: 0; color: var(--text-color); font-style: italic; } blockquote p:last-child { margin-bottom: 0; } img:not(.image-container img) { max-width: 100%; height: auto; display: block; margin: 1.5rem auto; border-radius: 5px; box-shadow: 0 3px 10px var(--shadow-color); transition: transform 0.3s ease,box-shadow 0.3s ease; } img:not(.image-container img):hover { transform: scale(1.01); box-shadow: 0 5px 15px var(--shadow-color); } @media screen and (max-width: 768px) { img:not(.image-container img) { margin: 1rem auto; } } table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; background-color: var(--card-bg-color); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px var(--shadow-color); } th,td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-color); } th { background-color: var(--code-bg-color); font-weight: 600; color: var(--heading-color); } td { color: var(--text-color); } tr:hover { background-color: var(--code-bg-color); } @media screen and (max-width: 768px) { th,td { padding: 10px 12px; font-size: 0.9rem; } } @media screen and (max-width: 480px) { th,td { padding: 8px 10px; font-size: 0.85rem; } }}}