pages

_includes/header.html

@@ -1,9 +1,20 @@
-<header id="header" class="hide" data-aos="slide-down" data-aos-anchor-placement="top-bottom">
-    <nav>
-        <ul>
-            <li><a href="{{ '/' | relative_url }}">Home</a></li>
-            <li><a href="{{ '/about/' | relative_url }}">About</a></li>
-            <li><a href="{{ '/contact/' | relative_url }}">Contact</a></li>
+<header id="header" class="navbar navbar-expand-lg fixed-top navbar-light">
+    <a title="ChinaComX Logo" class="navbar-brand" href="/">
+        <svg class="brand-logo">
+            <title>ChinaComX, beyond the silk road</title>
+            <use xlink:href="/assets/images/logo.svg#logo"></use>
+        </svg>
+    </a>
+
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="navmenu navbar-collapse collapse" id="mainNav">
+        <ul id="main-menu" class="navbar-nav ml-auto page-menu menu">
+            <li class="menu-item nav-item"><a href="{{ '/' | relative_url }}" class="nav-link">Home</a></li>
+            <li class="menu-item nav-item"><a href="{{ '/about/' | relative_url }}" class="nav-link">About</a></li>
+            <li class="menu-item nav-item"><a href="{{ '/contact/' | relative_url }}" class="nav-link">Contact</a></li>
         </ul>
-    </nav>
+    </div>
 </header>

about.md

@@ -3,5 +3,11 @@ layout: default
 title: About
 permalink: /about/
 ---
-# About
-Information about the ChinaComX project.
+<div class="page-header">
+    <h1>About</h1>
+</div>
+<div class="content-wrapper">
+    <div class="page-content">
+        <p>Information about the ChinaComX project.</p>
+    </div>
+</div>

assets/css/style.css

@@ -4,8 +4,7 @@ body {
     margin: 0;
     padding: 0;
 }
-/* Existing CSS code */
-
+/* Navbar Styles */
 header {
     background: #fff;
     color: #333;
@@ -16,32 +15,66 @@ header {
     left: 0;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     z-index: 1000;
-    display: none; /* Hide initially */
-    transition: top 0.3s;
 }
 
-header.show {
-    display: block;
+header.navbar .navbar-brand svg {
+    width: 40px;
+    height: auto;
 }
 
-header nav ul {
-    list-style: none;
-    padding: 0;
+header.navbar .navbar-toggler {
+    border: none;
+}
+
+header.navbar .navbar-nav .nav-link {
+    color: #333;
+    margin: 0 10px;
+}
+
+header.navbar .navbar-nav .nav-link:hover {
+    color: #007bff;
+}
+
+header.navbar .navbar-nav .active > .nav-link {
+    font-weight: bold;
+    color: #007bff;
+}
+
+/* Page Content Styles */
+.content-wrapper {
+    margin-top: 100px; /* Adjust based on navbar height */
+    padding: 2em 1em;
+    background-color: #f9f9f9;
+}
+
+.page-header {
+    background-color: #6bbf59; /* Green background similar to example */
+    color: #fff;
+    padding: 2em 1em;
+    text-align: center;
+}
+
+.page-header h1 {
     margin: 0;
-    display: flex;
-    justify-content: center;
+    font-size: 2.5em;
 }
 
-header nav ul li {
-    margin: 0 1em;
+.page-content {
+    max-width: 800px;
+    margin: 2em auto;
+    padding: 1em;
+    background: #fff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
 }
 
-header nav ul li a {
-    color: #333;
-    text-decoration: none;
+.page-content p {
+    margin-bottom: 1em;
+    line-height: 1.6;
 }
 
 
+
 .splash {
     background: url('/assets/images/hero.jpg') no-repeat center center/cover;
     color: #fff;

contact.md

@@ -3,5 +3,11 @@ layout: default
 title: Contact
 permalink: /contact/
 ---
-# Contact
-Contact information and form.
+<div class="page-header">
+    <h1>Contact</h1>
+</div>
+<div class="content-wrapper">
+    <div class="page-content">
+        <p>Contact information and form.</p>
+    </div>
+</div>