Refactor header and navigation styles for improved layout and responsiveness

Author: devnomadic

_includes/header.html

@@ -1,21 +1,23 @@
 <div class="site-header">
   <div class="wrapper">
-    <a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}<b class="command_prompt"></b><b class="blinking_cursor">_</b></a>
+    <div class="header-top">
+      <a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}<b class="command_prompt"></b><b class="blinking_cursor">_</b></a>
+      <span class="social_links">
+          {% for link in site.dash.social_links %}
+          {% if link.fa == true %}
+          <a class="color-{{ link.color }}-hover" href="{{ link.url }}"{% if link.rel %} rel="{{ link.rel }}"{% endif %}><i class="fa fa-{{ link.icon }}"></i></a>
+          {% else %}
+          <a class="color-{{ link.color }}-hover" href="{{ link.url }}"{% if link.rel %} rel="{{ link.rel }}"{% endif %}><i class="fab fa-{{ link.icon }}"></i></a>
+          {% endif %}
+          {% endfor %}
+      </span>
+    </div>
     {% if site.dash.nav_links and site.dash.show_nav %}
     <nav class="site-nav">
       {% for link in site.dash.nav_links %}
         <a href="{{ link.url | relative_url }}" class="nav-link">{{ link.title }}</a>
       {% endfor %}
     </nav>
     {% endif %}
-    <span class="social_links">
-        {% for link in site.dash.social_links %}
-        {% if link.fa == true %}
-        <a class="color-{{ link.color }}-hover" href="{{ link.url }}"{% if link.rel %} rel="{{ link.rel }}"{% endif %}><i class="fa fa-{{ link.icon }}"></i></a>
-        {% else %}
-        <a class="color-{{ link.color }}-hover" href="{{ link.url }}"{% if link.rel %} rel="{{ link.rel }}"{% endif %}><i class="fab fa-{{ link.icon }}"></i></a>
-        {% endif %}
-        {% endfor %}
-    </span>
   </div>
 </div>

assets/css/custom.css

@@ -112,9 +112,18 @@
 }
 
 /* Navigation styling */
+.header-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5em;
+}
+
 .site-nav {
-  display: inline-block;
-  margin-left: 2em;
+  display: block;
+  border-top: 1px solid rgba(255, 167, 196, 0.3);
+  padding-top: 0.5em;
+  margin-top: 0.5em;
 }
 
 .nav-link {
@@ -132,9 +141,12 @@
 }
 
 @media (max-width: 768px) {
-  .site-nav {
-    display: block;
-    margin-left: 0;
+  .header-top {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .social_links {
     margin-top: 0.5em;
   }
 
@@ -143,11 +155,4 @@
     margin-right: 0;
     margin-bottom: 0.3em;
   }
-  
-  .social_links {
-    float: none !important;
-    display: block;
-    text-align: left;
-    margin-top: 0.5em;
-  }
 }