second commit

This commit is contained in:
Daniel Esteban 2026-03-31 10:11:40 +02:00
parent 5c0edd4505
commit 9b4cdf1e3c
536 changed files with 75211 additions and 3 deletions

View file

@ -0,0 +1,4 @@
module:
mounts:
- source: layouts
target: layouts

View file

@ -0,0 +1,9 @@
{{/* HUGO BLOX: MARKETING MODULE */}}
{{/* VERIFICATIONS */}}
{{ partial "blox-analytics/verification" . }}
{{/* ANALYTICS */}}
{{ partial "blox-analytics/services/index" . }}

View file

@ -0,0 +1,13 @@
{{ $baidu_tongji := site.Params.hugoblox.analytics.baidu.site_id | default "" }}
{{ if hugo.IsProduction | and $baidu_tongji }}
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?{{ $baidu_tongji }}";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
{{ end }}

View file

@ -0,0 +1,5 @@
{{ $fathom := site.Params.hugoblox.analytics.fathom.site_id | default "" }}
{{ if hugo.IsProduction | and $fathom }}
<script src="https://cdn.usefathom.com/script.js" data-site="{{$fathom}}" defer></script>
{{ end }}

View file

@ -0,0 +1,42 @@
{{ $ga := site.Params.hugoblox.analytics.google.measurement_id | default "" }}
{{ if hugo.IsProduction | and $ga }}
{{ $gtag_config := cond (site.Params.hugoblox.privacy.anonymize_analytics | default true) "{ 'anonymize_ip': true }" "{}" }}
<script async src="https://www.googletagmanager.com/gtag/js?id={{$ga}}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
function trackOutboundLink(url, target) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': url,
'transport_type': 'beacon',
'event_callback': function () {
if (target !== '_blank') {
document.location = url;
}
}
});
console.debug("Outbound link clicked: " + url);
}
function onClickCallback(event) {
if ((event.target.tagName !== 'A') || (event.target.host === window.location.host)) {
return;
}
trackOutboundLink(event.target, event.target.getAttribute('target')); // Send GA event.
}
gtag('js', new Date());
gtag('config', '{{$ga}}', {{$gtag_config|safeJS}});
gtag('set', {'cookie_flags': 'SameSite=None;Secure'});
// Outbound link tracking.
document.addEventListener('click', onClickCallback, false);
</script>
{{ end }}

View file

@ -0,0 +1,10 @@
{{ $gt := site.Params.hugoblox.analytics.google_tag_manager.container_id | default "" }}
{{ if hugo.IsProduction | and $gt }}
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','{{$gt}}');
</script>
{{ end }}

View file

@ -0,0 +1,7 @@
{{ partial "blox-analytics/services/google_analytics" . }}
{{ partial "blox-analytics/services/google_tag_manager" . }}
{{ partial "blox-analytics/services/microsoft_clarity" . }}
{{ partial "blox-analytics/services/baidu_tongji" . }}
{{ partial "blox-analytics/services/plausible" . }}
{{ partial "blox-analytics/services/fathom" . }}
{{ partial "blox-analytics/services/pirsch" . }}

View file

@ -0,0 +1,10 @@
{{ $clarity := site.Params.hugoblox.analytics.clarity.project_id | default "" }}
{{ if hugo.IsProduction | and $clarity }}
<script>
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", '{{$clarity}}');
</script>
{{ end }}

View file

@ -0,0 +1,5 @@
{{ $pirsch := site.Params.hugoblox.analytics.pirsch.site_id | default "" }}
{{ if hugo.IsProduction | and $pirsch }}
<script defer src="https://api.pirsch.io/pirsch.js" id="pirschjs" data-code="{{$pirsch}}"></script>
{{ end }}

View file

@ -0,0 +1,5 @@
{{ $plausible := site.Params.hugoblox.analytics.plausible.domain | default "" }}
{{ if hugo.IsProduction | and $plausible }}
<script defer data-domain="{{$plausible}}" src="https://plausible.io/js/script.js"></script>
{{ end }}

View file

@ -0,0 +1,25 @@
{{/* Site Verification with Third Party Services */}}
{{- with site.Params.hugoblox.verification.google -}}
<meta name="google-site-verification" content="{{ . }}" />
{{- end -}}
{{- with site.Params.hugoblox.verification.bing -}}
<meta name="msvalidate.01" content="{{ . }}" />
{{- end -}}
{{- with site.Params.hugoblox.verification.yandex -}}
<meta name="yandex-verification" content="{{ . }}" />
{{- end -}}
{{- with site.Params.hugoblox.verification.pinterest -}}
<meta name="p:domain_verify" content="{{ . }}" />
{{- end -}}
{{- with site.Params.hugoblox.verification.baidu -}}
<meta name="baidu-site-verification" content="{{ . }}" />
{{- end -}}
{{ with site.Params.hugoblox.verification.naver }}
<meta name="naver-site-verification" content="{{ . }}" />
{{- end -}}

View file

@ -0,0 +1,45 @@
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: false
# Summary for SEO
summary: ""
# Mark this as an FAQ page to enable FAQPage structured data
faq_page: true
# Categories and tags
categories: []
tags: []
# Pagefind search metadata (automatically indexed)
# type: faq (auto-added by layout)
# category: first category from categories array above
# Option 1: Define FAQs inline
faqs:
- question: "What is your question here?"
answer: "Your answer here. Can use **Markdown** formatting."
- question: "Another question?"
answer: "Another answer with more details."
# Add more Q&As as needed
# Option 2: Alternatively, create child pages under this FAQ section
# and they will automatically be included
# SEO settings
seo:
title: ""
description: ""
# Show breadcrumb navigation
show_breadcrumb: true
---
Add an introductory text here that will appear before the FAQ accordion.
This is a great place to provide context about the FAQ section.

View file

@ -0,0 +1,62 @@
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: false
# The question (can also use title)
question: "{{ replace .Name "-" " " | title }}"
# Short answer (optional - can also use content below)
answer: ""
# Summary for SEO and previews
summary: ""
# Difficulty level (optional)
difficulty: "" # e.g., "Beginner", "Intermediate", "Advanced"
# Categories and tags for organization
categories: []
tags: []
# Pagefind search metadata (automatically indexed)
# type: questions (auto-added by layout)
# category: first category from categories array above
# difficulty: value from difficulty field below
# Vote counts (optional - for display and structured data)
upvote_count: 0
downvote_count: 0
# Additional/suggested answers (optional)
# suggested_answer:
# - text: "Alternative answer text here..."
# author: "Author Name"
# date: 2024-01-15
# upvote_count: 5
# Related questions (optional - can also be auto-generated)
# related:
# - link-to-related-question
# SEO settings
seo:
title: ""
description: ""
# Show breadcrumb navigation
show_breadcrumb: true
---
Write your detailed answer here using Markdown.
You can include:
- Code blocks
- Images
- Lists
- Links
- And more!
## Additional Details
Add sections as needed to provide comprehensive information.

View file

@ -0,0 +1,99 @@
# Hugo Blox Tailwind CSS v4 Color System
## Architecture Overview
This system leverages Tailwind CSS v4's automatic utility generation to provide a comprehensive color system with minimal code.
### How It Works
1. **Theme Configuration** (`config/theme.css`)
- Colors defined in `@theme` block automatically generate ALL utilities
- Includes standard Tailwind colors: gray, slate, zinc, neutral, stone
- Includes themeable colors: primary, secondary
2. **Theme Files** (`themes/*.css`)
- Small files that override `--color-primary-*` and `--color-secondary-*` variables
- Users switch themes by loading different theme CSS files
- No utilities redefined - just color values changed
3. **Custom Utilities** (`color-utilities.css`)
- Only 42 lines vs previous 1,228 lines!
- Contains only custom colors not auto-generated (like `hb-dark`)
### Available Colors
**Standard Colors (always available):**
- `gray-*` - Neutral grays
- `slate-*` - Cool grays
- `zinc-*` - True grays
- `neutral-*` - Pure grays
- `stone-*` - Warm grays
**Themeable Colors (vary by theme):**
- `primary-*` - Main theme color
- `secondary-*` - Accent theme color
**Custom Colors:**
- `hb-dark` - Hugo Blox brand dark color
### Auto-Generated Utilities
For every color defined in `@theme`, Tailwind automatically creates:
- Background: `bg-{color}-{shade}`
- Text: `text-{color}-{shade}`
- Border: `border-{color}-{shade}`
- Hover: `hover:bg-{color}-{shade}`, `hover:text-{color}-{shade}`
- Dark mode: `dark:bg-{color}-{shade}`, `dark:text-{color}-{shade}`
- Gradients: `from-{color}-{shade}`, `to-{color}-{shade}`
- Focus rings: `focus:ring-{color}-{shade}`
- All other Tailwind color variants
### Shades Available
All colors include 11 shades: `50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950`
### Usage Examples
```html
<!-- Standard colors (always available) -->
<div class="bg-gray-100 dark:bg-gray-800">...</div>
<div class="text-slate-700 hover:text-slate-900">...</div>
<!-- Themeable colors (change with theme) -->
<div class="bg-primary-500 hover:bg-primary-600">...</div>
<div class="bg-gradient-to-r from-primary-600 to-secondary-600">...</div>
<!-- Custom colors -->
<div class="bg-hb-dark text-white">...</div>
```
### Benefits
1. **Dramatically Reduced File Size**: 1,228 lines → 42 lines (97% reduction!)
2. **Automatic Generation**: No manual utility definitions needed
3. **Maintainable**: Add new colors just by defining them in `@theme`
4. **Consistent**: All Tailwind variants automatically available
5. **Themeable**: Easy theme switching via CSS variable overrides
### Adding New Colors
To add a new color scale:
1. Define in `config/theme.css`:
```css
--color-brand-500: 59 130 246;
--color-brand-600: 37 99 235;
/* etc. */
```
2. Tailwind automatically generates all utilities:
- `bg-brand-500`, `text-brand-600`, `hover:bg-brand-500`, etc.
No manual utility definitions required!

View file

