diff --git a/static/css/style.css b/static/css/style.css index fdb9c38..a3dd03b 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,23 +1,126 @@ -body { - font-family: Arial, sans-serif; +/* Global Styles */ +html, body { + height: 100%; margin: 0; - padding: 0; - line-height: 1.6; + display: flex; + flex-direction: column; } +body { + font-family: 'Georgia', serif; /* Adjust for clean serif typography */ + background-color: #fff; + color: #333; + line-height: 1.8; +} + +/* Wrapper and Layout */ header, footer { - background: #333; - color: #fff; - padding: 10px 20px; text-align: center; + padding: 20px; + background: #f8f8f8; + border-bottom: 1px solid #ddd; } main { - padding: 20px; + flex: 1; /* Ensures main fills available space */ + max-width: 750px; + margin: 40px auto; + padding: 0 20px; } +/* Header Links */ +header nav a { + font-family: 'Courier New', monospace; /* Monospace for navigation links */ + font-size: 1.2rem; + color: #007acc; + text-decoration: none; + margin: 0 10px; +} + +header nav a:hover { + text-decoration: underline; +} + +/* Footer */ +footer { + font-size: 0.9rem; + color: #555; + border-top: 1px solid #ddd; +} + +/* Notes Section */ +section.h-feed ul { + list-style: none; + padding: 0; +} + +section.h-feed ul li { + padding: 15px; + border-bottom: 1px solid #ddd; + margin-bottom: 10px; +} + +section.h-feed ul li:last-child { + border-bottom: none; +} + +section.h-feed ul li time { + font-size: 0.8rem; + color: #888; + display: block; + margin-bottom: 5px; +} + +/* Articles Section */ +article.h-entry { + margin-bottom: 40px; +} + +article.h-entry h1 { + font-family: 'Georgia', serif; + font-size: 2rem; + margin-bottom: 10px; +} + +article.h-entry time { + font-size: 0.9rem; + color: #777; + margin-bottom: 15px; + display: block; +} + +article.h-entry .e-content { + font-size: 1.1rem; + line-height: 1.8; +} + +/* Photos Section */ +.photo-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 20px; +} + +.photo-grid figure { + margin: 0; + text-align: center; +} + +.photo-grid img { + max-width: 100%; + border-radius: 5px; + border: 1px solid #ddd; +} + +.photo-grid figcaption { + font-size: 0.9rem; + color: #555; + margin-top: 8px; +} + +/* Links */ a { - color: #007bff; + color: #007acc; text-decoration: none; }