Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Rename main header to hero

This commit is contained in:
Helen Chong 2024-04-15 00:30:45 +08:00
parent a3f751327b
commit 3546952382
4 changed files with 17 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/_includes/main/base.njk
View File

@ -27,16 +27,10 @@
<title>{{ title }} | {{ sitemeta.siteName }}</title>
</head>
<body>
{% include "main/header.njk" %}
{% include "main/hero.njk" %}
{% include "main/navbar.njk" %}
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
{{ content | safe }}
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
{% include "main/footer.njk" %}
{% include "main/top-btn.njk" %}

26
src/_includes/main/header.njk → src/_includes/main/hero.njk
View File

@ -1,43 +1,43 @@
<header webc:root="override" class="main-header">
<div class="main-header__top-bar"></div>
<div class="main-header__img">
<header class="hero">
<div class="hero__top-bar"></div>
<div class="hero__img">
<img src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">
</div>
</header>
<style webc:keep webc:bucket="defer">
.main-header {
<style>
.hero {
width: 100%;
background-color: var(--clr-main-header-bg);
background-color: var(--clr-hero-bg);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.main-header__top-bar {
.hero__top-bar {
background-color: var(--clr-navbar-bg);
width: 100%;
padding: 0.5em 0;
}
.main-header__img {
.hero__img {
display: grid;
place-content: center;
}
.main-header img {
.hero img {
object-fit: scale-down;
overflow: hidden;
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
}
</style>
<script webc:keep webc:bucket="defer">
const header = document.querySelector(".main-header");
<script defer>
const hero = document.querySelector(".hero");
const todayEvent = getTodayEvent();
const headerTopBarEl = document.querySelector(".main-header__top-bar");
const headerImgEl = document.querySelector(".main-header__img");
const headerTopBarEl = document.querySelector(".hero__top-bar");
const headerImgEl = document.querySelector(".hero__img");
if (todayEvent != "No event") {
if (todayEvent == "Leilukin's Birthday" || todayEvent == "Leilukin's Hub Anniversary") {

4
src/_includes/main/navbar.njk
View File

@ -56,11 +56,11 @@
<script defer>
// Make the navigation bar sticky
// const header = document.querySelector(".main-header");
// const hero = document.querySelector(".hero");
const navbar = document.querySelector(".navbar");
window.addEventListener("scroll", e => {
const scrollPos = window.scrollY || document.documentElement.scrollTop;
const stickyLine = document.querySelector(".main-header").scrollHeight - navbar.scrollHeight;
const stickyLine = hero.scrollHeight - navbar.scrollHeight;
if (scrollPos > stickyLine) {
navbar.classList.add("sticky-nav");
} else {

2
src/assets/css/main.css
View File

@ -26,7 +26,7 @@
--clr-link-btn-txt: white;
--clr-link-btn-hover: #241445;
--clr-main-header-bg: black;
--clr-hero-bg: black;
--clr-navbar-bg: #222;
--clr-navbar-link: white;