added sylings for main navigation and social links seperate

3 files changed, 41 insertions, 31 deletions

diff --git a/_includes/header.html b/_includes/header.html
index 60d8f6b..99a6ad9 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,8 +1,8 @@
         <header>
             <div class="wrap">
-                <nav>
+                <nav class="main-navigation">
                     <a class="logo" href="/"><h1>Ben Sanders</h1></a>
-                    <div class="nav-link">
+                    <div class="nav-links">
                         <a href="/">Home</a>
                         <a href="/about">About</a>
                         <a href="/news">News</a>
diff --git a/_layouts/default.html b/_layouts/default.html
index 988de3a..92006e4 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -21,7 +21,7 @@
         </section>
         <section id="blog">
             <div class="wrap">
-                <h2>Blog</h2>
+                <h2>Recent Posts</h2>
                 <ul>
                     {% for post in site.posts %}
                         <li>
diff --git a/assets/css/main.css b/assets/css/main.css
index 2d560f3..796b479 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,5 +1,5 @@
 :root {
-    --primary-bg-color: #ccc;
+    --primary-bg-color: #fff;
     --primary-topbar-color: #2d2d2d;
     --primary-text-color: black;
     --primary-link-color: #1a73e8;
@@ -57,13 +57,6 @@ h2, h3 {
     padding: 0 28px;
 }
 
-nav {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px 0;
-}
-
 .logo {
     display: flex;
     align-items: center;
@@ -74,22 +67,45 @@ nav {
     color: white;
 }
 
-.nav-link {
+nav.main-navigation {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 0;
+}
+
+nav.main-navigation div.nav-links {
     display: flex;
     align-items: center;
     gap:32px;
 }
 
-.nav-link a {
+nav.main-navigation .nav-links a {
     font-size: 14.5px;
     color: var(--text-dim);
     transition: color .15s ease;
 }
 
-.nav-link a:hover {
+nav.main-navigation .nav-links a:hover {
     color: white;
 }
 
+nav.links {
+    flex: 1 0 21%;
+    margin: 5px;
+    height: 100px;
+}
+
+
+.links ul {
+    padding: 0;
+    margin: 0;
+}
+
+.links ul li {
+    list-style-type: none;
+}
+
 .linktree {
     padding: 88px 0 96px;
 }
@@ -126,30 +142,24 @@ nav {
     flex-wrap: wrap;
 }
 
-.links {
-    flex: 1 0 21%; /* explanation below */
-    margin: 5px;
-    height: 100px;
-}
-
-
-.links ul {
-    padding: 0;
-    margin: 0;
-}
-
-.links ul li {
-    list-style-type: none;
-}
-
 .gear-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
 }
 
+section#blog {
+  background-color: #191919;
+  color: white;
+  padding: 20px 0 20px 0;
+}
+
 #blog ul li {
   list-style: none;
   padding: 0;
+  text-align: left;
+}
+
+section#blog h2 {
   text-align: center;
 }
 
@@ -169,7 +179,7 @@ nav {
 }
 
 .article-grid img {
-    border-radius: 1em;
+  border-radius: 1em;
 }
 
 #post {