update theme to be a little responsive

This commit is contained in:
Phil 2025-01-08 15:17:53 -07:00
parent 7f62f892ba
commit 56b86c9a6a

View File

@ -7,7 +7,7 @@ html, body {
} }
body { body {
font-family: 'Georgia', serif; /* Adjust for clean serif typography */ font-family: 'Georgia', serif; /* Clean serif typography */
background-color: #fff; background-color: #fff;
color: #333; color: #333;
line-height: 1.8; line-height: 1.8;
@ -30,7 +30,7 @@ main {
/* Header Links */ /* Header Links */
header nav a { header nav a {
font-family: 'Courier New', monospace; /* Monospace for navigation links */ font-family: 'Courier New', monospace;
font-size: 1.2rem; font-size: 1.2rem;
color: #007acc; color: #007acc;
text-decoration: none; text-decoration: none;
@ -127,3 +127,50 @@ a {
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
/* Responsive Design */
/* For small screens (below 768px) */
@media (max-width: 768px) {
body {
font-size: 90%; /* Reduce base font size for better scaling */
}
header nav a {
font-size: 1rem; /* Smaller navigation links */
margin: 0 5px;
}
main {
padding: 10px; /* Reduce horizontal padding */
}
article.h-entry h1 {
font-size: 1.5rem; /* Smaller article titles */
}
.photo-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* More compact grid */
}
footer {
padding: 10px; /* Smaller footer padding */
font-size: 0.8rem; /* Smaller footer text */
}
}
/* For very small screens (below 480px) */
@media (max-width: 480px) {
header nav {
display: flex;
flex-direction: column;
}
header nav a {
margin: 5px 0; /* Stack navigation links vertically */
}
.photo-grid {
grid-template-columns: 1fr; /* Single-column photo grid */
}
}