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> <title>{{ title }} | {{ sitemeta.siteName }}</title>
</head> </head>
<body> <body>
{% include "main/header.njk" %} {% include "main/hero.njk" %}
{% include "main/navbar.njk" %} {% include "main/navbar.njk" %}
<main> <main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
{{ content | safe }} {{ content | safe }}
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main> </main>
{% include "main/footer.njk" %} {% include "main/footer.njk" %}
{% include "main/top-btn.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"> <header class="hero">
<div class="main-header__top-bar"></div> <div class="hero__top-bar"></div>
<div class="main-header__img"> <div class="hero__img">
<img src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub"> <img src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">
</div> </div>
</header> </header>
<style webc:keep webc:bucket="defer"> <style>
.main-header { .hero {
width: 100%; width: 100%;
background-color: var(--clr-main-header-bg); background-color: var(--clr-hero-bg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
} }
.main-header__top-bar { .hero__top-bar {
background-color: var(--clr-navbar-bg); background-color: var(--clr-navbar-bg);
width: 100%; width: 100%;
padding: 0.5em 0; padding: 0.5em 0;
} }
.main-header__img { .hero__img {
display: grid; display: grid;
place-content: center; place-content: center;
} }
.main-header img { .hero img {
object-fit: scale-down; object-fit: scale-down;
overflow: hidden; overflow: hidden;
filter: drop-shadow(0.1rem 0.1rem 0.2rem black); filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
} }
</style> </style>
<script webc:keep webc:bucket="defer"> <script defer>
const header = document.querySelector(".main-header"); const hero = document.querySelector(".hero");
const todayEvent = getTodayEvent(); const todayEvent = getTodayEvent();
const headerTopBarEl = document.querySelector(".main-header__top-bar"); const headerTopBarEl = document.querySelector(".hero__top-bar");
const headerImgEl = document.querySelector(".main-header__img"); const headerImgEl = document.querySelector(".hero__img");
if (todayEvent != "No event") { if (todayEvent != "No event") {
if (todayEvent == "Leilukin's Birthday" || todayEvent == "Leilukin's Hub Anniversary") { if (todayEvent == "Leilukin's Birthday" || todayEvent == "Leilukin's Hub Anniversary") {

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

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

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

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