mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-18 00:14:35 +00:00
refactor: rename modules and update migration docs
BREAKING CHANGE Module paths moved to `github.com/HugoBlox/kit` with new names: - core `blox-tailwind` → `blox` - analytics → `analytics` - netlify → `integrations/netlify` - slides (reveal) → `slides` Update go.mod, module.yaml/params, scripts, tests, and v0.11 migration guide accordingly.
This commit is contained in:
George Cushen committed
1 parent
e7e0c714d3
commit
f4280ddb1c
566 files changed
+134
-151
No files matched your search
@@ -0,0 +1,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!
|
||||
@@ -0,0 +1,3 @@
|
||||
@import "biography.css";
|
||||
@import "skills.css";
|
||||
@import "navbar.css";
|
||||
@@ -0,0 +1,201 @@
|
||||
.resume-biography {
|
||||
#profile {
|
||||
text-align: center;
|
||||
padding: 30px 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Custom avatar size on homepage - size controlled by template params */
|
||||
.avatar {
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.network-icon {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#profile .network-icon {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.network-icon li {
|
||||
margin-right: 10px;
|
||||
@media (max-width: 640px) {
|
||||
/* Min 48px Lighthouse tap targets on mobile */
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.network-icon li:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.network-icon li:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.big-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.ul-interests li {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.ul-edu li .description p.course {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.ul-edu li .description p.institution {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.network-icon .big-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.bio-text {
|
||||
max-width: 680px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modern Biography Block Enhancements */
|
||||
.resume-biography-modern {
|
||||
/* Ensure proper stacking context for gradients and effects */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Ruby pronunciation styling for modern look */
|
||||
.ruby-modern {
|
||||
ruby-position: over;
|
||||
}
|
||||
|
||||
.ruby-modern rt {
|
||||
font-size: 0.7em;
|
||||
opacity: 0.8;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Enhanced backdrop blur support */
|
||||
@supports (backdrop-filter: blur(10px)) {
|
||||
.resume-biography-modern [class*="backdrop-blur"] {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Smooth animations for all interactive elements */
|
||||
.resume-biography-modern * {
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Enhanced focus states for accessibility */
|
||||
.resume-biography-modern a:focus-visible {
|
||||
outline: 2px solid var(--color-primary-500);
|
||||
outline-offset: 2px;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* Improved text selection styling */
|
||||
.resume-biography-modern ::selection {
|
||||
background-color: color-mix(in oklch, var(--color-primary-200) 30%, transparent);
|
||||
color: var(--color-primary-900);
|
||||
}
|
||||
|
||||
.dark .resume-biography-modern ::selection {
|
||||
background-color: color-mix(in oklch, var(--color-primary-800) 30%, transparent);
|
||||
color: var(--color-primary-100);
|
||||
}
|
||||
|
||||
/* Enhanced gradient text support */
|
||||
.resume-biography-modern .bg-clip-text {
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* Ensure text remains readable on fallback */
|
||||
@supports not (background-clip: text) {
|
||||
.resume-biography-modern .bg-clip-text {
|
||||
color: var(--color-neutral-900);
|
||||
}
|
||||
|
||||
.dark .resume-biography-modern .bg-clip-text {
|
||||
color: var(--color-neutral-100);
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
/* width and height controlled by template params */
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.avatar-emoji {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
background-color: #fff;
|
||||
color: #000; /* override parent alpha */
|
||||
box-shadow:
|
||||
0 10px 20px rgb(0 0 0 / 4%),
|
||||
0 2px 6px rgb(0 0 0 / 4%),
|
||||
0 0 1px rgb(0 0 0 / 4%);
|
||||
}
|
||||
|
||||
.dark .avatar-emoji {
|
||||
background-color: #000;
|
||||
box-shadow:
|
||||
0 10px 20px rgb(0 0 0 / 4%),
|
||||
0 2px 6px rgb(0 0 0 / 4%),
|
||||
0 0 1px rgb(255 255 255 / 96%);
|
||||
}
|
||||
|
||||
/* Biography Block */
|
||||
|
||||
.hbx-bg-gradient {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.hbx-bg-gradient::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
background-attachment: fixed;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Light Mode Gradient */
|
||||
.hbx-bg-gradient::before {
|
||||
background-image:
|
||||
radial-gradient(at 20% 25%, hsla(212, 80%, 95%, 1) 0px, transparent 50%), radial-gradient(at 75% 30%, hsla(160, 80%, 95%, 1) 0px, transparent 50%),
|
||||
radial-gradient(at 25% 80%, hsla(280, 80%, 95%, 1) 0px, transparent 50%), radial-gradient(at 75% 85%, hsla(30, 80%, 95%, 1) 0px, transparent 50%);
|
||||
}
|
||||
|
||||
/* Dark Mode Gradient */
|
||||
.dark .hbx-bg-gradient::before {
|
||||
background-image:
|
||||
radial-gradient(at 20% 25%, hsla(212, 35%, 15%, 1) 0px, transparent 50%), radial-gradient(at 75% 30%, hsla(160, 35%, 15%, 1) 0px, transparent 50%),
|
||||
radial-gradient(at 25% 80%, hsla(280, 35%, 15%, 1) 0px, transparent 50%), radial-gradient(at 75% 85%, hsla(30, 35%, 15%, 1) 0px, transparent 50%);
|
||||
}
|
||||
@@ -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(--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(--color-header-bg);
|
||||
color: var(--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(--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);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
/*************************************************
|
||||
* Hugo Blox: Skills
|
||||
**************************************************/
|
||||
|
||||
/* MOVED TO HTML */
|
||||
/* .skill-group-title { */
|
||||
/* display: inline-block; */
|
||||
/* margin-bottom: 15px; */
|
||||
/* padding-bottom: 5px; */
|
||||
/* border-bottom: 2px solid #c7c7c7; */
|
||||
/* font-size: 1rem; */
|
||||
/* line-height: 30px; */
|
||||
/* font-weight: 600; */
|
||||
/* text-transform: uppercase; */
|
||||
/* letter-spacing: 1px; */
|
||||
/* } */
|
||||
|
||||
.skills-content {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.skills-name {
|
||||
margin-bottom: 6px;
|
||||
/* color: #888; */ /* Inaccessible */
|
||||
font-size: 1rem;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* .dark .skills-name { */
|
||||
/* color: #eee; */
|
||||
/* } */
|
||||
|
||||
.skills-description {
|
||||
margin-bottom: 6px;
|
||||
font-size: 0.7rem;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.skills-icon {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.skills-wrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
border: 1px solid var(--color-primary-200, #cbd5f5);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.skills-percent {
|
||||
position: absolute;
|
||||
width: 60%;
|
||||
height: 10px;
|
||||
background-color: var(--color-primary-600, #2563eb);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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
|
||||
*/
|
||||
@@ -0,0 +1,12 @@
|
||||
@import "page.css";
|
||||
@import "task-list.css";
|
||||
@import "copy.css";
|
||||
@import "sidebar-left.css";
|
||||
@import "charts.css";
|
||||
@import "steps.css";
|
||||
@import "cards.css";
|
||||
@import "math.css";
|
||||
@import "notebook.css";
|
||||
@import "author-notes.css";
|
||||
@import "glassmorphism.css";
|
||||
@import "cover.css";
|
||||
@@ -0,0 +1,48 @@
|
||||
/* Author Notes Tooltip Styles */
|
||||
|
||||
/* Hide elements with x-cloak until Alpine.js initializes */
|
||||
[x-cloak] {
|
||||
/* biome-ignore lint/complexity/noImportantStyles: Required to reliably hide until Alpine initializes */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Ensure tooltip appears above other content */
|
||||
.author-notes-tooltip {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* Smooth hover effect for the info icon */
|
||||
.author-notes {
|
||||
@apply inline-flex items-center justify-center;
|
||||
@apply transition-all duration-200 ease-in-out;
|
||||
}
|
||||
|
||||
/* Focus styles for accessibility */
|
||||
.author-notes:focus {
|
||||
@apply outline-none ring-2 ring-primary-500 ring-offset-2 rounded-full;
|
||||
}
|
||||
|
||||
/* Additional responsive styles for mobile */
|
||||
@media (max-width: 640px) {
|
||||
/* On mobile, tooltips should be wider if needed */
|
||||
.author-notes-tooltip {
|
||||
white-space: normal;
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print styles - show author notes inline when printing */
|
||||
@media print {
|
||||
.author-notes {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show author notes as superscript numbers in print */
|
||||
.author-notes::after {
|
||||
display: inline;
|
||||
content: attr(data-tooltip);
|
||||
vertical-align: super;
|
||||
font-size: 0.75em;
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
:root {
|
||||
--hb-cols: 2;
|
||||
}
|
||||
|
||||
.hb-cards {
|
||||
grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hb-cols))), 1fr));
|
||||
}
|
||||
|
||||
.hb-card {
|
||||
@apply flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-transparent hover:shadow-gray-100 dark:hover:shadow-transparent shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200;
|
||||
@apply hover:border-gray-300 bg-transparent shadow-sm hover:bg-slate-50 hover:shadow-md;
|
||||
|
||||
border-color: var(--color-neutral-700);
|
||||
}
|
||||
|
||||
.dark .hb-card {
|
||||
border-color: var(--color-neutral-700);
|
||||
}
|
||||
|
||||
.dark .hb-card:hover {
|
||||
border-color: var(--color-neutral-600);
|
||||
background-color: var(--color-neutral-800);
|
||||
}
|
||||
|
||||
.hb-card-title {
|
||||
@apply flex font-semibold gap-2 text-gray-700 hover:text-gray-900 items-center;
|
||||
|
||||
color: var(--color-neutral-700);
|
||||
}
|
||||
|
||||
.hb-card-title:hover {
|
||||
color: var(--color-neutral-900);
|
||||
}
|
||||
|
||||
.dark .hb-card-title {
|
||||
color: var(--color-neutral-200);
|
||||
}
|
||||
|
||||
.dark .hb-card-title:hover {
|
||||
color: var(--color-neutral-50);
|
||||
}
|
||||
|
||||
.hb-card-subtitle {
|
||||
@apply line-clamp-3 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mb-4 mt-2;
|
||||
}
|
||||
|
||||
.hb-card svg {
|
||||
color: var(--color-neutral-700);
|
||||
width: 1.5rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.hb-card:hover svg {
|
||||
color: currentcolor;
|
||||
}
|
||||
|
||||
.hb-card p {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.dark .hb-card svg {
|
||||
color: var(--color-neutral-300);
|
||||
}
|
||||
|
||||
.dark .hb-card:hover svg {
|
||||
color: currentcolor;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/* Mermaid.js diagram div */
|
||||
div.mermaid {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
svg {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Plotly chart */
|
||||
div.chart {
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
/* Add horizontal scroll on mobile since Plotly */
|
||||
overflow-x: auto;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
/* Code Copy */
|
||||
|
||||
/* Hugo's Code Block Wrapper Class */
|
||||
|
||||
.highlight {
|
||||
@apply relative z-0;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
@apply invisible absolute right-0 top-0 z-10 w-20 py-1 cursor-pointer font-mono text-sm whitespace-nowrap rounded-bl-md rounded-tr-md bg-neutral-200 text-neutral-700 opacity-90 dark:bg-neutral-600 dark:text-neutral-200;
|
||||
}
|
||||
|
||||
/* Copy Button */
|
||||
|
||||
.highlight:hover > .copy-button {
|
||||
@apply visible;
|
||||
}
|
||||
|
||||
.copy-button:hover,
|
||||
.copy-button:focus,
|
||||
.copy-button:active,
|
||||
.copy-button:active:hover {
|
||||
background-color: var(--color-primary-100);
|
||||
}
|
||||
|
||||
.dark .copy-button:hover,
|
||||
.dark .copy-button:focus,
|
||||
.dark .copy-button:active,
|
||||
.dark .copy-button:active:hover {
|
||||
background-color: var(--color-primary-600);
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
/**
|
||||
* Article Cover Component Styles
|
||||
* Notion-inspired page cover with icon overlay
|
||||
*/
|
||||
|
||||
.article-cover {
|
||||
@apply relative w-full;
|
||||
/* Height is set inline via style attribute, but ensure it displays */
|
||||
min-height: 200px;
|
||||
/* Allow icon to overflow bottom */
|
||||
overflow: visible;
|
||||
/* Add margin for overlapping icon */
|
||||
margin-bottom: 2.5rem;
|
||||
|
||||
/* Responsive height adjustments for mobile */
|
||||
@media (max-width: 768px) {
|
||||
height: 240px;
|
||||
min-height: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cover image container */
|
||||
.article-cover img {
|
||||
@apply w-full h-full object-cover;
|
||||
}
|
||||
|
||||
/* Cover icon container base styles */
|
||||
.article-cover-icon {
|
||||
@apply flex items-center justify-center w-full h-full;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.article-cover-icon:hover {
|
||||
@apply scale-105;
|
||||
}
|
||||
|
||||
/* Glass morphism effect for icons */
|
||||
.article-cover-icon.glass {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(12px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .article-cover-icon.glass {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Fade effect styles */
|
||||
.article-cover-fade {
|
||||
@apply absolute left-0 right-0 pointer-events-none;
|
||||
bottom: -1px;
|
||||
background: linear-gradient(to bottom, transparent, white);
|
||||
}
|
||||
|
||||
.dark .article-cover-fade {
|
||||
background: linear-gradient(to bottom, transparent, rgb(15, 23, 42));
|
||||
}
|
||||
|
||||
/* Style variants */
|
||||
.article-cover[data-cover-style="minimal"] {
|
||||
@apply shadow-sm;
|
||||
}
|
||||
|
||||
.article-cover[data-cover-style="glass"] {
|
||||
@apply overflow-visible;
|
||||
}
|
||||
|
||||
.article-cover[data-cover-style="gradient"] {
|
||||
/* Applied via inline overlay divs */
|
||||
}
|
||||
|
||||
/* Ensure cover works well with dark mode */
|
||||
.dark .article-cover {
|
||||
@apply border-b border-gray-800;
|
||||
}
|
||||
|
||||
/* Caption styles */
|
||||
.article-cover .cover-caption {
|
||||
@apply absolute bottom-4 left-4 right-4 text-sm text-white/90;
|
||||
@apply bg-black/50 backdrop-blur-sm px-3 py-2 rounded-lg;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 640px) {
|
||||
.article-cover-icon {
|
||||
@apply scale-90;
|
||||
}
|
||||
}
|
||||
|
||||
/* Parallax effect support (optional feature) */
|
||||
.article-cover.parallax {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.article-cover.parallax img {
|
||||
transform: translateZ(-1px) scale(1.5);
|
||||
}
|
||||
|
||||
/* Link hover effect if cover is clickable */
|
||||
.article-cover a {
|
||||
@apply block w-full h-full;
|
||||
}
|
||||
|
||||
.article-cover a:hover img {
|
||||
@apply scale-105 transition-transform duration-500;
|
||||
}
|
||||
|
||||
/* Print styles - show cover but optimize */
|
||||
@media print {
|
||||
.article-cover {
|
||||
max-height: 200px;
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
.article-cover-fade,
|
||||
.article-cover-icon {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility: Reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.article-cover,
|
||||
.article-cover *,
|
||||
.article-cover-icon {
|
||||
animation: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.article-cover.parallax img {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* High contrast mode support */
|
||||
@media (prefers-contrast: high) {
|
||||
.article-cover-icon {
|
||||
@apply border-2 border-current;
|
||||
}
|
||||
|
||||
.article-cover .cover-caption {
|
||||
@apply bg-black text-white;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,239 @@
|
||||
/**
|
||||
* 2025 Hugo Blox Glassmorphism Utility Classes
|
||||
*
|
||||
* Modern glassmorphism effects for Hugo Blox CTA cards and other components
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
Glassmorphism Base Classes
|
||||
========================================================================== */
|
||||
|
||||
.glassmorphism-primary {
|
||||
@apply relative overflow-hidden;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in oklch, var(--color-primary-500) 90%, transparent),
|
||||
color-mix(in oklch, var(--color-primary-600) 95%, transparent),
|
||||
color-mix(in oklch, var(--color-primary-700) 90%, transparent)
|
||||
);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.glassmorphism-primary::before {
|
||||
content: "";
|
||||
@apply absolute inset-0 pointer-events-none;
|
||||
background: linear-gradient(45deg, rgb(0 0 0 / 0.1), transparent, rgb(255 255 255 / 0.1));
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
.glassmorphism-secondary {
|
||||
@apply relative overflow-hidden;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in oklch, var(--color-secondary-500) 90%, transparent),
|
||||
color-mix(in oklch, var(--color-secondary-600) 95%, transparent),
|
||||
color-mix(in oklch, var(--color-secondary-700) 90%, transparent)
|
||||
);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.glassmorphism-secondary::before {
|
||||
content: "";
|
||||
@apply absolute inset-0 pointer-events-none;
|
||||
background: linear-gradient(45deg, rgb(0 0 0 / 0.1), transparent, rgb(255 255 255 / 0.1));
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
.glassmorphism-dark {
|
||||
@apply relative overflow-hidden;
|
||||
background: linear-gradient(135deg, rgb(0 0 0 / 0.7), rgb(31 41 55 / 0.8), rgb(0 0 0 / 0.9));
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.glassmorphism-dark::before {
|
||||
content: "";
|
||||
@apply absolute inset-0 pointer-events-none;
|
||||
background: linear-gradient(45deg, rgb(255 255 255 / 0.05), transparent, rgb(255 255 255 / 0.1));
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
.glassmorphism-light {
|
||||
@apply relative overflow-hidden;
|
||||
background: linear-gradient(135deg, rgb(255 255 255 / 0.9), rgb(248 250 252 / 0.95), rgb(241 245 249 / 0.9));
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.glassmorphism-light::before {
|
||||
content: "";
|
||||
@apply absolute inset-0 pointer-events-none;
|
||||
background: linear-gradient(45deg, rgb(0 0 0 / 0.02), transparent, rgb(255 255 255 / 0.05));
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Noise Texture Classes (when used as background image)
|
||||
========================================================================== */
|
||||
|
||||
.noise-texture {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.noise-texture::after {
|
||||
content: "";
|
||||
@apply absolute inset-0 pointer-events-none;
|
||||
background-image: url("/media/textures/noise-pattern.svg");
|
||||
background-size: 100px 100px;
|
||||
background-repeat: repeat;
|
||||
opacity: 0.03;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.dark .noise-texture::after {
|
||||
mix-blend-mode: screen;
|
||||
opacity: 0.02;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Enhanced Ring Classes for 2025 Design
|
||||
========================================================================== */
|
||||
|
||||
.glass-ring {
|
||||
@apply ring-1 ring-white/20 hover:ring-white/40 dark:ring-gray-700/50 dark:hover:ring-gray-600/70;
|
||||
}
|
||||
|
||||
.glass-shadow {
|
||||
box-shadow:
|
||||
0 25px 50px -12px rgb(0 0 0 / 0.25),
|
||||
0 0 0 1px rgb(255 255 255 / 0.1),
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.1);
|
||||
}
|
||||
|
||||
.dark .glass-shadow {
|
||||
box-shadow:
|
||||
0 25px 50px -12px rgb(0 0 0 / 0.5),
|
||||
0 0 0 1px rgb(255 255 255 / 0.05),
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.05);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
CTA Card Glassmorphism Overlay (works with section backgrounds)
|
||||
========================================================================== */
|
||||
|
||||
.cta-glassmorphism {
|
||||
@apply relative;
|
||||
|
||||
/* Dynamic overlay opacity control */
|
||||
--glassmorphism-opacity: 0.15;
|
||||
|
||||
/* Subtle overlay tint that works with any background */
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgb(255 255 255 / var(--glassmorphism-opacity)) 0%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.5)) 50%,
|
||||
rgb(255 255 255 / var(--glassmorphism-opacity)) 100%
|
||||
);
|
||||
|
||||
/* Enhanced glassmorphism effects */
|
||||
backdrop-filter: blur(20px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(1.2);
|
||||
|
||||
/* Modern border and shadow for light mode */
|
||||
border: 1px solid rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.1));
|
||||
box-shadow:
|
||||
0 32px 64px -12px rgb(0 0 0 / 0.25),
|
||||
inset 0 1px 0 rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.05));
|
||||
}
|
||||
|
||||
.cta-glassmorphism:hover {
|
||||
/* Enhanced hover state */
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.05)) 0%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.7)) 50%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.05)) 100%
|
||||
);
|
||||
|
||||
border: 1px solid rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.2));
|
||||
box-shadow:
|
||||
0 40px 80px -16px rgb(0 0 0 / 0.3),
|
||||
inset 0 1px 0 rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.1));
|
||||
}
|
||||
|
||||
/* Dark mode adjustments for CTA glassmorphism */
|
||||
.dark .cta-glassmorphism {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.5)) 0%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.25)) 50%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.5)) 100%
|
||||
);
|
||||
|
||||
border: 1px solid rgb(255 255 255 / var(--glassmorphism-opacity));
|
||||
box-shadow:
|
||||
0 32px 64px -12px rgb(0 0 0 / 0.4),
|
||||
inset 0 1px 0 rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.5));
|
||||
}
|
||||
|
||||
.dark .cta-glassmorphism:hover {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.75)) 0%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.4)) 50%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.75)) 100%
|
||||
);
|
||||
|
||||
border: 1px solid rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.05));
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
CTA Button Glassmorphism (nested within CTA cards)
|
||||
========================================================================== */
|
||||
|
||||
.cta-glassmorphism .group {
|
||||
/* Ensure proper text contrast in light mode */
|
||||
color: var(--color-gray-900);
|
||||
}
|
||||
|
||||
.dark .cta-glassmorphism .group {
|
||||
/* Maintain white text in dark mode */
|
||||
color: var(--color-gray-100);
|
||||
}
|
||||
|
||||
/* Enhanced button glassmorphism for light mode visibility */
|
||||
.cta-glassmorphism .group > div:first-child {
|
||||
/* Light mode button background */
|
||||
background: rgb(255 255 255 / 0.9);
|
||||
border: 1px solid rgb(0 0 0 / 0.1);
|
||||
box-shadow:
|
||||
0 10px 25px -5px rgb(0 0 0 / 0.1),
|
||||
0 4px 6px -2px rgb(0 0 0 / 0.1),
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.3);
|
||||
}
|
||||
|
||||
.dark .cta-glassmorphism .group > div:first-child {
|
||||
/* Dark mode button background */
|
||||
background: rgb(0 0 0 / 0.4);
|
||||
border: 1px solid rgb(255 255 255 / 0.2);
|
||||
box-shadow:
|
||||
0 10px 25px -5px rgb(0 0 0 / 0.3),
|
||||
0 4px 6px -2px rgb(0 0 0 / 0.2),
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.1);
|
||||
}
|
||||
|
||||
.cta-glassmorphism .group:hover > div:first-child {
|
||||
background: rgb(255 255 255);
|
||||
border: 1px solid rgb(0 0 0 / 0.15);
|
||||
box-shadow:
|
||||
0 20px 40px -8px rgb(0 0 0 / 0.15),
|
||||
0 8px 12px -4px rgb(0 0 0 / 0.1),
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.4);
|
||||
}
|
||||
|
||||
.dark .cta-glassmorphism .group:hover > div:first-child {
|
||||
background: rgb(0 0 0 / 0.6);
|
||||
border: 1px solid rgb(255 255 255 / 0.3);
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
/* Prevent long equations overflowing on small screens by scrolling horizontally instead. */
|
||||
.katex-display {
|
||||
overflow: auto hidden;
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
.hb-notebook {
|
||||
--hb-notebook-output-max-height: 26rem;
|
||||
@apply relative isolate my-10 rounded-3xl border border-zinc-200/70 bg-white/90 p-6 shadow-xl shadow-primary-500/5 transition-shadow duration-300;
|
||||
@apply dark:border-zinc-800/70 dark:bg-zinc-900/70 dark:shadow-black/30 text-zinc-800 dark:text-zinc-50;
|
||||
}
|
||||
|
||||
.hb-notebook::after {
|
||||
content: "";
|
||||
@apply pointer-events-none absolute inset-0 rounded-3xl bg-gradient-to-r from-primary-500/5 via-transparent to-secondary-500/5 opacity-0 transition-opacity duration-300;
|
||||
}
|
||||
|
||||
.hb-notebook:hover::after {
|
||||
@apply opacity-100;
|
||||
}
|
||||
|
||||
.hb-notebook--dense {
|
||||
@apply p-4;
|
||||
}
|
||||
|
||||
.hb-notebook-header {
|
||||
@apply flex flex-wrap items-start justify-between gap-4 border-b border-zinc-200/70 pb-4 dark:border-zinc-800/70;
|
||||
}
|
||||
|
||||
.hb-notebook-heading {
|
||||
@apply space-y-1;
|
||||
}
|
||||
|
||||
.hb-notebook-title {
|
||||
@apply text-lg font-semibold text-zinc-900 dark:text-white tracking-tight;
|
||||
}
|
||||
|
||||
.hb-notebook-subtitle {
|
||||
@apply text-sm font-medium text-zinc-500 dark:text-zinc-400;
|
||||
}
|
||||
|
||||
.hb-notebook-download {
|
||||
@apply inline-flex items-center gap-2 rounded-full border border-primary-500/70 px-4 py-2 text-sm font-medium text-primary-600 no-underline transition-all duration-200;
|
||||
@apply hover:-translate-y-0.5 hover:bg-primary-50/60 hover:text-primary-700 dark:text-primary-300 dark:border-primary-400/60 dark:hover:bg-primary-500/10;
|
||||
}
|
||||
|
||||
.hb-notebook-download svg {
|
||||
@apply h-4 w-4;
|
||||
}
|
||||
|
||||
.hb-notebook-metadata {
|
||||
@apply mt-4 grid gap-3 rounded-2xl border border-dashed border-zinc-200/70 px-4 py-3 text-sm;
|
||||
@apply dark:border-zinc-800/70;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
}
|
||||
|
||||
.hb-notebook-metadata dt {
|
||||
@apply text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400;
|
||||
}
|
||||
|
||||
.hb-notebook-metadata dd {
|
||||
@apply font-medium text-zinc-800 dark:text-zinc-100;
|
||||
}
|
||||
|
||||
.hb-notebook-body {
|
||||
@apply mt-6 flex flex-col gap-5;
|
||||
}
|
||||
|
||||
.hb-notebook-cell {
|
||||
@apply rounded-2xl border border-zinc-200/70 bg-white p-4 shadow-sm shadow-zinc-200/60 transition-all duration-200;
|
||||
@apply dark:border-zinc-800/60 dark:bg-zinc-900/70 dark:shadow-none;
|
||||
}
|
||||
|
||||
.hb-notebook-cell--markdown {
|
||||
@apply bg-gradient-to-br from-white via-white to-primary-50/40 dark:from-zinc-900 dark:via-zinc-900 dark:to-primary-900/10;
|
||||
}
|
||||
|
||||
.hb-notebook-cell-header {
|
||||
@apply mb-3 flex flex-wrap items-center gap-3;
|
||||
}
|
||||
|
||||
.hb-notebook-pill {
|
||||
@apply inline-flex items-center rounded-full bg-zinc-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-zinc-600;
|
||||
@apply dark:bg-zinc-800 dark:text-zinc-300;
|
||||
}
|
||||
|
||||
.hb-notebook-tags {
|
||||
@apply flex flex-wrap gap-1;
|
||||
}
|
||||
|
||||
.hb-notebook-tags span {
|
||||
@apply inline-flex items-center rounded-full bg-primary-100/80 px-2 py-0.5 text-[11px] font-medium text-primary-700;
|
||||
@apply dark:bg-primary-400/20 dark:text-primary-200;
|
||||
}
|
||||
|
||||
.hb-notebook-code {
|
||||
@apply overflow-hidden rounded-2xl border border-zinc-900/10 bg-zinc-950/95 shadow-inner shadow-black/30;
|
||||
}
|
||||
|
||||
.hb-notebook-code pre {
|
||||
@apply m-0 overflow-auto rounded-2xl p-5 text-sm leading-relaxed;
|
||||
}
|
||||
|
||||
.hb-notebook-markdown {
|
||||
@apply prose-h1:text-2xl prose-h2:text-xl prose-p:leading-relaxed prose-a:text-primary-600 max-w-none;
|
||||
}
|
||||
|
||||
.hb-notebook-raw {
|
||||
@apply rounded-xl border border-dashed border-zinc-300/80 bg-zinc-50 p-4 font-mono text-sm text-zinc-700;
|
||||
@apply dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 overflow-auto;
|
||||
}
|
||||
|
||||
.hb-notebook-outputs {
|
||||
@apply mt-4 space-y-3 rounded-2xl border border-zinc-100/80 bg-zinc-50/80 p-4;
|
||||
@apply dark:border-zinc-800/60 dark:bg-zinc-900/50;
|
||||
}
|
||||
|
||||
.hb-notebook-output {
|
||||
@apply overflow-auto rounded-xl border border-transparent bg-white/90 p-3 text-sm leading-relaxed text-zinc-700;
|
||||
@apply dark:bg-zinc-950/50 dark:text-zinc-100;
|
||||
max-height: var(--hb-notebook-output-max-height, 26rem);
|
||||
}
|
||||
|
||||
.hb-notebook-output--stream {
|
||||
@apply font-mono bg-zinc-900 text-zinc-100;
|
||||
}
|
||||
|
||||
.hb-notebook-output--error {
|
||||
@apply border-red-200 bg-red-50/90 text-red-700 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-200;
|
||||
}
|
||||
|
||||
.hb-notebook-output--image {
|
||||
@apply bg-transparent p-0 border-none;
|
||||
}
|
||||
|
||||
.hb-notebook-output--image img,
|
||||
.hb-notebook-output--image svg {
|
||||
@apply h-auto w-full rounded-xl border border-zinc-100/80 bg-white object-contain dark:border-zinc-800/60 dark:bg-zinc-900;
|
||||
}
|
||||
|
||||
.hb-notebook-output--markdown {
|
||||
@apply bg-transparent p-0 border-none;
|
||||
}
|
||||
|
||||
.hb-notebook-output pre {
|
||||
@apply m-0;
|
||||
}
|
||||
|
||||
.hb-notebook-output code {
|
||||
@apply font-mono text-sm;
|
||||
}
|
||||
|
||||
.hb-notebook-empty {
|
||||
@apply mt-4 rounded-2xl border border-dashed border-zinc-300/70 bg-zinc-50/80 px-4 py-3 text-center text-sm text-zinc-500;
|
||||
@apply dark:border-zinc-700 dark:bg-zinc-900/40 dark:text-zinc-300;
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
/* Page layout to push footer to bottom of page */
|
||||
|
||||
.page-wrapper {
|
||||
/* Min height = viewport height - navbar height */
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
|
||||
.page-header,
|
||||
.page-footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.article-header {
|
||||
position: relative; /* Required for caption positioning */
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.article-banner {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
object-fit: cover;
|
||||
|
||||
/* @include media-breakpoint-up(lg) { */
|
||||
/* height: 310px; !* Increased height on desktop *! */
|
||||
/* } */
|
||||
}
|
||||
|
||||
.featured-image-wrapper {
|
||||
position: relative;
|
||||
padding-left: 0; /* Override container padding. */
|
||||
padding-right: 0; /* Override container padding. */
|
||||
}
|
||||
|
||||
.featured-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.article-header-caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
padding: 2px 5px;
|
||||
color: #fff;
|
||||
font-size: 0.7em;
|
||||
background: #000;
|
||||
text-align: right;
|
||||
z-index: 5;
|
||||
opacity: 0.65;
|
||||
border-radius: 5px 0 0;
|
||||
}
|
||||
|
||||
@media (min-width: 64em) {
|
||||
.article-header-caption {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.article-header-caption a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#page-bg {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.backlink {
|
||||
@apply text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50;
|
||||
}
|
||||
|
||||
/* For ToC shortcode, Spoiler shortcode, and direct HTML Details snippets. */
|
||||
details > summary {
|
||||
@apply cursor-pointer font-semibold;
|
||||
|
||||
color: var(--color-primary-700);
|
||||
}
|
||||
|
||||
.dark details > summary {
|
||||
color: var(--color-primary-300);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
/* Match Tailwind lg (default 1024px): https://tailwindcss.com/docs/screens */
|
||||
@media (max-width: 1024px) {
|
||||
.hb-sidebar-container {
|
||||
@apply fixed top-0 w-full bottom-0 z-[15] pt-[calc(var(--navbar-height))] overscroll-contain;
|
||||
|
||||
contain: layout style;
|
||||
transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
|
||||
will-change: transform, opacity;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.hb-sidebar-container {
|
||||
@apply flex flex-col print:hidden lg:top-16 lg:shrink-0 lg:w-64 lg:self-start;
|
||||
|
||||
li > div {
|
||||
@apply h-0;
|
||||
}
|
||||
|
||||
li.open > div {
|
||||
@apply h-auto pt-1;
|
||||
}
|
||||
|
||||
li.open > a > span > svg > path {
|
||||
@apply rotate-90;
|
||||
}
|
||||
}
|
||||
|
||||
.hb-sidebar-list {
|
||||
@apply relative flex flex-col gap-1 before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:ml-3 ltr:pl-3 ltr:before:left-0 rtl:mr-3 rtl:pr-3 rtl:before:right-0;
|
||||
}
|
||||
|
||||
.hb-sidebar-list::before {
|
||||
background-color: var(--color-neutral-200);
|
||||
}
|
||||
|
||||
.dark .hb-sidebar-list::before {
|
||||
background-color: var(--color-neutral-700);
|
||||
}
|
||||
|
||||
.hb-scrollbar {
|
||||
@apply overflow-y-auto overflow-x-hidden p-4 grow;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: oklch(55.55% 0 0 / 40%) transparent;
|
||||
scrollbar-gutter: stable;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
@apply w-3 h-3;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
@apply rounded-[10px];
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
border: 3px solid transparent;
|
||||
background-color: var(--tw-shadow-color);
|
||||
background-clip: content-box;
|
||||
@apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
|
||||
}
|
||||
}
|
||||
|
||||
.hb-docs-link {
|
||||
@apply flex rounded px-2 py-1.5 text-sm transition-colors [word-break:break-word] cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] gap-2 before:opacity-25 before:content-['#'] text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50;
|
||||
}
|
||||
|
||||
.dark .hb-docs-link:hover {
|
||||
background-color: color-mix(in oklch, var(--color-primary-100) 5%, transparent);
|
||||
}
|
||||
|
||||
.hb-sidebar-mobile-menu {
|
||||
@apply [transition:background-color_0.5s_ease];
|
||||
}
|
||||
|
||||
.hb-sidebar-mobile-toc {
|
||||
@apply flex flex-col gap-1 relative before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:pl-3 ltr:before:left-0 rtl:pr-3 rtl:before:right-0 ltr:ml-3 rtl:mr-3;
|
||||
}
|
||||
|
||||
.hb-sidebar-mobile-toc::before {
|
||||
background-color: var(--color-neutral-200);
|
||||
}
|
||||
|
||||
.dark .hb-sidebar-mobile-toc::before {
|
||||
background-color: var(--color-neutral-800);
|
||||
}
|
||||
|
||||
.hb-sidebar-custom-link {
|
||||
@apply flex items-center justify-between gap-2 cursor-pointer rounded px-2 py-1.5 text-sm transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word];
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.hb-steps {
|
||||
@apply ml-4 mb-12 pl-6 border-l border-gray-200 [counter-reset:hb_step];
|
||||
|
||||
border-left-color: var(--color-neutral-200);
|
||||
}
|
||||
|
||||
.dark .hb-steps {
|
||||
border-left-color: var(--color-neutral-600);
|
||||
}
|
||||
|
||||
.hb-steps h3 {
|
||||
counter-increment: hb-step;
|
||||
|
||||
&::before {
|
||||
@apply absolute w-[33px] h-[33px];
|
||||
@apply rounded-full border-4 border-white dark:border-slate-300;
|
||||
@apply bg-gray-100 dark:bg-hb-dark;
|
||||
@apply text-base font-normal text-center -indent-px;
|
||||
@apply mt-[3px] ml-[-41px];
|
||||
|
||||
color: var(--color-neutral-700);
|
||||
content: counter(hb-step);
|
||||
}
|
||||
}
|
||||
|
||||
.dark .hb-steps h3::before {
|
||||
color: var(--color-neutral-200);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
/* Hugo Blox Builder - https://hugoblox.com
|
||||
* Task List Component
|
||||
* License: https://github.com/HugoBlox/kit/blob/main/LICENSE.md
|
||||
*/
|
||||
|
||||
ul.task-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.task-list li input[type="checkbox"] {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
ul.task-list input[type="checkbox"]:checked {
|
||||
appearance: none;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border: none;
|
||||
background: initial;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.task-list input[type="checkbox"]:not(:checked) {
|
||||
width: 0.9em;
|
||||
height: 0.9em;
|
||||
}
|
||||
|
||||
ul.task-list input[type="checkbox"]:checked::after {
|
||||
content: "✅";
|
||||
}
|
||||
@@ -0,0 +1,232 @@
|
||||
/* Safelist patterns for dynamic classes */
|
||||
/* Note: In v4, we use @source inline to ensure these are included */
|
||||
/* This ensures Tailwind generates these classes even if not found in templates */
|
||||
|
||||
/* Inline safelist for classes used in dynamic content and YAML configuration */
|
||||
/* Includes search modal Quick Actions dynamic color classes */
|
||||
@source inline("<div class='block hidden dark:block dark:hidden'></div><div class='task-list'></div><div class='pl-4 pl-8 pl-12'></div><div class='min-h-screen'></div><div class='border-l-2 border-primary-600 bg-primary-50 dark:bg-primary-900/20'></div><div class='overflow-hidden animate-pulse animate-float animate-rotate-slow'></div><div class='blur-2xl blur-3xl -z-10'></div><div class='top-0 bottom-0 left-0 right-0 left-1/4 right-1/4 left-1/2 right-1/2 left-1/3 right-1/3'></div><div class='w-64 w-72 w-80 w-96 h-64 h-72 h-80 h-96 h-48 h-56 rounded-full'></div><div class='skew-y-2 -skew-y-2 skew-y-3 -skew-y-3'></div><div class='md:grid-cols-1 md:grid-cols-2 md:grid-cols-3 md:grid-cols-4 md:grid-cols-5 md:grid-cols-6'></div><div class='bg-white bg-gray-50 bg-gray-100 bg-gray-200 bg-gray-300 bg-gray-400 bg-gray-500 bg-gray-600 bg-gray-700 bg-gray-800 bg-gray-900'></div><div class='bg-neutral-50 bg-neutral-100 bg-neutral-200 bg-neutral-300 bg-neutral-400 bg-neutral-500 bg-neutral-600 bg-neutral-700 bg-neutral-800 bg-neutral-900'></div><div class='dark:bg-neutral-700 dark:bg-neutral-800 dark:bg-neutral-900'></div><div class='bg-primary-50 bg-primary-100 bg-primary-200 bg-primary-300 bg-primary-400 bg-primary-500 bg-primary-600 bg-primary-700 bg-primary-800 bg-primary-900'></div><div class='bg-primary-500/10 bg-primary-500/20 bg-primary-500/30 bg-primary-500/40 bg-primary-600/10 bg-primary-600/20 bg-primary-600/30 bg-primary-600/40'></div><div class='via-transparent from-primary-500/20 to-primary-600/20'></div><div class='bg-secondary-50 bg-secondary-100 bg-secondary-200 bg-secondary-300 bg-secondary-400 bg-secondary-500 bg-secondary-600 bg-secondary-700 bg-secondary-800 bg-secondary-900'></div><div class='text-primary-50 text-primary-100 text-primary-200 text-primary-300 text-primary-400 text-primary-500 text-primary-600 text-primary-700 text-primary-800 text-primary-900'></div><div class='text-secondary-50 text-secondary-100 text-secondary-200 text-secondary-300 text-secondary-400 text-secondary-500 text-secondary-600 text-secondary-700 text-secondary-800 text-secondary-900'></div><div class='text-neutral-50 text-neutral-100 text-neutral-200 text-neutral-300 text-neutral-400 text-neutral-500 text-neutral-600 text-neutral-700 text-neutral-800 text-neutral-900'></div><div class='text-white text-black dark:text-white'></div><div class='dark:text-neutral-300 dark:text-neutral-400'></div><div class='border-primary-50 border-primary-100 border-primary-200 border-primary-300 border-primary-400 border-primary-500 border-primary-600 border-primary-700 border-primary-800 border-primary-900'></div><div class='border-secondary-50 border-secondary-100 border-secondary-200 border-secondary-300 border-secondary-400 border-secondary-500 border-secondary-600 border-secondary-700 border-secondary-800 border-secondary-900'></div><div class='border-neutral-50 border-neutral-100 border-neutral-200 border-neutral-300 border-neutral-400 border-neutral-500 border-neutral-600 border-neutral-700 border-neutral-800 border-neutral-900'></div><div class='bg-gradient-to-t bg-gradient-to-tr bg-gradient-to-r bg-gradient-to-br bg-gradient-to-b bg-gradient-to-bl bg-gradient-to-l bg-gradient-to-tl'></div><div class='from-primary-50 from-primary-100 from-primary-200 from-primary-300 from-primary-400 from-primary-500 from-primary-600 from-primary-700 from-primary-800 from-primary-900'></div><div class='from-secondary-50 from-secondary-100 from-secondary-200 from-secondary-300 from-secondary-400 from-secondary-500 from-secondary-600 from-secondary-700 from-secondary-800 from-secondary-900'></div><div class='to-primary-50 to-primary-100 to-primary-200 to-primary-300 to-primary-400 to-primary-500 to-primary-600 to-primary-700 to-primary-800 to-primary-900'></div><div class='to-secondary-50 to-secondary-100 to-secondary-200 to-secondary-300 to-secondary-400 to-secondary-500 to-secondary-600 to-secondary-700 to-secondary-800 to-secondary-900'></div><div class='hover:from-primary-500 hover:from-secondary-500 hover:to-primary-500 hover:to-secondary-500'></div><div class='hover:bg-primary-50 hover:bg-primary-100 hover:bg-primary-200 hover:bg-primary-300 hover:bg-primary-400 hover:bg-primary-500 hover:bg-primary-600 hover:bg-primary-700 hover:bg-primary-800 hover:bg-primary-900'></div><div class='hover:bg-neutral-50 hover:bg-neutral-100 hover:bg-neutral-200 hover:bg-neutral-300 hover:bg-neutral-400 hover:bg-neutral-500 hover:bg-neutral-600 hover:bg-neutral-700 hover:bg-neutral-800 hover:bg-neutral-900'></div><div class='hover:text-primary hover:text-primary-50 hover:text-primary-100 hover:text-primary-200 hover:text-primary-300 hover:text-primary-400 hover:text-primary-500 hover:text-primary-600 hover:text-primary-700 hover:text-primary-800 hover:text-primary-900'></div><div class='hover:text-neutral-50 hover:text-neutral-100 hover:text-neutral-200 hover:text-neutral-300 hover:text-neutral-400 hover:text-neutral-500 hover:text-neutral-600 hover:text-neutLine truncated
|
||||
|
||||
/* Force generation of all CSS custom properties for dynamic usage in YAML front matter */
|
||||
/* Hidden utility class that forces all color variables to be generated */
|
||||
.force-all-color-vars {
|
||||
/* Primary Colors */
|
||||
color: var(--color-primary-50);
|
||||
color: var(--color-primary-100);
|
||||
color: var(--color-primary-200);
|
||||
color: var(--color-primary-300);
|
||||
color: var(--color-primary-400);
|
||||
color: var(--color-primary-500);
|
||||
color: var(--color-primary-600);
|
||||
color: var(--color-primary-700);
|
||||
color: var(--color-primary-800);
|
||||
color: var(--color-primary-900);
|
||||
color: var(--color-primary-950);
|
||||
|
||||
/* Secondary Colors */
|
||||
color: var(--color-secondary-50);
|
||||
color: var(--color-secondary-100);
|
||||
color: var(--color-secondary-200);
|
||||
color: var(--color-secondary-300);
|
||||
color: var(--color-secondary-400);
|
||||
color: var(--color-secondary-500);
|
||||
color: var(--color-secondary-600);
|
||||
color: var(--color-secondary-700);
|
||||
color: var(--color-secondary-800);
|
||||
color: var(--color-secondary-900);
|
||||
color: var(--color-secondary-950);
|
||||
|
||||
/* Extended Color Palette for Dynamic Gradients */
|
||||
color: var(--color-indigo-50);
|
||||
color: var(--color-indigo-100);
|
||||
color: var(--color-indigo-200);
|
||||
color: var(--color-indigo-300);
|
||||
color: var(--color-indigo-400);
|
||||
color: var(--color-indigo-500);
|
||||
color: var(--color-indigo-600);
|
||||
color: var(--color-indigo-700);
|
||||
color: var(--color-indigo-800);
|
||||
color: var(--color-indigo-900);
|
||||
color: var(--color-indigo-950);
|
||||
|
||||
color: var(--color-purple-50);
|
||||
color: var(--color-purple-100);
|
||||
color: var(--color-purple-200);
|
||||
color: var(--color-purple-300);
|
||||
color: var(--color-purple-400);
|
||||
color: var(--color-purple-500);
|
||||
color: var(--color-purple-600);
|
||||
color: var(--color-purple-700);
|
||||
color: var(--color-purple-800);
|
||||
color: var(--color-purple-900);
|
||||
color: var(--color-purple-950);
|
||||
|
||||
color: var(--color-pink-50);
|
||||
color: var(--color-pink-100);
|
||||
color: var(--color-pink-200);
|
||||
color: var(--color-pink-300);
|
||||
color: var(--color-pink-400);
|
||||
color: var(--color-pink-500);
|
||||
color: var(--color-pink-600);
|
||||
color: var(--color-pink-700);
|
||||
color: var(--color-pink-800);
|
||||
color: var(--color-pink-900);
|
||||
color: var(--color-pink-950);
|
||||
|
||||
color: var(--color-red-50);
|
||||
color: var(--color-red-100);
|
||||
color: var(--color-red-200);
|
||||
color: var(--color-red-300);
|
||||
color: var(--color-red-400);
|
||||
color: var(--color-red-500);
|
||||
color: var(--color-red-600);
|
||||
color: var(--color-red-700);
|
||||
color: var(--color-red-800);
|
||||
color: var(--color-red-900);
|
||||
color: var(--color-red-950);
|
||||
|
||||
color: var(--color-orange-50);
|
||||
color: var(--color-orange-100);
|
||||
color: var(--color-orange-200);
|
||||
color: var(--color-orange-300);
|
||||
color: var(--color-orange-400);
|
||||
color: var(--color-orange-500);
|
||||
color: var(--color-orange-600);
|
||||
color: var(--color-orange-700);
|
||||
color: var(--color-orange-800);
|
||||
color: var(--color-orange-900);
|
||||
color: var(--color-orange-950);
|
||||
|
||||
color: var(--color-amber-50);
|
||||
color: var(--color-amber-100);
|
||||
color: var(--color-amber-200);
|
||||
color: var(--color-amber-300);
|
||||
color: var(--color-amber-400);
|
||||
color: var(--color-amber-500);
|
||||
color: var(--color-amber-600);
|
||||
color: var(--color-amber-700);
|
||||
color: var(--color-amber-800);
|
||||
color: var(--color-amber-900);
|
||||
color: var(--color-amber-950);
|
||||
|
||||
color: var(--color-yellow-50);
|
||||
color: var(--color-yellow-100);
|
||||
color: var(--color-yellow-200);
|
||||
color: var(--color-yellow-300);
|
||||
color: var(--color-yellow-400);
|
||||
color: var(--color-yellow-500);
|
||||
color: var(--color-yellow-600);
|
||||
color: var(--color-yellow-700);
|
||||
color: var(--color-yellow-800);
|
||||
color: var(--color-yellow-900);
|
||||
color: var(--color-yellow-950);
|
||||
|
||||
color: var(--color-lime-50);
|
||||
color: var(--color-lime-100);
|
||||
color: var(--color-lime-200);
|
||||
color: var(--color-lime-300);
|
||||
color: var(--color-lime-400);
|
||||
color: var(--color-lime-500);
|
||||
color: var(--color-lime-600);
|
||||
color: var(--color-lime-700);
|
||||
color: var(--color-lime-800);
|
||||
color: var(--color-lime-900);
|
||||
color: var(--color-lime-950);
|
||||
|
||||
color: var(--color-green-50);
|
||||
color: var(--color-green-100);
|
||||
color: var(--color-green-200);
|
||||
color: var(--color-green-300);
|
||||
color: var(--color-green-400);
|
||||
color: var(--color-green-500);
|
||||
color: var(--color-green-600);
|
||||
color: var(--color-green-700);
|
||||
color: var(--color-green-800);
|
||||
color: var(--color-green-900);
|
||||
color: var(--color-green-950);
|
||||
|
||||
color: var(--color-emerald-50);
|
||||
color: var(--color-emerald-100);
|
||||
color: var(--color-emerald-200);
|
||||
color: var(--color-emerald-300);
|
||||
color: var(--color-emerald-400);
|
||||
color: var(--color-emerald-500);
|
||||
color: var(--color-emerald-600);
|
||||
color: var(--color-emerald-700);
|
||||
color: var(--color-emerald-800);
|
||||
color: var(--color-emerald-900);
|
||||
color: var(--color-emerald-950);
|
||||
|
||||
color: var(--color-teal-50);
|
||||
color: var(--color-teal-100);
|
||||
color: var(--color-teal-200);
|
||||
color: var(--color-teal-300);
|
||||
color: var(--color-teal-400);
|
||||
color: var(--color-teal-500);
|
||||
color: var(--color-teal-600);
|
||||
color: var(--color-teal-700);
|
||||
color: var(--color-teal-800);
|
||||
color: var(--color-teal-900);
|
||||
color: var(--color-teal-950);
|
||||
|
||||
color: var(--color-cyan-50);
|
||||
color: var(--color-cyan-100);
|
||||
color: var(--color-cyan-200);
|
||||
color: var(--color-cyan-300);
|
||||
color: var(--color-cyan-400);
|
||||
color: var(--color-cyan-500);
|
||||
color: var(--color-cyan-600);
|
||||
color: var(--color-cyan-700);
|
||||
color: var(--color-cyan-800);
|
||||
color: var(--color-cyan-900);
|
||||
color: var(--color-cyan-950);
|
||||
|
||||
color: var(--color-sky-50);
|
||||
color: var(--color-sky-100);
|
||||
color: var(--color-sky-200);
|
||||
color: var(--color-sky-300);
|
||||
color: var(--color-sky-400);
|
||||
color: var(--color-sky-500);
|
||||
color: var(--color-sky-600);
|
||||
color: var(--color-sky-700);
|
||||
color: var(--color-sky-800);
|
||||
color: var(--color-sky-900);
|
||||
color: var(--color-sky-950);
|
||||
|
||||
color: var(--color-blue-50);
|
||||
color: var(--color-blue-100);
|
||||
color: var(--color-blue-200);
|
||||
color: var(--color-blue-300);
|
||||
color: var(--color-blue-400);
|
||||
color: var(--color-blue-500);
|
||||
color: var(--color-blue-600);
|
||||
color: var(--color-blue-700);
|
||||
color: var(--color-blue-800);
|
||||
color: var(--color-blue-900);
|
||||
color: var(--color-blue-950);
|
||||
|
||||
color: var(--color-violet-50);
|
||||
color: var(--color-violet-100);
|
||||
color: var(--color-violet-200);
|
||||
color: var(--color-violet-300);
|
||||
color: var(--color-violet-400);
|
||||
color: var(--color-violet-500);
|
||||
color: var(--color-violet-600);
|
||||
color: var(--color-violet-700);
|
||||
color: var(--color-violet-800);
|
||||
color: var(--color-violet-900);
|
||||
color: var(--color-violet-950);
|
||||
|
||||
/* Never display this class */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Support for dual light/dark background colors in parse_block_v2.html */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.home-section-bg[style*="--dark-bg-color"] {
|
||||
background-color: var(--dark-bg-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dark .home-section-bg[style*="--dark-bg-color"] {
|
||||
background-color: var(--dark-bg-color) !important;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,339 @@
|
||||
/* 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 family */
|
||||
--font-family-sans: inter var, ui-sans-serif, system-ui, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
/* Base styles for better text rendering */
|
||||
@layer base {
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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: 500;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -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: 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;
|
||||
}
|
||||
}
|
||||
@@ -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: 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;
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
/*
|
||||
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
|
||||
- --hb-font-size-scale: Modular scale ratio
|
||||
*/
|
||||
|
||||
/* 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);
|
||||
}
|
||||
@@ -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 {
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
/*
|
||||
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 "blox/all.css";
|
||||
@import "views/all.css";
|
||||
@import "chroma.css";
|
||||
|
||||
/* Hugo Blox Search */
|
||||
@import "hb-search.css";
|
||||
|
||||
/* Safelist for dynamic classes */
|
||||
@import "config/safelist.css";
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import "attachments.css";
|
||||
@@ -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;
|
||||
}
|
||||
Reference in new issue
Block a user