drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-08-24 09:16:35 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(banner): add top banner (#777)

Browse Source 
* feat: add top banner

* chore: use inside the example site

* chore: generate

* fix: banner with the burger navbar

* fix: compute the banner height to allow mutliple lines

* chore: better p style
This commit is contained in:
Ludovic Fernandez
2025-08-24 00:46:29 +02:00
committed by GitHub
parent 990d24906b
commit f297d24189
14 changed files with 96 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/compiled/main.css
View File

File diff suppressed because one or more lines are too long

12
assets/css/components/banner.css Normal file
View File

@@ -0,0 +1,12 @@
.hextra-banner-hidden .hextra-banner {
display: none;
}
.hextra-banner {
:where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply hx:underline hx:decoration-from-font;
}
:where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply hx:leading-7 hx:first:mt-0;
}
}

2
assets/css/components/sidebar.css
View File

@@ -1,6 +1,6 @@
@media (max-width: 48rem) {
.hextra-sidebar-container {
@apply hx:fixed hx:pt-[calc(var(--navbar-height))] hx:top-0 hx:w-full hx:bottom-0 hx:z-[15] hx:overscroll-contain hx:bg-white hx:dark:bg-dark;
@apply hx:fixed hx:pt-[calc(var(--navbar-height)+var(--hextra-banner-height))] hx:top-0 hx:w-full hx:bottom-0 hx:z-[15] hx:overscroll-contain hx:bg-white hx:dark:bg-dark;
transition: transform 0.4s cubic-bezier(0.52, 0.16, 0.04, 1);
will-change: transform, opacity;
contain: layout style;

2
assets/css/styles.css
View File

@@ -29,6 +29,7 @@ body {
--primary-saturation: 100%;
--primary-lightness: 50%;
--navbar-height: 4rem;
--hextra-banner-height: 2rem;
--menu-height: 3.75rem; /* 60px */
}
@@ -48,6 +49,7 @@ body {
@import "./components/steps.css";
@import "./components/search.css";
@import "./components/sidebar.css";
@import "./components/banner.css";
@import "./components/navbar.css";
@import "./components/scrollbar.css";
@import "./components/code-copy.css";

15
assets/js/banner.js Normal file
View File

@@ -0,0 +1,15 @@
// {{- if site.Params.banner }}
(function () {
const banner = document.querySelector(".hextra-banner")
document.documentElement.style.setProperty("--hextra-banner-height", banner.clientHeight+"px");
const closeBtn = banner.querySelector(".hextra-banner-close-button");
closeBtn.addEventListener("click", () => {
document.documentElement.classList.add("hextra-banner-hidden");
document.documentElement.style.setProperty("--hextra-banner-height", "0px");
localStorage.setItem('{{ site.Params.banner.key | default `banner-closed` }}', "0");
});
})();
// {{- end -}}