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

View File

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