@ -0,0 +1,256 @@
/**
* Hugo Blox Animations
* Scroll-triggered reveals and micro-interactions
*/
/* Typewriter cursor */
.typewriter-cursor {
display: inline-block;
width: 3px;
margin-left: 2px;
background-color: currentColor;
animation: blink 1s step-end infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
/* Reveal animations base */
[x-reveal] {
opacity: 0;
}
/* Stagger container */
[data-stagger] > [data-stagger-item] {
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.5s ease-out,
transform 0.5s ease-out;
}
[data-stagger].revealed > [data-stagger-item] {
opacity: 1;
transform: translateY(0);
}
/* Hover enhancements for cards */
.card-hover-lift {
transition:
transform 0.3s ease-out,
box-shadow 0.3s ease-out;
}
.card-hover-lift:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.3);
}
/* Hover glow effect */
.hover-glow {
position: relative;
transition: all 0.3s ease-out;
}
.hover-glow::before {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
opacity: 0;
z-index: -1;
transition: opacity 0.3s ease-out;
filter: blur(8px);
}
.hover-glow:hover::before {
opacity: 0.5;
}
/* Icon bounce on hover */
.icon-bounce:hover {
animation: iconBounce 0.5s ease-out;
}
@keyframes iconBounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
/* Scale up on hover */
.scale-hover {
transition: transform 0.2s ease-out;
}
.scale-hover:hover {
transform: scale(1.05);
}
/* Button pulse */
.btn-pulse {
position: relative;
}
.btn-pulse::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 0 0 currentColor;
opacity: 0.4;
animation: pulse-ring 2s infinite;
}
@keyframes pulse-ring {
0% {
box-shadow: 0 0 0 0 currentColor;
opacity: 0.4;
}
100% {
box-shadow: 0 0 0 12px currentColor;
opacity: 0;
}
}
/* Float animation for background orbs */
@keyframes float {
0%,
100% {
transform: translateY(0) translateX(0);
}
25% {
transform: translateY(-20px) translateX(10px);
}
50% {
transform: translateY(-10px) translateX(-10px);
}
75% {
transform: translateY(-30px) translateX(5px);
}
}
.animate-float {
animation: float 8s ease-in-out infinite;
}
/* Slow rotate for decorative elements */
@keyframes rotate-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-rotate-slow {
animation: rotate-slow 30s linear infinite;
}
/* Fade in up - for scroll reveals */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-up {
animation: fadeInUp 0.6s ease-out forwards;
}
/* Scale in - for icons/badges */
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
.animate-scale-in {
animation: scaleIn 0.4s ease-out forwards;
}
/* Slide in from left */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.animate-slide-in-left {
animation: slideInLeft 0.5s ease-out forwards;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms;
animation-iteration-count: 1;
transition-duration: 0.01ms;
}
.typewriter-cursor {
animation: none;
opacity: 1;
}
[x-reveal],
[data-stagger] > [data-stagger-item] {
opacity: 1;
transform: none;
}
}
/* Dark mode adjustments */
.dark .hover-glow::before {
opacity: 0;
}
.dark .hover-glow:hover::before {
opacity: 0.3;
}
/* Dark mode icon visibility fix */
/* For icons that are dark/black and invisible on dark backgrounds */
.dark .dark-mode-icon svg,
.dark .dark-mode-icon img {
filter: invert(1) brightness(2);
}
/* Alternative: Add subtle background to icon containers */
.dark .dark-mode-icon {
background: rgba(255, 255, 255, 0.08);
border-radius: 0.5rem;
padding: 0.25rem;
}
/* Hover state restores some contrast */
.dark .group:hover .dark-mode-icon svg,
.dark .group:hover .dark-mode-icon img {
filter: invert(1) brightness(1.5);
}

View file

@ -0,0 +1,27 @@
@import "./libs/chroma/light.css";
@import "./libs/chroma/dark.css";
/* Code Blocks: Apply theme background */
/* Requires relative position for Code Copy button */
.prose .chroma,
.prose pre {
@apply relative rounded-md;
color: var(--color-neutral-700);
background-color: var(--color-neutral-50);
}
.dark .prose .chroma,
.dark .prose pre {
color: white;
background-color: rgb(71 85 105); /* slate-700 equivalent */
}
/* Fix LaTeX/TeX math rendering in code blocks - prevent inheriting italic from Chroma in dark mode */
.chroma .language-latex,
.chroma .language-latex *,
.chroma .language-tex,
.chroma .language-tex * {
/* biome-ignore lint/complexity/noImportantStyles: Required to override Chroma's default italic for LaTeX/TeX */
font-style: normal !important;
}

View file

@ -0,0 +1,47 @@
/* Hugo Blox Custom Color Utilities for Tailwind v4 */
/*
* Standard color utilities (bg-*, text-*, border-*, hover:*, dark:*, from-*, to-*, etc.)
* are automatically generated by Tailwind v4 from colors defined in @theme block.
*
* This file only contains custom utilities not auto-generated by Tailwind.
*/
@layer utilities {
/* Custom Hugo Blox Dark Color */
.bg-hb-dark {
background-color: var(--color-hb-dark, rgb(23 24 28));
}
.text-hb-dark {
color: var(--color-hb-dark, rgb(23 24 28));
}
.border-hb-dark {
border-color: var(--color-hb-dark, rgb(23 24 28));
}
/* Dark mode variants */
.dark\:bg-hb-dark:where(.dark, .dark *) {
background-color: var(--color-hb-dark, rgb(23 24 28));
}
.dark\:text-hb-dark:where(.dark, .dark *) {
color: var(--color-hb-dark, rgb(23 24 28));
}
}
/*
* Available Auto-Generated Utilities (from @theme colors):
*
* Standard Colors: gray, slate, zinc, neutral, stone
* Theme Colors: primary, secondary (overridden by theme files)
*
* Auto-generated utilities include:
* - Background: .bg-{color}-{shade}
* - Text: .text-{color}-{shade}
* - Border: .border-{color}-{shade}
* - Hover: .hover:bg-{color}-{shade}, .hover:text-{color}-{shade}
* - Dark: .dark:bg-{color}-{shade}, .dark:text-{color}-{shade}
* - Gradients: .from-{color}-{shade}, .to-{color}-{shade}
* - Focus: .focus:ring-{color}-{shade}
* - And all other Tailwind color variants
*
* Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
*/

View file

@ -0,0 +1,13 @@
@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";
@import "navbar.css";

View file

@ -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;
}
}

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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);
}

View file

@ -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;
}
}

View file

@ -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);
}

View file

@ -0,0 +1,4 @@
/* Prevent long equations overflowing on small screens by scrolling horizontally instead. */
.katex-display {
overflow: auto hidden;
}

View file

@ -0,0 +1,110 @@
/* 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);
}

View file

@ -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;
}

View file

@ -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);
}

View file

@ -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];
}

View file

@ -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);
}

View file

@ -0,0 +1,30 @@
/* HugoBlox Kit - 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: "✅";
}

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,24 @@
/* Tailwind CSS v4 Configuration */
/* Content detection and plugin configuration */
/* Typography plugin for prose styles */
@plugin "@tailwindcss/typography";
/* Content detection sources */
/* Note: @source is a Tailwind v4 directive - linters may show warnings that can be ignored */
/* Hugo stats file contains all detected classes from templates */
@source "hugo_stats.json";
/* Custom Variants Configuration */
/* Configure dark mode to use class strategy */
@custom-variant dark (&:where(.dark, .dark *));
/* Configure hover to work on all devices (like v3 behavior) */
@custom-variant hover (&:hover);
/* Dark mode configuration */
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
}
}

View file

