updated css

static/css/style.css

@@ -1,23 +1,126 @@
-body {
+/* Global Styles */
-    font-family: Arial, sans-serif;
+html, body {
+    height: 100%;
     margin: 0;
-    padding: 0;
+    display: flex;
-    line-height: 1.6;
+    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;
 }