mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-05 14:14:41 +00:00
George Cushen
a955161dbb
Wire .hbb-section to var(--hb-spacing-section) instead of hardcoded 6rem, enabling hugoblox.layout.spacing (compact/comfortable/spacious) to take effect. - Default to "spacious" (6rem) to preserve existing visual layouts - Per-section override via design.spacing.padding still works (inline > class) - Remove dead design.spacing frontmatter field from all templates - Set correct layout.spacing token in each template's params.yaml Closes #3314
133 lines
2.9 KiB
CSS
133 lines
2.9 KiB
CSS
/* Hugo Blox Framework Custom Classes */
|
|
@layer components {
|
|
/* Section styles for Hugo Blox blocks */
|
|
.hbb-section {
|
|
padding-top: var(--hb-spacing-section, 6rem);
|
|
padding-bottom: var(--hb-spacing-section, 6rem);
|
|
}
|
|
|
|
.section-subheading {
|
|
font-size: 1.25rem;
|
|
font-weight: var(--hb-font-weight-heading, 700);
|
|
}
|
|
|
|
/* Home section background styles */
|
|
.home-section-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: -1;
|
|
}
|
|
|
|
.home-section-bg.bg-image {
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
/* 2025 Glassmorphism texture support - disable conflicting defaults */
|
|
.home-section-bg.bg-image[style*="background-size"][style*="background-repeat"] {
|
|
/* biome-ignore lint/complexity/noImportantStyles: Required to override inline background-size for glass textures */
|
|
background-size: revert !important;
|
|
/* biome-ignore lint/complexity/noImportantStyles: Required to override inline background-repeat for glass textures */
|
|
background-repeat: revert !important;
|
|
/* biome-ignore lint/complexity/noImportantStyles: Required to override inline background-position for glass textures */
|
|
background-position: revert !important;
|
|
}
|
|
|
|
/* Specific glassmorphism texture class override */
|
|
.blox-cta-card .home-section-bg.bg-image {
|
|
background-size: revert;
|
|
background-repeat: revert;
|
|
background-position: revert;
|
|
}
|
|
|
|
/* Video background */
|
|
.bg-video {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center center;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Flip video horizontally */
|
|
.bg-video.flip {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
/* Container styles */
|
|
.universal-wrapper {
|
|
margin: 0 auto;
|
|
padding-right: 1rem;
|
|
padding-left: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.universal-wrapper {
|
|
max-width: 1200px;
|
|
}
|
|
}
|
|
|
|
.article-container {
|
|
max-width: 760px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Button toolbar */
|
|
.btn-toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Documentation specific */
|
|
.docs-article-container {
|
|
max-width: 760px;
|
|
}
|
|
|
|
/* Powered-by footer styles */
|
|
.powered-by {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.powered-by a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.powered-by a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Parallax effect */
|
|
.parallax {
|
|
background-attachment: fixed;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
position: relative;
|
|
}
|
|
|
|
/* When parallax is used with home-section-bg, preserve absolute positioning */
|
|
.home-section-bg.parallax {
|
|
position: absolute;
|
|
}
|
|
|
|
/* Section color schemes - for backward compatibility */
|
|
section.light {
|
|
background-color: transparent;
|
|
}
|
|
|
|
section.dark {
|
|
background-color: transparent;
|
|
}
|
|
}
|