Set up hero block template

This commit is contained in:
Helen Chong 2024-04-18 16:52:42 +08:00
parent 748134643c
commit c00bdf2808
2 changed files with 54 additions and 40 deletions

View File

@ -0,0 +1,48 @@
<header class="hero">
<div class="hero__top-bar hidden"></div>
<div class="hero__img">
{% block heroImg %}
{{ heroImg }}
{% endblock %}
</div>
</header>
<style>
.hero {
width: 100%;
background-color: var(--clr-hero-bg);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.hero__top-bar {
background-color: var(--clr-navbar-bg);
width: 100%;
padding: 0.5em 0;
}
.hero__img {
display: grid;
place-content: center;
}
.hero img {
object-fit: scale-down;
overflow: hidden;
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
max-height: 20rem;
}
</style>
<script defer>
const hero = document.querySelector(".hero");
const todayEvent = getTodayEvent();
const heroTopBarEl = document.querySelector(".hero__top-bar");
const headerImgEl = document.querySelector(".hero__img");
{% block eventScript %}
{{ eventScript }}
{% endblock %}
</script>

View File

@ -1,44 +1,10 @@
<header class="hero">
<div class="hero__top-bar hidden"></div>
<div class="hero__img">
{% extends "global/hero.njk" %}
{% block heroImg %}
<img src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">
</div>
</header>
<style>
.hero {
width: 100%;
background-color: var(--clr-hero-bg);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.hero__top-bar {
background-color: var(--clr-navbar-bg);
width: 100%;
padding: 0.5em 0;
}
.hero__img {
display: grid;
place-content: center;
}
.hero img {
object-fit: scale-down;
overflow: hidden;
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
}
</style>
<script defer>
const hero = document.querySelector(".hero");
const todayEvent = getTodayEvent();
const heroTopBarEl = document.querySelector(".hero__top-bar");
const headerImgEl = document.querySelector(".hero__img");
{% endblock %}
{% block eventScript %}
if (todayEvent != "No event") {
heroTopBarEl.classList.remove('hidden');
@ -216,4 +182,4 @@
return ``;
}
}
</script>
{% endblock %}