zahuyach 0.5.6

/* GitHub-themed Personal Blog CSS */
/* Optimized for performance and minimal file size */

/* Color scheme variables */
:root[data-theme="light"] {
    --color-canvas-default: #ffffff;
    --color-canvas-subtle: #f6f8fa;
    --color-canvas-inset: #f6f8fa;
    --color-fg-default: #1f2328;
    --color-fg-muted: #656d76;
    --color-fg-subtle: #6e7781;
    --color-fg-on-emphasis: #ffffff;
    --color-border-default: #d0d7de;
    --color-border-muted: #d8dee4;
    --color-accent-fg: #0969da;
    --color-accent-emphasis: #0969da;
    --color-accent-subtle: #ddf4ff;
    --color-success-fg: #1a7f37;
    --color-danger-fg: #cf222e;
    --color-warning-fg: #9a6700;
    --color-done-fg: #8250df;
    --color-shadow-small: 0 1px 0 rgba(27, 31, 36, 0.04);
    --color-shadow-medium: 0 3px 6px rgba(140, 149, 159, 0.15);
    --color-shadow-large: 0 8px 24px rgba(140, 149, 159, 0.2);
}

:root[data-theme="dark"] {
    --color-canvas-default: #0d1117;
    --color-canvas-subtle: #161b22;
    --color-canvas-inset: #010409;
    --color-fg-default: #e6edf3;
    --color-fg-muted: #7d8590;
    --color-fg-subtle: #6e7681;
    --color-fg-on-emphasis: #ffffff;
    --color-border-default: #30363d;
    --color-border-muted: #21262d;
    --color-accent-fg: #58a6ff;
    --color-accent-emphasis: #1f6feb;
    --color-accent-subtle: #0c2d6b;
    --color-success-fg: #3fb950;
    --color-danger-fg: #f85149;
    --color-warning-fg: #d29922;
    --color-done-fg: #a371f7;
    --color-shadow-small: 0 0 transparent;
    --color-shadow-medium: 0 3px 6px #010409;
    --color-shadow-large: 0 8px 24px #010409;
}

/* Base reset and typography */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica,
        Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-fg-default);
    background-color: var(--color-canvas-default);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.25;
}

h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.5em;
}
h3 {
    font-size: 1.25em;
}
h4 {
    font-size: 1em;
}
h5 {
    font-size: 0.875em;
}
h6 {
    font-size: 0.85em;
    color: var(--color-fg-muted);
}

p {
    margin-top: 0;
    margin-bottom: 1em;
}

a {
    color: var(--color-accent-fg);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

code,
pre {
    font-family:
        ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono",
        Menlo, monospace;
    font-size: 0.875em;
}

code {
    padding: 0.2em 0.4em;
    background-color: var(--color-canvas-subtle);
    border-radius: 3px;
}

pre {
    overflow-x: auto;
    padding: 1em;
    background-color: var(--color-canvas-inset);
    border-radius: 6px;
    line-height: 1.45;
}

pre code {
    padding: 0;
    background-color: transparent;
}

blockquote {
    margin: 0 0 1em;
    padding: 0 1em;
    color: var(--color-fg-muted);
    border-left: 0.25em solid var(--color-border-default);
}

/* Layout */
.container {
    width: 100%;
    max-width: 1012px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .container {
        padding: 0 2rem;
    }
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-accent-emphasis);
    color: var(--color-fg-on-emphasis);
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: 0 0 6px 0;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* Header */
.site-header {
    background-color: var(--color-canvas-subtle);
    border-bottom: 1px solid var(--color-border-default);
    position: sticky;
    top: 0;
    z-index: 40;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.5rem;
}

.nav-logo {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--color-fg-default);
}

.nav-logo:hover {
    text-decoration: none;
}

.nav-logo img {
    height: 2rem;
    width: auto;
}

.nav-title {
    font-size: 1.25rem;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-fg-default);
    cursor: pointer;
    padding: 0.5rem;
    margin-right: -0.5rem;
}

