Skip to content

Commit

Permalink
smal changes, good
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinacomx
chinacomx committed Jun 5, 2024
1 parent d0a77af commit 7bf14d6
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 30 deletions.
81 changes: 61 additions & 20 deletions _includes/header.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,64 @@
<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: Comics Culture in the People's Republic of China</title>
<use xlink:href="/assets/images/chinacomx-logo.png"></use>
</svg>
</a>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<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" href="/">
<img src="{{ '/assets/images/chinacomx-logo.png' | relative_url }}" class="brand-logo">
</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="collapse navbar-collapse justify-content-center" id="mainNav">
<ul class="navbar-nav">
<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>
<li class="nav-item"><a href="{{ '/translations/' | relative_url }}" class="nav-link">Translations</a></li>
<li class="nav-item"><a href="{{ '/publications/' | relative_url }}" class="nav-link">Publications</a></li>
<li class="nav-item"><a href="{{ '/contact/' | relative_url }}" class="nav-link">Contact</a></li>
</ul>
</div>
<div class="d-flex logos-right align-items-center">
<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>
<a class="logo-link" href="https://www.cats.uni-heidelberg.de/" title="to the Website of the CATS" target="_blank">
<img src="{{ '/assets/images/cats-logo.png' | relative_url }}" class="small-logo">
</a>
<a class="logo-link" href="https://www.uni-heidelberg.de/" title="to the Website of the Heidelberg University" target="_blank">
<img src="{{ '/assets/images/hd-logo.png' | relative_url }}" class="small-logo">
</a>
</div>
</div>
</header>

<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 id="page-title" class="page-title">
<h1>Translations</h1>
</div>

<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ml-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>
<li class="nav-item"><a href="{{ '/translations/' | relative_url }}" class="nav-link">Translations</a></li>
<li class="nav-item"><a href="{{ '/publications/' | relative_url }}" class="nav-link">Publications</a></li>
<li class="nav-item"><a href="{{ '/contact/' | relative_url }}" class="nav-link">Contact</a></li>
</ul>
<div id="content" class="content">
<p>Content goes here...</p>
</div>
</header>

<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var header = $("#header");
var pageTitle = $("#page-title");

if (scroll >= 100) {
header.addClass("hidden");
pageTitle.addClass("sticky");
} else {
header.removeClass("hidden");
pageTitle.removeClass("sticky");
}
});
</script>
</body>
</html>
34 changes: 24 additions & 10 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ header {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1000;
opacity: 0; /* Initially hidden */
transition: opacity 0.3s; /* Smooth transition */
transition: opacity 0.5s; /* Smooth transition */
}

/* Navbar links */
Expand All @@ -36,13 +36,15 @@ header {
top: 0;
width: 100%;
}

header.show {
opacity: 1; /* Show when scrolled */
}

header .navbar-brand svg {
width: 30px; /* Reduce logo size */
header .navbar-brand .brand-logo {
width: 40px; /* Adjust logo size */
height: auto;
margin-right: 10px; /* Space between logo and text */
}

header .navbar-toggler {
Expand All @@ -56,31 +58,43 @@ header .navbar-nav {
list-style: none; /* Remove default list style */
padding: 0; /* Remove padding */
margin: 0; /* Remove margin */
overflow: hidden; /* Hide overflow */
}

header .navbar-nav .nav-item {
float: none; /* Ensure items do not float */
}

header .navbar-nav .nav-item {
margin-left: 15px; /* Reduce margin between nav items */
}

header .navbar-nav .nav-link {
color: #333;
display: block;
color: #000000;
font-size: 17px; /* Adjust font size to make text smaller */
text-align: center;
padding: 0.5em 1em; /* Reduce padding within links */
transition: color 0.3s;
text-decoration: none; /* Remove underline */
}

header .navbar-nav .nav-link:hover {
color: #B52931;
text-decoration: none; /* Ensure no underline on hover */
}

header .navbar-nav .nav-link:focus, header .navbar-nav .nav-link.active {
font-weight: bold;
font-weight: none;
color: #B52931;
text-decoration: none; /* Ensure no underline on focus or active */
}

header .logos-right {
display: flex;
align-items: center;
}

header .logos-right .logo-link img.small-logo {
height: 30px; /* Adjust logo height */
margin-left: 10px;
}

/* Page Content Styles */
.content-wrapper {
margin-top: 80px; /* Adjust based on navbar height */
Expand Down

0 comments on commit 7bf14d6

Please sign in to comment.