Rename main header to hero
This commit is contained in:
parent
a3f751327b
commit
3546952382
|
@ -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" %}
|
||||||
|
|
|
@ -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") {
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue