update design and layout

css/style.css

@@ -1,19 +1,21 @@
 :root {
-    --main-bg-color: #F7F7F2;
+    --main-bg-color: #F9F9F6; /* Softer off-white */
-    --border-color: #E6E6E0;
+    --border-color: #E8E8E3; /* Lighter border */
-    --hover-color: #EEEEE8;
+    --hover-color: #F0F0EC; /* Subtle hover background */
-    --text-color: #333333;
+    --text-color: #2D2D2A; /* Slightly softer black */
-    --accent-color: #686B5E;
+    --accent-color: #5A5F4F; /* Muted olive green */
-    --card-bg-color: #FFFFFF;
+    --card-bg-color: #FFFFFF; /* Pure white for cards */
+    --read-more-bar: #D8DBD1; /* Light, muted shade for bottom bar */
 }
 
 body, input, textarea {
-    color: var(--text-color);    
+    color: var(--text-color);
-    font-family: 'helvetica', Georgia, serif;
+    font-family: 'Helvetica', Georgia, serif; /* Helvetica as priority */
+    font-size: 18px; /* Larger base font size */
     padding: 0;
     margin: 0;
     background-color: var(--main-bg-color);
-    line-height: 1.6;
+    line-height: 1.8; /* Increased leading for readability */
 }
 
 a {
@@ -24,29 +26,31 @@ a {
 
 a:hover {
     color: var(--accent-color);
-    text-decoration: none;
 }
 
 #header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 30px 0 15px 0;
+    /*padding: 40px 0 20px;*/
     border-bottom: 1px solid var(--border-color);
-    margin-bottom: 40px;
+    margin-bottom: 70px;
+    padding-top: 40px;
 }
 
 #site-title {
-    font-size: 38px;
+    font-size: 22px; /* Slightly larger */
-    font-weight: 400;
+    /*font-weight: 300; /* Lighter weight */*/
     margin: 0;
+    letter-spacing: 0.5px;
 }
 
 #article-title {
-    font-size: 28px;
+    font-size: 32px;
     font-weight: 300;
     margin: 10px 0 0 0;
     color: var(--accent-color);
+    line-height: 1.4;
 }
 
 nav ul {
@@ -57,13 +61,14 @@ nav ul {
 }
 
 nav li {
-    margin-left: 30px;
+    margin-left: 35px;
 }
 
 nav li a {
-    font-size: 20px;
+    font-size: 12px;
     padding: 10px 5px;
     position: relative;
+    font-weight: 400;
 }
 
 nav li a:hover {
@@ -86,163 +91,240 @@ nav li a:hover:after {
 }
 
 #wrapper {
-    max-width: 1200px;
+    max-width: 1100px; /* Slightly narrower for focus */
     margin: 0 auto;
     padding: 0 20px;
 }
 
 .featured-article {
-    margin-bottom: 40px;
+    margin-bottom: 50px;
     background-color: var(--card-bg-color);
-    padding: 30px;
+    padding: 40px;
-/*    border-radius: 4px;*/
+    border-top: 1px solid var(--border-color);
-    /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    border-bottom: 1px solid var(--border-color);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;*/
-    border-top: solid 1px var(--border-color);
-    border-bottom: solid 1px var(--border-color);
-}
-
-.featured-article:hover {
-/*    transform: translateY(-5px);*/
-/*    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
 }
 
 .featured-article h2 {
-    font-size: 32px;
+    font-size: 36px;
     margin-top: 0;
-    margin-bottom: 15px;
+    margin-bottom: 20px;
+    line-height: 1.4;
 }
 
 .featured-article .date {
     color: var(--accent-color);
     font-style: italic;
-    margin-bottom: 15px;
+    margin-bottom: 20px;
+    padding-bottom: 10px;
     display: block;
+    font-size: 16px;
+    border-bottom: 1px solid var(--border-color);
 }
 
 .featured-article .excerpt {
-    margin-bottom: 20px;
+    margin-bottom: 25px;
+    font-size: 18px;
 }
 
 .read-more {
     display: inline-block;
-    padding: 8px 16px;
+    padding: 10px 0;
-    background-color: var(--accent-color);
+    color: var(--accent-color);
-    color: white;
-    border-radius: 4px;
     font-size: 16px;
+    font-family: 'Helvetica', Georgia, serif; /* Helvetica as priority */
+    font-weight: 400;
+    position: relative;
+    transition: color 0.3s ease;
+}
+
+.read-more:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    bottom: 0;
+    left: 0;
+    background-color: var(--read-more-bar); /* Light bar under text */
     transition: background-color 0.3s ease;
 }
 
 .read-more:hover {
-    background-color: #555;
+    color: var(--text-color); /* Darker on hover for contrast */
-    color: white;
+}
+
+.read-more:hover:after {
+    background-color: var(--accent-color); /* Slightly darker bar on hover */
 }
 
 .articles-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 30px;
