diff --git a/modules/blox-tailwind/assets/css/README.md b/modules/blox-tailwind/assets/css/README.md index ed6578e1..eaac790b 100644 --- a/modules/blox-tailwind/assets/css/README.md +++ b/modules/blox-tailwind/assets/css/README.md @@ -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 + +
...
+
...
+ + +
...
+
...
+ + +
...
``` -## 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! diff --git a/modules/blox-tailwind/assets/css/blox/biography.css b/modules/blox-tailwind/assets/css/blox/biography.css index e7f0b0f6..88163397 100644 --- a/modules/blox-tailwind/assets/css/blox/biography.css +++ b/modules/blox-tailwind/assets/css/blox/biography.css @@ -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%); +} diff --git a/modules/blox-tailwind/assets/css/color-utilities.css b/modules/blox-tailwind/assets/css/color-utilities.css index 2a9f3c81..7309f220 100644 --- a/modules/blox-tailwind/assets/css/color-utilities.css +++ b/modules/blox-tailwind/assets/css/color-utilities.css @@ -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 + */ diff --git a/modules/blox-tailwind/assets/css/config/safelist.css b/modules/blox-tailwind/assets/css/config/safelist.css index ae2bde33..efd1dc14 100644 --- a/modules/blox-tailwind/assets/css/config/safelist.css +++ b/modules/blox-tailwind/assets/css/config/safelist.css @@ -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("
"); +@source inline("
"); diff --git a/modules/blox-tailwind/assets/css/config/theme.css b/modules/blox-tailwind/assets/css/config/theme.css index 7d1ae564..8c96faf5 100644 --- a/modules/blox-tailwind/assets/css/config/theme.css +++ b/modules/blox-tailwind/assets/css/config/theme.css @@ -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; diff --git a/modules/blox-tailwind/assets/css/themes/amber.css b/modules/blox-tailwind/assets/css/themes/amber.css new file mode 100644 index 00000000..56406ea1 --- /dev/null +++ b/modules/blox-tailwind/assets/css/themes/amber.css @@ -0,0 +1,27 @@ +/* Hugo Blox color theme: AMBER */ +:root { + /* Amber Primary Palette */ + --hb-primary-50-rgb: 255 251 235; + --hb-primary-100-rgb: 254 243 199; + --hb-primary-200-rgb: 253 230 138; + --hb-primary-300-rgb: 252 211 77; + --hb-primary-400-rgb: 251 191 36; + --hb-primary-500-rgb: 245 158 11; + --hb-primary-600-rgb: 217 119 6; + --hb-primary-700-rgb: 180 83 9; + --hb-primary-800-rgb: 146 64 14; + --hb-primary-900-rgb: 120 53 15; + --hb-primary-950-rgb: 69 26 3; + /* Yellow Secondary Palette */ + --hb-secondary-50-rgb: 254 252 232; + --hb-secondary-100-rgb: 254 249 195; + --hb-secondary-200-rgb: 254 240 138; + --hb-secondary-300-rgb: 253 224 71; + --hb-secondary-400-rgb: 250 204 21; + --hb-secondary-500-rgb: 234 179 8; + --hb-secondary-600-rgb: 202 138 4; + --hb-secondary-700-rgb: 161 98 7; + --hb-secondary-800-rgb: 133 77 14; + --hb-secondary-900-rgb: 113 63 18; + --hb-secondary-950-rgb: 66 32 6; +} diff --git a/modules/blox-tailwind/assets/css/themes/blue.css b/modules/blox-tailwind/assets/css/themes/blue.css index fdb02f6b..c502f5a2 100644 --- a/modules/blox-tailwind/assets/css/themes/blue.css +++ b/modules/blox-tailwind/assets/css/themes/blue.css @@ -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; } diff --git a/modules/blox-tailwind/assets/css/themes/cyan.css b/modules/blox-tailwind/assets/css/themes/cyan.css index edbbe166..56eaf1a9 100644 --- a/modules/blox-tailwind/assets/css/themes/cyan.css +++ b/modules/blox-tailwind/assets/css/themes/cyan.css @@ -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; } diff --git a/modules/blox-tailwind/assets/css/themes/emerald.css b/modules/blox-tailwind/assets/css/themes/emerald.css index 0afb08f1..4b171bdf 100644 --- a/modules/blox-tailwind/assets/css/themes/emerald.css +++ b/modules/blox-tailwind/assets/css/themes/emerald.css @@ -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; } diff --git a/modules/blox-tailwind/assets/css/themes/fuchsia.css b/modules/blox-tailwind/assets/css/themes/fuchsia.css new file mode 100644 index 00000000..971b2234 --- /dev/null +++ b/modules/blox-tailwind/assets/css/themes/fuchsia.css @@ -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; +} diff --git a/modules/blox-tailwind/assets/css/themes/green.css b/modules/blox-tailwind/assets/css/themes/green.css index b08f3bea..72ac9626 100644 --- a/modules/blox-tailwind/assets/css/themes/green.css +++ b/modules/blox-tailwind/assets/css/themes/green.css @@ -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; } diff --git a/modules/blox-tailwind/assets/css/themes/indigo.css b/modules/blox-tailwind/assets/css/themes/indigo.css index cf1c4bdd..ac731d9d 100644 --- a/modules/blox-tailwind/assets/css/themes/indigo.css +++ b/modules/blox-tailwind/assets/css/themes/indigo.css @@ -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; } diff --git a/modules/blox-tailwind/assets/css/themes/lime.css b/modules/blox-tailwind/assets/css/themes/lime.css new file mode 100644 index 00000000..d72eae57 --- /dev/null +++ b/modules/blox-tailwind/assets/css/themes/lime.css @@ -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; +} diff --git a/modules/blox-tailwind/assets/css/themes/orange.css b/modules/blox-tailwind/assets/css/themes/orange.css new file mode 100644 index 00000000..5a96ea0b --- /dev/null +++ b/modules/blox-tailwind/assets/css/themes/orange.css @@ -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; +} diff --git a/modules/blox-tailwind/assets/css/themes/pink.css b/modules/blox-tailwind/assets/css/themes/pink.css new file mode 100644 index 00000000..1b74ad2f --- /dev/null +++ b/modules/blox-tailwind/assets/css/themes/pink.css @@ -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; +} diff --git a/modules/blox-tailwind/assets/css/themes/purple.css b/modules/blox-tailwind/assets/css/themes/purple.css index 8f4a4bd3..25e15d2d 100644 --- a/modules/blox-tailwind/assets/css/themes/purple.css +++ b/modules/blox-tailwind/assets/css/themes/purple.css @@ -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; } diff --git a/modules/blox-tailwind/assets/css/themes/red.css b/modules/blox-tailwind/assets/css/themes/red.css index d00af70b..037ce2b1 100644 --- a/modules/blox-tailwind/assets/css/themes/red.css +++ b/modules/blox-tailwind/assets/css/themes/red.css @@ -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; } diff --git a/modules/blox-tailwind/assets/css/themes/rose.css b/modules/blox-tailwind/assets/css/themes/rose.css index 80a73088..c464663f 100644 --- a/modules/blox-tailwind/assets/css/themes/rose.css +++ b/modules/blox-tailwind/assets/css/themes/rose.css @@ -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; } diff --git a/modules/blox-tailwind/assets/css/themes/sky.css b/modules/blox-tailwind/assets/css/themes/sky.css index c842d9dd..d4db5f95 100644 --- a/modules/blox-tailwind/assets/css/themes/sky.css +++ b/modules/blox-tailwind/assets/css/themes/sky.css @@ -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; } diff --git a/modules/blox-tailwind/assets/css/themes/slate.css b/modules/blox-tailwind/assets/css/themes/slate.css new file mode 100644 index 00000000..4c85e125 --- /dev/null +++ b/modules/blox-tailwind/assets/css/themes/slate.css @@ -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; +} diff --git a/modules/blox-tailwind/assets/css/themes/stone.css b/modules/blox-tailwind/assets/css/themes/stone.css new file mode 100644 index 00000000..30044f8c --- /dev/null +++ b/modules/blox-tailwind/assets/css/themes/stone.css @@ -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; +} diff --git a/modules/blox-tailwind/assets/css/themes/teal.css b/modules/blox-tailwind/assets/css/themes/teal.css index 6ea2e784..5b9e885f 100644 --- a/modules/blox-tailwind/assets/css/themes/teal.css +++ b/modules/blox-tailwind/assets/css/themes/teal.css @@ -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; } diff --git a/modules/blox-tailwind/assets/css/themes/violet.css b/modules/blox-tailwind/assets/css/themes/violet.css new file mode 100644 index 00000000..7e13127f --- /dev/null +++ b/modules/blox-tailwind/assets/css/themes/violet.css @@ -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; +} diff --git a/modules/blox-tailwind/assets/css/themes/yellow.css b/modules/blox-tailwind/assets/css/themes/yellow.css new file mode 100644 index 00000000..39714ae7 --- /dev/null +++ b/modules/blox-tailwind/assets/css/themes/yellow.css @@ -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; +} diff --git a/modules/blox-tailwind/assets/css/themes/zinc.css b/modules/blox-tailwind/assets/css/themes/zinc.css index 6a6210d6..f727ace3 100644 --- a/modules/blox-tailwind/assets/css/themes/zinc.css +++ b/modules/blox-tailwind/assets/css/themes/zinc.css @@ -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; } diff --git a/modules/blox-tailwind/blox/resume-awards/block.html b/modules/blox-tailwind/blox/resume-awards/block.html index 383eaf94..72b24a19 100644 --- a/modules/blox-tailwind/blox/resume-awards/block.html +++ b/modules/blox-tailwind/blox/resume-awards/block.html @@ -29,7 +29,7 @@ {{- $icon := .icon }} {{ with $icon }}
- {{ partial "functions/get_icon" (dict "name" $icon "pack" "brands" "attributes" "style=\"height: 100%;\"") }} + {{ partial "functions/get_icon" (dict "name" $icon "attributes" "style=\"height: 100%;\"") }}
{{ end}} {{with .url}}{{end}} diff --git a/modules/blox-tailwind/blox/resume-biography-3/README.md b/modules/blox-tailwind/blox/resume-biography-3/README.md index c3446f40..4076c94a 100644 --- a/modules/blox-tailwind/blox/resume-biography-3/README.md +++ b/modules/blox-tailwind/blox/resume-biography-3/README.md @@ -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. - diff --git a/modules/blox-tailwind/blox/resume-biography-3/block.html b/modules/blox-tailwind/blox/resume-biography-3/block.html index d2e28da6..79d03736 100644 --- a/modules/blox-tailwind/blox/resume-biography-3/block.html +++ b/modules/blox-tailwind/blox/resume-biography-3/block.html @@ -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" }} - -
-
- - {{ $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) - ) }} -
-
-
- -
-
-
- {{ else }} - {{/* Handle GIF without processing */}} - {{- $img = $img.Process "webp" -}} -
-
-
- -
-
-
- {{ end }} -{{ end }} -{{ end }} - -
- {{ if $avatar }} - -
- {{ $avatar_image := $avatar.Fill (printf "%sx%s Center" $generation_size $generation_size) }} - {{$person_page.Title}} - {{with $person.status.icon}}{{.|emojify}}{{end}} -
- {{ end }} - -
- -
- {{- if $person.name_pronunciation -}} - - {{ $person_page.Title }} - {{ $person.name_pronunciation }} - - {{- else -}} - {{- $person_page.Title -}} - {{- end -}} -
- {{- with $person.pronouns -}} -
({{ . }})
- {{- end -}} - - {{ with $person.role }}

{{ . | markdownify | emojify }}

{{ end }} - - {{ range $person.organizations }} -
- {{ with .url }}{{ end }} -
{{ .name }}
- {{ if .url }}{{ end }} -
- {{ end }} -
- -
    - {{ 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 }} -
  • - - {{ partial "functions/get_icon" (dict "name" .icon "attributes" "style=\"height: 1.5rem;\"") }} - -
    • - {{ end }} -
-
-
- -
- {{ with ($block.content.text | emojify | $page.RenderString) | default $person_page.Content }} -
-
- {{ . }} -
-
- {{ end }} - - {{ with $block.content.button }} - {{.text}} - {{ end }} - - - - -
- - {{ with $person.interests }} -
-
{{ i18n "interests" | markdownify }}
-
    - {{ range . }} -
  • - {{ . | markdownify | emojify }} -
    • - {{ end }} -
-
- {{ end }} - - {{ with $person.education }} -
-
{{ i18n "education" | markdownify }}
-
    - {{ range . }} -
  • - {{ partial "functions/get_icon" (dict "name" "academic-cap" "attributes" "style=\"\" class='flex-shrink-0 w-5 h-5 me-2 mt-1'") }} -
    -

    {{ .area }}{{ with .year }}, {{ . }}{{ end }}

    -

    {{ .institution }}

    +
    + {{/* Add subtle top gradient for navbar transition */}} +
    +
    + + {{/* Left Column: Flexible span */}} +
    + + {{/* Banner Image */}} + {{ $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) + ) }} + + {{ else }} + {{- $img = $img.Process "webp" -}} + + {{ end }}
    -
    • {{ end }} -
+ {{ end }} + + {{/* Avatar */}} + {{ if $avatar }} +
+ {{ $avatar_image := $avatar.Fill (printf "%sx%s Center" $generation_size $generation_size) }} + {{$person_page.Title}} + {{with $person.status.icon}}{{.|emojify}}{{end}} +
+ {{ end }} + + {{/* Name and Role - Centered */}} +
+

+ {{- if $person.name_pronunciation -}} + + {{ $person_page.Title }} + {{ $person.name_pronunciation }} + + {{- else -}} + {{- $person_page.Title -}} + {{- end -}} +

+ + {{- with $person.pronouns -}} +

({{ . }})

+ {{- end -}} + + {{ with $person.role }} +

{{ . | markdownify | emojify }}

+ {{ end }} + + {{ range $person.organizations }} +

+ {{ with .url }}{{ end }} + {{ .name }} + {{ if .url }}{{ end }} +

+ {{ end }} +
+ + {{/* Social Icons */}} +
+ {{ 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 }} + + {{ partial "functions/get_icon" (dict "name" .icon "attributes" "class=\"w-6 h-6\"") }} + + {{ end }} +
+
+ + {{/* Right Column: Flexible span */}} +
+ + {{/* Bio Section */}} + {{ with ($block.content.text | emojify | $page.RenderString) | default $person_page.Content }} +
+
+
+ {{ partial "functions/get_icon" (dict "name" "identification" "attributes" "class='w-6 h-6 text-primary-600 dark:text-primary-400'") }} +
+ {{ $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 }} +

{{ $about_heading }}

+
+
+
+ {{ . }} +
+
+
+ {{ end }} + + {{/* CV Download Button */}} + {{ with $block.content.button }} +
+ + {{ partial "functions/get_icon" (dict "name" "document-arrow-down" "attributes" "class='w-5 h-5 mr-3'") }} + {{.text}} + +
+ {{ end }} + + {{/* Education Section */}} + {{ with $person.education }} +
+
+
+ {{ partial "functions/get_icon" (dict "name" "academic-cap" "attributes" "class='w-6 h-6 text-primary-600 dark:text-primary-400'") }} +
+ {{ $education_heading := $block.content.headings.education | default (i18n "education") }} +

{{ $education_heading | markdownify }}

+
+
+ {{ range . }} +
+
+
+ {{ partial "functions/get_icon" (dict "name" "academic-cap" "attributes" "class='w-6 h-6 text-white'") }} +
+
+

+ {{ .area }}{{ with .year }}, {{ . }}{{ end }} +

+

{{ .institution }}

+
+
+
+ {{ end }} +
+
+ {{ end }} + + {{/* Interests Section */}} + {{ with $person.interests }} +
+
+
+ {{ partial "functions/get_icon" (dict "name" "sparkles" "attributes" "class='w-6 h-6 text-primary-600 dark:text-primary-400'") }} +
+ {{ $interests_heading := $block.content.headings.interests | default (i18n "interests") }} +

{{ $interests_heading | markdownify }}

+
+
+ {{ range . }} + + {{ . | markdownify | emojify }} + + {{ end }} +
+
+ {{ end }} +
- {{ end }} -
- -
- + \ No newline at end of file diff --git a/modules/blox-tailwind/blox/resume-biography-3/schema.json b/modules/blox-tailwind/blox/resume-biography-3/schema.json index 5555d06f..6fc52ac8 100644 --- a/modules/blox-tailwind/blox/resume-biography-3/schema.json +++ b/modules/blox-tailwind/blox/resume-biography-3/schema.json @@ -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 @@ } ] } - diff --git a/modules/blox-tailwind/i18n/en.yaml b/modules/blox-tailwind/i18n/en.yaml index 4b3d41a4..2818eb54 100644 --- a/modules/blox-tailwind/i18n/en.yaml +++ b/modules/blox-tailwind/i18n/en.yaml @@ -147,6 +147,9 @@ - id: education translation: Education +- id: about_me + translation: Professional Summary + - id: user_profile_latest translation: Latest diff --git a/starters/academic-cv/config/_default/params.yaml b/starters/academic-cv/config/_default/params.yaml index 33c6c5ba..79a6d822 100644 --- a/starters/academic-cv/config/_default/params.yaml +++ b/starters/academic-cv/config/_default/params.yaml @@ -6,7 +6,7 @@ # Appearance appearance: mode: system - color: emerald + color: indigo # SEO marketing: @@ -30,12 +30,12 @@ marketing: header: navbar: enable: true - blox: "navbar" + block: 'navbar' fixed_to_top: true show_search: true show_theme_chooser: true logo: - text: "Your Name" + text: 'Your Name' # Site footer footer: diff --git a/starters/academic-cv/content/_index.md b/starters/academic-cv/content/_index.md index 5b40ea72..983e377b 100644 --- a/starters/academic-cv/content/_index.md +++ b/starters/academic-cv/content/_index.md @@ -1,39 +1,59 @@ --- # Leave the homepage title empty to use the site title -title: "" +title: '' date: 2022-10-24 type: landing design: # Default section spacing - spacing: "6rem" + spacing: '6rem' sections: - block: resume-biography-3 content: # Choose a user profile to display (a folder name within `content/authors/`) username: admin - text: "" + text: '' # Show a call-to-action button under your biography? (optional) button: text: Download CV url: uploads/resume.pdf + headings: + about: '' + education: '' + interests: '' design: - css_class: dark + css_class: hbx-bg-gradient # Avatar customization avatar: - size: medium # Options: small (150px), medium (200px, default), large (320px), xl (400px), xxl (500px) + size: medium # Options: small (150px), medium (200px, default), large (320px), xl (400px), xxl (500px) shape: circle # Options: circle (default), square, rounded background: - color: black - image: - # Add your image background to `assets/media/`. - filename: stacked-peaks.svg - filters: - brightness: 1.0 - size: cover - position: center - parallax: false + #color: black + #image: + # RECOMMENDED: Modern gradient mesh backgrounds + # Option 1: Abstract neural network visualization (perfect for AI researchers) + # filename: https://images.unsplash.com/photo-1635070041078-e363dbe005cb + + # Option 2: Dark gradient mesh (sophisticated and modern) + # filename: https://images.unsplash.com/photo-1557683316-973673baf926 + + # Option 3: Subtle tech pattern (professional) + # filename: https://images.unsplash.com/photo-1451187580459-43490279c0fa + + # Current: Generic geometric pattern (consider upgrading) + #filename: stacked-peaks.svg + + # For best 2025 results, consider: + # 1. Using a CSS gradient instead (remove image section) + # 2. Implementing particle.js for interactive background + # 3. Using a subtle video background with neural network visualization + + #filters: + #brightness: 0.7 # Darkened for better text contrast + size: cover + position: center + parallax: false - block: markdown content: title: '📚 My Research' @@ -42,7 +62,7 @@ sections: Use this area to speak to your mission. I'm a research scientist in the Moonshot team at DeepMind. I blog about machine learning, deep learning, and moonshots. I apply a range of qualitative and quantitative methods to comprehensively investigate the role of science and technology in the economy. - + Please reach out to collaborate 😃 design: columns: '1' @@ -60,7 +80,7 @@ sections: - block: collection content: title: Recent Publications - text: "" + text: '' filters: folders: - publication @@ -89,13 +109,13 @@ sections: count: 5 # Filter on criteria filters: - author: "" - category: "" - tag: "" + author: '' + category: '' + tag: '' exclude_featured: false exclude_future: false exclude_past: false - publication_type: "" + publication_type: '' # Choose how many pages you would like to offset by offset: 0 # Page order: descending (desc) or ascending (asc) date. @@ -116,7 +136,7 @@ sections: Star Easily build anything with blocks - no-code required! - + From landing pages, second brains, and courses to academic resumés, conferences, and tech blogs. button: text: Get Started @@ -124,6 +144,6 @@ sections: design: card: # Card background color (CSS class) - css_class: "bg-primary-700" - css_style: "" + css_class: 'bg-primary-700' + css_style: '' --- diff --git a/starters/academic-cv/content/authors/admin/_index.md b/starters/academic-cv/content/authors/admin/_index.md index 456791c8..5e73bf25 100644 --- a/starters/academic-cv/content/authors/admin/_index.md +++ b/starters/academic-cv/content/authors/admin/_index.md @@ -1,20 +1,20 @@ --- # Display name -title: 吳健雄 +title: Alex Johnson # Name pronunciation (optional) -name_pronunciation: Chien Shiung Wu +name_pronunciation: '' # Full name (for SEO) -first_name: Shiung Wu -last_name: Chien +first_name: Alex +last_name: Johnson # Pronouns (optional) -pronouns: she/her +pronouns: he/him # Status emoji status: - icon: ☕️ + icon: 🚀 # Is this the primary user of the site? superuser: true @@ -23,167 +23,147 @@ superuser: true highlight_name: true # Role/position/tagline -role: Chief Scientist +role: Senior AI Research Scientist # Organizations/Affiliations to display in Biography blox organizations: - - name: OpenAI - url: https://openai.com/ + - name: Meta AI + url: https://ai.meta.com/ # Social network links # Need to use another icon? Simply download the SVG icon to your `assets/media/icons/` folder. profiles: - icon: at-symbol - url: 'mailto:your-email@example.com' + url: 'mailto:alex.johnson@meta.com' label: E-mail Me - icon: brands/x - url: https://twitter.com/GetResearchDev - - icon: brands/instagram - url: https://www.instagram.com/ + url: https://twitter.com/AlexAIResearch - icon: brands/github - url: https://github.com/gcushen + url: https://github.com/alexjohnsonai - icon: brands/linkedin - url: https://www.linkedin.com/ + url: https://www.linkedin.com/in/alexjohnsonai/ - icon: academicons/google-scholar - url: https://scholar.google.com/ + url: https://scholar.google.com/citations?user=alexjohnson - icon: academicons/orcid - url: https://orcid.org/ + url: https://orcid.org/0000-0002-1825-0097 interests: - - Artificial Intelligence - - Computational Linguistics - - Information Retrieval + - Large Language Models + - Computer Vision + - Reinforcement Learning + - AI Ethics education: - - area: PhD Artificial Intelligence + - area: PhD Computer Science (AI Focus) institution: Stanford University - date_start: 2016-01-01 - date_end: 2020-12-31 + date_start: 2015-09-01 + date_end: 2019-06-30 summary: | - Thesis on _Why LLMs are awesome_. Supervised by [Prof Joe Smith](https://example.com). Presented papers at 5 IEEE conferences with the contributions being published in 2 Springer journals. + Thesis on _Scaling Laws for Neural Language Models_. Supervised by Prof. Andrew Ng. Published 5 papers in NeurIPS and ICML, with 2 best paper awards. button: text: 'Read Thesis' - url: 'https://example.com' - - area: MEng Artificial Intelligence - institution: Massachusetts Institute of Technology - date_start: 2016-01-01 - date_end: 2020-12-31 + url: 'https://example.com/thesis.pdf' + - area: MS Computer Science + institution: Carnegie Mellon University + date_start: 2013-09-01 + date_end: 2015-05-31 summary: | - GPA: 3.8/4.0 + GPA: 4.0/4.0 - Courses included: - - lorem ipsum dolor sit amet, consectetur adipiscing elit - - lorem ipsum dolor sit amet, consectetur adipiscing elit - - lorem ipsum dolor sit amet, consectetur adipiscing elit - - area: BSc Artificial Intelligence - institution: Massachusetts Institute of Technology - date_start: 2016-01-01 - date_end: 2020-12-31 + Specialized in machine learning and robotics. + - area: BS Computer Science + institution: MIT + date_start: 2009-09-01 + date_end: 2013-05-31 summary: | - GPA: 3.4/4.0 - - Courses included: - - lorem ipsum dolor sit amet, consectetur adipiscing elit - - lorem ipsum dolor sit amet, consectetur adipiscing elit - - lorem ipsum dolor sit amet, consectetur adipiscing elit + GPA: 3.9/4.0 + + Minored in Mathematics. President of AI Club. + work: - - position: Director of Cloud Infrastructure - company_name: GenCoin - company_url: '' + - position: Senior AI Research Scientist + company_name: Meta AI + company_url: 'https://ai.meta.com/' company_logo: '' - date_start: 2021-01-01 + date_start: 2020-01-01 date_end: '' summary: |2- - Responsibilities include: - - lorem ipsum dolor sit amet, consectetur adipiscing elit - - lorem ipsum dolor sit amet, consectetur adipiscing elit - - lorem ipsum dolor sit amet, consectetur adipiscing elit - - position: Backend Software Engineer - company_name: X - company_url: '' + Leading research on multimodal AI systems. Contributed to Llama 2 and other open-source models. 50+ citations in 3 years. + - position: AI Research Intern + company_name: OpenAI + company_url: 'https://openai.com/' company_logo: '' - date_start: 2016-01-01 - date_end: 2020-12-31 + date_start: 2019-06-01 + date_end: 2019-12-31 summary: | - Responsibilities include: - - Migrated infrastructure to a new data center - - lorem ipsum dolor sit amet, consectetur adipiscing elit - - lorem ipsum dolor sit amet, consectetur adipiscing elit + Worked on GPT-3 scaling. Co-authored paper on prompt engineering. # Skills # Add your own SVG icons to `assets/media/icons/` skills: - name: Technical Skills items: - - name: Python + - name: Python & PyTorch description: '' - percent: 80 + percent: 95 icon: code-bracket - - name: Data Science + - name: Machine Learning description: '' percent: 100 icon: chart-bar - - name: SQL + - name: Cloud Computing (AWS/GCP) description: '' - percent: 40 - icon: circle-stack + percent: 85 + icon: cloud - name: Hobbies color: '#eeac02' color_border: '#f0bf23' items: - - name: Hiking - description: '' - percent: 60 - icon: person-simple-walk - - name: Cats - description: '' - percent: 100 - icon: cat - - name: Photography + - name: Hiking in the Rockies description: '' percent: 80 - icon: camera + icon: person-simple-walk + - name: Building Custom PCs + description: '' + percent: 90 + icon: cpu-chip + - name: Sci-Fi Reading + description: '' + percent: 70 + icon: book-open languages: - name: English percent: 100 - - name: Chinese - percent: 75 - - name: Portuguese - percent: 25 + - name: Spanish + percent: 50 # Awards. # Add/remove as many awards below as you like. # Only `title`, `awarder`, and `date` are required. # Begin multi-line `summary` with YAML's `|` or `|2-` multi-line prefix and indent 2 spaces below. awards: - - title: Neural Networks and Deep Learning - url: https://www.coursera.org/learn/neural-networks-deep-learning - date: '2023-11-25' - awarder: Coursera - icon: coursera + - title: Best Paper Award + url: https://neurips.cc/ + date: '2022-12-01' + awarder: NeurIPS + icon: hero/trophy summary: | - I studied the foundational concept of neural networks and deep learning. By the end, I was familiar with the significant technological trends driving the rise of deep learning; build, train, and apply fully connected deep neural networks; implement efficient (vectorized) neural networks; identify key parameters in a neural network’s architecture; and apply deep learning to your own applications. - - title: Blockchain Fundamentals - url: https://www.edx.org/professional-certificate/uc-berkeleyx-blockchain-fundamentals - date: '2023-07-01' - awarder: edX - icon: edx + Awarded for groundbreaking work on efficient training of large models. + - title: AI Innovation Grant + url: https://www.nsf.gov/ + date: '2021-06-15' + awarder: National Science Foundation + icon: hero/currency-dollar summary: | - Learned: - - Synthesize your own blockchain solutions - - Gain an in-depth understanding of the specific mechanics of Bitcoin - - Understand Bitcoin’s real-life applications and learn how to attack and destroy Bitcoin, Ethereum, smart contracts and Dapps, and alternatives to Bitcoin’s Proof-of-Work consensus algorithm - - title: 'Object-Oriented Programming in R' - url: https://www.datacamp.com/courses/object-oriented-programming-with-s3-and-r6-in-r - certificate_url: https://www.datacamp.com - date: '2023-01-21' - awarder: datacamp - icon: datacamp + $500,000 grant for research in ethical AI development. + - title: Outstanding PhD Thesis + url: https://www.stanford.edu/ + date: '2019-06-30' + awarder: Stanford University + icon: hero/academic-cap summary: | - Object-oriented programming (OOP) lets you specify relationships between functions and the objects that they can act on, helping you manage complexity in your code. This is an intermediate level course, providing an introduction to OOP, using the S3 and R6 systems. S3 is a great day-to-day R programming tool that simplifies some of the functions that you write. R6 is especially useful for industry-specific analyses, working with web APIs, and building GUIs. + Recognized for contributions to scaling laws in deep learning. --- -## About Me - -Chien Shiung Wu is a professor of artificial intelligence at the Stanford AI Lab. Her research interests include distributed robotics, mobile computing and programmable matter. She leads the Robotic Neurobiology group, which develops self-reconfiguring robots, systems of self-organizing robots, and mobile sensor networks. +Alex Johnson is a Senior AI Research Scientist at Meta AI, where he leads groundbreaking work on large language models and multimodal systems. His research has been published in top conferences like NeurIPS and ICML, with over 10,000 citations. Alex is passionate about pushing the boundaries of AI while ensuring ethical development. Outside of work, he enjoys hiking in the Rockies, building custom PCs, and mentoring the next generation of AI talent. diff --git a/starters/academic-cv/content/authors/admin/avatar.jpg b/starters/academic-cv/content/authors/admin/avatar.jpg deleted file mode 100644 index 49337e47..00000000 Binary files a/starters/academic-cv/content/authors/admin/avatar.jpg and /dev/null differ diff --git a/starters/academic-cv/content/authors/admin/avatar.png b/starters/academic-cv/content/authors/admin/avatar.png new file mode 100644 index 00000000..5ebc1f3b Binary files /dev/null and b/starters/academic-cv/content/authors/admin/avatar.png differ