@media (max-width: 767px) {
    .nav-toggle {
        display: block;
    }
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 767px) {
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-canvas-subtle);
        border-bottom: 1px solid var(--color-border-default);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1rem;
        display: none;
    }

    .nav-menu.is-open {
        display: flex;
    }
}

.nav-link {
    color: var(--color-fg-default);
    font-weight: 500;
    padding: 0.5rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
}

.nav-link:hover {
    text-decoration: none;
    color: var(--color-fg-default);
}

.nav-link.active {
    border-bottom-color: var(--color-accent-emphasis);
}

@media (max-width: 767px) {
    .nav-link {
        display: block;
        padding: 0.75rem 0;
        border-bottom: none;
    }

    .nav-link.active {
        color: var(--color-accent-fg);
    }
}

/* Theme toggle */
.theme-toggle {
    background: none;
    border: none;
    color: var(--color-fg-muted);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.theme-toggle:hover {
    background-color: var(--color-canvas-inset);
}

.theme-icon-light,
.theme-icon-dark {
    display: none;
}

[data-theme="light"] .theme-icon-dark {
    display: block;
}

[data-theme="dark"] .theme-icon-light {
    display: block;
}

/* Main content */
.main {
    min-height: calc(100vh - 7rem - 4rem);
    padding: 2rem 0;
}

@media (min-width: 768px) {
    .main {
        padding: 3rem 0;
    }
}

/* Post list */
.post-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-item {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border-muted);
}

.post-item:last-child {
    border-bottom: none;
}

.post-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.post-title a {
    color: var(--color-fg-default);
}

.post-title a:hover {
    color: var(--color-accent-fg);
    text-decoration: none;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--color-fg-muted);
    margin-bottom: 0.5rem;
}

.post-date {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.post-excerpt {
    color: var(--color-fg-muted);
    margin-bottom: 0.5rem;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background-color: var(--color-accent-subtle);
    color: var(--color-accent-fg);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 2rem;
    text-decoration: none;
}

.tag:hover {
    background-color: var(--color-accent-emphasis);
    color: var(--color-fg-on-emphasis);
    text-decoration: none;
}

/* Article */
.article-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-default);
}

.article-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.article-content {
    font-size: 1.125rem;
    line-height: 1.75;
}

.article-content h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border-muted);
}

.article-content h3,
.article-content h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.article-content p {
    margin-bottom: 1.25rem;
}

.article-content ul,
.article-content ol {
    margin-bottom: 1.25rem;
    padding-left: 2rem;
}

.article-content li {
    margin-bottom: 0.25rem;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 1.5rem 0;
}

.article-content table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
}

.article-content th,
.article-content td {
    padding: 0.75rem;
    border: 1px solid var(--color-border-default);
}

.article-content th {
    background-color: var(--color-canvas-subtle);
    font-weight: 600;
}

/* Footer */
.site-footer {
    background-color: var(--color-canvas-subtle);
    border-top: 1px solid var(--color-border-default);
    padding: 2rem 0;
    margin-top: auto;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.footer-info {
    color: var(--color-fg-muted);
    font-size: 0.875rem;
}

.footer-info p {
    margin: 0.25rem 0;
}

.footer-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    color: var(--color-fg-muted);
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.social-link:hover {
    color: var(--color-fg-default);
}

/* Archive page */
.archive-year {
    margin-bottom: 2rem;
}

.archive-year-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-fg-muted);
}

.archive-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.archive-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
    align-items: baseline;
}

.archive-date {
    color: var(--color-fg-muted);
    font-size: 0.875rem;
    min-width: 5rem;
}

/* Tags page */
.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.tag-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tag-count {
    font-size: 0.875rem;
    color: var(--color-fg-muted);
}

/* Utilities */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.text-center {
    text-align: center;
}

