mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-12 14:14:48 +00:00
feat: re-design resume-biography-3 block & support full color palettes
Modern re-design of the main Resume block. Awards block icons are no longer tied to the 'brands' pack - any pack can be used and specified in the form `icon: <pack>/<icon> Refactor Tailwind CSS theming to support full primary/secondary palettes Refactors the theme system to correctly apply primary and secondary color palettes from theme packs. Previously, Tailwind's build-time resolution of CSS variables in the `@theme` block caused theme pack colors to be overridden by the default blue theme. This commit resolves the issue by adopting a best-practice, two-layer token system: 1. All theme packs now define `--hb-primary-*-rgb` and `--hb-secondary-*-rgb` variables with raw RGB values. 2. The core `theme.css` now defines `--color-primary-*` and `--color-secondary-*` inside the `@theme` block using a `rgb(var(...))` function. This makes Tailwind aware of the themeable color names so it can generate all necessary utilities (`bg-`, `text-`, `ring-`, etc.) while ensuring the final color value is resolved in the browser at runtime. This change fixes the build error related to unknown utility classes (e.g., `ring-primary-500`) and ensures that the selected theme pack is correctly applied across all components.
This commit is contained in:
George Cushen committed
1 parent
3b314fe4b2
commit
04f3b2e8ae
35 files changed
+1427
-840
No files matched your search
@@ -1,70 +1,99 @@
|
||||
# Hugo Blox Tailwind CSS v4 Structure
|
||||
# Hugo Blox Tailwind CSS v4 Color System
|
||||
|
||||
## Overview
|
||||
## Architecture Overview
|
||||
|
||||
The CSS architecture is modularized for maintainability and organization. The entry point is `main.css` which orchestrates all imports.
|
||||
This system leverages Tailwind CSS v4's automatic utility generation to provide a comprehensive color system with minimal code.
|
||||
|
||||
## Directory Structure
|
||||
### How It Works
|
||||
|
||||
```
|
||||
css/
|
||||
├── main.css # Main entry point
|
||||
├── color-utilities.css # HB Theme Engine
|
||||
├── config/ # Tailwind configuration
|
||||
│ ├── tailwind.css # Tailwind v4 directives (@source, @custom-variant)
|
||||
│ ├── theme.css # HB Theme variables (@theme block)
|
||||
│ └── safelist.css # Dynamic classes safelist
|
||||
├── framework/ # Hugo Blox framework styles
|
||||
│ ├── base.css # Base styles and typography
|
||||
│ └── components.css # Framework components
|
||||
├── components/ # Hugo Blox module components
|
||||
│ └── all.css # Imports all component files
|
||||
├── blox/ # Block-specific styles
|
||||
│ └── all.css # Imports all block styles
|
||||
└── views/ # Listing view styles
|
||||
└── all.css # Imports all listing view styles
|
||||
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>
|
||||
```
|
||||
|
||||
## Key Files
|
||||
### Benefits
|
||||
|
||||
### main.css
|
||||
The orchestrator that imports everything in the correct order:
|
||||
1. Tailwind base
|
||||
2. Configuration
|
||||
3. Base styles
|
||||
4. Hugo Blox theme engine
|
||||
5. Components
|
||||
6. Safelist
|
||||
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
|
||||
|
||||
### config/tailwind.css
|
||||
Contains Tailwind v4-specific directives:
|
||||
- `@source` - Where to scan for classes
|
||||
- `@custom-variant` - Custom variants (dark, hover)
|
||||
- `@plugin` - Plugin imports
|
||||
### Adding New Colors
|
||||
|
||||
### config/theme.css
|
||||
Defines the theme using `@theme` block:
|
||||
- Color palettes (primary, secondary, neutral)
|
||||
- Font families and sizes
|
||||
- Custom properties
|
||||
To add a new color scale:
|
||||
|
||||
### color-utilities.css
|
||||
Hugo Blox theme engine with color utility classes:
|
||||
- All color shades (50-950)
|
||||
- All variants (hover, dark, focus)
|
||||
- Gradient utilities
|
||||
1. Define in `config/theme.css`:
|
||||
|
||||
## Tailwind v4 Notes
|
||||
```css
|
||||
--color-brand-500: 59 130 246;
|
||||
--color-brand-600: 37 99 235;
|
||||
/* etc. */
|
||||
```
|
||||
|
||||
- `@source`, `@theme`, `@plugin` are new v4 directives
|
||||
- Linters may show warnings for these - they can be ignored
|
||||
- Hugo's `css.TailwindCSS` function processes this automatically
|
||||
- No PostCSS configuration needed anymore
|
||||
2. Tailwind automatically generates all utilities:
|
||||
- `bg-brand-500`, `text-brand-600`, `hover:bg-brand-500`, etc.
|
||||
|
||||
## Maintenance
|
||||
|
||||
When adding new styles:
|
||||
1. Framework classes → `framework/components.css`
|
||||
2. Theme variables → `config/theme.css`
|
||||
3. Component styles → `components/[file].css`
|
||||
4. Dynamic classes → Add to `config/safelist.css`
|
||||
No manual utility definitions required!
|
||||
@@ -6,7 +6,6 @@
|
||||
}
|
||||
|
||||
/* Custom avatar size on homepage - size controlled by template params */
|
||||
|
||||
.avatar {
|
||||
width: auto;
|
||||
height: auto;
|
||||
@@ -15,7 +14,8 @@
|
||||
|
||||
.network-icon {
|
||||
display: inline-flex;
|
||||
flex-flow: row wrap;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@@ -50,48 +50,89 @@
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* .ul-edu { */
|
||||
/* list-style: none; */
|
||||
/* } */
|
||||
|
||||
/* .ul-edu li { */
|
||||
/* position: relative; */
|
||||
/* padding: 0 15px 4px 3px; */
|
||||
/* } */
|
||||
|
||||
/* .ul-edu li .description p { */
|
||||
/* margin: 0; */
|
||||
/* } */
|
||||
|
||||
.ul-edu li .description p.course {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.ul-edu li .description p.institution {
|
||||
font-size: 0.75rem;
|
||||
|
||||
/* color: rgba(0, 0, 0, 0.6); */
|
||||
}
|
||||
|
||||
.network-icon .big-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* .dark .portrait-title h3 { */
|
||||
/* color: rgb(255 255 255 / 90%); */
|
||||
/* font-weight: bold; */
|
||||
/* } */
|
||||
|
||||
/* .dark .portrait-title h2 { */
|
||||
/* color: #fff; */
|
||||
/* font-weight: bold; */
|
||||
/* } */
|
||||
|
||||
.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 rgb(var(--color-primary-500));
|
||||
outline-offset: 2px;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* Improved text selection styling */
|
||||
.resume-biography-modern ::selection {
|
||||
background-color: rgb(var(--color-primary-200) / 0.3);
|
||||
color: rgb(var(--color-primary-900));
|
||||
}
|
||||
|
||||
.dark .resume-biography-modern ::selection {
|
||||
background-color: rgb(var(--color-primary-800) / 0.3);
|
||||
color: rgb(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: rgb(var(--color-neutral-900));
|
||||
}
|
||||
|
||||
.dark .resume-biography-modern .bg-clip-text {
|
||||
color: rgb(var(--color-neutral-100));
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
/* width and height controlled by template params */
|
||||
@@ -118,3 +159,39 @@
|
||||
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%);
|
||||
}
|
||||
@@ -1,285 +1,47 @@
|
||||
/* Comprehensive Color Utilities for Hugo Blox with Tailwind v4 */
|
||||
/* This file defines all color utilities using CSS variables from theme files */
|
||||
/* 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 {
|
||||
/* Primary Colors - Full Range (50-950) */
|
||||
.bg-primary-50 { background-color: rgb(var(--color-primary-50)); }
|
||||
.bg-primary-100 { background-color: rgb(var(--color-primary-100)); }
|
||||
.bg-primary-200 { background-color: rgb(var(--color-primary-200)); }
|
||||
.bg-primary-300 { background-color: rgb(var(--color-primary-300)); }
|
||||
.bg-primary-400 { background-color: rgb(var(--color-primary-400)); }
|
||||
.bg-primary-500 { background-color: rgb(var(--color-primary-500)); }
|
||||
.bg-primary-600 { background-color: rgb(var(--color-primary-600)); }
|
||||
.bg-primary-700 { background-color: rgb(var(--color-primary-700)); }
|
||||
.bg-primary-800 { background-color: rgb(var(--color-primary-800)); }
|
||||
.bg-primary-900 { background-color: rgb(var(--color-primary-900)); }
|
||||
.bg-primary-950 { background-color: rgb(var(--color-primary-950)); }
|
||||
|
||||
.text-primary-50 { color: rgb(var(--color-primary-50)); }
|
||||
.text-primary-100 { color: rgb(var(--color-primary-100)); }
|
||||
.text-primary-200 { color: rgb(var(--color-primary-200)); }
|
||||
.text-primary-300 { color: rgb(var(--color-primary-300)); }
|
||||
.text-primary-400 { color: rgb(var(--color-primary-400)); }
|
||||
.text-primary-500 { color: rgb(var(--color-primary-500)); }
|
||||
.text-primary-600 { color: rgb(var(--color-primary-600)); }
|
||||
.text-primary-700 { color: rgb(var(--color-primary-700)); }
|
||||
.text-primary-800 { color: rgb(var(--color-primary-800)); }
|
||||
.text-primary-900 { color: rgb(var(--color-primary-900)); }
|
||||
.text-primary-950 { color: rgb(var(--color-primary-950)); }
|
||||
|
||||
.border-primary-50 { border-color: rgb(var(--color-primary-50)); }
|
||||
.border-primary-100 { border-color: rgb(var(--color-primary-100)); }
|
||||
.border-primary-200 { border-color: rgb(var(--color-primary-200)); }
|
||||
.border-primary-300 { border-color: rgb(var(--color-primary-300)); }
|
||||
.border-primary-400 { border-color: rgb(var(--color-primary-400)); }
|
||||
.border-primary-500 { border-color: rgb(var(--color-primary-500)); }
|
||||
.border-primary-600 { border-color: rgb(var(--color-primary-600)); }
|
||||
.border-primary-700 { border-color: rgb(var(--color-primary-700)); }
|
||||
.border-primary-800 { border-color: rgb(var(--color-primary-800)); }
|
||||
.border-primary-900 { border-color: rgb(var(--color-primary-900)); }
|
||||
.border-primary-950 { border-color: rgb(var(--color-primary-950)); }
|
||||
|
||||
/* Secondary Colors - Full Range */
|
||||
.bg-secondary-50 { background-color: rgb(var(--color-secondary-50)); }
|
||||
.bg-secondary-100 { background-color: rgb(var(--color-secondary-100)); }
|
||||
.bg-secondary-200 { background-color: rgb(var(--color-secondary-200)); }
|
||||
.bg-secondary-300 { background-color: rgb(var(--color-secondary-300)); }
|
||||
.bg-secondary-400 { background-color: rgb(var(--color-secondary-400)); }
|
||||
.bg-secondary-500 { background-color: rgb(var(--color-secondary-500)); }
|
||||
.bg-secondary-600 { background-color: rgb(var(--color-secondary-600)); }
|
||||
.bg-secondary-700 { background-color: rgb(var(--color-secondary-700)); }
|
||||
.bg-secondary-800 { background-color: rgb(var(--color-secondary-800)); }
|
||||
.bg-secondary-900 { background-color: rgb(var(--color-secondary-900)); }
|
||||
.bg-secondary-950 { background-color: rgb(var(--color-secondary-950)); }
|
||||
|
||||
.text-secondary-50 { color: rgb(var(--color-secondary-50)); }
|
||||
.text-secondary-100 { color: rgb(var(--color-secondary-100)); }
|
||||
.text-secondary-200 { color: rgb(var(--color-secondary-200)); }
|
||||
.text-secondary-300 { color: rgb(var(--color-secondary-300)); }
|
||||
.text-secondary-400 { color: rgb(var(--color-secondary-400)); }
|
||||
.text-secondary-500 { color: rgb(var(--color-secondary-500)); }
|
||||
.text-secondary-600 { color: rgb(var(--color-secondary-600)); }
|
||||
.text-secondary-700 { color: rgb(var(--color-secondary-700)); }
|
||||
.text-secondary-800 { color: rgb(var(--color-secondary-800)); }
|
||||
.text-secondary-900 { color: rgb(var(--color-secondary-900)); }
|
||||
.text-secondary-950 { color: rgb(var(--color-secondary-950)); }
|
||||
|
||||
.border-secondary-50 { border-color: rgb(var(--color-secondary-50)); }
|
||||
.border-secondary-100 { border-color: rgb(var(--color-secondary-100)); }
|
||||
.border-secondary-200 { border-color: rgb(var(--color-secondary-200)); }
|
||||
.border-secondary-300 { border-color: rgb(var(--color-secondary-300)); }
|
||||
.border-secondary-400 { border-color: rgb(var(--color-secondary-400)); }
|
||||
.border-secondary-500 { border-color: rgb(var(--color-secondary-500)); }
|
||||
.border-secondary-600 { border-color: rgb(var(--color-secondary-600)); }
|
||||
.border-secondary-700 { border-color: rgb(var(--color-secondary-700)); }
|
||||
.border-secondary-800 { border-color: rgb(var(--color-secondary-800)); }
|
||||
.border-secondary-900 { border-color: rgb(var(--color-secondary-900)); }
|
||||
.border-secondary-950 { border-color: rgb(var(--color-secondary-950)); }
|
||||
|
||||
/* Neutral Colors - Full Range with defaults */
|
||||
.bg-neutral-50 { background-color: rgb(var(--color-neutral-50, 250 250 250)); }
|
||||
.bg-neutral-100 { background-color: rgb(var(--color-neutral-100, 245 245 245)); }
|
||||
.bg-neutral-200 { background-color: rgb(var(--color-neutral-200, 229 229 229)); }
|
||||
.bg-neutral-300 { background-color: rgb(var(--color-neutral-300, 212 212 212)); }
|
||||
.bg-neutral-400 { background-color: rgb(var(--color-neutral-400, 163 163 163)); }
|
||||
.bg-neutral-500 { background-color: rgb(var(--color-neutral-500, 115 115 115)); }
|
||||
.bg-neutral-600 { background-color: rgb(var(--color-neutral-600, 82 82 82)); }
|
||||
.bg-neutral-700 { background-color: rgb(var(--color-neutral-700, 64 64 64)); }
|
||||
.bg-neutral-800 { background-color: rgb(var(--color-neutral-800, 38 38 38)); }
|
||||
.bg-neutral-900 { background-color: rgb(var(--color-neutral-900, 23 23 23)); }
|
||||
.bg-neutral-950 { background-color: rgb(var(--color-neutral-950, 10 10 10)); }
|
||||
|
||||
.text-neutral-50 { color: rgb(var(--color-neutral-50, 250 250 250)); }
|
||||
.text-neutral-100 { color: rgb(var(--color-neutral-100, 245 245 245)); }
|
||||
.text-neutral-200 { color: rgb(var(--color-neutral-200, 229 229 229)); }
|
||||
.text-neutral-300 { color: rgb(var(--color-neutral-300, 212 212 212)); }
|
||||
.text-neutral-400 { color: rgb(var(--color-neutral-400, 163 163 163)); }
|
||||
.text-neutral-500 { color: rgb(var(--color-neutral-500, 115 115 115)); }
|
||||
.text-neutral-600 { color: rgb(var(--color-neutral-600, 82 82 82)); }
|
||||
.text-neutral-700 { color: rgb(var(--color-neutral-700, 64 64 64)); }
|
||||
.text-neutral-800 { color: rgb(var(--color-neutral-800, 38 38 38)); }
|
||||
.text-neutral-900 { color: rgb(var(--color-neutral-900, 23 23 23)); }
|
||||
.text-neutral-950 { color: rgb(var(--color-neutral-950, 10 10 10)); }
|
||||
|
||||
.border-neutral-50 { border-color: rgb(var(--color-neutral-50, 250 250 250)); }
|
||||
.border-neutral-100 { border-color: rgb(var(--color-neutral-100, 245 245 245)); }
|
||||
.border-neutral-200 { border-color: rgb(var(--color-neutral-200, 229 229 229)); }
|
||||
.border-neutral-300 { border-color: rgb(var(--color-neutral-300, 212 212 212)); }
|
||||
.border-neutral-400 { border-color: rgb(var(--color-neutral-400, 163 163 163)); }
|
||||
.border-neutral-500 { border-color: rgb(var(--color-neutral-500, 115 115 115)); }
|
||||
.border-neutral-600 { border-color: rgb(var(--color-neutral-600, 82 82 82)); }
|
||||
.border-neutral-700 { border-color: rgb(var(--color-neutral-700, 64 64 64)); }
|
||||
.border-neutral-800 { border-color: rgb(var(--color-neutral-800, 38 38 38)); }
|
||||
.border-neutral-900 { border-color: rgb(var(--color-neutral-900, 23 23 23)); }
|
||||
.border-neutral-950 { border-color: rgb(var(--color-neutral-950, 10 10 10)); }
|
||||
|
||||
/* Hover Variants - Primary */
|
||||
.hover\:bg-primary-50:hover { background-color: rgb(var(--color-primary-50)); }
|
||||
.hover\:bg-primary-100:hover { background-color: rgb(var(--color-primary-100)); }
|
||||
.hover\:bg-primary-200:hover { background-color: rgb(var(--color-primary-200)); }
|
||||
.hover\:bg-primary-300:hover { background-color: rgb(var(--color-primary-300)); }
|
||||
.hover\:bg-primary-400:hover { background-color: rgb(var(--color-primary-400)); }
|
||||
.hover\:bg-primary-500:hover { background-color: rgb(var(--color-primary-500)); }
|
||||
.hover\:bg-primary-600:hover { background-color: rgb(var(--color-primary-600)); }
|
||||
.hover\:bg-primary-700:hover { background-color: rgb(var(--color-primary-700)); }
|
||||
.hover\:bg-primary-800:hover { background-color: rgb(var(--color-primary-800)); }
|
||||
.hover\:bg-primary-900:hover { background-color: rgb(var(--color-primary-900)); }
|
||||
.hover\:bg-primary-950:hover { background-color: rgb(var(--color-primary-950)); }
|
||||
|
||||
.hover\:text-primary-50:hover { color: rgb(var(--color-primary-50)); }
|
||||
.hover\:text-primary-100:hover { color: rgb(var(--color-primary-100)); }
|
||||
.hover\:text-primary-200:hover { color: rgb(var(--color-primary-200)); }
|
||||
.hover\:text-primary-300:hover { color: rgb(var(--color-primary-300)); }
|
||||
.hover\:text-primary-400:hover { color: rgb(var(--color-primary-400)); }
|
||||
.hover\:text-primary-500:hover { color: rgb(var(--color-primary-500)); }
|
||||
.hover\:text-primary-600:hover { color: rgb(var(--color-primary-600)); }
|
||||
.hover\:text-primary-700:hover { color: rgb(var(--color-primary-700)); }
|
||||
.hover\:text-primary-800:hover { color: rgb(var(--color-primary-800)); }
|
||||
.hover\:text-primary-900:hover { color: rgb(var(--color-primary-900)); }
|
||||
.hover\:text-primary-950:hover { color: rgb(var(--color-primary-950)); }
|
||||
|
||||
/* Hover Variants - Neutral */
|
||||
.hover\:bg-neutral-50:hover { background-color: rgb(var(--color-neutral-50)); }
|
||||
.hover\:bg-neutral-100:hover { background-color: rgb(var(--color-neutral-100)); }
|
||||
.hover\:bg-neutral-200:hover { background-color: rgb(var(--color-neutral-200)); }
|
||||
.hover\:bg-neutral-300:hover { background-color: rgb(var(--color-neutral-300)); }
|
||||
.hover\:bg-neutral-400:hover { background-color: rgb(var(--color-neutral-400)); }
|
||||
.hover\:bg-neutral-500:hover { background-color: rgb(var(--color-neutral-500)); }
|
||||
.hover\:bg-neutral-600:hover { background-color: rgb(var(--color-neutral-600)); }
|
||||
.hover\:bg-neutral-700:hover { background-color: rgb(var(--color-neutral-700)); }
|
||||
.hover\:bg-neutral-800:hover { background-color: rgb(var(--color-neutral-800)); }
|
||||
.hover\:bg-neutral-900:hover { background-color: rgb(var(--color-neutral-900)); }
|
||||
|
||||
.hover\:text-neutral-50:hover { color: rgb(var(--color-neutral-50)); }
|
||||
.hover\:text-neutral-100:hover { color: rgb(var(--color-neutral-100)); }
|
||||
.hover\:text-neutral-200:hover { color: rgb(var(--color-neutral-200)); }
|
||||
.hover\:text-neutral-300:hover { color: rgb(var(--color-neutral-300)); }
|
||||
.hover\:text-neutral-400:hover { color: rgb(var(--color-neutral-400)); }
|
||||
.hover\:text-neutral-500:hover { color: rgb(var(--color-neutral-500)); }
|
||||
.hover\:text-neutral-600:hover { color: rgb(var(--color-neutral-600)); }
|
||||
.hover\:text-neutral-700:hover { color: rgb(var(--color-neutral-700)); }
|
||||
.hover\:text-neutral-800:hover { color: rgb(var(--color-neutral-800)); }
|
||||
.hover\:text-neutral-900:hover { color: rgb(var(--color-neutral-900)); }
|
||||
|
||||
/* Dark Mode Variants - Primary */
|
||||
.dark\:bg-primary-50:where(.dark, .dark *) { background-color: rgb(var(--color-primary-50)); }
|
||||
.dark\:bg-primary-100:where(.dark, .dark *) { background-color: rgb(var(--color-primary-100)); }
|
||||
.dark\:bg-primary-200:where(.dark, .dark *) { background-color: rgb(var(--color-primary-200)); }
|
||||
.dark\:bg-primary-300:where(.dark, .dark *) { background-color: rgb(var(--color-primary-300)); }
|
||||
.dark\:bg-primary-400:where(.dark, .dark *) { background-color: rgb(var(--color-primary-400)); }
|
||||
.dark\:bg-primary-500:where(.dark, .dark *) { background-color: rgb(var(--color-primary-500)); }
|
||||
.dark\:bg-primary-600:where(.dark, .dark *) { background-color: rgb(var(--color-primary-600)); }
|
||||
.dark\:bg-primary-700:where(.dark, .dark *) { background-color: rgb(var(--color-primary-700)); }
|
||||
.dark\:bg-primary-800:where(.dark, .dark *) { background-color: rgb(var(--color-primary-800)); }
|
||||
.dark\:bg-primary-900:where(.dark, .dark *) { background-color: rgb(var(--color-primary-900)); }
|
||||
.dark\:bg-primary-950:where(.dark, .dark *) { background-color: rgb(var(--color-primary-950)); }
|
||||
|
||||
.dark\:text-primary-50:where(.dark, .dark *) { color: rgb(var(--color-primary-50)); }
|
||||
.dark\:text-primary-100:where(.dark, .dark *) { color: rgb(var(--color-primary-100)); }
|
||||
.dark\:text-primary-200:where(.dark, .dark *) { color: rgb(var(--color-primary-200)); }
|
||||
.dark\:text-primary-300:where(.dark, .dark *) { color: rgb(var(--color-primary-300)); }
|
||||
.dark\:text-primary-400:where(.dark, .dark *) { color: rgb(var(--color-primary-400)); }
|
||||
.dark\:text-primary-500:where(.dark, .dark *) { color: rgb(var(--color-primary-500)); }
|
||||
.dark\:text-primary-600:where(.dark, .dark *) { color: rgb(var(--color-primary-600)); }
|
||||
.dark\:text-primary-700:where(.dark, .dark *) { color: rgb(var(--color-primary-700)); }
|
||||
.dark\:text-primary-800:where(.dark, .dark *) { color: rgb(var(--color-primary-800)); }
|
||||
.dark\:text-primary-900:where(.dark, .dark *) { color: rgb(var(--color-primary-900)); }
|
||||
|
||||
/* Dark Mode Variants - Neutral */
|
||||
.dark\:bg-neutral-50:where(.dark, .dark *) { background-color: rgb(var(--color-neutral-50)); }
|
||||
.dark\:bg-neutral-100:where(.dark, .dark *) { background-color: rgb(var(--color-neutral-100)); }
|
||||
.dark\:bg-neutral-200:where(.dark, .dark *) { background-color: rgb(var(--color-neutral-200)); }
|
||||
.dark\:bg-neutral-300:where(.dark, .dark *) { background-color: rgb(var(--color-neutral-300)); }
|
||||
.dark\:bg-neutral-400:where(.dark, .dark *) { background-color: rgb(var(--color-neutral-400)); }
|
||||
.dark\:bg-neutral-500:where(.dark, .dark *) { background-color: rgb(var(--color-neutral-500)); }
|
||||
.dark\:bg-neutral-600:where(.dark, .dark *) { background-color: rgb(var(--color-neutral-600)); }
|
||||
.dark\:bg-neutral-700:where(.dark, .dark *) { background-color: rgb(var(--color-neutral-700)); }
|
||||
.dark\:bg-neutral-800:where(.dark, .dark *) { background-color: rgb(var(--color-neutral-800)); }
|
||||
.dark\:bg-neutral-900:where(.dark, .dark *) { background-color: rgb(var(--color-neutral-900)); }
|
||||
.dark\:bg-neutral-950:where(.dark, .dark *) { background-color: rgb(var(--color-neutral-950)); }
|
||||
|
||||
.dark\:text-neutral-50:where(.dark, .dark *) { color: rgb(var(--color-neutral-50)); }
|
||||
.dark\:text-neutral-100:where(.dark, .dark *) { color: rgb(var(--color-neutral-100)); }
|
||||
.dark\:text-neutral-200:where(.dark, .dark *) { color: rgb(var(--color-neutral-200)); }
|
||||
.dark\:text-neutral-300:where(.dark, .dark *) { color: rgb(var(--color-neutral-300)); }
|
||||
.dark\:text-neutral-400:where(.dark, .dark *) { color: rgb(var(--color-neutral-400)); }
|
||||
.dark\:text-neutral-500:where(.dark, .dark *) { color: rgb(var(--color-neutral-500)); }
|
||||
.dark\:text-neutral-600:where(.dark, .dark *) { color: rgb(var(--color-neutral-600)); }
|
||||
.dark\:text-neutral-700:where(.dark, .dark *) { color: rgb(var(--color-neutral-700)); }
|
||||
.dark\:text-neutral-800:where(.dark, .dark *) { color: rgb(var(--color-neutral-800)); }
|
||||
.dark\:text-neutral-900:where(.dark, .dark *) { color: rgb(var(--color-neutral-900)); }
|
||||
|
||||
/* Dark Hover Variants - Primary */
|
||||
.dark\:hover\:bg-primary-50:where(.dark, .dark *):hover { background-color: rgb(var(--color-primary-50)); }
|
||||
.dark\:hover\:bg-primary-100:where(.dark, .dark *):hover { background-color: rgb(var(--color-primary-100)); }
|
||||
.dark\:hover\:bg-primary-200:where(.dark, .dark *):hover { background-color: rgb(var(--color-primary-200)); }
|
||||
.dark\:hover\:bg-primary-300:where(.dark, .dark *):hover { background-color: rgb(var(--color-primary-300)); }
|
||||
.dark\:hover\:bg-primary-400:where(.dark, .dark *):hover { background-color: rgb(var(--color-primary-400)); }
|
||||
.dark\:hover\:bg-primary-500:where(.dark, .dark *):hover { background-color: rgb(var(--color-primary-500)); }
|
||||
.dark\:hover\:bg-primary-600:where(.dark, .dark *):hover { background-color: rgb(var(--color-primary-600)); }
|
||||
.dark\:hover\:bg-primary-700:where(.dark, .dark *):hover { background-color: rgb(var(--color-primary-700)); }
|
||||
.dark\:hover\:bg-primary-800:where(.dark, .dark *):hover { background-color: rgb(var(--color-primary-800)); }
|
||||
.dark\:hover\:bg-primary-900:where(.dark, .dark *):hover { background-color: rgb(var(--color-primary-900)); }
|
||||
|
||||
.dark\:hover\:text-primary-100:where(.dark, .dark *):hover { color: rgb(var(--color-primary-100)); }
|
||||
.dark\:hover\:text-primary-200:where(.dark, .dark *):hover { color: rgb(var(--color-primary-200)); }
|
||||
.dark\:hover\:text-primary-300:where(.dark, .dark *):hover { color: rgb(var(--color-primary-300)); }
|
||||
.dark\:hover\:text-primary-400:where(.dark, .dark *):hover { color: rgb(var(--color-primary-400)); }
|
||||
.dark\:hover\:text-primary-500:where(.dark, .dark *):hover { color: rgb(var(--color-primary-500)); }
|
||||
|
||||
/* Dark Hover Variants - Neutral */
|
||||
.dark\:hover\:text-neutral-100:where(.dark, .dark *):hover { color: rgb(var(--color-neutral-100)); }
|
||||
.dark\:hover\:text-neutral-200:where(.dark, .dark *):hover { color: rgb(var(--color-neutral-200)); }
|
||||
.dark\:hover\:text-neutral-300:where(.dark, .dark *):hover { color: rgb(var(--color-neutral-300)); }
|
||||
.dark\:hover\:text-neutral-400:where(.dark, .dark *):hover { color: rgb(var(--color-neutral-400)); }
|
||||
.dark\:hover\:text-neutral-500:where(.dark, .dark *):hover { color: rgb(var(--color-neutral-500)); }
|
||||
.dark\:hover\:text-neutral-600:where(.dark, .dark *):hover { color: rgb(var(--color-neutral-600)); }
|
||||
.dark\:hover\:text-neutral-700:where(.dark, .dark *):hover { color: rgb(var(--color-neutral-700)); }
|
||||
.dark\:hover\:text-neutral-800:where(.dark, .dark *):hover { color: rgb(var(--color-neutral-800)); }
|
||||
|
||||
/* Focus Ring Colors */
|
||||
.focus\:ring-primary-50:focus { --tw-ring-color: rgb(var(--color-primary-50)); }
|
||||
.focus\:ring-primary-100:focus { --tw-ring-color: rgb(var(--color-primary-100)); }
|
||||
.focus\:ring-primary-200:focus { --tw-ring-color: rgb(var(--color-primary-200)); }
|
||||
.focus\:ring-primary-300:focus { --tw-ring-color: rgb(var(--color-primary-300)); }
|
||||
.focus\:ring-primary-400:focus { --tw-ring-color: rgb(var(--color-primary-400)); }
|
||||
.focus\:ring-primary-500:focus { --tw-ring-color: rgb(var(--color-primary-500)); }
|
||||
.focus\:ring-primary-600:focus { --tw-ring-color: rgb(var(--color-primary-600)); }
|
||||
.focus\:ring-primary-700:focus { --tw-ring-color: rgb(var(--color-primary-700)); }
|
||||
.focus\:ring-primary-800:focus { --tw-ring-color: rgb(var(--color-primary-800)); }
|
||||
.focus\:ring-primary-900:focus { --tw-ring-color: rgb(var(--color-primary-900)); }
|
||||
|
||||
.dark\:focus\:ring-primary-300:where(.dark, .dark *):focus { --tw-ring-color: rgb(var(--color-primary-300)); }
|
||||
.dark\:focus\:ring-primary-400:where(.dark, .dark *):focus { --tw-ring-color: rgb(var(--color-primary-400)); }
|
||||
.dark\:focus\:ring-primary-500:where(.dark, .dark *):focus { --tw-ring-color: rgb(var(--color-primary-500)); }
|
||||
.dark\:focus\:ring-primary-600:where(.dark, .dark *):focus { --tw-ring-color: rgb(var(--color-primary-600)); }
|
||||
.dark\:focus\:ring-primary-700:where(.dark, .dark *):focus { --tw-ring-color: rgb(var(--color-primary-700)); }
|
||||
.dark\:focus\:ring-primary-800:where(.dark, .dark *):focus { --tw-ring-color: rgb(var(--color-primary-800)); }
|
||||
|
||||
/* Gradient utilities */
|
||||
.from-primary-50 { --tw-gradient-from: rgb(var(--color-primary-50)) var(--tw-gradient-from-position); }
|
||||
.from-primary-100 { --tw-gradient-from: rgb(var(--color-primary-100)) var(--tw-gradient-from-position); }
|
||||
.from-primary-200 { --tw-gradient-from: rgb(var(--color-primary-200)) var(--tw-gradient-from-position); }
|
||||
.from-primary-300 { --tw-gradient-from: rgb(var(--color-primary-300)) var(--tw-gradient-from-position); }
|
||||
.from-primary-400 { --tw-gradient-from: rgb(var(--color-primary-400)) var(--tw-gradient-from-position); }
|
||||
.from-primary-500 { --tw-gradient-from: rgb(var(--color-primary-500)) var(--tw-gradient-from-position); }
|
||||
.from-primary-600 { --tw-gradient-from: rgb(var(--color-primary-600)) var(--tw-gradient-from-position); }
|
||||
.from-primary-700 { --tw-gradient-from: rgb(var(--color-primary-700)) var(--tw-gradient-from-position); }
|
||||
.from-primary-800 { --tw-gradient-from: rgb(var(--color-primary-800)) var(--tw-gradient-from-position); }
|
||||
.from-primary-900 { --tw-gradient-from: rgb(var(--color-primary-900)) var(--tw-gradient-from-position); }
|
||||
|
||||
.to-primary-50 { --tw-gradient-to: rgb(var(--color-primary-50)) var(--tw-gradient-to-position); }
|
||||
.to-primary-100 { --tw-gradient-to: rgb(var(--color-primary-100)) var(--tw-gradient-to-position); }
|
||||
.to-primary-200 { --tw-gradient-to: rgb(var(--color-primary-200)) var(--tw-gradient-to-position); }
|
||||
.to-primary-300 { --tw-gradient-to: rgb(var(--color-primary-300)) var(--tw-gradient-to-position); }
|
||||
.to-primary-400 { --tw-gradient-to: rgb(var(--color-primary-400)) var(--tw-gradient-to-position); }
|
||||
.to-primary-500 { --tw-gradient-to: rgb(var(--color-primary-500)) var(--tw-gradient-to-position); }
|
||||
.to-primary-600 { --tw-gradient-to: rgb(var(--color-primary-600)) var(--tw-gradient-to-position); }
|
||||
.to-primary-700 { --tw-gradient-to: rgb(var(--color-primary-700)) var(--tw-gradient-to-position); }
|
||||
.to-primary-800 { --tw-gradient-to: rgb(var(--color-primary-800)) var(--tw-gradient-to-position); }
|
||||
.to-primary-900 { --tw-gradient-to: rgb(var(--color-primary-900)) var(--tw-gradient-to-position); }
|
||||
|
||||
/* Special HB dark color */
|
||||
.bg-hb-dark { background-color: rgb(var(--color-hb-dark, 23 24 28)); }
|
||||
.text-hb-dark { color: rgb(var(--color-hb-dark, 23 24 28)); }
|
||||
/* Custom Hugo Blox Dark Color */
|
||||
.bg-hb-dark {
|
||||
background-color: rgb(var(--color-hb-dark, 23 24 28));
|
||||
}
|
||||
.text-hb-dark {
|
||||
color: rgb(var(--color-hb-dark, 23 24 28));
|
||||
}
|
||||
.border-hb-dark {
|
||||
border-color: rgb(var(--color-hb-dark, 23 24 28));
|
||||
}
|
||||
|
||||
/* Dark mode variants */
|
||||
.dark\:bg-hb-dark:where(.dark, .dark *) {
|
||||
background-color: rgb(var(--color-hb-dark, 23 24 28));
|
||||
}
|
||||
.dark\:text-hb-dark:where(.dark, .dark *) {
|
||||
color: rgb(var(--color-hb-dark, 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
|
||||
*/
|
||||
@@ -2,4 +2,4 @@
|
||||
/* Note: In v4, we use @source inline to ensure these are included */
|
||||
/* This ensures Tailwind generates these classes even if not found in templates */
|
||||
|
||||
@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='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='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-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-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='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='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-neutral-700 hover:text-neutral-800 hover:text-neutral-900'></div><div class='dark:hover:bg-primary-50 dark:hover:bg-primary-100 dark:hover:bg-primary-200 dark:hover:bg-primary-300 dark:hover:bg-primary-400 dark:hover:bg-primary-500 dark:hover:bg-primary-600 dark:hover:bg-primary-700 dark:hover:bg-primary-800 dark:hover:bg-primary-900'></div><div class='dark:hover:text-neutral-50 dark:hover:text-neutral-100 dark:hover:text-neutral-200 dark:hover:text-neutral-300 dark:hover:text-neutral-400 dark:hover:text-neutral-500 dark:hover:text-neutral-600 dark:hover:text-neutral-700 dark:hover:text-neutral-800 dark:hover:text-neutral-900'></div>");
|
||||
@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='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-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-neutral-700 hover:text-neutral-800 hover:text-neutral-900'></div><div class='dark:hover:bg-primary-50 dark:hover:bg-primary-100 dark:hover:bg-primary-200 dark:hover:bg-primary-300 dark:hover:bg-primary-400 dark:hover:bg-primary-500 dark:hover:bg-primary-600 dark:hover:bg-primary-700 dark:hover:bg-primary-800 dark:hover:bg-primary-900'></div><div class='dark:hover:text-neutral-50 dark:hover:text-neutral-100 dark:hover:text-neutral-200 dark:hover:text-neutral-300 dark:hover:text-neutral-400 dark:hover:text-neutral-500 dark:hover:text-neutral-600 dark:hover:text-neutral-700 dark:hover:text-neutral-800 dark:hover:text-neutral-900'></div>");
|
||||
@@ -4,49 +4,325 @@
|
||||
@theme {
|
||||
/* Custom Colors */
|
||||
--color-hb-dark: 23 24 28;
|
||||
|
||||
/* Neutral Colors - Space-separated RGB values (for use with rgb() function) */
|
||||
--color-neutral-50: 250 250 250;
|
||||
--color-neutral-100: 245 245 245;
|
||||
--color-neutral-200: 229 229 229;
|
||||
--color-neutral-300: 212 212 212;
|
||||
--color-neutral-400: 163 163 163;
|
||||
--color-neutral-500: 115 115 115;
|
||||
--color-neutral-600: 82 82 82;
|
||||
--color-neutral-700: 64 64 64;
|
||||
--color-neutral-800: 38 38 38;
|
||||
--color-neutral-900: 23 23 23;
|
||||
--color-neutral-950: 10 10 10;
|
||||
|
||||
/* Primary Colors - Space-separated RGB values (Blue defaults) */
|
||||
--color-primary-50: 239 246 255;
|
||||
--color-primary-100: 219 234 254;
|
||||
--color-primary-200: 191 219 254;
|
||||
--color-primary-300: 147 197 253;
|
||||
--color-primary-400: 96 165 250;
|
||||
--color-primary-500: 59 130 246;
|
||||
--color-primary-600: 37 99 235;
|
||||
--color-primary-700: 29 78 216;
|
||||
--color-primary-800: 30 64 175;
|
||||
--color-primary-900: 30 58 138;
|
||||
--color-primary-950: 23 37 84;
|
||||
|
||||
/* Secondary Colors - Space-separated RGB values (Cyan defaults) */
|
||||
--color-secondary-50: 236 254 255;
|
||||
--color-secondary-100: 207 250 254;
|
||||
--color-secondary-200: 165 243 252;
|
||||
--color-secondary-300: 103 232 249;
|
||||
--color-secondary-400: 34 211 238;
|
||||
--color-secondary-500: 6 182 212;
|
||||
--color-secondary-600: 8 145 178;
|
||||
--color-secondary-700: 14 116 144;
|
||||
--color-secondary-800: 21 94 117;
|
||||
--color-secondary-900: 22 78 99;
|
||||
--color-secondary-950: 8 51 68;
|
||||
|
||||
|
||||
/* 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));
|
||||
|
||||
--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-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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,27 +1,27 @@
|
||||
/* Hugo Blox color theme: BLUE */
|
||||
:root {
|
||||
/* TW Blue Palette */
|
||||
--color-primary-50: 239 246 255;
|
||||
--color-primary-100: 219 234 254;
|
||||
--color-primary-200: 191 219 254;
|
||||
--color-primary-300: 147 197 253;
|
||||
--color-primary-400: 96 165 250;
|
||||
--color-primary-500: 59 130 246;
|
||||
--color-primary-600: 37 99 235;
|
||||
--color-primary-700: 29 78 216;
|
||||
--color-primary-800: 30 64 175;
|
||||
--color-primary-900: 30 58 138;
|
||||
--color-primary-950: 23 37 84;
|
||||
--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 */
|
||||
--color-secondary-50: 236 254 255;
|
||||
--color-secondary-100: 207 250 254;
|
||||
--color-secondary-200: 165 243 252;
|
||||
--color-secondary-300: 103 232 249;
|
||||
--color-secondary-400: 34 211 238;
|
||||
--color-secondary-500: 6 182 212;
|
||||
--color-secondary-600: 8 145 178;
|
||||
--color-secondary-700: 14 116 144;
|
||||
--color-secondary-800: 21 94 117;
|
||||
--color-secondary-900: 22 78 99;
|
||||
--color-secondary-950: 8 51 68;
|
||||
--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;
|
||||
}
|
||||
@@ -1,14 +1,27 @@
|
||||
/* Hugo Blox color theme: CYAN */
|
||||
:root {
|
||||
--color-primary-50: 236 254 255;
|
||||
--color-primary-100: 207 250 254;
|
||||
--color-primary-200: 165 243 252;
|
||||
--color-primary-300: 103 232 249;
|
||||
--color-primary-400: 34 211 238;
|
||||
--color-primary-500: 6 182 212;
|
||||
--color-primary-600: 8 145 178;
|
||||
--color-primary-700: 14 116 144;
|
||||
--color-primary-800: 21 94 117;
|
||||
--color-primary-900: 22 78 99;
|
||||
--color-primary-950: 8 51 68;
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,14 +1,27 @@
|
||||
/* Hugo Blox color theme: EMERALD */
|
||||
:root {
|
||||
--color-primary-50: 236 253 245;
|
||||
--color-primary-100: 209 250 229;
|
||||
--color-primary-200: 167 243 208;
|
||||
--color-primary-300: 110 231 183;
|
||||
--color-primary-400: 52 211 153;
|
||||
--color-primary-500: 16 185 129;
|
||||
--color-primary-600: 5 150 105;
|
||||
--color-primary-700: 4 120 87;
|
||||
--color-primary-800: 6 95 70;
|
||||
--color-primary-900: 6 78 59;
|
||||
--color-primary-950: 2 44 34;
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,14 +1,27 @@
|
||||
/* Hugo Blox color theme: GREEN */
|
||||
:root {
|
||||
--color-primary-50: 240 253 244;
|
||||
--color-primary-100: 220 252 231;
|
||||
--color-primary-200: 187 247 208;
|
||||
--color-primary-300: 134 239 172;
|
||||
--color-primary-400: 74 222 128;
|
||||
--color-primary-500: 34 197 94;
|
||||
--color-primary-600: 22 163 74;
|
||||
--color-primary-700: 21 128 61;
|
||||
--color-primary-800: 22 101 52;
|
||||
--color-primary-900: 20 83 45;
|
||||
--color-primary-950: 5 46 22;
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,14 +1,27 @@
|
||||
/* Hugo Blox color theme: INDIGO */
|
||||
:root {
|
||||
--color-primary-50: 238 242 255;
|
||||
--color-primary-100: 224 231 255;
|
||||
--color-primary-200: 199 210 254;
|
||||
--color-primary-300: 165 180 252;
|
||||
--color-primary-400: 129 140 248;
|
||||
--color-primary-500: 99 102 241;
|
||||
--color-primary-600: 79 70 229;
|
||||
--color-primary-700: 67 56 202;
|
||||
--color-primary-800: 55 48 163;
|
||||
--color-primary-900: 49 46 129;
|
||||
--color-primary-950: 30 27 75;
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,14 +1,27 @@
|
||||
/* Hugo Blox color theme: PURPLE */
|
||||
:root {
|
||||
--color-primary-50: 250 245 255;
|
||||
--color-primary-100: 243 232 255;
|
||||
--color-primary-200: 233 213 255;
|
||||
--color-primary-300: 216 180 254;
|
||||
--color-primary-400: 192 132 252;
|
||||
--color-primary-500: 168 85 247;
|
||||
--color-primary-600: 147 51 234;
|
||||
--color-primary-700: 126 34 206;
|
||||
--color-primary-800: 107 33 168;
|
||||
--color-primary-900: 88 28 135;
|
||||
--color-primary-950: 59 7 100;
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,14 +1,27 @@
|
||||
/* Hugo Blox color theme: RED */
|
||||
:root {
|
||||
--color-primary-50: 254 242 242;
|
||||
--color-primary-100: 254 226 226;
|
||||
--color-primary-200: 254 202 202;
|
||||
--color-primary-300: 252 165 165;
|
||||
--color-primary-400: 248 113 113;
|
||||
--color-primary-500: 239 68 68;
|
||||
--color-primary-600: 220 38 38;
|
||||
--color-primary-700: 185 28 28;
|
||||
--color-primary-800: 153 27 27;
|
||||
--color-primary-900: 127 29 29;
|
||||
--color-primary-950: 69 10 10;
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,14 +1,27 @@
|
||||
/* Hugo Blox color theme: ROSE */
|
||||
:root {
|
||||
--color-primary-50: 255 241 242;
|
||||
--color-primary-100: 255 228 230;
|
||||
--color-primary-200: 254 205 211;
|
||||
--color-primary-300: 253 164 175;
|
||||
--color-primary-400: 251 113 133;
|
||||
--color-primary-500: 244 63 94;
|
||||
--color-primary-600: 225 29 72;
|
||||
--color-primary-700: 190 18 60;
|
||||
--color-primary-800: 159 18 57;
|
||||
--color-primary-900: 136 19 55;
|
||||
--color-primary-950: 76 5 25;
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,14 +1,27 @@
|
||||
/* Hugo Blox color theme: SKY */
|
||||
:root {
|
||||
--color-primary-50: 240 249 255;
|
||||
--color-primary-100: 224 242 254;
|
||||
--color-primary-200: 186 230 253;
|
||||
--color-primary-300: 125 211 252;
|
||||
--color-primary-400: 56 189 248;
|
||||
--color-primary-500: 14 165 233;
|
||||
--color-primary-600: 2 132 199;
|
||||
--color-primary-700: 3 105 161;
|
||||
--color-primary-800: 7 89 133;
|
||||
--color-primary-900: 12 74 110;
|
||||
--color-primary-950: 8 47 73;
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,14 +1,27 @@
|
||||
/* Hugo Blox color theme: TEAL */
|
||||
:root {
|
||||
--color-primary-50: 240 253 250;
|
||||
--color-primary-100: 204 251 241;
|
||||
--color-primary-200: 153 246 228;
|
||||
--color-primary-300: 94 234 212;
|
||||
--color-primary-400: 45 212 191;
|
||||
--color-primary-500: 20 184 166;
|
||||
--color-primary-600: 13 148 136;
|
||||
--color-primary-700: 15 118 110;
|
||||
--color-primary-800: 17 94 89;
|
||||
--color-primary-900: 19 78 74;
|
||||
--color-primary-950: 4 47 46;
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,14 +1,27 @@
|
||||
/* Hugo Blox color theme: ZINC */
|
||||
:root {
|
||||
--color-primary-50: 250 250 250;
|
||||
--color-primary-100: 244 244 245;
|
||||
--color-primary-200: 228 228 231;
|
||||
--color-primary-300: 212 212 216;
|
||||
--color-primary-400: 161 161 170;
|
||||
--color-primary-500: 113 113 122;
|
||||
--color-primary-600: 82 82 91;
|
||||
--color-primary-700: 63 63 70;
|
||||
--color-primary-800: 39 39 42;
|
||||
--color-primary-900: 24 24 27;
|
||||
--color-primary-950: 9 9 11;
|
||||
/* 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;
|
||||
}
|
||||
@@ -29,7 +29,7 @@
|
||||
{{- $icon := .icon }}
|
||||
{{ with $icon }}
|
||||
<div class="w-7 h-7 text-gray-500 dark:text-gray-400 mb-3">
|
||||
{{ partial "functions/get_icon" (dict "name" $icon "pack" "brands" "attributes" "style=\"height: 100%;\"") }}
|
||||
{{ partial "functions/get_icon" (dict "name" $icon "attributes" "style=\"height: 100%;\"") }}
|
||||
</div>
|
||||
{{ end}}
|
||||
{{with .url}}<a href={{.}} target="_blank" rel="noopener">{{end}}
|
||||
|
||||
@@ -4,6 +4,24 @@
|
||||
|
||||
Present a complete professional picture with the Resume Biography 3 block - an expanded biography layout that combines personal information, social presence, education history, and interests in one cohesive, horizontally-oriented section.
|
||||
|
||||
## 🛠️ Customization
|
||||
|
||||
- **Section heading overrides**: Customize any of the three main section headings using `content.headings`:
|
||||
- `about`: Biography section heading (default: "Professional Summary" from i18n `about_me`)
|
||||
- `education`: Education section heading (default: from i18n `education`)
|
||||
- `interests`: Interests section heading (default: from i18n `interests`)
|
||||
|
||||
Example front matter:
|
||||
|
||||
```yaml
|
||||
block: resume-biography-3
|
||||
content:
|
||||
headings:
|
||||
about: Research Profile
|
||||
education: Academic Background
|
||||
interests: Research Areas
|
||||
```
|
||||
|
||||
## ✨ Key Features
|
||||
|
||||
- **Horizontal Layout**: Desktop-optimized side-by-side arrangement for better space utilization
|
||||
@@ -57,4 +75,3 @@ Present a complete professional picture with the Resume Biography 3 block - an e
|
||||
Perfect for academics, researchers, consultants, and professionals who want to present a complete picture of their background, education, and interests in one comprehensive, beautifully designed section.
|
||||
|
||||
Create a professional profile that tells your complete story and opens doors to new opportunities.
|
||||
|
||||
@@ -17,12 +17,12 @@
|
||||
{{ $avatar := ($person_page.Resources.ByType "image").GetMatch "*avatar*" }}
|
||||
|
||||
{{/* Avatar customization parameters */}}
|
||||
{{ $avatar_size := $block.design.avatar.size | default "medium" }}
|
||||
{{ $avatar_size := $block.design.avatar.size | default "large" }}
|
||||
{{ $avatar_shape := $block.design.avatar.shape | default "circle" }}
|
||||
|
||||
{{/* Size mappings optimized for 2025 standards: display_size -> [display_px, generation_px] */}}
|
||||
{{ $size_map := dict "small" (slice "150" "300") "medium" (slice "200" "400") "large" (slice "320" "640") "xl" (slice "400" "800") "xxl" (slice "500" "1000") }}
|
||||
{{ $size_config := index $size_map $avatar_size | default (index $size_map "medium") }}
|
||||
{{ $size_config := index $size_map $avatar_size | default (index $size_map "large") }}
|
||||
{{ $display_size := index $size_config 0 }}
|
||||
{{ $generation_size := index $size_config 1 }}
|
||||
|
||||
@@ -30,169 +30,202 @@
|
||||
{{ $shape_classes := dict "circle" "rounded-full" "square" "rounded-none" "rounded" "rounded-lg" }}
|
||||
{{ $shape_class := index $shape_classes $avatar_shape | default "rounded-full" }}
|
||||
|
||||
|
||||
<div class="resume-biography px-3 flex flex-col md:flex-row justify-center gap-12">
|
||||
<div class="flex-none m-w-[130px] mx-auto md:mx-0">
|
||||
|
||||
{{ $img := "" }}
|
||||
{{with $block.design.banner.filename}}
|
||||
{{- $img = resources.Get (path.Join "media" .) -}}
|
||||
{{ if $img }}
|
||||
{{ if ne $img.MediaType.SubType "gif" }}
|
||||
{{ $responsive := partial "functions/process_responsive_image.html" (dict
|
||||
"image" $img
|
||||
"mode" "fill"
|
||||
"aspect_ratio" "16:9"
|
||||
"sizes" (slice 768 1024 1366 1920 2560)
|
||||
) }}
|
||||
<div class="w-full bg-gray-200 dark:bg-gray-900 flex flex-wrap items-center justify-center">
|
||||
<div class="w-full bg-white rounded dark:bg-gray-800">
|
||||
<div class="h-2/4 sm:h-64 overflow-hidden w-full">
|
||||
<img class="w-full object-cover"
|
||||
srcset="{{ $responsive.srcset }}"
|
||||
sizes="100vw"
|
||||
src="{{ $responsive.fallback.RelPermalink }}"
|
||||
width="{{ $responsive.fallback.Width }}"
|
||||
height="{{ $responsive.fallback.Height }}"
|
||||
alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
{{/* Handle GIF without processing */}}
|
||||
{{- $img = $img.Process "webp" -}}
|
||||
<div class="w-full bg-gray-200 dark:bg-gray-900 flex flex-wrap items-center justify-center">
|
||||
<div class="w-full bg-white rounded dark:bg-gray-800">
|
||||
<div class="h-2/4 sm:h-64 overflow-hidden w-full">
|
||||
<img class="w-full object-cover"
|
||||
src="{{$img.RelPermalink}}"
|
||||
width="{{$img.Width}}" height="{{$img.Height}}"
|
||||
alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<div id="profile" class="flex justify-center items-center flex-col">
|
||||
{{ if $avatar }}
|
||||
|
||||
<div class="avatar-wrapper {{ if $img }}-mt-[105px]{{else}}mt-10{{end}}" style="width: {{$display_size}}px; height: {{$display_size}}px;">
|
||||
{{ $avatar_image := $avatar.Fill (printf "%sx%s Center" $generation_size $generation_size) }}
|
||||
<img class="avatar {{$shape_class}} bg-white dark:bg-gray-800 p-1" src="{{ $avatar_image.RelPermalink }}" alt="{{$person_page.Title}}"
|
||||
width="{{$display_size}}" height="{{$display_size}}"
|
||||
style="width: {{$display_size}}px; height: {{$display_size}}px; object-fit: cover;">
|
||||
{{with $person.status.icon}}<span class="avatar-emoji">{{.|emojify}}</span>{{end}}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="portrait-title dark:text-white">
|
||||
|
||||
<div class="text-3xl font-bold mb-2 mt-6">
|
||||
{{- if $person.name_pronunciation -}}
|
||||
<ruby>
|
||||
<rb>{{ $person_page.Title }}</rb>
|
||||
<rt>{{ $person.name_pronunciation }}</rt>
|
||||
</ruby>
|
||||
{{- else -}}
|
||||
{{- $person_page.Title -}}
|
||||
{{- end -}}
|
||||
</div>
|
||||
{{- with $person.pronouns -}}
|
||||
<div class="text-lg font-normal text-gray-600 dark:text-gray-400 -mt-1 mb-2">({{ . }})</div>
|
||||
{{- end -}}
|
||||
|
||||
{{ with $person.role }}<h3 class="font-semibold mb-1">{{ . | markdownify | emojify }}</h3>{{ end }}
|
||||
|
||||
{{ range $person.organizations }}
|
||||
<div class="mb-2">
|
||||
{{ with .url }}<a href="{{ . }}" target="_blank" rel="noopener">{{ end }}
|
||||
<div>{{ .name }}</div>
|
||||
{{ if .url }}</a>{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<ul class="network-icon dark:text-zinc-100">
|
||||
{{ range $person.profiles }}
|
||||
{{ $pack := or .icon_pack "fas" }}
|
||||
{{ $pack_prefix := $pack }}
|
||||
{{ if in (slice "fab" "fas" "far" "fal") $pack }}
|
||||
{{ $pack_prefix = "fa" }}
|
||||
{{ end }}
|
||||
{{ $link := .url | default .link }}
|
||||
{{ $scheme := (urls.Parse $link).Scheme }}
|
||||
{{ $target := "" }}
|
||||
{{ if not $scheme }}
|
||||
{{ $link = (.url | default .link) | relLangURL }}
|
||||
{{ if eq (path.Ext $link) ".pdf" }}{{ $target = "target=\"_blank\" rel=\"noopener\"" }}{{ end }}
|
||||
{{ else if in (slice "http" "https") $scheme }}
|
||||
{{ $target = "target=\"_blank\" rel=\"noopener\"" }}
|
||||
{{ end }}
|
||||
<li>
|
||||
<a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }} aria-label="{{ .icon }}"
|
||||
{{ with .label }} data-toggle="tooltip" data-placement="top" title="{{.}}"{{ end }}>
|
||||
{{ partial "functions/get_icon" (dict "name" .icon "attributes" "style=\"height: 1.5rem;\"") }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-prose md:mt-12">
|
||||
{{ with ($block.content.text | emojify | $page.RenderString) | default $person_page.Content }}
|
||||
<div class="pt-2 justify-content-center prose prose-slate dark:prose-invert">
|
||||
<div class="bio-text" {{ with $block.design.biography.style }}{{ (printf "style=\"%s\"" .) | safe.HTMLAttr }}{{end}}>
|
||||
{{ . }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ with $block.content.button }}
|
||||
<a href="{{.url}}" target="_blank" class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-primary-700 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"><svg class="w-3.5 h-3.5 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M14.707 7.793a1 1 0 0 0-1.414 0L11 10.086V1.5a1 1 0 0 0-2 0v8.586L6.707 7.793a1 1 0 1 0-1.414 1.414l4 4a1 1 0 0 0 1.416 0l4-4a1 1 0 0 0-.002-1.414Z"/>
|
||||
<path d="M18 12h-2.55l-2.975 2.975a3.5 3.5 0 0 1-4.95 0L4.55 12H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Zm-3 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
|
||||
</svg> {{.text}}</a>
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 justify-between mt-6 dark:text-gray-300">
|
||||
|
||||
{{ with $person.interests }}
|
||||
<div class="">
|
||||
<div class="section-subheading mb-3">{{ i18n "interests" | markdownify }}</div>
|
||||
<ul class="list-disc list-inside space-y-1 pl-5">
|
||||
{{ range . }}
|
||||
<li>
|
||||
{{ . | markdownify | emojify }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ with $person.education }}
|
||||
<div class="">
|
||||
<div class="section-subheading mb-3">{{ i18n "education" | markdownify }}</div>
|
||||
<ul class="">
|
||||
{{ range . }}
|
||||
<li class="flex items-start gap-3">
|
||||
{{ partial "functions/get_icon" (dict "name" "academic-cap" "attributes" "style=\"\" class='flex-shrink-0 w-5 h-5 me-2 mt-1'") }}
|
||||
<div class="description">
|
||||
<p class="course">{{ .area }}{{ with .year }}, {{ . }}{{ end }}</p>
|
||||
<p class="text-sm">{{ .institution }}</p>
|
||||
<div class="resume-biography py-8 px-4 sm:py-12 md:py-16 lg:py-24 xl:py-32 relative overflow-hidden">
|
||||
{{/* Add subtle top gradient for navbar transition */}}
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8 items-start">
|
||||
|
||||
{{/* Left Column: Flexible span */}}
|
||||
<div class="md:col-span-4 flex flex-col items-center text-center space-y-6 md:space-y-8">
|
||||
|
||||
{{/* Banner Image */}}
|
||||
{{ $img := "" }}
|
||||
{{with $block.design.banner.filename}}
|
||||
{{- $img = resources.Get (path.Join "media" .) -}}
|
||||
{{ if $img }}
|
||||
<div class="relative w-full h-64 rounded-2xl overflow-hidden shadow-xl mb-8">
|
||||
{{ if ne $img.MediaType.SubType "gif" }}
|
||||
{{ $responsive := partial "functions/process_responsive_image.html" (dict
|
||||
"image" $img
|
||||
"mode" "fill"
|
||||
"aspect_ratio" "16:9"
|
||||
"sizes" (slice 768 1024 1366 1920 2560)
|
||||
) }}
|
||||
<img class="absolute inset-0 w-full h-full object-cover"
|
||||
srcset="{{ $responsive.srcset }}"
|
||||
sizes="100vw"
|
||||
src="{{ $responsive.fallback.RelPermalink }}"
|
||||
alt="" />
|
||||
{{ else }}
|
||||
{{- $img = $img.Process "webp" -}}
|
||||
<img class="absolute inset-0 w-full h-full object-cover"
|
||||
src="{{$img.RelPermalink}}"
|
||||
alt="" />
|
||||
{{ end }}
|
||||
</div>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
|
||||
{{/* Avatar */}}
|
||||
{{ if $avatar }}
|
||||
<div class="avatar-wrapper {{ if $img }}-mt-24{{else}}mb-4{{end}}" style="width: {{$display_size}}px; height: {{$display_size}}px;">
|
||||
{{ $avatar_image := $avatar.Fill (printf "%sx%s Center" $generation_size $generation_size) }}
|
||||
<img class="avatar {{$shape_class}} border-4 border-white shadow-2xl"
|
||||
src="{{ $avatar_image.RelPermalink }}"
|
||||
alt="{{$person_page.Title}}"
|
||||
width="{{$display_size}}"
|
||||
height="{{$display_size}}"
|
||||
style="width: {{$display_size}}px; height: {{$display_size}}px; object-fit: cover;">
|
||||
{{with $person.status.icon}}<span class="avatar-emoji">{{.|emojify}}</span>{{end}}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{/* Name and Role - Centered */}}
|
||||
<div class="space-y-3">
|
||||
<h1 class="text-5xl lg:text-6xl font-black text-gray-900 dark:text-white leading-tight">
|
||||
{{- if $person.name_pronunciation -}}
|
||||
<ruby>
|
||||
<rb>{{ $person_page.Title }}</rb>
|
||||
<rt class="text-sm text-gray-500 dark:text-gray-400">{{ $person.name_pronunciation }}</rt>
|
||||
</ruby>
|
||||
{{- else -}}
|
||||
{{- $person_page.Title -}}
|
||||
{{- end -}}
|
||||
</h1>
|
||||
|
||||
{{- with $person.pronouns -}}
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400">({{ . }})</p>
|
||||
{{- end -}}
|
||||
|
||||
{{ with $person.role }}
|
||||
<p class="text-2xl font-semibold text-primary-600 dark:text-primary-400">{{ . | markdownify | emojify }}</p>
|
||||
{{ end }}
|
||||
|
||||
{{ range $person.organizations }}
|
||||
<p class="text-lg text-gray-700 dark:text-gray-300">
|
||||
{{ with .url }}<a href="{{ . }}" target="_blank" rel="noopener" class="hover:text-primary-600 dark:hover:text-primary-400 transition-colors">{{ end }}
|
||||
{{ .name }}
|
||||
{{ if .url }}</a>{{ end }}
|
||||
</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{/* Social Icons */}}
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
{{ range $person.profiles }}
|
||||
{{ $pack := or .icon_pack "fas" }}
|
||||
{{ $pack_prefix := $pack }}
|
||||
{{ if in (slice "fab" "fas" "far" "fal") $pack }}
|
||||
{{ $pack_prefix = "fa" }}
|
||||
{{ end }}
|
||||
{{ $link := .url | default .link }}
|
||||
{{ $scheme := (urls.Parse $link).Scheme }}
|
||||
{{ $target := "" }}
|
||||
{{ if not $scheme }}
|
||||
{{ $link = (.url | default .link) | relLangURL }}
|
||||
{{ if eq (path.Ext $link) ".pdf" }}{{ $target = "target=\"_blank\" rel=\"noopener\"" }}{{ end }}
|
||||
{{ else if in (slice "http" "https") $scheme }}
|
||||
{{ $target = "target=\"_blank\" rel=\"noopener\"" }}
|
||||
{{ end }}
|
||||
<a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }}
|
||||
aria-label="{{ .icon }}"
|
||||
{{ with .label }} title="{{.}}"{{ end }}
|
||||
class="w-12 h-12 flex items-center justify-center rounded-full bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400
|
||||
shadow-md hover:shadow-xl hover:scale-110 hover:-translate-y-1
|
||||
transition-all duration-300 border border-gray-200 dark:border-gray-700">
|
||||
{{ partial "functions/get_icon" (dict "name" .icon "attributes" "class=\"w-6 h-6\"") }}
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/* Right Column: Flexible span */}}
|
||||
<div class="md:col-span-8">
|
||||
|
||||
{{/* Bio Section */}}
|
||||
{{ with ($block.content.text | emojify | $page.RenderString) | default $person_page.Content }}
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-primary-100 dark:bg-primary-900/50 rounded-full flex items-center justify-center">
|
||||
{{ partial "functions/get_icon" (dict "name" "identification" "attributes" "class='w-6 h-6 text-primary-600 dark:text-primary-400'") }}
|
||||
</div>
|
||||
{{ $i18n_about := i18n "about_me" }}
|
||||
{{ $about_default := cond (eq $i18n_about "about_me") "Professional Summary" $i18n_about }}
|
||||
{{ $about_heading := $block.content.headings.about | default $about_default }}
|
||||
<h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white tracking-tight">{{ $about_heading }}</h2>
|
||||
</div>
|
||||
<div class="prose prose-lg dark:prose-invert text-gray-800 dark:text-gray-200 text-base sm:text-lg leading-relaxed">
|
||||
<div class="bio-text" {{ with $block.design.biography.style }}{{ (printf "style=\"%s\"" .) | safe.HTMLAttr }}{{end}}>
|
||||
{{ . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{/* CV Download Button */}}
|
||||
{{ with $block.content.button }}
|
||||
<div class="mb-16">
|
||||
<a href="{{.url}}" target="_blank"
|
||||
class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-primary-600 to-secondary-600 hover:from-primary-700 hover:to-secondary-700 text-white font-bold text-lg rounded-xl shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-300">
|
||||
{{ partial "functions/get_icon" (dict "name" "document-arrow-down" "attributes" "class='w-5 h-5 mr-3'") }}
|
||||
{{.text}}
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{/* Education Section */}}
|
||||
{{ with $person.education }}
|
||||
<div class="mb-16">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-primary-100 dark:bg-primary-900/50 rounded-full flex items-center justify-center">
|
||||
{{ partial "functions/get_icon" (dict "name" "academic-cap" "attributes" "class='w-6 h-6 text-primary-600 dark:text-primary-400'") }}
|
||||
</div>
|
||||
{{ $education_heading := $block.content.headings.education | default (i18n "education") }}
|
||||
<h3 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white tracking-tight">{{ $education_heading | markdownify }}</h3>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
{{ range . }}
|
||||
<div class="group h-full flex flex-col bg-gradient-to-br from-white/90 to-primary-50/30 dark:from-gray-800/90 dark:to-primary-900/20 rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 border border-transparent hover:border-primary-200 dark:hover:border-primary-800 backdrop-blur-md">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-primary-600 rounded-full flex items-center justify-center shadow-md">
|
||||
{{ partial "functions/get_icon" (dict "name" "academic-cap" "attributes" "class='w-6 h-6 text-white'") }}
|
||||
</div>
|
||||
<div class="flex-1 flex-grow">
|
||||
<p class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
|
||||
{{ .area }}{{ with .year }}, {{ . }}{{ end }}
|
||||
</p>
|
||||
<p class="text-gray-600 dark:text-gray-400 font-medium mt-1">{{ .institution }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{/* Interests Section */}}
|
||||
{{ with $person.interests }}
|
||||
<div>
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-primary-100 dark:bg-primary-900/50 rounded-full flex items-center justify-center">
|
||||
{{ partial "functions/get_icon" (dict "name" "sparkles" "attributes" "class='w-6 h-6 text-primary-600 dark:text-primary-400'") }}
|
||||
</div>
|
||||
{{ $interests_heading := $block.content.headings.interests | default (i18n "interests") }}
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white tracking-tight">{{ $interests_heading | markdownify }}</h3>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
{{ range . }}
|
||||
<span class="inline-block bg-primary-50 dark:bg-gray-800 text-primary-800 dark:text-primary-200 text-base font-medium px-4 py-2 rounded-full border border-primary-200/50 dark:border-primary-800/50
|
||||
hover:bg-primary-100
|
||||
dark:hover:bg-primary-500 dark:hover:text-gray-900 dark:hover:border-primary-500
|
||||
transition-all duration-200 cursor-default">
|
||||
{{ . | markdownify | emojify }}
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -26,6 +26,24 @@
|
||||
"type": "string",
|
||||
"description": "Biography text override (supports Markdown). If not provided, uses author page content."
|
||||
},
|
||||
"headings": {
|
||||
"type": "object",
|
||||
"description": "Optional custom headings for sections",
|
||||
"properties": {
|
||||
"about": {
|
||||
"type": "string",
|
||||
"description": "Heading for biography section (default: Professional Summary)"
|
||||
},
|
||||
"education": {
|
||||
"type": "string",
|
||||
"description": "Heading for education section (default: from i18n 'education')"
|
||||
},
|
||||
"interests": {
|
||||
"type": "string",
|
||||
"description": "Heading for interests section (default: from i18n 'interests')"
|
||||
}
|
||||
}
|
||||
},
|
||||
"button": {
|
||||
"type": "object",
|
||||
"description": "Optional call-to-action button",
|
||||
@@ -97,4 +115,3 @@
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -147,6 +147,9 @@
|
||||
- id: education
|
||||
translation: Education
|
||||
|
||||
- id: about_me
|
||||
translation: Professional Summary
|
||||
|
||||
- id: user_profile_latest
|
||||
translation: Latest
|
||||
|
||||
|
||||
Reference in new issue
Block a user