add code block styling

static/css/style.css

@@ -7,7 +7,7 @@ html, body {
 }
 
 body {
-    font-family: 'Georgia', serif; /* Adjust for clean serif typography */
+    font-family: 'Georgia', serif; /* Clean serif typography */
     background-color: #fff;
     color: #333;
     line-height: 1.8;
@@ -30,7 +30,7 @@ main {
 
 /* Header Links */
 header nav a {
-    font-family: 'Courier New', monospace; /* Monospace for navigation links */
+    font-family: 'Courier New', monospace;
     font-size: 1.2rem;
     color: #007acc;
     text-decoration: none;
@@ -94,6 +94,37 @@ article.h-entry .e-content {
     line-height: 1.8;
 }
 
+/* Code Block Styling */
+pre {
+    background-color: #f4f4f4; /* Light gray background */
+    border: 1px solid #ddd; /* Subtle border */
+    border-radius: 5px; /* Rounded corners */
+    padding: 15px; /* Inner padding */
+    overflow-x: auto; /* Horizontal scrolling for long lines */
+    font-family: 'Courier New', monospace; /* Monospace font for readability */
+    font-size: 0.9rem; /* Slightly smaller font size */
+    line-height: 1.6;
+    color: #333; /* Dark text */
+    margin: 20px 0; /* Space around the block */
+}
+
+code {
+    font-family: 'Courier New', monospace; /* Monospace font for inline code */
+    font-size: 0.9rem;
+    background-color: #f4f4f4; /* Same background as pre blocks */
+    padding: 2px 4px; /* Small padding for inline code */
+    border-radius: 3px; /* Rounded corners */
+    color: #c7254e; /* Distinct color for code text */
+}
+
+/* Optional: Highlight Inline Code */
+article h-entry code {
+    background-color: #fffbdd; /* Light yellow background for inline code */
+    color: #d6336c; /* Reddish text for contrast */
+    font-weight: bold;
+}
+
+
 /* Photos Section */
 .photo-grid {
     display: grid;
@@ -127,3 +158,50 @@ a {
 a:hover {
     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 */
+    }
+}