update theme to be a little responsive
This commit is contained in:
parent
7f62f892ba
commit
56b86c9a6a
@ -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 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user