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