mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-13 08:15:44 +00:00
George Cushen
4fa40b91e2
Move block-specific CSS from centralized assets/css/blox/ to co-located style.css files within each block directory. The css.html partial now auto-discovers style.css files from bundled and community blocks and concatenates them into the Tailwind entry via resources.Concat, enabling full @apply support while avoiding VFS path resolution issues. Shared biography styles (avatar, ruby) are extracted to blox/shared/css/ and auto-included before per-block styles. Navbar CSS moves to components/ as it's a framework-level concern. The separate community CSS pipeline in site_head.html is removed — all block CSS now flows through a single Tailwind entry point.
111 lines
2.2 KiB
CSS
111 lines
2.2 KiB
CSS
/* Navigation Styles */
|
|
|
|
.navbar {
|
|
@apply relative flex flex-wrap items-center justify-between;
|
|
}
|
|
|
|
.navbar-brand {
|
|
/* @apply text-black dark:text-white text-xl font-semibold; */
|
|
color: var(--hb-color-header-fg);
|
|
@apply text-xl font-semibold;
|
|
}
|
|
|
|
.navbar-brand svg {
|
|
@apply max-h-full max-w-full h-[1em] w-auto inline-block;
|
|
}
|
|
|
|
.navbar-brand img {
|
|
/* To shrink to line height, add: h-[1em] */
|
|
@apply max-h-full w-auto inline-block;
|
|
}
|
|
|
|
/* Ensure interactive controls show hand cursor */
|
|
.theme-toggle,
|
|
[data-search-toggle],
|
|
#search-toggle,
|
|
[data-te-collapse-init],
|
|
.nav-dropdown > .nav-link[role="button"] {
|
|
@apply cursor-pointer;
|
|
}
|
|
|
|
/* navbar toggler */
|
|
input#nav-toggle:checked + label #show-button {
|
|
@apply hidden;
|
|
}
|
|
|
|
input#nav-toggle:checked + label #hide-button {
|
|
@apply block;
|
|
}
|
|
|
|
input#nav-toggle:checked ~ #nav-menu {
|
|
@apply block;
|
|
}
|
|
|
|
#site-header.header {
|
|
background-color: var(--hb-color-header-bg);
|
|
color: var(--hb-color-header-fg);
|
|
@apply py-3 shadow;
|
|
}
|
|
|
|
/* navbar items */
|
|
|
|
.navbar-nav {
|
|
@apply text-center lg:text-left;
|
|
}
|
|
|
|
.nav-link {
|
|
/* @apply dark:text-white block p-3 font-semibold transition lg:px-2 lg:py-3; */
|
|
color: var(--hb-color-header-fg);
|
|
@apply block p-3 font-semibold transition lg:px-2 lg:py-3;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: var(--color-primary-700);
|
|
}
|
|
|
|
.dark .nav-link:hover {
|
|
color: var(--color-primary-300);
|
|
}
|
|
|
|
.nav-dropdown {
|
|
@apply mr-0;
|
|
}
|
|
|
|
.nav-dropdown > svg {
|
|
@apply pointer-events-none;
|
|
}
|
|
|
|
.nav-dropdown-list {
|
|
@apply bg-white dark:bg-slate-900 z-10 min-w-[180px] rounded py-4 shadow hidden lg:invisible lg:absolute lg:block lg:opacity-0;
|
|
/* Ensure dropdown appears above content and under header */
|
|
top: 100%;
|
|
left: 0;
|
|
}
|
|
|
|
.nav-dropdown.active .nav-dropdown-list {
|
|
@apply block lg:visible lg:opacity-100;
|
|
}
|
|
|
|
/* Ensure hover opens dropdown in desktop (CSS-driven) */
|
|
@media (min-width: 1024px) {
|
|
.nav-dropdown:hover > .nav-dropdown-list {
|
|
@apply visible opacity-100;
|
|
}
|
|
}
|
|
|
|
.nav-dropdown-item {
|
|
@apply px-4 [&:not(:last-child)]:mb-2;
|
|
}
|
|
|
|
.dark .nav-dropdown-item:hover {
|
|
background-color: var(--color-primary-500);
|
|
}
|
|
|
|
.nav-dropdown-link {
|
|
@apply dark:text-white dark:hover:text-white block py-1 font-semibold transition;
|
|
}
|
|
|
|
.nav-dropdown-link:hover {
|
|
color: var(--color-primary-700);
|
|
}
|