+    gap: 40px;
 }
 
 .article-card {
     background-color: var(--card-bg-color);
-/*    border-radius: 4px;*/
+    padding: 30px;
-    padding: 20px;
+    border-top: 1px solid var(--border-color);
-    /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    border-bottom: 1px solid var(--border-color);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;*/
-    border-top: solid 1px var(--border-color);
-    border-bottom: solid 1px var(--border-color);
-}
-
-.article-card:hover {
-/*    transform: translateY(-5px);*/
-/*    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
 }
 
 .article-card h3 {
-    font-size: 24px;
+    font-size: 26px;
     margin-top: 0;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
+    line-height: 1.4;
 }
 
 .article-card .date {
     color: var(--accent-color);
     font-style: italic;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
+    padding-bottom: 10px;
     display: block;
+    font-size: 16px;
+    border-bottom: 1px solid var(--border-color);
 }
 
 .article-card .excerpt {
-    margin-bottom: 15px;
+    margin-bottom: 20px;
+    font-size: 17px;
+}
+
+.article-page {
+    /*background-color: var(--card-bg-color);*/
+    /*padding: 50px;*/
+    /*border-top: 1px solid var(--border-color);*/
+    /*border-bottom: 1px solid var(--border-color);*/
+}
+
+.article-page h1 {
+    margin-top: 0;
+    margin-bottom: 5px;
+    font-size: 36px;
+    line-height: 1.4;
+}
+
+.article-meta {
+    color: var(--accent-color);
+    font-style: italic;
+    margin-bottom: 60px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid var(--border-color);
+    font-size: 16px;
+}
+
+.article-content {
+    font-size: 18px;
+    line-height: 1.8;
+}
+
+.article-content h1, .article-content h2, .article-content h3 {
+    color: var(--accent-color);
+    margin-bottom: 20px;
+    font-size: 36px; /* Match .article-page h1 */
+    line-height: 1.4;
+}
+
+.article-content h2 {
+    font-size: 26px; /* Match .article-card h3 */
+}
+
+.article-content h3 {
+    font-size: 22px; /* Smaller heading for consistency */
+}
+
+.article-content p {
+    margin-bottom: 25px;
+}
+
+.article-content ul, .article-content ol {
+    margin-bottom: 25px;
+    padding-left: 30px;
+}
+
+.article-content a {
+    color: var(--accent-color);
+    text-decoration: underline;
+}
+
+.article-content code {
+    background-color: var(--hover-color);
+    padding: 2px 6px;
+    border-radius: 3px;
+}
+
+.article-content pre {
+    background-color: var(--hover-color);
+    padding: 15px;
+    border-radius: 4px;
+    overflow-x: auto;
+}
+
+.excerpt h1, .excerpt h2, .excerpt h3 {
+    color: var(--accent-color);
+    margin-bottom: 20px;
+    font-size: 26px; /* Match .article-card h3 for excerpts */
+    line-height: 1.4;
+}
+
+.excerpt h2 {
+    font-size: 22px;
+}
+
+.excerpt h3 {
+    font-size: 18px;
+}
+
+.excerpt p {
+    font-size: 17px; /* Match .article-card .excerpt */
+    margin-bottom: 20px;
+}
+
+.excerpt ul, .excerpt ol {
+    margin-bottom: 20px;
+    padding-left: 30px;
+}
+
+.about-content .content h1, .about-content .content h2, .about-content .content h3 {
+    color: var(--accent-color);
+    margin-bottom: 20px;
+    font-size: 36px; /* Match .article-page h1 */
+    line-height: 1.4;
+}
+
+.about-content .content h2 {
+    font-size: 26px; /* Match .article-card h3 */
+}
+
+.about-content .content h3 {
+    font-size: 22px; /* Smaller heading for consistency */
+}
+
+.about-content .content p {
+    font-size: 18px;
+    margin-bottom: 25px;
+}
+
+.about-content .content ul, .about-content .content ol {
+    margin-bottom: 25px;
+    padding-left: 30px;
 }
 
 #footer {
-    margin-top: 60px;
+    margin-top: 80px;
-    padding: 20px 0;
+    padding: 30px 0;
     border-top: 1px solid var(--border-color);
     text-align: center;
     font-size: 14px;
     color: var(--accent-color);
 }
 
-.about-container {
-    padding: 30px;
-    background-color: var(--card-bg-color);
-    border-radius: 4px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-}
-
-.about-container h1 {
-    margin-top: 0;
-    border-bottom: 1px solid var(--border-color);
-    padding-bottom: 10px;
-}
-
-.about-content {
-    display: flex;
-    gap: 30px;
-    margin-top: 30px;
-}
-
-.about-bio {
-    flex: 2;
-}
-
-.about-sidebar {
-    flex: 1;
-}
-
-.article-page {
-    background-color: var(--card-bg-color);
-    padding: 40px;
-/*    border-radius: 4px;*/
-/*    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);*/
-    border-top: solid 1px var(--border-color);
-    border-bottom: solid 1px var(--border-color);
-}
-
-.article-page h1 {
-    margin-top: 0;
-    margin-bottom: 15px;
-}
-
-.article-meta {
-    color: var(--accent-color);
-    font-style: italic;
-    margin-bottom: 50px; /* Increased from 30px to 50px */
-    padding-bottom: 15px;
-    border-bottom: 1px solid var(--border-color);
-}
-
 /* Responsive styles */
 @media (max-width: 900px) {
     .articles-grid {
         grid-template-columns: repeat(2, 1fr);
-    }
+        gap: 30px;
-    
-    .about-content {
-        flex-direction: column;
     }
 }
 
@@ -250,26 +332,39 @@ nav li a:hover:after {
     #header {
         flex-direction: column;
         align-items: flex-start;
+        padding: 30px 0 15px;
     }
-    
+
     nav {
-        margin-top: 20px;
+        margin-top: 25px;
         width: 100%;
     }
-    
+
     nav ul {
-        justify-content: flex-end;
+        justify-content: flex-start;
     }
-    
+
+    nav li {
+        margin-left: 20px;
+    }
+
     .articles-grid {
         grid-template-columns: 1fr;
     }
-    
+
-    .featured-article, .article-card {
+    .featured-article, .article-card, .article-page {
-        padding: 15px;
+        padding: 25px;
     }
-    
+
-    .article-page {
+    #site-title {
-        padding: 20px;
+        font-size: 36px;
     }
-}
+
+    .featured-article h2, .article-page h1 {
+        font-size: 30px;
+    }
+
+    .article-card h3 {
+        font-size: 24px;
+    }
+}