@ -0,0 +1,358 @@
/* Tailwind CSS v4 Hugo BloxTheme Configuration */
/* Theme Configuration */
@theme {
/* Custom Colors */
--color-hb-dark: rgb(23 24 28);
/* Standard Tailwind Color Scales - Provide variables as valid CSS colors */
/* Gray */
--color-gray-50: rgb(249 250 251);
--color-gray-100: rgb(243 244 246);
--color-gray-200: rgb(229 231 235);
--color-gray-300: rgb(209 213 219);
--color-gray-400: rgb(156 163 175);
--color-gray-500: rgb(107 114 128);
--color-gray-600: rgb(75 85 99);
--color-gray-700: rgb(55 65 81);
--color-gray-800: rgb(31 41 55);
--color-gray-900: rgb(17 24 39);
--color-gray-950: rgb(3 7 18);
/* Slate */
--color-slate-50: rgb(248 250 252);
--color-slate-100: rgb(241 245 249);
--color-slate-200: rgb(226 232 240);
--color-slate-300: rgb(203 213 225);
--color-slate-400: rgb(148 163 184);
--color-slate-500: rgb(100 116 139);
--color-slate-600: rgb(71 85 105);
--color-slate-700: rgb(51 65 85);
--color-slate-800: rgb(30 41 59);
--color-slate-900: rgb(15 23 42);
--color-slate-950: rgb(2 6 23);
/* Zinc */
--color-zinc-50: rgb(250 250 250);
--color-zinc-100: rgb(244 244 245);
--color-zinc-200: rgb(228 228 231);
--color-zinc-300: rgb(212 212 216);
--color-zinc-400: rgb(161 161 170);
--color-zinc-500: rgb(113 113 122);
--color-zinc-600: rgb(82 82 91);
--color-zinc-700: rgb(63 63 70);
--color-zinc-800: rgb(39 39 42);
--color-zinc-900: rgb(24 24 27);
--color-zinc-950: rgb(9 9 11);
/* Neutral */
--color-neutral-50: rgb(250 250 250);
--color-neutral-100: rgb(245 245 245);
--color-neutral-200: rgb(229 229 229);
--color-neutral-300: rgb(212 212 212);
--color-neutral-400: rgb(163 163 163);
--color-neutral-500: rgb(115 115 115);
--color-neutral-600: rgb(82 82 82);
--color-neutral-700: rgb(64 64 64);
--color-neutral-800: rgb(38 38 38);
--color-neutral-900: rgb(23 23 23);
--color-neutral-950: rgb(10 10 10);
/* Stone */
--color-stone-50: rgb(250 250 249);
--color-stone-100: rgb(245 245 244);
--color-stone-200: rgb(231 229 228);
--color-stone-300: rgb(214 211 209);
--color-stone-400: rgb(168 162 158);
--color-stone-500: rgb(120 113 108);
--color-stone-600: rgb(87 83 78);
--color-stone-700: rgb(68 64 60);
--color-stone-800: rgb(41 37 36);
--color-stone-900: rgb(28 25 23);
--color-stone-950: rgb(12 10 9);
/* Red */
--color-red-50: rgb(254 242 242);
--color-red-100: rgb(254 226 226);
--color-red-200: rgb(254 202 202);
--color-red-300: rgb(252 165 165);
--color-red-400: rgb(248 113 113);
--color-red-500: rgb(239 68 68);
--color-red-600: rgb(220 38 38);
--color-red-700: rgb(185 28 28);
--color-red-800: rgb(153 27 27);
--color-red-900: rgb(127 29 29);
--color-red-950: rgb(69 10 10);
/* Orange */
--color-orange-50: rgb(255 247 237);
--color-orange-100: rgb(255 237 213);
--color-orange-200: rgb(254 215 170);
--color-orange-300: rgb(253 186 116);
--color-orange-400: rgb(251 146 60);
--color-orange-500: rgb(249 115 22);
--color-orange-600: rgb(234 88 12);
--color-orange-700: rgb(194 65 12);
--color-orange-800: rgb(154 52 18);
--color-orange-900: rgb(124 45 18);
--color-orange-950: rgb(67 20 7);
/* Amber */
--color-amber-50: rgb(255 251 235);
--color-amber-100: rgb(254 243 199);
--color-amber-200: rgb(253 230 138);
--color-amber-300: rgb(252 211 77);
--color-amber-400: rgb(251 191 36);
--color-amber-500: rgb(245 158 11);
--color-amber-600: rgb(217 119 6);
--color-amber-700: rgb(180 83 9);
--color-amber-800: rgb(146 64 14);
--color-amber-900: rgb(120 53 15);
--color-amber-950: rgb(69 26 3);
/* Yellow */
--color-yellow-50: rgb(254 252 232);
--color-yellow-100: rgb(254 249 195);
--color-yellow-200: rgb(254 240 138);
--color-yellow-300: rgb(253 224 71);
--color-yellow-400: rgb(250 204 21);
--color-yellow-500: rgb(234 179 8);
--color-yellow-600: rgb(202 138 4);
--color-yellow-700: rgb(161 98 7);
--color-yellow-800: rgb(133 77 14);
--color-yellow-900: rgb(113 63 18);
--color-yellow-950: rgb(66 32 6);
/* Lime */
--color-lime-50: rgb(247 254 231);
--color-lime-100: rgb(236 252 203);
--color-lime-200: rgb(217 249 157);
--color-lime-300: rgb(190 242 100);
--color-lime-400: rgb(163 230 53);
--color-lime-500: rgb(132 204 22);
--color-lime-600: rgb(101 163 13);
--color-lime-700: rgb(77 124 15);
--color-lime-800: rgb(63 98 18);
--color-lime-900: rgb(54 83 20);
--color-lime-950: rgb(26 46 5);
/* Green */
--color-green-50: rgb(240 253 244);
--color-green-100: rgb(220 252 231);
--color-green-200: rgb(187 247 208);
--color-green-300: rgb(134 239 172);
--color-green-400: rgb(74 222 128);
--color-green-500: rgb(34 197 94);
--color-green-600: rgb(22 163 74);
--color-green-700: rgb(21 128 61);
--color-green-800: rgb(22 101 52);
--color-green-900: rgb(20 83 45);
--color-green-950: rgb(5 46 22);
/* Emerald */
--color-emerald-50: rgb(236 253 245);
--color-emerald-100: rgb(209 250 229);
--color-emerald-200: rgb(167 243 208);
--color-emerald-300: rgb(110 231 183);
--color-emerald-400: rgb(52 211 153);
--color-emerald-500: rgb(16 185 129);
--color-emerald-600: rgb(5 150 105);
--color-emerald-700: rgb(4 120 87);
--color-emerald-800: rgb(6 95 70);
--color-emerald-900: rgb(6 78 59);
--color-emerald-950: rgb(2 44 34);
/* Teal */
--color-teal-50: rgb(240 253 250);
--color-teal-100: rgb(204 251 241);
--color-teal-200: rgb(153 246 228);
--color-teal-300: rgb(94 234 212);
--color-teal-400: rgb(45 212 191);
--color-teal-500: rgb(20 184 166);
--color-teal-600: rgb(13 148 136);
--color-teal-700: rgb(15 118 110);
--color-teal-800: rgb(17 94 89);
--color-teal-900: rgb(19 78 74);
--color-teal-950: rgb(4 47 46);
/* Cyan */
--color-cyan-50: rgb(236 254 255);
--color-cyan-100: rgb(207 250 254);
--color-cyan-200: rgb(165 243 252);
--color-cyan-300: rgb(103 232 249);
--color-cyan-400: rgb(34 211 238);
--color-cyan-500: rgb(6 182 212);
--color-cyan-600: rgb(8 145 178);
--color-cyan-700: rgb(14 116 144);
--color-cyan-800: rgb(21 94 117);
--color-cyan-900: rgb(22 78 99);
--color-cyan-950: rgb(8 51 68);
/* Sky */
--color-sky-50: rgb(240 249 255);
--color-sky-100: rgb(224 242 254);
--color-sky-200: rgb(186 230 253);
--color-sky-300: rgb(125 211 252);
--color-sky-400: rgb(56 189 248);
--color-sky-500: rgb(14 165 233);
--color-sky-600: rgb(2 132 199);
--color-sky-700: rgb(3 105 161);
--color-sky-800: rgb(7 89 133);
--color-sky-900: rgb(12 74 110);
--color-sky-950: rgb(8 47 73);
/* Blue */
--color-blue-50: rgb(239 246 255);
--color-blue-100: rgb(219 234 254);
--color-blue-200: rgb(191 219 254);
--color-blue-300: rgb(147 197 253);
--color-blue-400: rgb(96 165 250);
--color-blue-500: rgb(59 130 246);
--color-blue-600: rgb(37 99 235);
--color-blue-700: rgb(29 78 216);
--color-blue-800: rgb(30 64 175);
--color-blue-900: rgb(30 58 138);
--color-blue-950: rgb(23 37 84);
/* Indigo */
--color-indigo-50: rgb(238 242 255);
--color-indigo-100: rgb(224 231 255);
--color-indigo-200: rgb(199 210 254);
--color-indigo-300: rgb(165 180 252);
--color-indigo-400: rgb(129 140 248);
--color-indigo-500: rgb(99 102 241);
--color-indigo-600: rgb(79 70 229);
--color-indigo-700: rgb(67 56 202);
--color-indigo-800: rgb(55 48 163);
--color-indigo-900: rgb(49 46 129);
--color-indigo-950: rgb(30 27 75);
/* Violet */
--color-violet-50: rgb(245 243 255);
--color-violet-100: rgb(237 233 254);
--color-violet-200: rgb(221 214 254);
--color-violet-300: rgb(196 181 253);
--color-violet-400: rgb(167 139 250);
--color-violet-500: rgb(139 92 246);
--color-violet-600: rgb(124 58 237);
--color-violet-700: rgb(109 40 217);
--color-violet-800: rgb(91 33 182);
--color-violet-900: rgb(76 29 149);
--color-violet-950: rgb(46 16 101);
/* Purple */
--color-purple-50: rgb(250 245 255);
--color-purple-100: rgb(243 232 255);
--color-purple-200: rgb(233 213 255);
--color-purple-300: rgb(216 180 254);
--color-purple-400: rgb(192 132 252);
--color-purple-500: rgb(168 85 247);
--color-purple-600: rgb(147 51 234);
--color-purple-700: rgb(126 34 206);
--color-purple-800: rgb(107 33 168);
--color-purple-900: rgb(88 28 135);
--color-purple-950: rgb(59 7 100);
/* Fuchsia */
--color-fuchsia-50: rgb(253 244 255);
--color-fuchsia-100: rgb(250 232 255);
--color-fuchsia-200: rgb(245 208 254);
--color-fuchsia-300: rgb(240 171 252);
--color-fuchsia-400: rgb(232 121 249);
--color-fuchsia-500: rgb(217 70 239);
--color-fuchsia-600: rgb(192 38 211);
--color-fuchsia-700: rgb(162 28 175);
--color-fuchsia-800: rgb(134 25 143);
--color-fuchsia-900: rgb(112 26 117);
--color-fuchsia-950: rgb(74 4 78);
/* Pink */
--color-pink-50: rgb(253 242 248);
--color-pink-100: rgb(252 231 243);
--color-pink-200: rgb(251 207 232);
--color-pink-300: rgb(249 168 212);
--color-pink-400: rgb(244 114 182);
--color-pink-500: rgb(236 72 153);
--color-pink-600: rgb(219 39 119);
--color-pink-700: rgb(190 24 93);
--color-pink-800: rgb(157 23 77);
--color-pink-900: rgb(131 24 67);
--color-pink-950: rgb(80 7 36);
/* Rose */
--color-rose-50: rgb(255 241 242);
--color-rose-100: rgb(255 228 230);
--color-rose-200: rgb(254 205 211);
--color-rose-300: rgb(253 164 175);
--color-rose-400: rgb(251 113 133);
--color-rose-500: rgb(244 63 94);
--color-rose-600: rgb(225 29 72);
--color-rose-700: rgb(190 18 60);
--color-rose-800: rgb(159 18 57);
--color-rose-900: rgb(136 19 55);
--color-rose-950: rgb(76 5 25);
/* Themeable Colors */
--color-primary-50: rgb(var(--hb-primary-50-rgb, 239 246 255));
--color-primary-100: rgb(var(--hb-primary-100-rgb, 219 234 254));
--color-primary-200: rgb(var(--hb-primary-200-rgb, 191 219 254));
--color-primary-300: rgb(var(--hb-primary-300-rgb, 147 197 253));
--color-primary-400: rgb(var(--hb-primary-400-rgb, 96 165 250));
--color-primary-500: rgb(var(--hb-primary-500-rgb, 59 130 246));
--color-primary-600: rgb(var(--hb-primary-600-rgb, 37 99 235));
--color-primary-700: rgb(var(--hb-primary-700-rgb, 29 78 216));
--color-primary-800: rgb(var(--hb-primary-800-rgb, 30 64 175));
--color-primary-900: rgb(var(--hb-primary-900-rgb, 30 58 138));
--color-primary-950: rgb(var(--hb-primary-950-rgb, 23 37 84));
/* Semantic UI Colors - Defined in theme_generator.html */
/* Do not redeclare them here to avoid circular references */
--color-secondary-50: rgb(var(--hb-secondary-50-rgb, 236 254 255));
--color-secondary-100: rgb(var(--hb-secondary-100-rgb, 207 250 254));
--color-secondary-200: rgb(var(--hb-secondary-200-rgb, 165 243 252));
--color-secondary-300: rgb(var(--hb-secondary-300-rgb, 103 232 249));
--color-secondary-400: rgb(var(--hb-secondary-400-rgb, 34 211 238));
--color-secondary-500: rgb(var(--hb-secondary-500-rgb, 6 182 212));
--color-secondary-600: rgb(var(--hb-secondary-600-rgb, 8 145 178));
--color-secondary-700: rgb(var(--hb-secondary-700-rgb, 14 116 144));
--color-secondary-800: rgb(var(--hb-secondary-800-rgb, 21 94 117));
--color-secondary-900: rgb(var(--hb-secondary-900-rgb, 22 78 99));
--color-secondary-950: rgb(var(--hb-secondary-950-rgb, 8 51 68));
/* Note: Providing these palettes in @theme ensures theme-pack mappings like var(--color-rose-600) always resolve */
/* Font families */
--hb-font-family-sans: inter var, ui-sans-serif, system-ui, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
--hb-font-heading: var(--hb-font-family-sans);
--hb-font-body: var(--hb-font-family-sans);
--hb-font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--hb-font-nav: var(--hb-font-heading);
/* Font weights */
--hb-font-weight-heading: 700;
--hb-font-weight-body: 400;
--hb-font-weight-body-bold: 600;
/* Line heights */
--hb-font-leading-heading: 1.2;
--hb-font-leading-body: 1.6;
--hb-font-leading-code: 1.5;
/* Letter spacing */
--hb-font-tracking-heading: -0.02em;
--hb-font-tracking-body: 0;
--hb-font-tracking-caps: 0.05em;
/* Font sizes */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
--font-size-6xl: 4rem;
}

