...

static/css/simple-blog-template.css

@@ -9,14 +9,16 @@ body {
     Roboto,
     sans-serif;
   background-color: #fcfcfc;
-  color: #333;
+  color: #222; /* Darker for better contrast */
-  line-height: 1.6;
+  font-size: 18px; /* Larger body text for readability */
+  line-height: 1.75; /* Increased breathing room between lines */
 }
 
+/* Narrower container improves readability by limiting line length */
 @media (min-width: 1200px) {
   .container {
-    width: 780px;
+    width: 720px;
-  } /* Slightly wider for better readability */
+  }
 }
 
 /* --- Navigation --- */
@@ -34,10 +36,27 @@ nav {
 .navbar-inverse .navbar-brand {
   color: #fff !important;
   font-weight: 700;
-  font-size: 20px; /* Scaled down slightly for elegance */
+  font-size: 20px;
 }
 
-/* --- Post List --- */
+/* Fixes 'ABOUT' being lost in the middle - pushes it to the right */
+.navbar-right {
+  float: right !important;
+  margin-right: 0;
+}
+
+.navbar-inverse .navbar-nav > li > a {
+  color: #ccc !important;
+  font-weight: 600;
+  font-size: 13px;
+  transition: color 0.2s;
+}
+
+.navbar-inverse .navbar-nav > li > a:hover {
+  color: #fff !important;
+}
+
+/* --- Post List & Content --- */
 .post-preview {
   margin-bottom: 50px;
   padding-bottom: 30px;
@@ -45,11 +64,12 @@ nav {
 }
 
 .post-title {
-  font-size: 2.4rem; /* Balanced size */
+  font-size: 2.4rem;
   font-weight: 700;
   margin-top: 0;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
   letter-spacing: -0.02em;
+  line-height: 1.2;
 }
 
 .post-title a {
@@ -64,59 +84,51 @@ nav {
 
 .post-meta {
   color: #666;
-  font-size: 0.95rem;
+  font-size: 0.9rem;
-  margin-bottom: 15px;
+  margin-bottom: 20px;
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-/* --- Buttons & UI --- */
+/* --- Buttons --- */
 .btn-read-more {
   float: right;
   background: #fff;
   border: 1px solid #ddd;
   color: #555;
   border-radius: 6px;
-  padding: 6px 16px;
+  padding: 8px 18px;
   font-size: 0.9rem;
-  font-weight: 500;
+  font-weight: 600;
   transition: all 0.2s;
+  display: inline-block;
+  text-decoration: none !important;
 }
 
 .btn-read-more:hover {
   border-color: #0366d6;
   color: #0366d6;
   background: #f0f7ff;
-  text-decoration: none;
 }
 
-/* Subtle 'press' effect when clicked */
 .btn-read-more:active {
   transform: translateY(1px);
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.12);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-/* Ensure it behaves like a button block in the flow */
-.btn-read-more {
-  display: inline-block;
-  text-align: center;
-  vertical-align: middle;
-  user-select: none;
 }
 
 /* --- Terminal Style (Code Blocks) --- */
 .terminal-style {
   font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
-  background-color: #0d1117; /* GitHub Dark theme background */
+  background-color: #0d1117;
   color: #e6edf3;
-  padding: 16px;
+  padding: 20px;
   border-radius: 8px;
   border: 1px solid #30363d;
-  font-size: 0.9rem;
+  font-size: 0.95rem; /* Larger for technical clarity */
-  line-height: 1.45;
+  line-height: 1.5;
   overflow-x: auto;
-  margin: 20px 0;
+  margin: 25px 0;
 }
 
 /* --- Comments Section --- */
@@ -124,8 +136,8 @@ nav {
   background: #ffffff;
   border: 1px solid #e1e4e8;
   border-radius: 12px;
-  padding: 30px;
+  padding: 32px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
   margin-top: 40px;
 }
 
@@ -137,56 +149,81 @@ nav {
   border-bottom: 1px solid #f0f0f0;
 }
 
+.comment-item:last-child {
+  border-bottom: none;
+}
+
 .avatar-img {
   border-radius: 50%;
   border: 1px solid #eee;
+  background: #f8f9fa;
 }
 
 .comment-author {
-  font-weight: 600;
+  font-weight: 700;
   color: #1a1a1a;
+  font-size: 1rem;
 }
 
-/* --- Pager (Pagination) --- */
+.comment-text {
+  white-space: pre-line; /* Essential: Handles the \n line breaks */
+  color: #444;
+  line-height: 1.6;
+  margin-top: 4px;
+}
+
+/* Button inside comment form */
+.btn-modern {
+  background-color: #0366d6;
+  color: white;
+  border: none;
+  padding: 10px 24px;
+  font-weight: 600;
+  border-radius: 6px;
+  cursor: pointer;
+  margin-top: 15px;
+  display: inline-block;
+  transition: background 0.2s;
+}
+
+.btn-modern:hover {
+  background-color: #005cc5;
+}
+
+/* --- Pagination --- */
 .pager {
   display: flex;
   justify-content: space-between;
-  padding: 20px 0;
+  padding: 30px 0;
-  border-top: 1px solid #eee;
+  margin-top: 20px;
+}
+
+.pager li {
+  list-style: none;
 }
 
 .pager li > a {
-  color: #0366d6;
+  color: #444;
-  font-weight: 500;
+  font-weight: 600;
   text-decoration: none;
   padding: 10px 20px;
   border: 1px solid #ddd;
   border-radius: 6px;
+  font-size: 0.9rem;
 }
 
 .pager li > a:hover {
   background-color: #f6f8fa;
+  border-color: #ccc;
 }
 
-/* --- Background Decor --- */
+/* --- Decoration --- */
 .background-svg {
   position: fixed;
-  bottom: 50px;
+  bottom: 40px;
-  right: 50px;
+  right: 40px;
-  width: 150px;
+  width: 140px;
   z-index: -1;
   pointer-events: none;
-  opacity: 0.3; /* More subtle */
+  opacity: 0.2;
-}
-
-.comment-text {
-  white-space: pre-line; /* This converts newlines into actual line breaks */
-  color: #444;
-  line-height: 1.5;
-}
-
-/* Fix the button height alignment */
-.comment-card .btn-modern {
-  margin-top: 15px;
-  display: inline-block;
 }