mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-15 18:15:35 +00:00
refactor: rename modules and update migration docs
BREAKING CHANGE Module paths moved to `github.com/HugoBlox/kit` with new names: - core `blox-tailwind` → `blox` - analytics → `analytics` - netlify → `integrations/netlify` - slides (reveal) → `slides` Update go.mod, module.yaml/params, scripts, tests, and v0.11 migration guide accordingly.
This commit is contained in:
George Cushen committed
1 parent
e7e0c714d3
commit
f4280ddb1c
566 files changed
+134
-151
No files matched your search
@@ -0,0 +1,12 @@
|
||||
@import "page.css";
|
||||
@import "task-list.css";
|
||||
@import "copy.css";
|
||||
@import "sidebar-left.css";
|
||||
@import "charts.css";
|
||||
@import "steps.css";
|
||||
@import "cards.css";
|
||||
@import "math.css";
|
||||
@import "notebook.css";
|
||||
@import "author-notes.css";
|
||||
@import "glassmorphism.css";
|
||||
@import "cover.css";
|
||||
@@ -0,0 +1,48 @@
|
||||
/* Author Notes Tooltip Styles */
|
||||
|
||||
/* Hide elements with x-cloak until Alpine.js initializes */
|
||||
[x-cloak] {
|
||||
/* biome-ignore lint/complexity/noImportantStyles: Required to reliably hide until Alpine initializes */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Ensure tooltip appears above other content */
|
||||
.author-notes-tooltip {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* Smooth hover effect for the info icon */
|
||||
.author-notes {
|
||||
@apply inline-flex items-center justify-center;
|
||||
@apply transition-all duration-200 ease-in-out;
|
||||
}
|
||||
|
||||
/* Focus styles for accessibility */
|
||||
.author-notes:focus {
|
||||
@apply outline-none ring-2 ring-primary-500 ring-offset-2 rounded-full;
|
||||
}
|
||||
|
||||
/* Additional responsive styles for mobile */
|
||||
@media (max-width: 640px) {
|
||||
/* On mobile, tooltips should be wider if needed */
|
||||
.author-notes-tooltip {
|
||||
white-space: normal;
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print styles - show author notes inline when printing */
|
||||
@media print {
|
||||
.author-notes {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show author notes as superscript numbers in print */
|
||||
.author-notes::after {
|
||||
display: inline;
|
||||
content: attr(data-tooltip);
|
||||
vertical-align: super;
|
||||
font-size: 0.75em;
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
:root {
|
||||
--hb-cols: 2;
|
||||
}
|
||||
|
||||
.hb-cards {
|
||||
grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hb-cols))), 1fr));
|
||||
}
|
||||
|
||||
.hb-card {
|
||||
@apply flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-transparent hover:shadow-gray-100 dark:hover:shadow-transparent shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200;
|
||||
@apply hover:border-gray-300 bg-transparent shadow-sm hover:bg-slate-50 hover:shadow-md;
|
||||
|
||||
border-color: var(--color-neutral-700);
|
||||
}
|
||||
|
||||
.dark .hb-card {
|
||||
border-color: var(--color-neutral-700);
|
||||
}
|
||||
|
||||
.dark .hb-card:hover {
|
||||
border-color: var(--color-neutral-600);
|
||||
background-color: var(--color-neutral-800);
|
||||
}
|
||||
|
||||
.hb-card-title {
|
||||
@apply flex font-semibold gap-2 text-gray-700 hover:text-gray-900 items-center;
|
||||
|
||||
color: var(--color-neutral-700);
|
||||
}
|
||||
|
||||
.hb-card-title:hover {
|
||||
color: var(--color-neutral-900);
|
||||
}
|
||||
|
||||
.dark .hb-card-title {
|
||||
color: var(--color-neutral-200);
|
||||
}
|
||||
|
||||
.dark .hb-card-title:hover {
|
||||
color: var(--color-neutral-50);
|
||||
}
|
||||
|
||||
.hb-card-subtitle {
|
||||
@apply line-clamp-3 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mb-4 mt-2;
|
||||
}
|
||||
|
||||
.hb-card svg {
|
||||
color: var(--color-neutral-700);
|
||||
width: 1.5rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.hb-card:hover svg {
|
||||
color: currentcolor;
|
||||
}
|
||||
|
||||
.hb-card p {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.dark .hb-card svg {
|
||||
color: var(--color-neutral-300);
|
||||
}
|
||||
|
||||
.dark .hb-card:hover svg {
|
||||
color: currentcolor;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/* Mermaid.js diagram div */
|
||||
div.mermaid {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
svg {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Plotly chart */
|
||||
div.chart {
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
/* Add horizontal scroll on mobile since Plotly */
|
||||
overflow-x: auto;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
/* Code Copy */
|
||||
|
||||
/* Hugo's Code Block Wrapper Class */
|
||||
|
||||
.highlight {
|
||||
@apply relative z-0;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
@apply invisible absolute right-0 top-0 z-10 w-20 py-1 cursor-pointer font-mono text-sm whitespace-nowrap rounded-bl-md rounded-tr-md bg-neutral-200 text-neutral-700 opacity-90 dark:bg-neutral-600 dark:text-neutral-200;
|
||||
}
|
||||
|
||||
/* Copy Button */
|
||||
|
||||
.highlight:hover > .copy-button {
|
||||
@apply visible;
|
||||
}
|
||||
|
||||
.copy-button:hover,
|
||||
.copy-button:focus,
|
||||
.copy-button:active,
|
||||
.copy-button:active:hover {
|
||||
background-color: var(--color-primary-100);
|
||||
}
|
||||
|
||||
.dark .copy-button:hover,
|
||||
.dark .copy-button:focus,
|
||||
.dark .copy-button:active,
|
||||
.dark .copy-button:active:hover {
|
||||
background-color: var(--color-primary-600);
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
/**
|
||||
* Article Cover Component Styles
|
||||
* Notion-inspired page cover with icon overlay
|
||||
*/
|
||||
|
||||
.article-cover {
|
||||
@apply relative w-full;
|
||||
/* Height is set inline via style attribute, but ensure it displays */
|
||||
min-height: 200px;
|
||||
/* Allow icon to overflow bottom */
|
||||
overflow: visible;
|
||||
/* Add margin for overlapping icon */
|
||||
margin-bottom: 2.5rem;
|
||||
|
||||
/* Responsive height adjustments for mobile */
|
||||
@media (max-width: 768px) {
|
||||
height: 240px;
|
||||
min-height: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cover image container */
|
||||
.article-cover img {
|
||||
@apply w-full h-full object-cover;
|
||||
}
|
||||
|
||||
/* Cover icon container base styles */
|
||||
.article-cover-icon {
|
||||
@apply flex items-center justify-center w-full h-full;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.article-cover-icon:hover {
|
||||
@apply scale-105;
|
||||
}
|
||||
|
||||
/* Glass morphism effect for icons */
|
||||
.article-cover-icon.glass {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(12px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .article-cover-icon.glass {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Fade effect styles */
|
||||
.article-cover-fade {
|
||||
@apply absolute left-0 right-0 pointer-events-none;
|
||||
bottom: -1px;
|
||||
background: linear-gradient(to bottom, transparent, white);
|
||||
}
|
||||
|
||||
.dark .article-cover-fade {
|
||||
background: linear-gradient(to bottom, transparent, rgb(15, 23, 42));
|
||||
}
|
||||
|
||||
/* Style variants */
|
||||
.article-cover[data-cover-style="minimal"] {
|
||||
@apply shadow-sm;
|
||||
}
|
||||
|
||||
.article-cover[data-cover-style="glass"] {
|
||||
@apply overflow-visible;
|
||||
}
|
||||
|
||||
.article-cover[data-cover-style="gradient"] {
|
||||
/* Applied via inline overlay divs */
|
||||
}
|
||||
|
||||
/* Ensure cover works well with dark mode */
|
||||
.dark .article-cover {
|
||||
@apply border-b border-gray-800;
|
||||
}
|
||||
|
||||
/* Caption styles */
|
||||
.article-cover .cover-caption {
|
||||
@apply absolute bottom-4 left-4 right-4 text-sm text-white/90;
|
||||
@apply bg-black/50 backdrop-blur-sm px-3 py-2 rounded-lg;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 640px) {
|
||||
.article-cover-icon {
|
||||
@apply scale-90;
|
||||
}
|
||||
}
|
||||
|
||||
/* Parallax effect support (optional feature) */
|
||||
.article-cover.parallax {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.article-cover.parallax img {
|
||||
transform: translateZ(-1px) scale(1.5);
|
||||
}
|
||||
|
||||
/* Link hover effect if cover is clickable */
|
||||
.article-cover a {
|
||||
@apply block w-full h-full;
|
||||
}
|
||||
|
||||
.article-cover a:hover img {
|
||||
@apply scale-105 transition-transform duration-500;
|
||||
}
|
||||
|
||||
/* Print styles - show cover but optimize */
|
||||
@media print {
|
||||
.article-cover {
|
||||
max-height: 200px;
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
.article-cover-fade,
|
||||
.article-cover-icon {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility: Reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.article-cover,
|
||||
.article-cover *,
|
||||
.article-cover-icon {
|
||||
animation: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.article-cover.parallax img {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* High contrast mode support */
|
||||
@media (prefers-contrast: high) {
|
||||
.article-cover-icon {
|
||||
@apply border-2 border-current;
|
||||
}
|
||||
|
||||
.article-cover .cover-caption {
|
||||
@apply bg-black text-white;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,239 @@
|
||||
/**
|
||||
* 2025 Hugo Blox Glassmorphism Utility Classes
|
||||
*
|
||||
* Modern glassmorphism effects for Hugo Blox CTA cards and other components
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
Glassmorphism Base Classes
|
||||
========================================================================== */
|
||||
|
||||
.glassmorphism-primary {
|
||||
@apply relative overflow-hidden;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in oklch, var(--color-primary-500) 90%, transparent),
|
||||
color-mix(in oklch, var(--color-primary-600) 95%, transparent),
|
||||
color-mix(in oklch, var(--color-primary-700) 90%, transparent)
|
||||
);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.glassmorphism-primary::before {
|
||||
content: "";
|
||||
@apply absolute inset-0 pointer-events-none;
|
||||
background: linear-gradient(45deg, rgb(0 0 0 / 0.1), transparent, rgb(255 255 255 / 0.1));
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
.glassmorphism-secondary {
|
||||
@apply relative overflow-hidden;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in oklch, var(--color-secondary-500) 90%, transparent),
|
||||
color-mix(in oklch, var(--color-secondary-600) 95%, transparent),
|
||||
color-mix(in oklch, var(--color-secondary-700) 90%, transparent)
|
||||
);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.glassmorphism-secondary::before {
|
||||
content: "";
|
||||
@apply absolute inset-0 pointer-events-none;
|
||||
background: linear-gradient(45deg, rgb(0 0 0 / 0.1), transparent, rgb(255 255 255 / 0.1));
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
.glassmorphism-dark {
|
||||
@apply relative overflow-hidden;
|
||||
background: linear-gradient(135deg, rgb(0 0 0 / 0.7), rgb(31 41 55 / 0.8), rgb(0 0 0 / 0.9));
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.glassmorphism-dark::before {
|
||||
content: "";
|
||||
@apply absolute inset-0 pointer-events-none;
|
||||
background: linear-gradient(45deg, rgb(255 255 255 / 0.05), transparent, rgb(255 255 255 / 0.1));
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
.glassmorphism-light {
|
||||
@apply relative overflow-hidden;
|
||||
background: linear-gradient(135deg, rgb(255 255 255 / 0.9), rgb(248 250 252 / 0.95), rgb(241 245 249 / 0.9));
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.glassmorphism-light::before {
|
||||
content: "";
|
||||
@apply absolute inset-0 pointer-events-none;
|
||||
background: linear-gradient(45deg, rgb(0 0 0 / 0.02), transparent, rgb(255 255 255 / 0.05));
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Noise Texture Classes (when used as background image)
|
||||
========================================================================== */
|
||||
|
||||
.noise-texture {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.noise-texture::after {
|
||||
content: "";
|
||||
@apply absolute inset-0 pointer-events-none;
|
||||
background-image: url("/media/textures/noise-pattern.svg");
|
||||
background-size: 100px 100px;
|
||||
background-repeat: repeat;
|
||||
opacity: 0.03;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.dark .noise-texture::after {
|
||||
mix-blend-mode: screen;
|
||||
opacity: 0.02;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Enhanced Ring Classes for 2025 Design
|
||||
========================================================================== */
|
||||
|
||||
.glass-ring {
|
||||
@apply ring-1 ring-white/20 hover:ring-white/40 dark:ring-gray-700/50 dark:hover:ring-gray-600/70;
|
||||
}
|
||||
|
||||
.glass-shadow {
|
||||
box-shadow:
|
||||
0 25px 50px -12px rgb(0 0 0 / 0.25),
|
||||
0 0 0 1px rgb(255 255 255 / 0.1),
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.1);
|
||||
}
|
||||
|
||||
.dark .glass-shadow {
|
||||
box-shadow:
|
||||
0 25px 50px -12px rgb(0 0 0 / 0.5),
|
||||
0 0 0 1px rgb(255 255 255 / 0.05),
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.05);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
CTA Card Glassmorphism Overlay (works with section backgrounds)
|
||||
========================================================================== */
|
||||
|
||||
.cta-glassmorphism {
|
||||
@apply relative;
|
||||
|
||||
/* Dynamic overlay opacity control */
|
||||
--glassmorphism-opacity: 0.15;
|
||||
|
||||
/* Subtle overlay tint that works with any background */
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgb(255 255 255 / var(--glassmorphism-opacity)) 0%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.5)) 50%,
|
||||
rgb(255 255 255 / var(--glassmorphism-opacity)) 100%
|
||||
);
|
||||
|
||||
/* Enhanced glassmorphism effects */
|
||||
backdrop-filter: blur(20px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(1.2);
|
||||
|
||||
/* Modern border and shadow for light mode */
|
||||
border: 1px solid rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.1));
|
||||
box-shadow:
|
||||
0 32px 64px -12px rgb(0 0 0 / 0.25),
|
||||
inset 0 1px 0 rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.05));
|
||||
}
|
||||
|
||||
.cta-glassmorphism:hover {
|
||||
/* Enhanced hover state */
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.05)) 0%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.7)) 50%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.05)) 100%
|
||||
);
|
||||
|
||||
border: 1px solid rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.2));
|
||||
box-shadow:
|
||||
0 40px 80px -16px rgb(0 0 0 / 0.3),
|
||||
inset 0 1px 0 rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.1));
|
||||
}
|
||||
|
||||
/* Dark mode adjustments for CTA glassmorphism */
|
||||
.dark .cta-glassmorphism {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.5)) 0%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.25)) 50%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.5)) 100%
|
||||
);
|
||||
|
||||
border: 1px solid rgb(255 255 255 / var(--glassmorphism-opacity));
|
||||
box-shadow:
|
||||
0 32px 64px -12px rgb(0 0 0 / 0.4),
|
||||
inset 0 1px 0 rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.5));
|
||||
}
|
||||
|
||||
.dark .cta-glassmorphism:hover {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.75)) 0%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.4)) 50%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.75)) 100%
|
||||
);
|
||||
|
||||
border: 1px solid rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.05));
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
CTA Button Glassmorphism (nested within CTA cards)
|
||||
========================================================================== */
|
||||
|
||||
.cta-glassmorphism .group {
|
||||
/* Ensure proper text contrast in light mode */
|
||||
color: var(--color-gray-900);
|
||||
}
|
||||
|
||||
.dark .cta-glassmorphism .group {
|
||||
/* Maintain white text in dark mode */
|
||||
color: var(--color-gray-100);
|
||||
}
|
||||
|
||||
/* Enhanced button glassmorphism for light mode visibility */
|
||||
.cta-glassmorphism .group > div:first-child {
|
||||
/* Light mode button background */
|
||||
background: rgb(255 255 255 / 0.9);
|
||||
border: 1px solid rgb(0 0 0 / 0.1);
|
||||
box-shadow:
|
||||
0 10px 25px -5px rgb(0 0 0 / 0.1),
|
||||
0 4px 6px -2px rgb(0 0 0 / 0.1),
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.3);
|
||||
}
|
||||
|
||||
.dark .cta-glassmorphism .group > div:first-child {
|
||||
/* Dark mode button background */
|
||||
background: rgb(0 0 0 / 0.4);
|
||||
border: 1px solid rgb(255 255 255 / 0.2);
|
||||
box-shadow:
|
||||
0 10px 25px -5px rgb(0 0 0 / 0.3),
|
||||
0 4px 6px -2px rgb(0 0 0 / 0.2),
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.1);
|
||||
}
|
||||
|
||||
.cta-glassmorphism .group:hover > div:first-child {
|
||||
background: rgb(255 255 255);
|
||||
border: 1px solid rgb(0 0 0 / 0.15);
|
||||
box-shadow:
|
||||
0 20px 40px -8px rgb(0 0 0 / 0.15),
|
||||
0 8px 12px -4px rgb(0 0 0 / 0.1),
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.4);
|
||||
}
|
||||
|
||||
.dark .cta-glassmorphism .group:hover > div:first-child {
|
||||
background: rgb(0 0 0 / 0.6);
|
||||
border: 1px solid rgb(255 255 255 / 0.3);
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
/* Prevent long equations overflowing on small screens by scrolling horizontally instead. */
|
||||
.katex-display {
|
||||
overflow: auto hidden;
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
.hb-notebook {
|
||||
--hb-notebook-output-max-height: 26rem;
|
||||
@apply relative isolate my-10 rounded-3xl border border-zinc-200/70 bg-white/90 p-6 shadow-xl shadow-primary-500/5 transition-shadow duration-300;
|
||||
@apply dark:border-zinc-800/70 dark:bg-zinc-900/70 dark:shadow-black/30 text-zinc-800 dark:text-zinc-50;
|
||||
}
|
||||
|
||||
.hb-notebook::after {
|
||||
content: "";
|
||||
@apply pointer-events-none absolute inset-0 rounded-3xl bg-gradient-to-r from-primary-500/5 via-transparent to-secondary-500/5 opacity-0 transition-opacity duration-300;
|
||||
}
|
||||
|
||||
.hb-notebook:hover::after {
|
||||
@apply opacity-100;
|
||||
}
|
||||
|
||||
.hb-notebook--dense {
|
||||
@apply p-4;
|
||||
}
|
||||
|
||||
.hb-notebook-header {
|
||||
@apply flex flex-wrap items-start justify-between gap-4 border-b border-zinc-200/70 pb-4 dark:border-zinc-800/70;
|
||||
}
|
||||
|
||||
.hb-notebook-heading {
|
||||
@apply space-y-1;
|
||||
}
|
||||
|
||||
.hb-notebook-title {
|
||||
@apply text-lg font-semibold text-zinc-900 dark:text-white tracking-tight;
|
||||
}
|
||||
|
||||
.hb-notebook-subtitle {
|
||||
@apply text-sm font-medium text-zinc-500 dark:text-zinc-400;
|
||||
}
|
||||
|
||||
.hb-notebook-download {
|
||||
@apply inline-flex items-center gap-2 rounded-full border border-primary-500/70 px-4 py-2 text-sm font-medium text-primary-600 no-underline transition-all duration-200;
|
||||
@apply hover:-translate-y-0.5 hover:bg-primary-50/60 hover:text-primary-700 dark:text-primary-300 dark:border-primary-400/60 dark:hover:bg-primary-500/10;
|
||||
}
|
||||
|
||||
.hb-notebook-download svg {
|
||||
@apply h-4 w-4;
|
||||
}
|
||||
|
||||
.hb-notebook-metadata {
|
||||
@apply mt-4 grid gap-3 rounded-2xl border border-dashed border-zinc-200/70 px-4 py-3 text-sm;
|
||||
@apply dark:border-zinc-800/70;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
}
|
||||
|
||||
.hb-notebook-metadata dt {
|
||||
@apply text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400;
|
||||
}
|
||||
|
||||
.hb-notebook-metadata dd {
|
||||
@apply font-medium text-zinc-800 dark:text-zinc-100;
|
||||
}
|
||||
|
||||
.hb-notebook-body {
|
||||
@apply mt-6 flex flex-col gap-5;
|
||||
}
|
||||
|
||||
.hb-notebook-cell {
|
||||
@apply rounded-2xl border border-zinc-200/70 bg-white p-4 shadow-sm shadow-zinc-200/60 transition-all duration-200;
|
||||
@apply dark:border-zinc-800/60 dark:bg-zinc-900/70 dark:shadow-none;
|
||||
}
|
||||
|
||||
.hb-notebook-cell--markdown {
|
||||
@apply bg-gradient-to-br from-white via-white to-primary-50/40 dark:from-zinc-900 dark:via-zinc-900 dark:to-primary-900/10;
|
||||
}
|
||||
|
||||
.hb-notebook-cell-header {
|
||||
@apply mb-3 flex flex-wrap items-center gap-3;
|
||||
}
|
||||
|
||||
.hb-notebook-pill {
|
||||
@apply inline-flex items-center rounded-full bg-zinc-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-zinc-600;
|
||||
@apply dark:bg-zinc-800 dark:text-zinc-300;
|
||||
}
|
||||
|
||||
.hb-notebook-tags {
|
||||
@apply flex flex-wrap gap-1;
|
||||
}
|
||||
|
||||
.hb-notebook-tags span {
|
||||
@apply inline-flex items-center rounded-full bg-primary-100/80 px-2 py-0.5 text-[11px] font-medium text-primary-700;
|
||||
@apply dark:bg-primary-400/20 dark:text-primary-200;
|
||||
}
|
||||
|
||||
.hb-notebook-code {
|
||||
@apply overflow-hidden rounded-2xl border border-zinc-900/10 bg-zinc-950/95 shadow-inner shadow-black/30;
|
||||
}
|
||||
|
||||
.hb-notebook-code pre {
|
||||
@apply m-0 overflow-auto rounded-2xl p-5 text-sm leading-relaxed;
|
||||
}
|
||||
|
||||
.hb-notebook-markdown {
|
||||
@apply prose-h1:text-2xl prose-h2:text-xl prose-p:leading-relaxed prose-a:text-primary-600 max-w-none;
|
||||
}
|
||||
|
||||
.hb-notebook-raw {
|
||||
@apply rounded-xl border border-dashed border-zinc-300/80 bg-zinc-50 p-4 font-mono text-sm text-zinc-700;
|
||||
@apply dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 overflow-auto;
|
||||
}
|
||||
|
||||
.hb-notebook-outputs {
|
||||
@apply mt-4 space-y-3 rounded-2xl border border-zinc-100/80 bg-zinc-50/80 p-4;
|
||||
@apply dark:border-zinc-800/60 dark:bg-zinc-900/50;
|
||||
}
|
||||
|
||||
.hb-notebook-output {
|
||||
@apply overflow-auto rounded-xl border border-transparent bg-white/90 p-3 text-sm leading-relaxed text-zinc-700;
|
||||
@apply dark:bg-zinc-950/50 dark:text-zinc-100;
|
||||
max-height: var(--hb-notebook-output-max-height, 26rem);
|
||||
}
|
||||
|
||||
.hb-notebook-output--stream {
|
||||
@apply font-mono bg-zinc-900 text-zinc-100;
|
||||
}
|
||||
|
||||
.hb-notebook-output--error {
|
||||
@apply border-red-200 bg-red-50/90 text-red-700 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-200;
|
||||
}
|
||||
|
||||
.hb-notebook-output--image {
|
||||
@apply bg-transparent p-0 border-none;
|
||||
}
|
||||
|
||||
.hb-notebook-output--image img,
|
||||
.hb-notebook-output--image svg {
|
||||
@apply h-auto w-full rounded-xl border border-zinc-100/80 bg-white object-contain dark:border-zinc-800/60 dark:bg-zinc-900;
|
||||
}
|
||||
|
||||
.hb-notebook-output--markdown {
|
||||
@apply bg-transparent p-0 border-none;
|
||||
}
|
||||
|
||||
.hb-notebook-output pre {
|
||||
@apply m-0;
|
||||
}
|
||||
|
||||
.hb-notebook-output code {
|
||||
@apply font-mono text-sm;
|
||||
}
|
||||
|
||||
.hb-notebook-empty {
|
||||
@apply mt-4 rounded-2xl border border-dashed border-zinc-300/70 bg-zinc-50/80 px-4 py-3 text-center text-sm text-zinc-500;
|
||||
@apply dark:border-zinc-700 dark:bg-zinc-900/40 dark:text-zinc-300;
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
/* Page layout to push footer to bottom of page */
|
||||
|
||||
.page-wrapper {
|
||||
/* Min height = viewport height - navbar height */
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
|
||||
.page-header,
|
||||
.page-footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.article-header {
|
||||
position: relative; /* Required for caption positioning */
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.article-banner {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
object-fit: cover;
|
||||
|
||||
/* @include media-breakpoint-up(lg) { */
|
||||
/* height: 310px; !* Increased height on desktop *! */
|
||||
/* } */
|
||||
}
|
||||
|
||||
.featured-image-wrapper {
|
||||
position: relative;
|
||||
padding-left: 0; /* Override container padding. */
|
||||
padding-right: 0; /* Override container padding. */
|
||||
}
|
||||
|
||||
.featured-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.article-header-caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
padding: 2px 5px;
|
||||
color: #fff;
|
||||
font-size: 0.7em;
|
||||
background: #000;
|
||||
text-align: right;
|
||||
z-index: 5;
|
||||
opacity: 0.65;
|
||||
border-radius: 5px 0 0;
|
||||
}
|
||||
|
||||
@media (min-width: 64em) {
|
||||
.article-header-caption {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.article-header-caption a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#page-bg {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.backlink {
|
||||
@apply text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50;
|
||||
}
|
||||
|
||||
/* For ToC shortcode, Spoiler shortcode, and direct HTML Details snippets. */
|
||||
details > summary {
|
||||
@apply cursor-pointer font-semibold;
|
||||
|
||||
color: var(--color-primary-700);
|
||||
}
|
||||
|
||||
.dark details > summary {
|
||||
color: var(--color-primary-300);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
/* Match Tailwind lg (default 1024px): https://tailwindcss.com/docs/screens */
|
||||
@media (max-width: 1024px) {
|
||||
.hb-sidebar-container {
|
||||
@apply fixed top-0 w-full bottom-0 z-[15] pt-[calc(var(--navbar-height))] overscroll-contain;
|
||||
|
||||
contain: layout style;
|
||||
transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
|
||||
will-change: transform, opacity;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.hb-sidebar-container {
|
||||
@apply flex flex-col print:hidden lg:top-16 lg:shrink-0 lg:w-64 lg:self-start;
|
||||
|
||||
li > div {
|
||||
@apply h-0;
|
||||
}
|
||||
|
||||
li.open > div {
|
||||
@apply h-auto pt-1;
|
||||
}
|
||||
|
||||
li.open > a > span > svg > path {
|
||||
@apply rotate-90;
|
||||
}
|
||||
}
|
||||
|
||||
.hb-sidebar-list {
|
||||
@apply relative flex flex-col gap-1 before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:ml-3 ltr:pl-3 ltr:before:left-0 rtl:mr-3 rtl:pr-3 rtl:before:right-0;
|
||||
}
|
||||
|
||||
.hb-sidebar-list::before {
|
||||
background-color: var(--color-neutral-200);
|
||||
}
|
||||
|
||||
.dark .hb-sidebar-list::before {
|
||||
background-color: var(--color-neutral-700);
|
||||
}
|
||||
|
||||
.hb-scrollbar {
|
||||
@apply overflow-y-auto overflow-x-hidden p-4 grow;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: oklch(55.55% 0 0 / 40%) transparent;
|
||||
scrollbar-gutter: stable;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
@apply w-3 h-3;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
@apply rounded-[10px];
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
border: 3px solid transparent;
|
||||
background-color: var(--tw-shadow-color);
|
||||
background-clip: content-box;
|
||||
@apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
|
||||
}
|
||||
}
|
||||
|
||||
.hb-docs-link {
|
||||
@apply flex rounded px-2 py-1.5 text-sm transition-colors [word-break:break-word] cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] gap-2 before:opacity-25 before:content-['#'] text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50;
|
||||
}
|
||||
|
||||
.dark .hb-docs-link:hover {
|
||||
background-color: color-mix(in oklch, var(--color-primary-100) 5%, transparent);
|
||||
}
|
||||
|
||||
.hb-sidebar-mobile-menu {
|
||||
@apply [transition:background-color_0.5s_ease];
|
||||
}
|
||||
|
||||
.hb-sidebar-mobile-toc {
|
||||
@apply flex flex-col gap-1 relative before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:pl-3 ltr:before:left-0 rtl:pr-3 rtl:before:right-0 ltr:ml-3 rtl:mr-3;
|
||||
}
|
||||
|
||||
.hb-sidebar-mobile-toc::before {
|
||||
background-color: var(--color-neutral-200);
|
||||
}
|
||||
|
||||
.dark .hb-sidebar-mobile-toc::before {
|
||||
background-color: var(--color-neutral-800);
|
||||
}
|
||||
|
||||
.hb-sidebar-custom-link {
|
||||
@apply flex items-center justify-between gap-2 cursor-pointer rounded px-2 py-1.5 text-sm transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word];
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.hb-steps {
|
||||
@apply ml-4 mb-12 pl-6 border-l border-gray-200 [counter-reset:hb_step];
|
||||
|
||||
border-left-color: var(--color-neutral-200);
|
||||
}
|
||||
|
||||
.dark .hb-steps {
|
||||
border-left-color: var(--color-neutral-600);
|
||||
}
|
||||
|
||||
.hb-steps h3 {
|
||||
counter-increment: hb-step;
|
||||
|
||||
&::before {
|
||||
@apply absolute w-[33px] h-[33px];
|
||||
@apply rounded-full border-4 border-white dark:border-slate-300;
|
||||
@apply bg-gray-100 dark:bg-hb-dark;
|
||||
@apply text-base font-normal text-center -indent-px;
|
||||
@apply mt-[3px] ml-[-41px];
|
||||
|
||||
color: var(--color-neutral-700);
|
||||
content: counter(hb-step);
|
||||
}
|
||||
}
|
||||
|
||||
.dark .hb-steps h3::before {
|
||||
color: var(--color-neutral-200);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
/* Hugo Blox Builder - https://hugoblox.com
|
||||
* Task List Component
|
||||
* License: https://github.com/HugoBlox/kit/blob/main/LICENSE.md
|
||||
*/
|
||||
|
||||
ul.task-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.task-list li input[type="checkbox"] {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
ul.task-list input[type="checkbox"]:checked {
|
||||
appearance: none;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border: none;
|
||||
background: initial;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.task-list input[type="checkbox"]:not(:checked) {
|
||||
width: 0.9em;
|
||||
height: 0.9em;
|
||||
}
|
||||
|
||||
ul.task-list input[type="checkbox"]:checked::after {
|
||||
content: "✅";
|
||||
}
|
||||
Reference in new issue
Block a user