View file

@ -0,0 +1,127 @@
/* Base styles for better text rendering */
@layer base {
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility;
/* Apply the runtime font vars injected by Hugo's typography partial */
font-family: var(--hb-font-body);
}
body {
font-family: var(--hb-font-body);
font-weight: var(--hb-font-weight-body, 400);
line-height: var(--hb-font-leading-body, 1.6);
letter-spacing: var(--hb-font-tracking-body, 0);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--hb-font-heading);
font-weight: var(--hb-font-weight-heading, 700);
line-height: var(--hb-font-leading-heading, 1.2);
letter-spacing: var(--hb-font-tracking-heading, -0.02em);
}
code,
pre,
kbd,
samp {
font-family: var(--hb-font-code);
}
}
/* Gradient Mesh Animations */
@keyframes float {
0%,
100% {
transform: translateY(0) translateX(0);
}
25% {
transform: translateY(-20px) translateX(10px);
}
50% {
transform: translateY(-10px) translateX(-10px);
}
75% {
transform: translateY(-30px) translateX(5px);
}
}
@keyframes rotate-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-float {
animation: float 8s ease-in-out infinite;
}
.animate-rotate-slow {
animation: rotate-slow 20s linear infinite;
}
/* Custom utilities and components */
@utility task-list {
list-style: none;
padding-left: 1.5rem;
}
/* Custom typography styles - the plugin handles the base styles */
/* Additional customization for prose elements */
@layer components {
.prose a {
text-decoration: underline;
text-decoration-color: var(--color-primary-300);
font-weight: var(--hb-font-weight-body-bold, 600);
}
.prose a:hover {
color: var(--color-primary-600);
text-decoration: none;
border-radius: 0.09rem;
}
.prose mark {
color: var(--color-neutral-900);
background-color: var(--color-primary-200);
padding: 0.1rem 0.2rem;
border-radius: 0.25rem;
}
.dark .prose-invert a {
text-decoration-color: var(--color-neutral-500);
}
.dark .prose-invert a:hover {
color: var(--color-primary-300);
}
.dark .prose-invert mark {
background-color: var(--color-primary-400);
color: black;
}
/* Inline Code Styling */
.prose code:not(:where(pre *)) {
@apply rounded-md bg-neutral-100 px-1.5 py-0.5 text-[0.875em] font-normal text-primary-700;
@apply dark:bg-neutral-700/50 dark:text-primary-300;
}
.prose code:not(:where(pre *))::before,
.prose code:not(:where(pre *))::after {
content: none;
}
}

View file

@ -0,0 +1,132 @@
/* Hugo Blox Framework Custom Classes */
@layer components {
/* Section styles for Hugo Blox blocks */
.hbb-section {
padding-top: 6rem;
padding-bottom: 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;
}
}

View file

