/* Design tokens - Light Mode */ :root { --color-bg: #fff; --color-text: #333; --color-anchor: #F96102; --color-heading: #111; --color-divider: #cdcdcd; --color-code-bg: #f7f7f7; --color-code-text: #333; --color-table-border: #c2c2c2; --color-table-row-even: #f0f0f0; --color-table-row-odd: #fff; --color-toggle-accent: #F96102; --color-blockquote-text: #777; --color-orange: #F96102; } /* Dark mode toggled with */ html.dark { --color-bg: #1c1c1c; --color-text: #e5e5e5; --color-anchor: #F96102; --color-heading: #fff; --color-divider: #444; --color-code-bg: #2d2d2d; --color-code-text: #f7f7f7; --color-table-border: #444; --color-table-row-even: #262626; --color-table-row-odd: #1c1c1c; --color-toggle-accent: #F96102; --color-blockquote-text: #c0bcbc; --color-orange: #F96102; } /* Fallback for users that prefer a dark scheme */ @media (prefers-color-scheme: dark) { :root:not(.dark) { --color-bg: #1c1c1c; --color-text: #e5e5e5; --color-anchor: #77e1cd; --color-heading: #fff; --color-divider: #444; --color-code-bg: #2d2d2d; --color-code-text: #f7f7f7; --color-table-border: #444; --color-table-row-even: #262626; --color-table-row-odd: #1c1c1c; } } /* Global element styles */ * { box-sizing: border-box; } body { margin: 0; font-family: Inter, system-ui, -apple-system, sans-serif; line-height: 1.8; background: var(--color-bg); color: var(--color-text); transition: background-color 0.3s ease, color 0.3s ease; } /* Links */ a { color: var(--color-anchor); text-decoration: none; transition: color 0.2s ease; } a:hover, a:focus { text-decoration: underline; } /* Headings */ h1, h2, h3, h4, h5, h6 { color: var(--color-heading); line-height: 1.25; margin-top: 1.2em; margin-bottom: 0.6em; } h1 { font-size: 2rem; font-weight: 600; margin-top: 0; padding-bottom: 0.3em; border-bottom: 1px solid var(--color-divider); } h2 { font-size: 1.6rem; } h3 { font-size: 1.3rem; } /* Images */ img { max-width: 100%; height: auto; border-radius: 3px; } /* Layout container */ .container-fluid { padding: 40px 15px; margin: auto; max-width: 1200px; } /* Markdown content wrapper */ .markdown-body { max-width: 760px; margin: auto; padding: 40px 15px; position: relative; letter-spacing: 0.025em; } /* Typography */ .markdown-body p { margin-bottom: 1em; } /* Date & meta info */ .markdown-body small { font-size: 0.85rem; color: var(--color-text); display: block; opacity: 0.8; } /* Horizontal rule */ .markdown-body hr { height: 0.25em; padding: 0; margin: 24px 0; background-color: var(--color-divider); border: 0; } /* Blockquotes */ .markdown-body blockquote { margin: 1.5em 0; padding: 1em 1.2em; border-left: 4px solid #F98905; background: #FEF7ED; color: var(--color-text); border-radius: 4px; font-style: italic; } .markdown-body blockquote p { margin: 0; line-height: 1.7; } .markdown-body blockquote strong { font-style: normal; font-weight: 600; } /* Inline code */ .markdown-body code { background: #FEF2F2; color: #EB3B4D; padding: 0.2em 0.5em; border-radius: 4px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 0.88em; font-weight: 500; } html.dark .markdown-body code { background: #3b2a2a; color: #f87171; } /* Code blocks */ .markdown-body pre { background: var(--color-code-bg); color: var(--color-code-text); padding: 0; overflow: hidden; border-radius: 0; margin: 0; border: none; position: relative; } .markdown-body pre code, html.dark .markdown-body pre code { padding: 1em 1em 1em 4em !important; background: transparent !important; display: block; overflow-x: auto; color: inherit; font-size: 0.9em; line-height: 1.6; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; } /* Code block wrapper */ .code-block-wrapper { margin: 1.5em 0; border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb; background: #f9fafb; } html.dark .code-block-wrapper { border: 1px solid #3a3a3a; background: #252525; } /* Code block header with copy button */ .code-header { display: flex; justify-content: space-between; align-items: center; padding: 0.6em 1em; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; font-size: 0.75rem; color: #6b7280; opacity: 1; margin: 0; } html.dark .code-header { background: #2d2d2d; border-bottom: 1px solid #3a3a3a; color: #888; } .code-language { text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; } .copy-button { background: var(--color-orange); color: #fff; border: none; padding: 0.4em 0.8em; border-radius: 4px; cursor: pointer; font-size: 0.75rem; font-weight: 500; transition: all 0.2s ease; display: flex; align-items: center; gap: 4px; } .copy-button:hover { opacity: 0.9; transform: translateY(-1px); } .copy-button:active { transform: translateY(0); } .copy-button.copied { background: #10b981; } .line-numbers { position: absolute; left: 0; top: 0; padding: 1em 0.6em; background: #f3f4f6; border-right: 1px solid #e5e7eb; text-align: right; user-select: none; color: #9ca3af; opacity: 1; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 0.9em; line-height: 1.6; min-width: 3em; } html.dark .line-numbers { background: #2d2d2d; border-right: 1px solid #3a3a3a; color: #666; } /* Tables */ .markdown-body table { width: 100%; border-collapse: collapse; margin: 1em 0; } .markdown-body th, .markdown-body td { border: 1px solid var(--color-table-border); padding: 0.6em 0.8em; } .markdown-body thead tr { background: var(--color-table-row-even); } .markdown-body tbody tr:nth-child(2n) { background: var(--color-table-row-even); } .markdown-body tbody tr:nth-child(2n + 1) { background: var(--color-table-row-odd); } /* Post list (for index page) */ .post-list { margin-left: 0; padding-left: 0; list-style: none; } .post-list > li { margin-bottom: 30px; } .post-link { display: block; font-size: 24px; font-weight: 500; } .post-meta { font-size: 14px; color: var(--color-text); opacity: 0.7; } .toc-category { display: inline-block; width: 100px; padding: 8px 4px; background: var(--color-code-bg); border-radius: 4px; font-size: 12px; text-align: center; margin-right: 8px; } /* Top bar with search and color mode */ .top-bar { display: flex; align-items: center; justify-content: flex-end; gap: 15px; margin-bottom: 20px; } /* Color mode switch */ #color-mode-switch { display: flex; align-items: center; } #color-mode-switch svg { width: 24px; height: 24px; margin: 0 4px; fill: var(--color-text); } #color-mode-switch input[type='checkbox'] { height: 0; width: 0; margin: 0; visibility: hidden; position: absolute; } #color-mode-switch label { cursor: pointer; text-indent: -9999px; width: 42px; height: 21px; border-radius: 30px; background: var(--color-toggle-accent); display: block; position: relative; margin: 0; } #color-mode-switch label:after { content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; background: #fff; border-radius: 90px; transition: 0.3s; } #color-mode-switch input:checked + label:after { left: calc(100% - 3px); transform: translateX(-100%); } #color-mode-switch label:active:after { width: 30px; } /* Navigation */ nav { margin-bottom: 20px; } nav a { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; } /* Utility classes */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Responsive typography for portrait/mobile */ @media only screen and (orientation: portrait) { .markdown-body { max-width: 1000px; padding: 40px; } h1 { font-size: 4rem; } h2 { font-size: 3.5rem; } h3 { font-size: 3rem; } .markdown-body p, .markdown-body li, .markdown-body div, .markdown-body span, .markdown-body code, .markdown-body table { font-size: 1.8rem; } .markdown-body small { font-size: 1.4rem; } .post-list > li { margin-bottom: 60px; } .post-meta { font-size: 24px; } .toc-category { width: 200px; padding: 20px 12px; } } /* Header / Intro section */ .blog-header { margin-bottom: 50px; } .blog-header h1 { font-size: 2rem; margin-bottom: 8px; border-bottom: none; font-weight: 600; } .blog-header .meowy { color: var(--color-orange); } .blog-header p { font-size: 1rem; color: var(--color-text); opacity: 0.7; margin: 0 0 20px 0; font-weight: 400; } .status-text { font-size: 0.85rem; color: var(--color-text); opacity: 0.6; margin-bottom: 10px; display: block; } .activities { display: flex; gap: 24px; margin-top: 20px; flex-wrap: wrap; } .activity-item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--color-text); opacity: 0.8; } .activity-item svg { width: 16px; height: 16px; stroke: var(--color-orange); flex-shrink: 0; } /* About link */ .about-link { color: var(--color-text); font-size: 0.9rem; text-decoration: none; padding: 6px 12px; border-radius: 4px; transition: all 0.2s ease; } .about-link:hover { background: var(--color-code-bg); color: var(--color-orange); text-decoration: none; } /* About page styles */ .about-page { max-width: 700px; margin: 60px auto; } .about-page h1 { font-size: 2.5rem; margin-bottom: 1.5rem; border-bottom: none; } .about-page h2 { font-size: 1.6rem; margin-top: 2.5rem; margin-bottom: 1rem; color: var(--color-orange); } .about-page p { font-size: 1.05rem; line-height: 1.8; color: var(--color-text); margin-bottom: 1.2rem; } .about-page .tagline { font-size: 1.1rem; color: var(--color-text); opacity: 0.6; margin-bottom: 2rem; margin-top: -0.5rem; } .about-intro { font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem; } .about-cta { font-size: 1rem; margin-bottom: 2rem; } .connect-section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-divider); } .social-info { margin-bottom: 1.5rem; } .social-info p { font-size: 1rem; margin-bottom: 0.5rem; } .social-info strong { color: var(--color-text); font-weight: 600; } .social-info a { color: var(--color-orange); text-decoration: none; } .social-info a:hover { text-decoration: underline; } .social-icons { display: flex; gap: 16px; margin-top: 1.5rem; } .social-icons a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--color-text); transition: all 0.2s ease; } .social-icons a:hover { color: var(--color-orange); transform: translateY(-2px); } .social-icons a svg { width: 24px; height: 24px; stroke: currentColor; } /* Content wrapper with sidebar layout */ .content-wrapper { display: flex; gap: 60px; align-items: flex-start; } .main-content { flex: 1; min-width: 0; } .sidebar { width: 280px; position: sticky; top: 20px; flex-shrink: 0; } /* Section headings */ .section-heading { font-size: 1.4rem; margin-top: 40px; margin-bottom: 20px; font-weight: 600; } .section-heading .star { color: var(--color-orange); margin-right: 6px; font-size: 1.2rem; } /* Tags */ .tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; } .tag { display: inline-block; padding: 6px 14px; background: var(--color-code-bg); color: var(--color-text); border-radius: 20px; font-size: 14px; text-decoration: none; transition: all 0.2s ease; cursor: pointer; border: 1px solid transparent; } .tag:hover { background: var(--color-orange); color: #fff; text-decoration: none; border-color: var(--color-orange); } .tag.active { background: var(--color-orange); color: #fff; border-color: var(--color-orange); } /* Make layout single column on smaller screens */ @media (max-width: 900px) { .content-wrapper { flex-direction: column; } .sidebar { width: 100%; position: static; } } /* Post item styling */ .post-item { display: block; margin-bottom: 20px; text-decoration: none; } .post-item .post-link { font-size: 1.1rem; font-weight: 400; color: var(--color-text); text-decoration: none; transition: color 0.2s ease; } .post-item .post-link:hover { color: var(--color-orange); text-decoration: underline; } /* Removed star prefix from favorite posts for cleaner look */ .post-date { font-size: 0.9rem; color: var(--color-text); opacity: 0.6; display: block; margin-bottom: 4px; } /* Favorites section */ .favorites-section { margin-bottom: 50px; } .favorites-list { list-style: none; padding-left: 0; margin-left: 0; } .favorites-list li { margin-bottom: 15px; } /* Year sections */ .year-section { margin-bottom: 40px; } .year-heading { font-size: 1.6rem; font-weight: 600; margin-bottom: 16px; color: var(--color-heading); } /* Tags header */ .tags-header { font-size: 1rem; font-weight: 600; margin-bottom: 15px; color: var(--color-text); opacity: 0.9; } /* Post tags inline */ .post-tags { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .post-tag { font-size: 12px; padding: 4px 10px; background: var(--color-code-bg); color: var(--color-text); border-radius: 12px; opacity: 0.8; } /* Search in top bar */ .search-container { display: flex; align-items: center; gap: 8px; position: relative; } .search-icon { cursor: pointer; padding: 4px; color: var(--color-text); transition: color 0.2s ease; display: flex; align-items: center; } .search-icon svg { width: 20px; height: 20px; stroke: var(--color-text); fill: none; } .search-icon:hover svg { stroke: var(--color-orange); } .search-wrapper { position: absolute; right: 0; top: 35px; width: 0; max-width: 300px; opacity: 0; transition: all 0.3s ease; pointer-events: none; } .search-wrapper.active { width: 300px; opacity: 1; pointer-events: auto; } .search-input-wrapper { position: relative; width: 100%; } .search-box { width: 100%; padding: 10px 36px 10px 14px; font-size: 14px; border: 1px solid var(--color-divider); border-radius: 6px; background: var(--color-bg); color: var(--color-text); font-family: inherit; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .search-box:focus { outline: none; border-color: var(--color-orange); } .search-box::placeholder { color: var(--color-text); opacity: 0.5; } .search-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); cursor: pointer; padding: 4px; color: var(--color-text); opacity: 0.6; transition: opacity 0.2s ease; display: flex; align-items: center; } .search-close:hover { opacity: 1; color: var(--color-orange); } .search-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; } /* Hidden class for search filtering */ .hidden { display: none !important; }