Make elements in WebC components override the component names
This commit is contained in:
parent
f56da996ae
commit
11fe9b7e23
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue