Make elements in WebC components override the component names

This commit is contained in:
Helen Chong 2024-04-12 11:05:05 +08:00
parent f56da996ae
commit 11fe9b7e23
4 changed files with 7 additions and 7 deletions

View File

@ -1,4 +1,4 @@
<header class="main-header">
<header webc:root="override" class="main-header">
<noscript>
JavaScript is disabled in your browser. To get the best user experience on
this website, it is recommended that you enable it.
@ -10,7 +10,7 @@
</header>
<style webc:keep webc:bucket="defer">
header-main {
.main-header {
width: 100%;
background-color: var(--clr-main-header-bg);
display: flex;

View File

@ -1,4 +1,4 @@
<nav class="navbar">
<nav webc:root="override" class="navbar">
<ul class="nav__menu">
<li><a href="/home">Home</a></li>
<li><a href="/about/">About</a></li>
@ -14,7 +14,7 @@
</nav>
<style webc:keep webc:bucket="defer">
navbar {
.navbar {
background: var(--clr-navbar-bg);
padding: 0 0.6rem;
width: 100%;
@ -64,7 +64,7 @@
// Make the navigation bar sticky
// const header = document.querySelector(".main-header");
const navbar = document.querySelector("navbar");
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;

View File

@ -1,4 +1,4 @@
<div class="site-btn__container">
<div webc:root="override" class="site-btn__container">
<div>
<a href="https://leilukin.neocities.org/" target="_blank"><img src="/assets/leilukin/Leilukins-Hub-button.png" alt="Button of Leilukin's Hub" title="Leilukin's Hub"></a>
</div>

View File

@ -1,4 +1,4 @@
<button class="top-btn hidden" aria-label="Scroll to top">
<button webc:root="override" class="top-btn hidden" aria-label="Scroll to top">
<img src="/assets/images/elements/top.svg" alt="">
</button>