updates

_config.yml

@@ -1,5 +1,5 @@
-title: ChinaComX – Beyond the Silk Road
-description: An academic project exploring beyond the Silk Road.
+title: ChinaComx
+description: Comics Culture in the People's Republic of China
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "https://yourusername.github.io" # the base hostname & protocol for your site
 theme: minima

_includes/header.html

@@ -1,15 +1,17 @@
 <header id="header" class="navbar navbar-expand-lg fixed-top navbar-light">
-    <div id="navigation-container" class="container d-flex justify-content-between align-items-center">
-        <a title="ChinaComX Logo" class="navbar-brand">
-            <img src="{{ '/assets/images/chinacomx-logo.png' | relative_url }}" class="brand-logo">
-        </a>
+    <div id="navigation-container" class="container-fluid">
+        <div class="d-flex justify-content-start">
+            <a title="ChinaComX Logo" class="navbar-brand" href="/">
+                <img src="{{ '/assets/images/chinacomx-logo.png' | relative_url }}" class="brand-logo">
+            </a>
+        </div>
 
         <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="collapse navbar-collapse justify-content-center" id="mainNav">
-            <ul class="navbar-nav">
+            <ul class="navbar-nav mx-auto">
                 <li class="nav-item"><a href="{{ '/' | relative_url }}" class="nav-link">Home</a></li>
                 <li class="nav-item"><a href="{{ '/about/' | relative_url }}" class="nav-link">About</a></li>
                 <li class="nav-item"><a href="{{ '/team/' | relative_url }}" class="nav-link">Team</a></li>
@@ -19,7 +21,7 @@
             </ul>
         </div>
 
-        <div class="d-flex logos-right align-items-center">
+        <div class="d-flex justify-content-end logos-right">
             <a class="logo-link" href="https://erc.europa.eu/" title="to the Website of the European Research Center" target="_blank">
                 <img src="{{ '/assets/images/erc-logo.png' | relative_url }}" class="small-logo">
             </a>
@@ -32,3 +34,41 @@
         </div>
     </div>
 </header>
+
+<style>
+     .navbar {
+        width: 100%;
+    }
+
+    .navbar-brand img {
+        max-height: 100px; /* Adjust the height of the logo as needed */
+    }
+
+    .nav-logo {
+        max-height: 100px; /* Adjust the height of the logos on the right as needed */
+        width: auto;
+        margin-left: 10px; /* Space between logos */
+    }
+
+    .navbar-nav {
+        margin: 0;
+    }
+
+    .nav-link {
+        padding: 0.5px 0.5px; /* Adjust spacing around navigation links */
+    }
+    .navbar-collapse {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .logos-left {
+        display: flex;
+    }
+
+    .logos-right {
+        display: flex;
+    }
+
+
+</style>

_layouts/home.html

@@ -12,18 +12,18 @@
         <section class="splash">
             <div class="splash-content">
                 <div class="splash-left">
-                    <img src="{{ '/assets/images/chinacomx-logo.png' | relative_url }}" alt="Project Logo" class="splash-logo">
+                    <img src="{{ '/assets/images/chinacomx-logo.png' | relative_url }}" sizes="" class="splash-logo">
                 </div>
                 <div class="splash-right">
                     <h1>ChinaComX: Comics Culture in the People's Republic of China</h1>
-                    <p>A research project funded by the ERC (grant agreement number 12345678) at the Centre for Asian and Transcultural Studies, Heidelberg University.</p>
+                    <p><i>A research project funded by the ERC (grant agreement number 12345678) at the Centre for Asian and Transcultural Studies, Heidelberg University.</i></p>
                 </div>
             </div>
             <a href="#posts" class="scroll-down">&#8595;</a>
         </section>
         <section id="posts" class="content-wrapper">
             <div class="container">
-                <h2>Latest Posts</h2>
+                <h2>News & Activities</h2>
                 <div class="post-carousel">
                     <button class="carousel-btn left-btn" onclick="scrollLeft()">&#8592;</button>
                     <div class="post-wrapper">

assets/css/style.css

@@ -41,10 +41,16 @@ header.show {
     opacity: 1; /* Show when scrolled */
 }
 
+#navigation-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
 header .navbar-brand .brand-logo {
     width: 40px; /* Adjust logo size */
     height: auto;
-    margin-right: 10px; /* Space between logo and text */
+    margin-right: 90px; /* Space between logo and text */
 }
 
 header .navbar-toggler {
@@ -56,8 +62,9 @@ header .navbar-nav {
     justify-content: center;
     align-items: center;
     list-style: none;  /* Remove default list style */
+    margin-left: 30px; /* Add margin to create space between Home link and logo */
+    margin-right: auto; /* Add margin to push logos to the far right */
     padding: 0;  /* Remove padding */
-    margin: 0;  /* Remove margin */
     overflow: hidden;  /* Hide overflow */
 }
 
@@ -72,9 +79,9 @@ header .navbar-nav .nav-item {
 header .navbar-nav .nav-link {
     display: block;
     color: #000000;
-    font-size: 17px;  /* Adjust font size to make text smaller */
+    font-size: 16px;  /* Adjust font size to make text smaller */
     text-align: center;
-    padding: 0.5em 1em;  /* Reduce padding within links */
+    padding: 0.2em 0.5em;  /* Reduce padding within links */
     transition: color 0.3s;
     text-decoration: none;  /* Remove underline */
 }
@@ -88,13 +95,30 @@ header .navbar-nav .nav-link:focus, header .navbar-nav .nav-link.active {
 header .logos-right {
     display: flex;
     align-items: center;
+    margin-left: auto; /* Ensure logos are at the far right */
+}
+
+/* Add to your CSS file */
+.brand-logo {
+    width: 100px;
+    height: auto;
+    margin-left: 40px; /* Add space to the left of the left logo */
 }
 
-header .logos-right .logo-link img.small-logo {
-    height: 30px;  /* Adjust logo height */
+.small-logo {
+    width: 100px;
+    height: auto;
+    margin-right: 40px; /* Add space to the right of the right logos */
     margin-left: 10px;
 }
 
+.navbar-nav {
+    flex: 1;
+    justify-content: center;
+    max-width: 1000px; /* Limit the width of the navbar links */
+}
+
+
 /* Page Content Styles */
 .content-wrapper {
     margin-top: 80px; /* Adjust based on navbar height */