Add header and navigation styling for improved layout and responsiveness

Author: devnomadic

_includes/header.html

@@ -0,0 +1,21 @@
+<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>
+    {% 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

@@ -110,3 +110,44 @@
   font-size: 1.1rem;
   margin-bottom: 0.5rem;
 }
+
+/* Navigation styling */
+.site-nav {
+  display: inline-block;
+  margin-left: 2em;
+}
+
+.nav-link {
+  display: inline-block;
+  margin-right: 1.5em;
+  color: #ffa7c4;
+  text-decoration: none;
+  font-size: 0.9em;
+  transition: color 0.3s ease;
+}
+
+.nav-link:hover {
+  color: #ffffff;
+  text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+  .site-nav {
+    display: block;
+    margin-left: 0;
+    margin-top: 0.5em;
+  }
+  
+  .nav-link {
+    display: block;
+    margin-right: 0;
+    margin-bottom: 0.3em;
+  }
+  
+  .social_links {
+    float: none !important;
+    display: block;
+    text-align: left;
+    margin-top: 0.5em;
+  }
+}