.mt-4 {
    margin-top: 1rem;
}
.mt-8 {
    margin-top: 2rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.mb-8 {
    margin-bottom: 2rem;
}

/* Code blocks and syntax highlighting */
.article-content pre {
    position: relative;
    margin: 1.5rem -1rem;
    overflow-x: auto;
    background-color: var(--color-canvas-inset);
    border: 1px solid var(--color-border-default);
    border-radius: 6px;
}

@media (min-width: 768px) {
    .article-content pre {
        margin-left: 0;
        margin-right: 0;
    }
}

.article-content pre code {
    display: block;
    padding: 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-fg-default);
}

/* Inline code */
.article-content p code,
.article-content li code,
.article-content td code {
    padding: 0.125rem 0.375rem;
    background-color: var(--color-canvas-subtle);
    border-radius: 3px;
    font-size: 0.875em;
    word-break: break-word;
}

/* Lists in articles */
.article-content ul {
    list-style-type: disc;
}

.article-content ol {
    list-style-type: decimal;
}

.article-content ul ul,
.article-content ol ul {
    list-style-type: circle;
}

.article-content ul ul ul,
.article-content ol ul ul {
    list-style-type: square;
}

.article-content li > p:first-child {
    margin-top: 0;
}

.article-content li > p:last-child {
    margin-bottom: 0;
}

/* Task lists */
.article-content input[type="checkbox"] {
    margin-right: 0.5rem;
}

.article-content .task-list-item {
    list-style: none;
    margin-left: -1.5rem;
}

/* Images */
.article-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2rem auto;
    border-radius: 8px;
    box-shadow: var(--color-shadow-medium);
}

.article-content figure {
    margin: 2rem 0;
}

.article-content figcaption {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-fg-muted);
}

/* Videos */
.article-content video {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Blockquotes */
.article-content blockquote {
    position: relative;
    padding-left: 1.5rem;
    font-style: italic;
}

.article-content blockquote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--color-accent-emphasis);
    border-radius: 2px;
}

/* Horizontal rules */
.article-content hr {
    margin: 3rem 0;
    border: 0;
    border-top: 2px solid var(--color-border-default);
}

/* Definition lists */
.article-content dl {
    margin: 1.5rem 0;
}

.article-content dt {
    font-weight: 600;
    margin-top: 1rem;
}

.article-content dd {
    margin: 0.5rem 0 0 1.5rem;
    color: var(--color-fg-muted);
}

/* Keyboard keys */
.article-content kbd {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    font-family:
        ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono",
        Menlo, monospace;
    font-size: 0.875em;
    line-height: 1;
    color: var(--color-fg-default);
    background-color: var(--color-canvas-subtle);
    border: 1px solid var(--color-border-default);
    border-radius: 3px;
    box-shadow: 0 1px 0 var(--color-border-muted);
}

/* Abbreviations */
.article-content abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

/* Superscript and subscript */
.article-content sup,
.article-content sub {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

.article-content sup {
    top: -0.5em;
}

.article-content sub {
    bottom: -0.25em;
}

/* Links in articles */
.article-content a {
    text-decoration: underline;
    text-decoration-color: var(--color-border-default);
    text-underline-offset: 0.125rem;
}

.article-content a:hover {
    text-decoration-color: var(--color-accent-fg);
}

/* External link indicator */
.article-content a[href^="http"]:not([href*="yourdomain.com"])::after {
    content: "↗";
    font-size: 0.75em;
    margin-left: 0.125rem;
    color: var(--color-fg-muted);
}

/* Footnotes */
.article-content .footnotes {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border-default);
    font-size: 0.875rem;
}

.article-content .footnotes ol {
    padding-left: 1rem;
}

.article-content .footnote-backref {
    text-decoration: none;
}

/* Print styles */
@media print {
    body {
        color: #000;
        background: #fff;
    }

    .site-header,
    .site-footer,
    .nav-toggle,
    .theme-toggle {
        display: none;
    }

    .article-content {
        font-size: 12pt;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}