@ -0,0 +1,86 @@
/* Hugo Blox Search - Custom Pagefind Implementation */
/* Animations */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
/* Search result highlights */
.search-result mark {
background-color: rgb(254 240 138);
color: rgb(17 24 39);
font-weight: var(--hb-font-weight-body-bold, 600);
padding: 0.05rem 0.2rem;
border-radius: 0.125rem;
}
.dark .search-result mark {
background-color: rgb(133 77 14);
color: rgb(254 240 138);
}
/* Result hover state */
.search-result:hover mark {
background-color: rgb(253 224 71);
}
.dark .search-result:hover mark {
background-color: rgb(161 98 7);
}
/* Smooth transitions */
.search-modal-enter {
animation: slide-in-up 0.2s ease-out;
}
@keyframes slide-in-up {
from {
opacity: 0;
transform: translateY(1rem) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Loading skeleton */
.search-skeleton {
background: linear-gradient(90deg, rgb(229 231 235) 25%, rgb(243 244 246) 50%, rgb(229 231 235) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
.dark .search-skeleton {
background: linear-gradient(90deg, rgb(55 65 81) 25%, rgb(75 85 99) 50%, rgb(55 65 81) 75%);
background-size: 200% 100%;
}
@keyframes shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Keyboard navigation highlight - handled by Alpine :class binding */
/* Smooth transition for selection state */
.search-result {
transition: all 0.15s ease;
}
/* Additional hover effects for keyboard-selected items */
.search-result:focus-visible {
outline: 2px solid rgb(59 130 246);
outline-offset: -2px;
}

View file

@ -0,0 +1,80 @@
/*
Hugo Blox Layout Utilities
Provides CSS utilities that use the configurable layout tokens:
- --hb-radius: Border radius token
- --hb-spacing-base: Base spacing unit
- --hb-spacing-section: Section padding
- --hb-font-size-base: Base font size
*/
/* Border radius utility - use instead of hardcoded rounded-* classes */
.hb-rounded {
border-radius: var(--hb-radius, 0.5rem);
}
.hb-rounded-sm {
border-radius: calc(var(--hb-radius, 0.5rem) * 0.5);
}
.hb-rounded-lg {
border-radius: calc(var(--hb-radius, 0.5rem) * 1.5);
}
.hb-rounded-xl {
border-radius: calc(var(--hb-radius, 0.5rem) * 2);
}
/* Section spacing */
.hb-section {
padding-top: var(--hb-spacing-section, 4rem);
padding-bottom: var(--hb-spacing-section, 4rem);
}
.hb-section-sm {
padding-top: calc(var(--hb-spacing-section, 4rem) * 0.5);
padding-bottom: calc(var(--hb-spacing-section, 4rem) * 0.5);
}
/* Component spacing */
.hb-gap {
gap: var(--hb-spacing-base, 1rem);
}
.hb-gap-sm {
gap: calc(var(--hb-spacing-base, 1rem) * 0.5);
}
.hb-gap-lg {
gap: calc(var(--hb-spacing-base, 1rem) * 1.5);
}
/* Padding utilities */
.hb-p {
padding: var(--hb-spacing-base, 1rem);
}
.hb-px {
padding-left: var(--hb-spacing-base, 1rem);
padding-right: var(--hb-spacing-base, 1rem);
}
.hb-py {
padding-top: var(--hb-spacing-base, 1rem);
padding-bottom: var(--hb-spacing-base, 1rem);
}
/* Margin utilities */
.hb-m {
margin: var(--hb-spacing-base, 1rem);
}
.hb-mx {
margin-left: var(--hb-spacing-base, 1rem);
margin-right: var(--hb-spacing-base, 1rem);
}
.hb-my {
margin-top: var(--hb-spacing-base, 1rem);
margin-bottom: var(--hb-spacing-base, 1rem);
}

View file

@ -0,0 +1,502 @@
/* Dracula dark theme */
.dark .highlight {
/* Background */ /*.bg { color: #f8f8f2; background-color: #282a36 }*/
/* PreWrapper */ /*.chroma { color: #f8f8f2; background-color: #282a36; }*/
/* Other */
.chroma .x {
}
/* Error */
.chroma .err {
}
/* CodeLine */
.chroma .cl {
}
/* LineTableTD */
.chroma .lntd {
vertical-align: top;
padding: 0;
margin: 0;
border: 0;
}
/* LineTable */
.chroma .lntable {
border-spacing: 0;
padding: 0;
margin: 0;
border: 0;
}
/* LineHighlight */
.chroma .hl {
background-color: #ffc;
}
/* LineNumbersTable */
.chroma .lnt {
white-space: pre;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #7f7f7f;
}
/* LineNumbers */
.chroma .ln {
white-space: pre;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #7f7f7f;
}
/* Line */
.chroma .line {
display: flex;
}
/* Keyword */
.chroma .k {
color: #ff79c6;
}
/* KeywordConstant */
.chroma .kc {
color: #ff79c6;
}
/* KeywordDeclaration */
.chroma .kd {
color: #8be9fd;
font-style: italic;
}
/* KeywordNamespace */
.chroma .kn {
color: #ff79c6;
}
/* KeywordPseudo */
.chroma .kp {
color: #ff79c6;
}
/* KeywordReserved */
.chroma .kr {
color: #ff79c6;
}
/* KeywordType */
.chroma .kt {
color: #8be9fd;
}
/* Name */
.chroma .n {
}
/* NameAttribute */
.chroma .na {
color: #50fa7b;
}
/* NameBuiltin */
.chroma .nb {
color: #8be9fd;
font-style: italic;
}
/* NameBuiltinPseudo */
.chroma .bp {
}
/* NameClass */
.chroma .nc {
color: #50fa7b;
}
/* NameConstant */
.chroma .no {
}
/* NameDecorator */
.chroma .nd {
}
/* NameEntity */
.chroma .ni {
}
/* NameException */
.chroma .ne {
}
/* NameFunction */
.chroma .nf {
color: #50fa7b;
}
/* NameFunctionMagic */
.chroma .fm {
}
/* NameLabel */
.chroma .nl {
color: #8be9fd;
font-style: italic;
}
/* NameNamespace */
.chroma .nn {
}
/* NameOther */
.chroma .nx {
}
/* NameProperty */
.chroma .py {
}
/* NameTag */
.chroma .nt {
color: #ff79c6;
}
/* NameVariable */
.chroma .nv {
color: #8be9fd;
font-style: italic;
}
/* NameVariableClass */
.chroma .vc {
color: #8be9fd;
font-style: italic;
}
/* NameVariableGlobal */
.chroma .vg {
color: #8be9fd;
font-style: italic;
}
/* NameVariableInstance */
.chroma .vi {
color: #8be9fd;
font-style: italic;
}
/* NameVariableMagic */
.chroma .vm {
}
/* Literal */
.chroma .l {
}
/* LiteralDate */
.chroma .ld {
}
/* LiteralString */
.chroma .s {
color: #f1fa8c;
}
/* LiteralStringAffix */
.chroma .sa {
color: #f1fa8c;
}
/* LiteralStringBacktick */
.chroma .sb {
color: #f1fa8c;
}
/* LiteralStringChar */
.chroma .sc {
color: #f1fa8c;
}
/* LiteralStringDelimiter */
.chroma .dl {
color: #f1fa8c;
}
/* LiteralStringDoc */
.chroma .sd {
color: #f1fa8c;
}
/* LiteralStringDouble */
.chroma .s2 {
color: #f1fa8c;
}
/* LiteralStringEscape */
.chroma .se {
color: #f1fa8c;
}
/* LiteralStringHeredoc */
.chroma .sh {
color: #f1fa8c;
}
/* LiteralStringInterpol */
.chroma .si {
color: #f1fa8c;
}
/* LiteralStringOther */
.chroma .sx {
color: #f1fa8c;
}
/* LiteralStringRegex */
.chroma .sr {
color: #f1fa8c;
}
/* LiteralStringSingle */
.chroma .s1 {
color: #f1fa8c;
}
/* LiteralStringSymbol */
.chroma .ss {
color: #f1fa8c;
}
/* LiteralNumber */
.chroma .m {
color: #bd93f9;
}
/* LiteralNumberBin */
.chroma .mb {
color: #bd93f9;
}
/* LiteralNumberFloat */
.chroma .mf {
color: #bd93f9;
}
/* LiteralNumberHex */
.chroma .mh {
color: #bd93f9;
}
/* LiteralNumberInteger */
.chroma .mi {
color: #bd93f9;
}
/* LiteralNumberIntegerLong */
.chroma .il {
color: #bd93f9;
}
/* LiteralNumberOct */
.chroma .mo {
color: #bd93f9;
}
/* Operator */
.chroma .o {
color: #ff79c6;
}
/* OperatorWord */
.chroma .ow {
color: #ff79c6;
}
/* Punctuation */
.chroma .p {
}
/* Comment */
.chroma .c {
color: #6272a4;
}
/* CommentHashbang */
.chroma .ch {
color: #6272a4;
}
/* CommentMultiline */
.chroma .cm {
color: #6272a4;
}
/* CommentSingle */
.chroma .c1 {
color: #6272a4;
}
/* CommentSpecial */
.chroma .cs {
color: #6272a4;
}
/* CommentPreproc */
.chroma .cp {
color: #ff79c6;
}
/* CommentPreprocFile */
.chroma .cpf {
color: #ff79c6;
}
/* Generic */
.chroma .g {
}
/* GenericDeleted */
.chroma .gd {
color: #f55;
}
/* GenericEmph */
.chroma .ge {
text-decoration: underline;
}
/* GenericError */
.chroma .gr {
}
/* GenericHeading */
.chroma .gh {
font-weight: bold;
}
/* GenericInserted */
.chroma .gi {
color: #50fa7b;
font-weight: bold;
}
/* GenericOutput */
.chroma .go {
color: #44475a;
}
/* GenericPrompt */
.chroma .gp {
}
/* GenericStrong */
.chroma .gs {
}
/* GenericSubheading */
.chroma .gu {
font-weight: bold;
}
/* GenericTraceback */
.chroma .gt {
}
/* GenericUnderline */
.chroma .gl {
text-decoration: underline;
}
/* TextWhitespace */
.chroma .w {
}
}

View file

@ -0,0 +1,534 @@
/* Github light theme */
html:not(.dark) .highlight {
/* Background */ /*.bg { background-color: #fff }*/
/* PreWrapper */ /*.chroma { background-color: #fff; }*/
/* Other */
.chroma .x {
}
/* Error */
.chroma .err {
color: #a61717;
background-color: #e3d2d2;
}
/* CodeLine */
.chroma .cl {
}
/* LineTableTD */
.chroma .lntd {
vertical-align: top;
padding: 0;
margin: 0;
border: 0;
}
/* LineTable */
.chroma .lntable {
border-spacing: 0;
padding: 0;
margin: 0;
border: 0;
}
/* LineHighlight */
.chroma .hl {
background-color: #ffc;
}
/* LineNumbersTable */
.chroma .lnt {
white-space: pre;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em;
color: #7f7f7f;
}
/* LineNumbers */
.chroma .ln {
white-space: pre;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em;
color: #7f7f7f;
}
/* Line */
.chroma .line {
display: flex;
}
/* Keyword */
.chroma .k {
color: #000;
font-weight: bold;
}
/* KeywordConstant */
.chroma .kc {
color: #000;
font-weight: bold;
}
/* KeywordDeclaration */
.chroma .kd {
color: #000;
font-weight: bold;
}
/* KeywordNamespace */
.chroma .kn {
color: #000;
font-weight: bold;
}
/* KeywordPseudo */
.chroma .kp {
color: #000;
font-weight: bold;
}
/* KeywordReserved */
.chroma .kr {
color: #000;
font-weight: bold;
}
/* KeywordType */
.chroma .kt {
color: #458;
font-weight: bold;
}
/* Name */
.chroma .n {
}
/* NameAttribute */
.chroma .na {
color: #008080;
}
/* NameBuiltin */
.chroma .nb {
color: #0086b3;
}
/* NameBuiltinPseudo */
.chroma .bp {
color: #999;
}
/* NameClass */
.chroma .nc {
color: #458;
font-weight: bold;
}
/* NameConstant */
.chroma .no {
color: #008080;
}
/* NameDecorator */
.chroma .nd {
color: #3c5d5d;
font-weight: bold;
}
/* NameEntity */
.chroma .ni {
color: #800080;
}
/* NameException */
.chroma .ne {
color: #900;
font-weight: bold;
}
/* NameFunction */
.chroma .nf {
color: #900;
font-weight: bold;
}
/* NameFunctionMagic */
.chroma .fm {
}
/* NameLabel */
.chroma .nl {
color: #900;
font-weight: bold;
}
/* NameNamespace */
.chroma .nn {
color: #555;
}
/* NameOther */
.chroma .nx {
}
/* NameProperty */
.chroma .py {
}
/* NameTag */
.chroma .nt {
color: #000080;
}
/* NameVariable */
.chroma .nv {
color: #008080;
}
/* NameVariableClass */
.chroma .vc {
color: #008080;
}
/* NameVariableGlobal */
.chroma .vg {
color: #008080;
}
/* NameVariableInstance */
.chroma .vi {
color: #008080;
}
/* NameVariableMagic */
.chroma .vm {
}
/* Literal */
.chroma .l {
}
/* LiteralDate */
.chroma .ld {
}
/* LiteralString */
.chroma .s {
color: #d14;
}
/* LiteralStringAffix */
.chroma .sa {
color: #d14;
}
/* LiteralStringBacktick */
.chroma .sb {
color: #d14;
}
/* LiteralStringChar */
.chroma .sc {
color: #d14;
}
/* LiteralStringDelimiter */
.chroma .dl {
color: #d14;
}
/* LiteralStringDoc */
.chroma .sd {
color: #d14;
}
/* LiteralStringDouble */
.chroma .s2 {
color: #d14;
}
/* LiteralStringEscape */
.chroma .se {
color: #d14;
}
/* LiteralStringHeredoc */
.chroma .sh {
color: #d14;
}
/* LiteralStringInterpol */
.chroma .si {
color: #d14;
}
/* LiteralStringOther */
.chroma .sx {
color: #d14;
}
/* LiteralStringRegex */
.chroma .sr {
color: #009926;
}
/* LiteralStringSingle */
.chroma .s1 {
color: #d14;
}
/* LiteralStringSymbol */
.chroma .ss {
color: #990073;
}
/* LiteralNumber */
.chroma .m {
color: #099;
}
/* LiteralNumberBin */
.chroma .mb {
color: #099;
}
/* LiteralNumberFloat */
.chroma .mf {
color: #099;
}
/* LiteralNumberHex */
.chroma .mh {
color: #099;
}
/* LiteralNumberInteger */
.chroma .mi {
color: #099;
}
/* LiteralNumberIntegerLong */
.chroma .il {
color: #099;
}
/* LiteralNumberOct */
.chroma .mo {
color: #099;
}
/* Operator */
.chroma .o {
color: #000;
font-weight: bold;
}
/* OperatorWord */
.chroma .ow {
color: #000;
font-weight: bold;
}
/* Punctuation */
.chroma .p {
}
/* Comment */
.chroma .c {
color: #998;
font-style: italic;
}
/* CommentHashbang */
.chroma .ch {
color: #998;
font-style: italic;
}
/* CommentMultiline */
.chroma .cm {
color: #998;
font-style: italic;
}
/* CommentSingle */
.chroma .c1 {
color: #998;
font-style: italic;
}
/* CommentSpecial */
.chroma .cs {
color: #999;
font-weight: bold;
font-style: italic;
}
/* CommentPreproc */
.chroma .cp {
color: #999;
font-weight: bold;
font-style: italic;
}
/* CommentPreprocFile */
.chroma .cpf {
color: #999;
font-weight: bold;
font-style: italic;
}
/* Generic */
.chroma .g {
}
/* GenericDeleted */
.chroma .gd {
color: #000;
background-color: #fdd;
}
/* GenericEmph */
.chroma .ge {
color: #000;
font-style: italic;
}
/* GenericError */
.chroma .gr {
color: #a00;
}
/* GenericHeading */
.chroma .gh {
color: #999;
}
/* GenericInserted */
.chroma .gi {
color: #000;
background-color: #dfd;
}
/* GenericOutput */
.chroma .go {
color: #888;
}
/* GenericPrompt */
.chroma .gp {
color: #555;
}
/* GenericStrong */
.chroma .gs {
font-weight: bold;
}
/* GenericSubheading */
.chroma .gu {
color: #aaa;
}
/* GenericTraceback */
.chroma .gt {
color: #a00;
}
/* GenericUnderline */
.chroma .gl {
text-decoration: underline;
}
/* TextWhitespace */
.chroma .w {
color: #bbb;
}
}

View file

@ -0,0 +1,50 @@
/*
Hugo Blox Tailwind CSS v4 - Main Entry Point
This file orchestrates all CSS imports in the correct order:
1. Tailwind base with configuration
2. Theme and color definitions
3. Base styles and utilities
4. Hugo Blox framework components
5. Hugo Blox module components
6. Safelist for dynamic classes
*/
/* Tailwind CSS v4 Base */
@import "tailwindcss";
/* Dynamic sources are injected by the css.html partial */
/* This handles both monorepo dev and end-user environments */
/* Configuration */
@import "config/tailwind.css";
@import "config/theme.css";
/* Base styles and utilities */
@import "framework/base.css";
/* Hugo Blox theme system (color utilities) */
@import "color-utilities.css";
/* Hugo Blox layout utilities (radius, spacing tokens) */
@import "layout-utilities.css";
/* Hugo Blox framework components */
@import "framework/components.css";
/* Hugo Blox module components */
@import "components/all.css";
@import "views/all.css";
/* Block-specific CSS is auto-discovered from co-located style.css files */
/* See css.html partial for the discovery mechanism */
@import "chroma.css";
/* Hugo Blox Search */
@import "hb-search.css";
/* Hugo Blox Animations (typewriter, scroll reveals) */
@import "animations.css";
/* Safelist for dynamic classes */
@import "config/safelist.css";

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: AMBER */
:root {
/* Amber Primary Palette */
--hb-primary-50-rgb: 255 251 235;
--hb-primary-100-rgb: 254 243 199;
--hb-primary-200-rgb: 253 230 138;
--hb-primary-300-rgb: 252 211 77;
--hb-primary-400-rgb: 251 191 36;
--hb-primary-500-rgb: 245 158 11;
--hb-primary-600-rgb: 217 119 6;
--hb-primary-700-rgb: 180 83 9;
--hb-primary-800-rgb: 146 64 14;
--hb-primary-900-rgb: 120 53 15;
--hb-primary-950-rgb: 69 26 3;
/* Yellow Secondary Palette */
--hb-secondary-50-rgb: 254 252 232;
--hb-secondary-100-rgb: 254 249 195;
--hb-secondary-200-rgb: 254 240 138;
--hb-secondary-300-rgb: 253 224 71;
--hb-secondary-400-rgb: 250 204 21;
--hb-secondary-500-rgb: 234 179 8;
--hb-secondary-600-rgb: 202 138 4;
--hb-secondary-700-rgb: 161 98 7;
--hb-secondary-800-rgb: 133 77 14;
--hb-secondary-900-rgb: 113 63 18;
--hb-secondary-950-rgb: 66 32 6;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: BLUE */
:root {
/* TW Blue Palette */
--hb-primary-50-rgb: 239 246 255;
--hb-primary-100-rgb: 219 234 254;
--hb-primary-200-rgb: 191 219 254;
--hb-primary-300-rgb: 147 197 253;
--hb-primary-400-rgb: 96 165 250;
--hb-primary-500-rgb: 59 130 246;
--hb-primary-600-rgb: 37 99 235;
--hb-primary-700-rgb: 29 78 216;
--hb-primary-800-rgb: 30 64 175;
--hb-primary-900-rgb: 30 58 138;
--hb-primary-950-rgb: 23 37 84;
/* TW Cyan Palette */
--hb-secondary-50-rgb: 236 254 255;
--hb-secondary-100-rgb: 207 250 254;
--hb-secondary-200-rgb: 165 243 252;
--hb-secondary-300-rgb: 103 232 249;
--hb-secondary-400-rgb: 34 211 238;
--hb-secondary-500-rgb: 6 182 212;
--hb-secondary-600-rgb: 8 145 178;
--hb-secondary-700-rgb: 14 116 144;
--hb-secondary-800-rgb: 21 94 117;
--hb-secondary-900-rgb: 22 78 99;
--hb-secondary-950-rgb: 8 51 68;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: CYAN */
:root {
/* Cyan Primary Palette */
--hb-primary-50-rgb: 236 254 255;
--hb-primary-100-rgb: 207 250 254;
--hb-primary-200-rgb: 165 243 252;
--hb-primary-300-rgb: 103 232 249;
--hb-primary-400-rgb: 34 211 238;
--hb-primary-500-rgb: 6 182 212;
--hb-primary-600-rgb: 8 145 178;
--hb-primary-700-rgb: 14 116 144;
--hb-primary-800-rgb: 21 94 117;
--hb-primary-900-rgb: 22 78 99;
--hb-primary-950-rgb: 8 51 68;
/* Sky Secondary Palette */
--hb-secondary-50-rgb: 240 249 255;
--hb-secondary-100-rgb: 224 242 254;
--hb-secondary-200-rgb: 186 230 253;
--hb-secondary-300-rgb: 125 211 252;
--hb-secondary-400-rgb: 56 189 248;
--hb-secondary-500-rgb: 14 165 233;
--hb-secondary-600-rgb: 2 132 199;
--hb-secondary-700-rgb: 3 105 161;
--hb-secondary-800-rgb: 7 89 133;
--hb-secondary-900-rgb: 12 74 110;
--hb-secondary-950-rgb: 8 47 73;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: EMERALD */
:root {
/* Emerald Primary Palette */
--hb-primary-50-rgb: 236 253 245;
--hb-primary-100-rgb: 209 250 229;
--hb-primary-200-rgb: 167 243 208;
--hb-primary-300-rgb: 110 231 183;
--hb-primary-400-rgb: 52 211 153;
--hb-primary-500-rgb: 16 185 129;
--hb-primary-600-rgb: 5 150 105;
--hb-primary-700-rgb: 4 120 87;
--hb-primary-800-rgb: 6 95 70;
--hb-primary-900-rgb: 6 78 59;
--hb-primary-950-rgb: 2 44 34;
/* Green Secondary Palette */
--hb-secondary-50-rgb: 240 253 244;
--hb-secondary-100-rgb: 220 252 231;
--hb-secondary-200-rgb: 187 247 208;
--hb-secondary-300-rgb: 134 239 172;
--hb-secondary-400-rgb: 74 222 128;
--hb-secondary-500-rgb: 34 197 94;
--hb-secondary-600-rgb: 22 163 74;
--hb-secondary-700-rgb: 21 128 61;
--hb-secondary-800-rgb: 22 101 52;
--hb-secondary-900-rgb: 20 83 45;
--hb-secondary-950-rgb: 5 46 22;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: FUCHSIA */
:root {
/* Fuchsia Primary Palette */
--hb-primary-50-rgb: 253 244 255;
--hb-primary-100-rgb: 250 232 255;
--hb-primary-200-rgb: 245 208 254;
--hb-primary-300-rgb: 240 171 252;
--hb-primary-400-rgb: 232 121 249;
--hb-primary-500-rgb: 217 70 239;
--hb-primary-600-rgb: 192 38 211;
--hb-primary-700-rgb: 162 28 175;
--hb-primary-800-rgb: 134 25 143;
--hb-primary-900-rgb: 112 26 117;
--hb-primary-950-rgb: 74 4 78;
/* Violet Secondary Palette */
--hb-secondary-50-rgb: 245 243 255;
--hb-secondary-100-rgb: 237 233 254;
--hb-secondary-200-rgb: 221 214 254;
--hb-secondary-300-rgb: 196 181 253;
--hb-secondary-400-rgb: 167 139 250;
--hb-secondary-500-rgb: 139 92 246;
--hb-secondary-600-rgb: 124 58 237;
--hb-secondary-700-rgb: 109 40 217;
--hb-secondary-800-rgb: 91 33 182;
--hb-secondary-900-rgb: 76 29 149;
--hb-secondary-950-rgb: 46 16 101;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: GREEN */
:root {
/* Green Primary Palette */
--hb-primary-50-rgb: 240 253 244;
--hb-primary-100-rgb: 220 252 231;
--hb-primary-200-rgb: 187 247 208;
--hb-primary-300-rgb: 134 239 172;
--hb-primary-400-rgb: 74 222 128;
--hb-primary-500-rgb: 34 197 94;
--hb-primary-600-rgb: 22 163 74;
--hb-primary-700-rgb: 21 128 61;
--hb-primary-800-rgb: 22 101 52;
--hb-primary-900-rgb: 20 83 45;
--hb-primary-950-rgb: 5 46 22;
/* Teal Secondary Palette */
--hb-secondary-50-rgb: 240 253 250;
--hb-secondary-100-rgb: 204 251 241;
--hb-secondary-200-rgb: 153 246 228;
--hb-secondary-300-rgb: 94 234 212;
--hb-secondary-400-rgb: 45 212 191;
--hb-secondary-500-rgb: 20 184 166;
--hb-secondary-600-rgb: 13 148 136;
--hb-secondary-700-rgb: 15 118 110;
--hb-secondary-800-rgb: 17 94 89;
--hb-secondary-900-rgb: 19 78 74;
--hb-secondary-950-rgb: 4 47 46;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: INDIGO */
:root {
/* Indigo Primary Palette */
--hb-primary-50-rgb: 238 242 255;
--hb-primary-100-rgb: 224 231 255;
--hb-primary-200-rgb: 199 210 254;
--hb-primary-300-rgb: 165 180 252;
--hb-primary-400-rgb: 129 140 248;
--hb-primary-500-rgb: 99 102 241;
--hb-primary-600-rgb: 79 70 229;
--hb-primary-700-rgb: 67 56 202;
--hb-primary-800-rgb: 55 48 163;
--hb-primary-900-rgb: 49 46 129;
--hb-primary-950-rgb: 30 27 75;
/* Blue Secondary Palette */
--hb-secondary-50-rgb: 239 246 255;
--hb-secondary-100-rgb: 219 234 254;
--hb-secondary-200-rgb: 191 219 254;
--hb-secondary-300-rgb: 147 197 253;
--hb-secondary-400-rgb: 96 165 250;
--hb-secondary-500-rgb: 59 130 246;
--hb-secondary-600-rgb: 37 99 235;
--hb-secondary-700-rgb: 29 78 216;
--hb-secondary-800-rgb: 30 64 175;
--hb-secondary-900-rgb: 30 58 138;
--hb-secondary-950-rgb: 23 37 84;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: LIME */
:root {
/* Lime Primary Palette */
--hb-primary-50-rgb: 247 254 231;
--hb-primary-100-rgb: 236 252 203;
--hb-primary-200-rgb: 217 249 157;
--hb-primary-300-rgb: 190 242 100;
--hb-primary-400-rgb: 163 230 53;
--hb-primary-500-rgb: 132 204 22;
--hb-primary-600-rgb: 101 163 13;
--hb-primary-700-rgb: 77 124 15;
--hb-primary-800-rgb: 63 98 18;
--hb-primary-900-rgb: 54 83 20;
--hb-primary-950-rgb: 26 46 5;
/* Yellow Secondary Palette */
--hb-secondary-50-rgb: 254 252 232;
--hb-secondary-100-rgb: 254 249 195;
--hb-secondary-200-rgb: 254 240 138;
--hb-secondary-300-rgb: 253 224 71;
--hb-secondary-400-rgb: 250 204 21;
--hb-secondary-500-rgb: 234 179 8;
--hb-secondary-600-rgb: 202 138 4;
--hb-secondary-700-rgb: 161 98 7;
--hb-secondary-800-rgb: 133 77 14;
--hb-secondary-900-rgb: 113 63 18;
--hb-secondary-950-rgb: 66 32 6;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: ORANGE */
:root {
/* Orange Primary Palette */
--hb-primary-50-rgb: 255 247 237;
--hb-primary-100-rgb: 255 237 213;
--hb-primary-200-rgb: 254 215 170;
--hb-primary-300-rgb: 253 186 116;
--hb-primary-400-rgb: 251 146 60;
--hb-primary-500-rgb: 249 115 22;
--hb-primary-600-rgb: 234 88 12;
--hb-primary-700-rgb: 194 65 12;
--hb-primary-800-rgb: 154 52 18;
--hb-primary-900-rgb: 124 45 18;
--hb-primary-950-rgb: 67 20 7;
/* Red Secondary Palette */
--hb-secondary-50-rgb: 254 242 242;
--hb-secondary-100-rgb: 254 226 226;
--hb-secondary-200-rgb: 254 202 202;
--hb-secondary-300-rgb: 252 165 165;
--hb-secondary-400-rgb: 248 113 113;
--hb-secondary-500-rgb: 239 68 68;
--hb-secondary-600-rgb: 220 38 38;
--hb-secondary-700-rgb: 185 28 28;
--hb-secondary-800-rgb: 153 27 27;
--hb-secondary-900-rgb: 127 29 29;
--hb-secondary-950-rgb: 69 10 10;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: PINK */
:root {
/* Pink Primary Palette */
--hb-primary-50-rgb: 253 242 248;
--hb-primary-100-rgb: 252 231 243;
--hb-primary-200-rgb: 251 207 232;
--hb-primary-300-rgb: 249 168 212;
--hb-primary-400-rgb: 244 114 182;
--hb-primary-500-rgb: 236 72 153;
--hb-primary-600-rgb: 219 39 119;
--hb-primary-700-rgb: 190 24 93;
--hb-primary-800-rgb: 157 23 77;
--hb-primary-900-rgb: 131 24 67;
--hb-primary-950-rgb: 80 7 36;
/* Rose Secondary Palette */
--hb-secondary-50-rgb: 255 241 242;
--hb-secondary-100-rgb: 255 228 230;
--hb-secondary-200-rgb: 254 205 211;
--hb-secondary-300-rgb: 253 164 175;
--hb-secondary-400-rgb: 251 113 133;
--hb-secondary-500-rgb: 244 63 94;
--hb-secondary-600-rgb: 225 29 72;
--hb-secondary-700-rgb: 190 18 60;
--hb-secondary-800-rgb: 159 18 57;
--hb-secondary-900-rgb: 136 19 55;
--hb-secondary-950-rgb: 76 5 25;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: PURPLE */
:root {
/* Purple Primary Palette */
--hb-primary-50-rgb: 250 245 255;
--hb-primary-100-rgb: 243 232 255;
--hb-primary-200-rgb: 233 213 255;
--hb-primary-300-rgb: 216 180 254;
--hb-primary-400-rgb: 192 132 252;
--hb-primary-500-rgb: 168 85 247;
--hb-primary-600-rgb: 147 51 234;
--hb-primary-700-rgb: 126 34 206;
--hb-primary-800-rgb: 107 33 168;
--hb-primary-900-rgb: 88 28 135;
--hb-primary-950-rgb: 59 7 100;
/* Violet Secondary Palette */
--hb-secondary-50-rgb: 245 243 255;
--hb-secondary-100-rgb: 237 233 254;
--hb-secondary-200-rgb: 221 214 254;
--hb-secondary-300-rgb: 196 181 253;
--hb-secondary-400-rgb: 167 139 250;
--hb-secondary-500-rgb: 139 92 246;
--hb-secondary-600-rgb: 124 58 237;
--hb-secondary-700-rgb: 109 40 217;
--hb-secondary-800-rgb: 91 33 182;
--hb-secondary-900-rgb: 76 29 149;
--hb-secondary-950-rgb: 46 16 101;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: RED */
:root {
/* Red Primary Palette */
--hb-primary-50-rgb: 254 242 242;
--hb-primary-100-rgb: 254 226 226;
--hb-primary-200-rgb: 254 202 202;
--hb-primary-300-rgb: 252 165 165;
--hb-primary-400-rgb: 248 113 113;
--hb-primary-500-rgb: 239 68 68;
--hb-primary-600-rgb: 220 38 38;
--hb-primary-700-rgb: 185 28 28;
--hb-primary-800-rgb: 153 27 27;
--hb-primary-900-rgb: 127 29 29;
--hb-primary-950-rgb: 69 10 10;
/* Orange Secondary Palette */
--hb-secondary-50-rgb: 255 247 237;
--hb-secondary-100-rgb: 255 237 213;
--hb-secondary-200-rgb: 254 215 170;
--hb-secondary-300-rgb: 253 186 116;
--hb-secondary-400-rgb: 251 146 60;
--hb-secondary-500-rgb: 249 115 22;
--hb-secondary-600-rgb: 234 88 12;
--hb-secondary-700-rgb: 194 65 12;
--hb-secondary-800-rgb: 154 52 18;
--hb-secondary-900-rgb: 124 45 18;
--hb-secondary-950-rgb: 67 20 7;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: ROSE */
:root {
/* Rose Primary Palette */
--hb-primary-50-rgb: 255 241 242;
--hb-primary-100-rgb: 255 228 230;
--hb-primary-200-rgb: 254 205 211;
--hb-primary-300-rgb: 253 164 175;
--hb-primary-400-rgb: 251 113 133;
--hb-primary-500-rgb: 244 63 94;
--hb-primary-600-rgb: 225 29 72;
--hb-primary-700-rgb: 190 18 60;
--hb-primary-800-rgb: 159 18 57;
--hb-primary-900-rgb: 136 19 55;
--hb-primary-950-rgb: 76 5 25;
/* Pink Secondary Palette */
--hb-secondary-50-rgb: 253 242 248;
--hb-secondary-100-rgb: 252 231 243;
--hb-secondary-200-rgb: 251 207 232;
--hb-secondary-300-rgb: 249 168 212;
--hb-secondary-400-rgb: 244 114 182;
--hb-secondary-500-rgb: 236 72 153;
--hb-secondary-600-rgb: 219 39 119;
--hb-secondary-700-rgb: 190 24 93;
--hb-secondary-800-rgb: 157 23 77;
--hb-secondary-900-rgb: 131 24 67;
--hb-secondary-950-rgb: 80 7 36;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: SKY */
:root {
/* Sky Primary Palette */
--hb-primary-50-rgb: 240 249 255;
--hb-primary-100-rgb: 224 242 254;
--hb-primary-200-rgb: 186 230 253;
--hb-primary-300-rgb: 125 211 252;
--hb-primary-400-rgb: 56 189 248;
--hb-primary-500-rgb: 14 165 233;
--hb-primary-600-rgb: 2 132 199;
--hb-primary-700-rgb: 3 105 161;
--hb-primary-800-rgb: 7 89 133;
--hb-primary-900-rgb: 12 74 110;
--hb-primary-950-rgb: 8 47 73;
/* Cyan Secondary Palette */
--hb-secondary-50-rgb: 236 254 255;
--hb-secondary-100-rgb: 207 250 254;
--hb-secondary-200-rgb: 165 243 252;
--hb-secondary-300-rgb: 103 232 249;
--hb-secondary-400-rgb: 34 211 238;
--hb-secondary-500-rgb: 6 182 212;
--hb-secondary-600-rgb: 8 145 178;
--hb-secondary-700-rgb: 14 116 144;
--hb-secondary-800-rgb: 21 94 117;
--hb-secondary-900-rgb: 22 78 99;
--hb-secondary-950-rgb: 8 51 68;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: SLATE */
:root {
/* Slate Primary Palette */
--hb-primary-50-rgb: 248 250 252;
--hb-primary-100-rgb: 241 245 249;
--hb-primary-200-rgb: 226 232 240;
--hb-primary-300-rgb: 203 213 225;
--hb-primary-400-rgb: 148 163 184;
--hb-primary-500-rgb: 100 116 139;
--hb-primary-600-rgb: 71 85 105;
--hb-primary-700-rgb: 51 65 85;
--hb-primary-800-rgb: 30 41 59;
--hb-primary-900-rgb: 15 23 42;
--hb-primary-950-rgb: 2 6 23;
/* Stone Secondary Palette */
--hb-secondary-50-rgb: 250 250 249;
--hb-secondary-100-rgb: 245 245 244;
--hb-secondary-200-rgb: 231 229 228;
--hb-secondary-300-rgb: 214 211 209;
--hb-secondary-400-rgb: 168 162 158;
--hb-secondary-500-rgb: 120 113 108;
--hb-secondary-600-rgb: 87 83 78;
--hb-secondary-700-rgb: 68 64 60;
--hb-secondary-800-rgb: 41 37 36;
--hb-secondary-900-rgb: 28 25 23;
--hb-secondary-950-rgb: 12 10 9;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: STONE */
:root {
/* Stone Primary Palette */
--hb-primary-50-rgb: 250 250 249;
--hb-primary-100-rgb: 245 245 244;
--hb-primary-200-rgb: 231 229 228;
--hb-primary-300-rgb: 214 211 209;
--hb-primary-400-rgb: 168 162 158;
--hb-primary-500-rgb: 120 113 108;
--hb-primary-600-rgb: 87 83 78;
--hb-primary-700-rgb: 68 64 60;
--hb-primary-800-rgb: 41 37 36;
--hb-primary-900-rgb: 28 25 23;
--hb-primary-950-rgb: 12 10 9;
/* Slate Secondary Palette */
--hb-secondary-50-rgb: 248 250 252;
--hb-secondary-100-rgb: 241 245 249;
--hb-secondary-200-rgb: 226 232 240;
--hb-secondary-300-rgb: 203 213 225;
--hb-secondary-400-rgb: 148 163 184;
--hb-secondary-500-rgb: 100 116 139;
--hb-secondary-600-rgb: 71 85 105;
--hb-secondary-700-rgb: 51 65 85;
--hb-secondary-800-rgb: 30 41 59;
--hb-secondary-900-rgb: 15 23 42;
--hb-secondary-950-rgb: 2 6 23;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: TEAL */
:root {
/* Teal Primary Palette */
--hb-primary-50-rgb: 240 253 250;
--hb-primary-100-rgb: 204 251 241;
--hb-primary-200-rgb: 153 246 228;
--hb-primary-300-rgb: 94 234 212;
--hb-primary-400-rgb: 45 212 191;
--hb-primary-500-rgb: 20 184 166;
--hb-primary-600-rgb: 13 148 136;
--hb-primary-700-rgb: 15 118 110;
--hb-primary-800-rgb: 17 94 89;
--hb-primary-900-rgb: 19 78 74;
--hb-primary-950-rgb: 4 47 46;
/* Emerald Secondary Palette */
--hb-secondary-50-rgb: 236 253 245;
--hb-secondary-100-rgb: 209 250 229;
--hb-secondary-200-rgb: 167 243 208;
--hb-secondary-300-rgb: 110 231 183;
--hb-secondary-400-rgb: 52 211 153;
--hb-secondary-500-rgb: 16 185 129;
--hb-secondary-600-rgb: 5 150 105;
--hb-secondary-700-rgb: 4 120 87;
--hb-secondary-800-rgb: 6 95 70;
--hb-secondary-900-rgb: 6 78 59;
--hb-secondary-950-rgb: 2 44 34;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: VIOLET */
:root {
/* Violet Primary Palette */
--hb-primary-50-rgb: 245 243 255;
--hb-primary-100-rgb: 237 233 254;
--hb-primary-200-rgb: 221 214 254;
--hb-primary-300-rgb: 196 181 253;
--hb-primary-400-rgb: 167 139 250;
--hb-primary-500-rgb: 139 92 246;
--hb-primary-600-rgb: 124 58 237;
--hb-primary-700-rgb: 109 40 217;
--hb-primary-800-rgb: 91 33 182;
--hb-primary-900-rgb: 76 29 149;
--hb-primary-950-rgb: 46 16 101;
/* Fuchsia Secondary Palette */
--hb-secondary-50-rgb: 253 244 255;
--hb-secondary-100-rgb: 250 232 255;
--hb-secondary-200-rgb: 245 208 254;
--hb-secondary-300-rgb: 240 171 252;
--hb-secondary-400-rgb: 232 121 249;
--hb-secondary-500-rgb: 217 70 239;
--hb-secondary-600-rgb: 192 38 211;
--hb-secondary-700-rgb: 162 28 175;
--hb-secondary-800-rgb: 134 25 143;
--hb-secondary-900-rgb: 112 26 117;
--hb-secondary-950-rgb: 74 4 78;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: YELLOW */
:root {
/* Yellow Primary Palette */
--hb-primary-50-rgb: 254 252 232;
--hb-primary-100-rgb: 254 249 195;
--hb-primary-200-rgb: 254 240 138;
--hb-primary-300-rgb: 253 224 71;
--hb-primary-400-rgb: 250 204 21;
--hb-primary-500-rgb: 234 179 8;
--hb-primary-600-rgb: 202 138 4;
--hb-primary-700-rgb: 161 98 7;
--hb-primary-800-rgb: 133 77 14;
--hb-primary-900-rgb: 113 63 18;
--hb-primary-950-rgb: 66 32 6;
/* Amber Secondary Palette */
--hb-secondary-50-rgb: 255 251 235;
--hb-secondary-100-rgb: 254 243 199;
--hb-secondary-200-rgb: 253 230 138;
--hb-secondary-300-rgb: 252 211 77;
--hb-secondary-400-rgb: 251 191 36;
--hb-secondary-500-rgb: 245 158 11;
--hb-secondary-600-rgb: 217 119 6;
--hb-secondary-700-rgb: 180 83 9;
--hb-secondary-800-rgb: 146 64 14;
--hb-secondary-900-rgb: 120 53 15;
--hb-secondary-950-rgb: 69 26 3;
}

View file

@ -0,0 +1,27 @@
/* Hugo Blox color theme: ZINC */
:root {
/* Zinc Primary Palette */
--hb-primary-50-rgb: 250 250 250;
--hb-primary-100-rgb: 244 244 245;
--hb-primary-200-rgb: 228 228 231;
--hb-primary-300-rgb: 212 212 216;
--hb-primary-400-rgb: 161 161 170;
--hb-primary-500-rgb: 113 113 122;
--hb-primary-600-rgb: 82 82 91;
--hb-primary-700-rgb: 63 63 70;
--hb-primary-800-rgb: 39 39 42;
--hb-primary-900-rgb: 24 24 27;
--hb-primary-950-rgb: 9 9 11;
/* Slate Secondary Palette */
--hb-secondary-50-rgb: 248 250 252;
--hb-secondary-100-rgb: 241 245 249;
--hb-secondary-200-rgb: 226 232 240;
--hb-secondary-300-rgb: 203 213 225;
--hb-secondary-400-rgb: 148 163 184;
--hb-secondary-500-rgb: 100 116 139;
--hb-secondary-600-rgb: 71 85 105;
--hb-secondary-700-rgb: 51 65 85;
--hb-secondary-800-rgb: 30 41 59;
--hb-secondary-900-rgb: 15 23 42;
--hb-secondary-950-rgb: 2 6 23;
}

View file

@ -0,0 +1 @@
@import "attachments.css";

View file

@ -0,0 +1,28 @@
.hb-attachment-link {
@apply inline-block font-semibold uppercase outline-none mr-4 mb-1.5 transition-all text-sm tracking-wide focus:outline-none;
color: var(--color-primary-600);
}
.hb-attachment-link:hover {
color: var(--color-primary-700);
text-decoration: underline;
}
.dark .hb-attachment-link {
color: var(--color-primary-400);
}
.dark .hb-attachment-link:hover {
color: var(--color-primary-300);
}
/* Small links - used in list views */
.hb-attachment-link-small {
@apply p-0 text-xs;
}
/* Large links - used on single pages */
.hb-attachment-link-large {
@apply p-0 text-sm;
}

Binary file not shown.

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1 @@
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={757:function(t){t.exports=e}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,r),i.exports}r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var o={};r.d(o,{default:function(){return p}});var i=r(757),a=r.n(i);const l=function(e,t,n){let r=n,o=0;const i=e.length;for(;r<t.length;){const n=t[r];if(o<=0&&t.slice(r,r+i)===e)return r;"\\"===n?r++:"{"===n?o++:"}"===n&&o--,r++}return-1},s=/^\\begin{/;var d=function(e,t){let n;const r=[],o=new RegExp("("+t.map((e=>e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"))).join("|")+")");for(;n=e.search(o),-1!==n;){n>0&&(r.push({type:"text",data:e.slice(0,n)}),e=e.slice(n));const o=t.findIndex((t=>e.startsWith(t.left)));if(n=l(t[o].right,e,t[o].left.length),-1===n)break;const i=e.slice(0,n+t[o].right.length),a=s.test(i)?i:e.slice(t[o].left.length,n);r.push({type:"math",data:a,rawData:i,display:t[o].display}),e=e.slice(n+t[o].right.length)}return""!==e&&r.push({type:"text",data:e}),r};const c=function(e,t){const n=d(e,t.delimiters);if(1===n.length&&"text"===n[0].type)return null;const r=document.createDocumentFragment();for(let e=0;e<n.length;e++)if("text"===n[e].type)r.appendChild(document.createTextNode(n[e].data));else{const o=document.createElement("span");let i=n[e].data;t.displayMode=n[e].display;try{t.preProcess&&(i=t.preProcess(i)),a().render(i,o,t)}catch(o){if(!(o instanceof a().ParseError))throw o;t.errorCallback("KaTeX auto-render: Failed to parse `"+n[e].data+"` with ",o),r.appendChild(document.createTextNode(n[e].rawData));continue}r.appendChild(o)}return r},f=function(e,t){for(let n=0;n<e.childNodes.length;n++){const r=e.childNodes[n];if(3===r.nodeType){let o=r.textContent,i=r.nextSibling,a=0;for(;i&&i.nodeType===Node.TEXT_NODE;)o+=i.textContent,i=i.nextSibling,a++;const l=c(o,t);if(l){for(let e=0;e<a;e++)r.nextSibling.remove();n+=l.childNodes.length-1,e.replaceChild(l,r)}else n+=a}else if(1===r.nodeType){const e=" "+r.className+" ";-1===t.ignoredTags.indexOf(r.nodeName.toLowerCase())&&t.ignoredClasses.every((t=>-1===e.indexOf(" "+t+" ")))&&f(r,t)}}};var p=function(e,t){if(!e)throw new Error("No element provided to render");const n={};for(const e in t)t.hasOwnProperty(e)&&(n[e]=t[e]);n.delimiters=n.delimiters||[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\begin{equation}",right:"\\end{equation}",display:!0},{left:"\\begin{align}",right:"\\end{align}",display:!0},{left:"\\begin{alignat}",right:"\\end{alignat}",display:!0},{left:"\\begin{gather}",right:"\\end{gather}",display:!0},{left:"\\begin{CD}",right:"\\end{CD}",display:!0},{left:"\\[",right:"\\]",display:!0}],n.ignoredTags=n.ignoredTags||["script","noscript","style","textarea","pre","code","option"],n.ignoredClasses=n.ignoredClasses||[],n.errorCallback=n.errorCallback||console.error,n.macros=n.macros||{},f(e,n)};return o=o.default}()}));

Some files were not shown because too many files have changed in this diff Show more