:root {
--bg: #f5f4ef;
--card-bg: #ffffff;
--text: #2b2d42;
--text-muted: #6c757d;
--heading-color: #1a1a1a;
--accent: #8c6d46;
--accent-hover: #634b2d;
--border: #e2dfd7;
--code-bg: #eae8e1;
--blockquote-bg: #edece6;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg);
color: var(--text);
font-family: var(--font-mono);
font-size: 14px;
line-height: 1.6;
letter-spacing: -0.2px;
padding: 2.5rem 1rem 4rem 1rem;
}
.container {
max-width: 620px;
margin: 0 auto;
} header {
margin-bottom: 2rem;
border-bottom: 1px dashed var(--border);
padding-bottom: 1.5rem;
}
.site-title {
font-size: 1.6rem;
font-weight: 600;
color: var(--heading-color);
text-decoration: none;
display: inline-block;
margin-bottom: 0.25rem;
}
.site-title a {
color: var(--heading-color);
text-decoration: none;
}
.site-title a::before {
content: '> ';
color: var(--accent);
}
.site-subtitle {
color: var(--text-muted);
font-size: 0.82rem;
margin-bottom: 1.25rem;
} nav {
margin-bottom: 1.5rem;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } nav::-webkit-scrollbar {
display: none;
}
nav ul {
display: flex;
gap: 1.25rem;
list-style: none;
margin: 0;
padding: 0;
}
nav li {
flex-shrink: 0; }
nav a {
color: var(--text);
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
display: inline-block;
transition: color 0.2s ease;
}
nav a:hover,
nav .current-menu-item a {
color: var(--accent);
text-decoration: underline;
} .filter-bar {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.search-input {
font-family: var(--font-mono);
font-size: 0.82rem;
color: var(--text);
background-color: var(--card-bg);
border: 1px solid var(--border);
padding: 0.5rem 0.8rem;
border-radius: 4px;
width: 100%;
outline: none;
}
.search-input:focus {
border-color: var(--accent);
}
.filter-options {
display: flex;
align-items: center;
gap: 0.5rem;
}
.filter-label {
font-size: 0.78rem;
color: var(--text-muted);
}
.category-select {
font-family: var(--font-mono);
font-size: 0.82rem;
color: var(--text);
background-color: var(--card-bg);
border: 1px solid var(--border);
padding: 0.35rem 0.6rem;
border-radius: 4px;
outline: none;
cursor: pointer;
max-width: 100%;
} .post-list {
list-style: none;
}
.post-item {
border-bottom: 1px dashed var(--border);
}
.post-link {
text-decoration: none;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding: 0.85rem 0;
}
.post-title {
font-size: 0.95rem;
font-weight: 500;
color: var(--heading-color);
transition: color 0.2s ease;
}
.post-link:hover .post-title {
color: var(--accent);
text-decoration: underline;
}
.post-date {
font-size: 0.78rem;
color: var(--text-muted);
white-space: nowrap;
} .entry-header {
margin-bottom: 2rem;
border-bottom: 1px dashed var(--border);
padding-bottom: 1rem;
}
.entry-title {
font-size: 1.45rem;
font-weight: 600;
color: var(--heading-color);
margin-bottom: 0.5rem;
line-height: 1.3;
}
.entry-meta {
font-size: 0.78rem;
color: var(--text-muted);
}
.entry-meta a {
color: var(--accent);
text-decoration: none;
}
.entry-meta a:hover {
text-decoration: underline;
} .entry-content {
line-height: 1.8;
font-size: 0.92rem;
color: var(--text);
} .entry-content p {
margin-bottom: 1.35rem;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
color: var(--heading-color);
font-weight: 600;
margin-top: 1.8rem;
margin-bottom: 0.75rem;
line-height: 1.3;
}
.entry-content h1 {
font-size: 1.3rem;
}
.entry-content h2 {
font-size: 1.15rem;
}
.entry-content h3 {
font-size: 1.05rem;
}
.entry-content h4,
.entry-content h5,
.entry-content h6 {
font-size: 0.95rem;
} .entry-content strong,
.entry-content b {
font-weight: 600;
color: var(--heading-color);
}
.entry-content em,
.entry-content i {
font-style: italic;
color: var(--text);
}
.entry-content a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s ease;
}
.entry-content a:hover {
color: var(--accent-hover);
} .entry-content ul,
.entry-content ol {
margin-bottom: 1.35rem;
padding-left: 1.5rem;
}
.entry-content ul {
list-style-type: square;
}
.entry-content ul li::marker {
color: var(--accent);
}
.entry-content ol {
list-style-type: decimal;
}
.entry-content ol li::marker {
color: var(--accent);
font-weight: 500;
}
.entry-content li {
margin-bottom: 0.4rem;
padding-left: 0.25rem;
}
.entry-content li>ul,
.entry-content li>ol {
margin-top: 0.4rem;
margin-bottom: 0;
} .entry-content blockquote {
background-color: var(--blockquote-bg);
border-left: 3px solid var(--accent);
margin: 1.5rem 0;
padding: 0.8rem 1.2rem;
font-style: italic;
color: var(--text);
}
.entry-content blockquote p:last-child {
margin-bottom: 0;
} .entry-content code {
font-family: var(--font-mono);
font-size: 0.85em;
background-color: var(--code-bg);
color: var(--heading-color);
padding: 0.15rem 0.4rem;
border-radius: 3px;
border: 1px solid var(--border);
}
.entry-content pre {
background-color: var(--code-bg);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1rem;
margin: 1.5rem 0;
overflow-x: auto;
font-size: 0.85rem;
line-height: 1.5;
}
.entry-content pre code {
background-color: transparent;
padding: 0;
border: none;
font-size: inherit;
color: inherit;
} .entry-content img {
max-width: 100%;
height: auto;
display: block;
margin: 1.5rem auto;
border-radius: 4px;
border: 1px solid var(--border);
}
.entry-content figure {
margin: 1.5rem 0;
text-align: center;
}
.entry-content figure img {
margin: 0 auto 0.5rem auto;
}
.entry-content figcaption,
.entry-content .wp-caption-text {
font-size: 0.78rem;
color: var(--text-muted);
margin-top: 0.4rem;
text-align: center;
} .entry-content hr {
border: none;
border-top: 1px dashed var(--border);
margin: 2rem 0;
} .entry-content table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
font-size: 0.85rem;
}
.entry-content th,
.entry-content td {
padding: 0.6rem 0.8rem;
border: 1px solid var(--border);
text-align: left;
}
.entry-content th {
background-color: var(--code-bg);
color: var(--heading-color);
font-weight: 600;
} .posts-navigation {
margin: 2rem 0 1.5rem 0;
padding-top: 1rem;
border-top: 1px dashed var(--border);
font-size: 0.8rem;
}
.posts-navigation .nav-links {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.posts-navigation a,
.posts-navigation .page-numbers {
color: var(--text-muted);
text-decoration: none;
padding: 0.2rem 0.5rem;
font-family: var(--font-mono);
}
.posts-navigation a:hover {
color: var(--accent);
text-decoration: underline;
}
.posts-navigation .current {
color: var(--heading-color);
font-weight: 600;
border-bottom: 2px solid var(--accent);
} .comments-area {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px dashed var(--border);
}
.comments-title,
.comment-reply-title {
font-size: 1rem;
font-weight: 600;
color: var(--heading-color);
margin-bottom: 1.5rem;
}
.comment-reply-title #cancel-comment-reply-link {
font-size: 0.78rem;
color: var(--accent);
margin-left: 0.5rem;
text-decoration: none;
} .comment-list {
list-style: none;
padding-left: 0;
margin-bottom: 2.5rem;
}
.comment-list .children {
list-style: none;
padding-left: 1.25rem;
border-left: 1px dashed var(--border);
margin-top: 1rem;
}
.comment-body {
background-color: var(--card-bg);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1rem;
margin-bottom: 1rem;
}
.comment-meta {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.6rem;
font-size: 0.78rem;
}
.comment-author .avatar {
border-radius: 3px;
border: 1px solid var(--border);
vertical-align: middle;
}
.comment-author .fn {
font-weight: 600;
font-style: normal;
color: var(--heading-color);
}
.comment-metadata a {
color: var(--text-muted);
text-decoration: none;
}
.comment-metadata a:hover {
text-decoration: underline;
}
.comment-content {
font-size: 0.88rem;
line-height: 1.6;
margin-bottom: 0.6rem;
}
.comment-content p:last-child {
margin-bottom: 0;
}
.reply a {
font-size: 0.75rem;
color: var(--accent);
text-decoration: none;
font-weight: 500;
}
.reply a:hover {
text-decoration: underline;
} .comment-respond {
background-color: var(--card-bg);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1.25rem;
margin-top: 2rem;
}
.comment-form p {
margin-bottom: 1rem;
}
.comment-form label {
display: block;
font-size: 0.78rem;
color: var(--text-muted);
margin-bottom: 0.3rem;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--text);
background-color: var(--bg);
border: 1px solid var(--border);
border-radius: 3px;
padding: 0.5rem 0.75rem;
width: 100%;
outline: none;
transition: border-color 0.2s ease;
}
.comment-form input:focus,
.comment-form textarea:focus {
border-color: var(--accent);
}
.comment-form .comment-form-cookies-consent {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
color: var(--text-muted);
}
.comment-form .comment-form-cookies-consent input {
width: auto;
}
.submit-btn {
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 600;
color: #ffffff;
background-color: var(--accent);
border: none;
border-radius: 3px;
padding: 0.5rem 1rem;
cursor: pointer;
transition: background-color 0.2s ease;
}
.submit-btn:hover {
background-color: var(--accent-hover);
} footer {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px dashed var(--border);
text-align: center;
color: var(--text-muted);
font-size: 0.78rem;
}