Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/_includes/main/header-main.webc
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;

6
src/_includes/main/navbar.webc
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;

2
src/_includes/main/site-btn.webc
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>

2
src/_includes/main/top-btn.webc
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>