* { box-sizing: border-box; }
body { 
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #111;
background: #fff;
margin: 0;
padding: 0;
}
.container { 
max-width: 800px; 
margin: 0 auto; 
padding: 0 20px; 
}
header { 
background: #f9f9f9; 
padding: 20px 0; 
border-bottom: 1px solid #eee;
}
header h1 { 
margin: 0; 
font-size: 24px;
}
header h1 a { 
text-decoration: none; 
color: #111; 
}
header p { 
margin: 5px 0 0; 
color: #666;
font-size: 14px;
}
main { 
padding: 40px 0; 
}
article { 
margin-bottom: 40px; 
padding-bottom: 30px;
border-bottom: 1px solid #eee;
}
article:last-child { 
border-bottom: none; 
}
article h2 { 
margin: 0 0 10px; 
font-size: 20px;
}
article h2 a { 
text-decoration: none; 
color: #111; 
}
article h2 a:hover { 
color: #666; 
}
.meta { 
font-size: 14px; 
color: #666; 
margin-bottom: 15px; 
}
.content { 
line-height: 1.6; 
}
.content p { 
margin: 0 0 15px; 
}
.pagination { 
text-align: center; 
margin: 40px 0; 
}
.pagination a { 
text-decoration: none; 
color: #111; 
margin: 0 10px;
}
footer { 
background: #f9f9f9; 
padding: 20px 0; 
border-top: 1px solid #eee;
text-align: center;
}
footer p { 
margin: 0; 
font-size: 14px; 
color: #666; 
}
h1, h2, h3, h4, h5, h6 { 
font-weight: 600; 
line-height: 1.2; 
}
a { 
color: #111; 
}
img { 
max-width: 100%; 
height: auto; 
} .search-form {
margin: 20px 0;
}
.search-form input {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
width: 200px;
}
.search-form button {
padding: 8px 15px;
background: #111;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
margin-left: 5px;
}
.search-form button:hover {
background: #333;
} .featured-image {
margin-bottom: 20px;
}
.thumbnail {
float: left;
margin: 0 20px 10px 0;
max-width: 200px;
}
.thumbnail img {
border-radius: 4px;
}
.read-more {
display: inline-block;
margin-top: 10px;
padding: 8px 15px;
background: #f9f9f9;
text-decoration: none;
border-radius: 4px;
font-size: 14px;
}
.read-more:hover {
background: #eee;
} .meta a {
text-decoration: none;
color: #666;
}
.meta a:hover {
color: #111;
} .pagination .page-numbers {
display: inline-block;
padding: 8px 12px;
margin: 0 2px;
text-decoration: none;
border: 1px solid #ddd;
border-radius: 4px;
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
background: #111;
color: #fff;
border-color: #111;
}
.pagination ul {
list-style: none;
padding: 0;
margin: 20px 0;
text-align: center;
}
.pagination li {
display: inline-block;
margin: 0 2px;
} .comments {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #eee;
} .no-results {
text-align: center;
padding: 40px 0;
}
.no-results h2 {
margin-bottom: 20px;
color: #666;
} header h2 {
margin: 10px 0;
font-size: 18px;
color: #666;
} .single-post h1 {
font-size: 28px;
margin-bottom: 15px;
}
.post-navigation {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 20px 0;
margin: 30px 0;
}
.nav-previous, .nav-next {
display: inline-block;
width: 48%;
}
.nav-next {
text-align: right;
float: right;
}
.nav-previous a, .nav-next a {
text-decoration: none;
padding: 10px 15px;
background: #f9f9f9;
border-radius: 4px;
display: block;
}
.nav-previous a:hover, .nav-next a:hover {
background: #eee;
} .archive-header {
background: #f9f9f9;
padding: 20px;
margin: 20px 0;
border-radius: 4px;
}
.archive-header h2 {
margin: 0 0 10px 0;
font-size: 24px;
}
.archive-description {
color: #666;
line-height: 1.6;
}
.archive-post {
display: flex;
gap: 20px;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #eee;
}
.archive-post .thumbnail {
flex: 0 0 150px;
margin: 0;
}
.archive-post .post-content {
flex: 1;
}
.archive-post h3 {
margin: 0 0 10px 0;
font-size: 18px;
}
.archive-post h3 a {
text-decoration: none;
color: #111;
}
.archive-post h3 a:hover {
color: #666;
} .search-header {
background: #f9f9f9;
padding: 20px;
margin: 20px 0;
border-radius: 4px;
text-align: center;
}
.search-header h2 {
margin: 0 0 10px 0;
font-size: 22px;
}
.search-header p {
margin: 0;
color: #666;
}
.search-result {
display: flex;
gap: 15px;
margin-bottom: 25px;
padding-bottom: 25px;
border-bottom: 1px solid #eee;
}
.search-result .thumbnail {
flex: 0 0 80px;
margin: 0;
}
.search-result .result-content {
flex: 1;
}
.search-result h3 {
margin: 0 0 8px 0;
font-size: 16px;
}
.search-suggestions {
background: #f9f9f9;
padding: 20px;
border-radius: 4px;
margin: 20px 0;
}
.search-suggestions h3 {
margin: 0 0 15px 0;
}
.search-suggestions ul {
margin: 0;
padding-left: 20px;
} .error-404 {
text-align: center;
padding: 40px 0;
}
.error-404 h1 {
font-size: 48px;
margin-bottom: 20px;
color: #666;
}
.error-actions {
background: #f9f9f9;
padding: 20px;
border-radius: 4px;
margin: 30px 0;
text-align: left;
}
.error-actions h3 {
margin: 0 0 15px 0;
}
.error-actions ul {
margin: 0;
padding-left: 20px;
}
.error-actions li {
margin-bottom: 8px;
}
.recent-posts {
background: #f9f9f9;
padding: 20px;
border-radius: 4px;
margin: 30px 0;
text-align: left;
}
.recent-posts h3 {
margin: 0 0 15px 0;
}
.recent-posts ul {
list-style: none;
padding: 0;
margin: 0;
}
.recent-posts li {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.recent-posts li:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.recent-posts .date {
color: #666;
font-size: 12px;
margin-left: 10px;
} .page-content h1 {
font-size: 28px;
margin-bottom: 20px;
} @media (max-width: 600px) {
.thumbnail {
float: none;
margin: 0 0 15px 0;
max-width: 100%;
}
.search-form input {
width: 150px;
}
.container {
padding: 0 15px;
}
.archive-post, .search-result {
flex-direction: column;
}
.archive-post .thumbnail, .search-result .thumbnail {
flex: none;
max-width: 100%;
margin-bottom: 15px;
}
.nav-previous, .nav-next {
width: 100%;
margin-bottom: 10px;
}
.nav-next {
text-align: left;
float: none;
}
.error-404 h1 {
font-size: 36px;
}
}