From d1e63984e6bc28c0fc841c5891f06b7b03e17671 Mon Sep 17 00:00:00 2001 From: George Cushen Date: Sun, 30 Nov 2025 04:45:24 +0000 Subject: [PATCH] feat: add theme engine + standardize `params.yaml` Re-implements theme engine in Tailwind from the previous Bootstrap version. Re-organizes appearance params in `params.yaml`. Also, - edit Readme - add popular front matter alias `description` for `summary` - Created a new helper function: get_summary.html - Implements the priority order: .Params.summary > .Params.description > .Params.abstract > .Summary. - clamp abstract in date-title-summary view - default gradient mesh block bg to primary-secondary gradient from theme pack - improve inline code styling - remove backticks around code BREAKING CHANGE: `params.yaml` data structure has changed - see docs and latest templates for example --- .gitignore | 1 + README.md | 23 +- README.zh.md | 35 +- hugo-blox-builder.code-workspace | 11 +- .../assets/css/components/all.css | 1 + .../assets/css/components/notebook.css | 150 +++++ .../assets/css/framework/base.css | 11 + .../assets/css/layout-utilities.css | 81 +++ modules/blox-tailwind/assets/css/main.css | 3 + .../blox-tailwind/data/themes/americano.yaml | 29 - modules/blox-tailwind/data/themes/coffee.yaml | 45 ++ .../blox-tailwind/data/themes/contrast.yaml | 67 ++- .../blox-tailwind/data/themes/cupcake.yaml | 69 ++- .../blox-tailwind/data/themes/default.yaml | 60 +- .../blox-tailwind/data/themes/dracula.yaml | 70 ++- modules/blox-tailwind/data/themes/latte.yaml | 32 -- modules/blox-tailwind/data/themes/marine.yaml | 63 +- modules/blox-tailwind/data/themes/matcha.yaml | 45 ++ .../blox-tailwind/data/themes/minimal.yaml | 45 ++ modules/blox-tailwind/data/themes/retro.yaml | 70 ++- modules/blox-tailwind/data/themes/solar.yaml | 45 ++ .../blox-tailwind/data/themes/synthwave.yaml | 69 ++- .../components/headers/navbar-simple.html | 29 +- .../_partials/components/headers/navbar.html | 69 ++- .../functions/demo_theme_styles.html | 31 + .../functions/generate_color_scale.html | 3 + .../_partials/functions/get_author_name.html | 3 +- .../_partials/functions/get_branding.html | 77 +++ .../layouts/_partials/functions/get_logo.html | 52 +- .../_partials/functions/get_site_icon.html | 47 +- .../_partials/functions/get_summary.html | 3 + .../_partials/functions/get_theme_config.html | 180 ++++++ .../_partials/functions/load_theme_pack.html | 59 ++ .../_partials/functions/notebook/render.html | 540 ++++++++++++++++++ .../_partials/functions/parse_block_v3.html | 3 +- .../_partials/functions/theme_generator.html | 151 +++-- .../layouts/_partials/jsonld/article.html | 3 +- .../layouts/_partials/jsonld/business.html | 5 +- .../layouts/_partials/jsonld/qapage.html | 4 +- .../_partials/site_footer_license.html | 10 +- .../layouts/_partials/site_head.html | 151 +++-- .../layouts/_partials/views/card.html | 2 +- .../_partials/views/date-title-summary.html | 4 +- .../layouts/_shortcodes/notebook.html | 42 ++ .../blox-tailwind/layouts/questions/list.html | 11 +- .../academic-cv/config/_default/hugo.yaml | 6 +- .../academic-cv/config/_default/params.yaml | 85 ++- templates/academic-cv/content/_index.md | 7 +- .../blog/notebook-onboarding/featured.jpg | Bin 0 -> 116806 bytes .../hugoblox-onboarding.ipynb | 161 ++++++ .../content/blog/notebook-onboarding/index.md | 66 +++ templates/blog/config/_default/hugo.yaml | 5 +- templates/blog/config/_default/params.yaml | 60 +- .../documentation/config/_default/hugo.yaml | 5 +- .../documentation/config/_default/params.yaml | 65 ++- .../landing-page/config/_default/hugo.yaml | 5 +- .../landing-page/config/_default/params.yaml | 61 +- .../link-in-bio/config/_default/hugo.yaml | 5 +- .../link-in-bio/config/_default/params.yaml | 53 +- templates/resume/config/_default/hugo.yaml | 5 +- templates/resume/config/_default/params.yaml | 57 +- 61 files changed, 2620 insertions(+), 530 deletions(-) create mode 100644 modules/blox-tailwind/assets/css/components/notebook.css create mode 100644 modules/blox-tailwind/assets/css/layout-utilities.css delete mode 100644 modules/blox-tailwind/data/themes/americano.yaml create mode 100644 modules/blox-tailwind/data/themes/coffee.yaml delete mode 100644 modules/blox-tailwind/data/themes/latte.yaml create mode 100644 modules/blox-tailwind/data/themes/matcha.yaml create mode 100644 modules/blox-tailwind/data/themes/minimal.yaml create mode 100644 modules/blox-tailwind/data/themes/solar.yaml create mode 100644 modules/blox-tailwind/layouts/_partials/functions/demo_theme_styles.html create mode 100644 modules/blox-tailwind/layouts/_partials/functions/get_branding.html create mode 100644 modules/blox-tailwind/layouts/_partials/functions/get_summary.html create mode 100644 modules/blox-tailwind/layouts/_partials/functions/get_theme_config.html create mode 100644 modules/blox-tailwind/layouts/_partials/functions/load_theme_pack.html create mode 100644 modules/blox-tailwind/layouts/_partials/functions/notebook/render.html create mode 100644 modules/blox-tailwind/layouts/_shortcodes/notebook.html create mode 100644 templates/academic-cv/content/blog/notebook-onboarding/featured.jpg create mode 100644 templates/academic-cv/content/blog/notebook-onboarding/hugoblox-onboarding.ipynb create mode 100644 templates/academic-cv/content/blog/notebook-onboarding/index.md diff --git a/.gitignore b/.gitignore index a2ff2544..22f082ef 100644 --- a/.gitignore +++ b/.gitignore @@ -40,6 +40,7 @@ starters/**/pnpm-lock.yaml .idea/ .vscode/ .specstory/ +docs/ # ============================================================================ # Language & Framework Specific diff --git a/README.md b/README.md index ec526248..9a1a5f8f 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@

- Build world-class sites with Hugo Blox + Build world-class sites with HugoBlox

@@ -33,11 +33,11 @@ --- -## Why Top Talent Chooses Hugo Blox +## Why Top Talent Chooses HugoBlox In the age of AI agents, **Markdown is the new source code**. -Vibe coding tools generate fragile, "black box" React/JS apps that are a nightmare to maintain once the AI disconnects. **Hugo Blox** is different. We combine the speed of an AI builder with the robustness of a static site generator. +Vibe coding tools generate fragile, "black box" React/JS apps that are a nightmare to maintain once the AI disconnects. **HugoBlox** is different. We combine the speed of an AI builder with the robustness of a static site generator. - **๐Ÿ”ฎ Future-Proof & AI Ready:** Your content lives in clean Markdownโ€”the native language of LLMs. It's readable by humans and machines forever. No vendor lock-in. - **๐Ÿง  The "Copilot" Workflow:** @@ -80,16 +80,17 @@ For more guides, visit our documentation at [**https://docs.hugoblox.com/**](htt ## Free vs. Pro -**Hugo Blox** is open core. You can build a world-class site for free. **Pro** is for those who want to move faster and support the ecosystem. +**HugoBlox** is open core. You can build a world-class site for free. **Pro** is for those who want to move faster and support the ecosystem. -| Feature | Open Source | **Hugo Blox Pro** | +| Feature | Open Source | **HugoBlox Pro** | | :--- | :---: | :---: | | **Core Framework** | โœ… | โœ… | -| **Standard Blocks** (Hero, Features, etc.) | โœ… | โœ… | -| **Premium Templates** (SaaS, Course, Lab) | โŒ | **โœ… Included** | +| **Studio site editor** | โŒ | **โœ… Included** | +| **Premium Templates** (SaaS, Lab) | โŒ | **โœ… Included** | | **Exclusive Pro Blocks** | โŒ | **โœ… Included** | -| **Lifetime Updates** | โŒ | **โœ… Included** | -| **Support the Project** | โค๏ธ | **๐Ÿ† Hero Status** | +| **Remove HugoBlox attribution?** | โŒ | **โœ… Included** | +| **Discord Community Support** | โค๏ธ | **โšก๏ธ Priority** | +| **Support Open Source/Research** | โค๏ธ | **๐Ÿ† Hero Status** | ๐Ÿ‘‰ [**Upgrade to Pro**](https://hugoblox.com/pro?utm_source=github&utm_medium=readme) @@ -97,7 +98,7 @@ For more guides, visit our documentation at [**https://docs.hugoblox.com/**](htt ## What Creators Say -> "Hugo Blox saved me 40+ hours on my lab site. Bibtex integration auto-updates publications โ€” **our citations are up 3ร—**." +> "HugoBlox saved me 40+ hours on my lab site. Bibtex integration auto-updates publications โ€” **our citations are up 3ร—**." > โ€” **Dr. Sarah Yang**, AI Researcher > "We launched our documentation in 10 minutes. The block system is genius; **onboarding time dropped by 60%**." @@ -107,7 +108,7 @@ For more guides, visit our documentation at [**https://docs.hugoblox.com/**](htt ## Support the Project -- ๐Ÿ’Ž **Pro (one-time donation)** โ€” Get lifetime access to all premium templates, blocks, and updates. +- ๐Ÿ’Ž **Pro (only $8/m)** โ€” Get access to the visual editor and all premium templates, blocks, and updates.
[**Go Pro โ†’**](https://hugoblox.com/pro?utm_source=github&utm_medium=readme) - โ˜•๏ธ **Donate a Coffee** โ€” Support open source and open research. diff --git a/README.zh.md b/README.zh.md index f2c1ccc3..34678aa6 100644 --- a/README.zh.md +++ b/README.zh.md @@ -2,7 +2,7 @@

- ็”จ Hugo Blox ๆ‰“้€ ไธ–็•Œ็บง็ซ™็‚น + ็”จ HugoBlox ๆ‰“้€ ไธ–็•Œ็บง็ซ™็‚น

@@ -16,7 +16,7 @@

๐Ÿš€ ๅฏๅŠจ Copilot๏ผˆๅ…่ดน๏ผ‰  โ€ข  - ๅ‡็บง Pro๏ผˆ็ปˆ่บซ๏ผ‰ + ๅ‡็บง Pro

@@ -24,7 +24,7 @@ Discord - ไธบ Hugo Blox ๅŠ ๆ˜Ÿ + ไธบ HugoBlox ๅŠ ๆ˜Ÿ ๅœจ GitHub ๅ…ณๆณจ @@ -33,11 +33,11 @@ --- -## ไธบไป€ไนˆ้กถๅฐ–ๅผ€ๅ‘่€…ๅ’Œ็ ”็ฉถ่€…้€‰ๆ‹ฉ Hugo Blox๏ผŸ +## ไธบไป€ไนˆ้กถๅฐ–ๅผ€ๅ‘่€…ๅ’Œ็ ”็ฉถ่€…้€‰ๆ‹ฉ HugoBlox๏ผŸ ๅœจๆ™บ่ƒฝไฝ“ / Copilot ๆ—ถไปฃ๏ผŒ**Markdown ๆญฃๅœจๅ˜ๆˆๆ–ฐ็š„ใ€Œๆบ็ ใ€**ใ€‚ -ๅธ‚้ขไธŠๅ„็ง vibe coding / ็”Ÿๆˆๅผๅปบ็ซ™ๅทฅๅ…ท๏ผŒไผšไธ€่‚ก่„‘ๅๅ‡บไธ€ๅคงๅจ้šพไปฅ็ปดๆŠค็š„ React/JS ้ป‘็›’ไปฃ็ ๏ผŒไธ€ๆ—ฆ็ฆปๅผ€้‚ฃไธช AI๏ผŒๅพˆๅฟซๅฐฑๅคฑๆŽงใ€‚**Hugo Blox ้€‰็š„ๆ˜ฏๅฆไธ€ๆก่ทฏ๏ผš็”จๆž็ฎ€็š„้™ๆ€็ซ™ๆ ˆ๏ผŒ้…ไธŠๅผ€ๆบ Copilot ไฝ“้ชŒใ€‚** +ๅธ‚้ขไธŠๅ„็ง vibe coding / ็”Ÿๆˆๅผๅปบ็ซ™ๅทฅๅ…ท๏ผŒไผšไธ€่‚ก่„‘ๅๅ‡บไธ€ๅคงๅจ้šพไปฅ็ปดๆŠค็š„ React/JS ้ป‘็›’ไปฃ็ ๏ผŒไธ€ๆ—ฆ็ฆปๅผ€้‚ฃไธช AI๏ผŒๅพˆๅฟซๅฐฑๅคฑๆŽงใ€‚**HugoBlox ้€‰็š„ๆ˜ฏๅฆไธ€ๆก่ทฏ๏ผš็”จๆž็ฎ€็š„้™ๆ€็ซ™ๆ ˆ๏ผŒ้…ไธŠๅผ€ๆบ Copilot ไฝ“้ชŒใ€‚** - **๐Ÿ”ฎ ้ขๅ‘ๆœชๆฅ็š„ๅ†…ๅฎน่ต„ไบง๏ผš** ๅ†…ๅฎนไปฅๅนฒๅ‡€็š„ Markdown ๅญ˜ๅ‚จโ€”โ€”่ฟ™ๆ˜ฏ LLM ๅ’Œไบบ็ฑป้ƒฝ่ฏปๅพ—ๆ‡‚็š„ๆ ผๅผ๏ผŒ่ฟ็งป็ฎ€ๅ•ใ€้•ฟๆœŸๅฏ็”จ๏ผŒๆฒกๆœ‰ๅŽ‚ๅ•†้”ๅฎšใ€‚ - **๐Ÿง  Copilot ๅทฅไฝœๆต๏ผš** @@ -78,24 +78,25 @@ npx hugoblox create ## ๅผ€ๆบ็‰ˆ vs Pro ็‰ˆ -Hugo Blox ๆ˜ฏ **ๅผ€ๆบๅ†…ๆ ธ + Pro ๅขžๅผบ** ็š„ๆจกๅผใ€‚ไฝ ๅฏไปฅ็”จๅผ€ๆบ็‰ˆๆญๅปบไธ€ๆต็ซ™็‚น๏ผ›ๅฆ‚ๆžœไฝ ๅธŒๆœ›ๆ›ดๅฟซๆŽจ่ฟ›้กน็›ฎใ€ๅŒๆ—ถๆ”ฏๆŒ็”Ÿๆ€ๅ‘ๅฑ•๏ผŒๅฏไปฅ่€ƒ่™‘ๅ‡็บง Proใ€‚ +HugoBlox ๆ˜ฏ **ๅผ€ๆบๅ†…ๆ ธ + Pro ๅขžๅผบ** ็š„ๆจกๅผใ€‚ไฝ ๅฏไปฅ็”จๅผ€ๆบ็‰ˆๆญๅปบไธ€ๆต็ซ™็‚น๏ผ›ๅฆ‚ๆžœไฝ ๅธŒๆœ›ๆ›ดๅฟซๆŽจ่ฟ›้กน็›ฎใ€ๅŒๆ—ถๆ”ฏๆŒ็”Ÿๆ€ๅ‘ๅฑ•๏ผŒๅฏไปฅ่€ƒ่™‘ๅ‡็บง Proใ€‚ -| ่ƒฝๅŠ› | ๅผ€ๆบ็‰ˆ | **Hugo Blox Pro** | +| ่ƒฝๅŠ› | ๅผ€ๆบ็‰ˆ | **HugoBlox Pro** | | :--- | :---: | :---: | | **ๆ ธๅฟƒๆก†ๆžถ** | โœ… | โœ… | -| **ๆ ‡ๅ‡†็งฏๆœจ**๏ผˆHeroใ€ๅŠŸ่ƒฝไป‹็ป็ญ‰๏ผ‰ | โœ… | โœ… | -| **้ซ˜็บงๆ•ด็ซ™ๆจกๆฟ**๏ผˆSaaSใ€่ฏพ็จ‹ใ€ๅฎž้ชŒๅฎคไธป้กต็ญ‰๏ผ‰ | โŒ | **โœ… ๅ…จ้ƒจ่งฃ้”** | -| **็‹ฌๅฎถ Pro ็งฏๆœจ** | โŒ | **โœ… ๅ…จ้ƒจ่งฃ้”** | -| **็ปˆ่บซๆ›ดๆ–ฐ** | โŒ | **โœ… ๅŒ…ๅซ** | -| **ๆ”ฏๆŒ้กน็›ฎ / ่ตžๅŠฉๅผ€ๆบ** | โค๏ธ | **๐Ÿ† ็œŸ็ˆฑ็”จๆˆท** | +| **Studio ็ซ™็‚น็ผ–่พ‘ๅ™จ** | โŒ | **โœ… ๅŒ…ๅซ** | +| **้ซ˜็บงๆ•ด็ซ™ๆจกๆฟ**๏ผˆSaaSใ€ๅฎž้ชŒๅฎคไธป้กต็ญ‰๏ผ‰ | โŒ | **โœ… ๅŒ…ๅซ** | +| **็‹ฌๅฎถ Pro ็งฏๆœจ** | โŒ | **โœ… ๅŒ…ๅซ** | +| **็งป้™ค HugoBlox ็‰ˆๆƒๅฃฐๆ˜Ž๏ผŸ** | โŒ | **โœ… ๅŒ…ๅซ** | +| **Discord ็คพๅŒบๆ”ฏๆŒ** | โค๏ธ | **โšก๏ธ ไผ˜ๅ…ˆๆ”ฏๆŒ** | +| **ๆ”ฏๆŒๅผ€ๆบ / ็ง‘็ ”** | โค๏ธ | **๐Ÿ† Hero ่บซไปฝ** | -๐Ÿ‘‰ [**ๅ‡็บง Pro๏ผˆ็ปˆ่บซ๏ผ‰**](https://hugoblox.com/pro?utm_source=github&utm_medium=readme) +๐Ÿ‘‰ [**ๅ‡็บง Pro**](https://hugoblox.com/pro?utm_source=github&utm_medium=readme) --- ## ๅˆ›ไฝœ่€…ๆ€Žไนˆ่ฏด -> โ€œHugo Blox ็›ดๆŽฅๅธฎๆˆ‘็œไบ† 40+ ๅฐๆ—ถๅšๅฎž้ชŒๅฎค็ฝ‘็ซ™ใ€‚BibTeX ่‡ชๅŠจๅŒๆญฅๅ‡บ็‰ˆ็‰ฉ โ€”โ€” **ๅผ•็”จ้‡ๆๅ‡ไบ† 3ร—**ใ€‚โ€ +> โ€œHugoBlox ็›ดๆŽฅๅธฎๆˆ‘็œไบ† 40+ ๅฐๆ—ถๅšๅฎž้ชŒๅฎค็ฝ‘็ซ™ใ€‚BibTeX ่‡ชๅŠจๅŒๆญฅๅ‡บ็‰ˆ็‰ฉ โ€”โ€” **ๅผ•็”จ้‡ๆๅ‡ไบ† 3ร—**ใ€‚โ€ > โ€”โ€” **Sarah Yang ๅšๅฃซ**๏ผŒAI ็ ”็ฉถ่€… > โ€œๆˆ‘ไปฌ 10 ๅˆ†้’ŸๅฐฑๆŠŠๆ–‡ๆกฃ็ซ™็‚นไธŠ็บฟไบ†ใ€‚็งฏๆœจ็ณป็ปŸๅคชๅฆ™ไบ†๏ผ›**ๆ–ฐๅŒๅญฆไธŠๆ‰‹ๆ—ถ้—ด็ผฉ็Ÿญไบ† 60%**ใ€‚โ€ @@ -105,8 +106,8 @@ Hugo Blox ๆ˜ฏ **ๅผ€ๆบๅ†…ๆ ธ + Pro ๅขžๅผบ** ็š„ๆจกๅผใ€‚ไฝ ๅฏไปฅ็”จๅผ€ๆบ็‰ˆๆญ ## ๆ”ฏๆŒ่ฟ™ไธช้กน็›ฎ -- ๐Ÿ’Ž **Pro๏ผˆไธ€ๆฌกๆ€งๆ่ต ๏ผ‰** โ€” ็ปˆ่บซ่Žทๅ–ๅ…จ้ƒจ้ซ˜็บงๆจกๆฟใ€็งฏๆœจไธŽๆ›ดๆ–ฐใ€‚ -
[**็ซ‹ๅณๅ‡็บง Pro๏ผˆ็ปˆ่บซ๏ผ‰โ†’**](https://hugoblox.com/pro?utm_source=github&utm_medium=readme) +- ๐Ÿ’Ž **Pro๏ผˆไป…้œ€ $8/ๆœˆ๏ผ‰** โ€” ่Žทๅ–ๅฏ่ง†ๅŒ–็ผ–่พ‘ๅ™จไปฅๅŠๆ‰€ๆœ‰้ซ˜็บงๆจกๆฟใ€็งฏๆœจไธŽๆ›ดๆ–ฐใ€‚ +
[**็ซ‹ๅณๅ‡็บง Pro โ†’**](https://hugoblox.com/pro?utm_source=github&utm_medium=readme) - โ˜•๏ธ **่ฏทๆˆ‘ไปฌๅ–ๆฏๅ’–ๅ•ก** โ€” ๆ”ฏๆŒๅผ€ๆบไธŽๅผ€ๆ”พ็ง‘็ ”ใ€‚
[**GitHub ่ตžๅŠฉ โ†’**](https://github.com/sponsors/gcushen) @@ -123,7 +124,7 @@ Hugo Blox ๆ˜ฏ **ๅผ€ๆบๅ†…ๆ ธ + Pro ๅขžๅผบ** ็š„ๆจกๅผใ€‚ไฝ ๅฏไปฅ็”จๅผ€ๆบ็‰ˆๆญ - ๐Ÿ’ฌ [Discord](https://discord.gg/z8wNYzb) - ๐Ÿ“š [ๆ–‡ๆกฃไธŽๆŒ‡ๅ—](https://docs.hugoblox.com/?utm_source=github&utm_medium=readme) - ๐Ÿฆ [X / Twitter](https://x.com/BuildLore) -- โญ [ไธบ Hugo Blox ๅŠ ๆ˜Ÿ](https://github.com/HugoBlox/hugo-blox-builder) +- โญ [ไธบ HugoBlox ๅŠ ๆ˜Ÿ](https://github.com/HugoBlox/hugo-blox-builder) --- diff --git a/hugo-blox-builder.code-workspace b/hugo-blox-builder.code-workspace index 11b3bfc3..3c490a1c 100644 --- a/hugo-blox-builder.code-workspace +++ b/hugo-blox-builder.code-workspace @@ -13,21 +13,24 @@ "**/node_modules/**": true, "**/public/**": true, "**/resources/**": true, - "**/pagefind/**": true + "**/pagefind/**": true, + "**/dist/**": true }, "search.exclude": { "**/node_modules/**": true, "**/public/**": true, "**/resources/**": true, - "**/pagefind/**": true + "**/pagefind/**": true, + "**/dist/**": true }, "files.watcherExclude": { "**/node_modules/**": true, "**/public/**": true, "**/resources/**": true, - "**/pagefind/**": true + "**/pagefind/**": true, + "**/dist/**": true }, - "explorer.excludeGitIgnore": true, + "explorer.excludeGitIgnore": false, "workbench.editor.labelFormat": "medium", "breadcrumbs.enabled": true, "npm.packageManager": "pnpm", diff --git a/modules/blox-tailwind/assets/css/components/all.css b/modules/blox-tailwind/assets/css/components/all.css index fca96b7b..6961a79b 100644 --- a/modules/blox-tailwind/assets/css/components/all.css +++ b/modules/blox-tailwind/assets/css/components/all.css @@ -6,5 +6,6 @@ @import "steps.css"; @import "cards.css"; @import "math.css"; +@import "notebook.css"; @import "author-notes.css"; @import "glassmorphism.css"; diff --git a/modules/blox-tailwind/assets/css/components/notebook.css b/modules/blox-tailwind/assets/css/components/notebook.css new file mode 100644 index 00000000..31109d23 --- /dev/null +++ b/modules/blox-tailwind/assets/css/components/notebook.css @@ -0,0 +1,150 @@ +.hb-notebook { + --hb-notebook-output-max-height: 26rem; + @apply relative isolate my-10 rounded-3xl border border-zinc-200/70 bg-white/90 p-6 shadow-xl shadow-primary-500/5 transition-shadow duration-300; + @apply dark:border-zinc-800/70 dark:bg-zinc-900/70 dark:shadow-black/30 text-zinc-800 dark:text-zinc-50; +} + +.hb-notebook::after { + content: ""; + @apply pointer-events-none absolute inset-0 rounded-3xl bg-gradient-to-r from-primary-500/5 via-transparent to-secondary-500/5 opacity-0 transition-opacity duration-300; +} + +.hb-notebook:hover::after { + @apply opacity-100; +} + +.hb-notebook--dense { + @apply p-4; +} + +.hb-notebook-header { + @apply flex flex-wrap items-start justify-between gap-4 border-b border-zinc-200/70 pb-4 dark:border-zinc-800/70; +} + +.hb-notebook-heading { + @apply space-y-1; +} + +.hb-notebook-title { + @apply text-lg font-semibold text-zinc-900 dark:text-white tracking-tight; +} + +.hb-notebook-subtitle { + @apply text-sm font-medium text-zinc-500 dark:text-zinc-400; +} + +.hb-notebook-download { + @apply inline-flex items-center gap-2 rounded-full border border-primary-500/70 px-4 py-2 text-sm font-medium text-primary-600 no-underline transition-all duration-200; + @apply hover:-translate-y-0.5 hover:bg-primary-50/60 hover:text-primary-700 dark:text-primary-300 dark:border-primary-400/60 dark:hover:bg-primary-500/10; +} + +.hb-notebook-download svg { + @apply h-4 w-4; +} + +.hb-notebook-metadata { + @apply mt-4 grid gap-3 rounded-2xl border border-dashed border-zinc-200/70 px-4 py-3 text-sm; + @apply dark:border-zinc-800/70; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); +} + +.hb-notebook-metadata dt { + @apply text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400; +} + +.hb-notebook-metadata dd { + @apply font-medium text-zinc-800 dark:text-zinc-100; +} + +.hb-notebook-body { + @apply mt-6 flex flex-col gap-5; +} + +.hb-notebook-cell { + @apply rounded-2xl border border-zinc-200/70 bg-white p-4 shadow-sm shadow-zinc-200/60 transition-all duration-200; + @apply dark:border-zinc-800/60 dark:bg-zinc-900/70 dark:shadow-none; +} + +.hb-notebook-cell--markdown { + @apply bg-gradient-to-br from-white via-white to-primary-50/40 dark:from-zinc-900 dark:via-zinc-900 dark:to-primary-900/10; +} + +.hb-notebook-cell-header { + @apply mb-3 flex flex-wrap items-center gap-3; +} + +.hb-notebook-pill { + @apply inline-flex items-center rounded-full bg-zinc-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-zinc-600; + @apply dark:bg-zinc-800 dark:text-zinc-300; +} + +.hb-notebook-tags { + @apply flex flex-wrap gap-1; +} + +.hb-notebook-tags span { + @apply inline-flex items-center rounded-full bg-primary-100/80 px-2 py-0.5 text-[11px] font-medium text-primary-700; + @apply dark:bg-primary-400/20 dark:text-primary-200; +} + +.hb-notebook-code { + @apply overflow-hidden rounded-2xl border border-zinc-900/10 bg-zinc-950/95 shadow-inner shadow-black/30; +} + +.hb-notebook-code pre { + @apply m-0 overflow-auto rounded-2xl p-5 text-sm leading-relaxed; +} + +.hb-notebook-markdown { + @apply prose-h1:text-2xl prose-h2:text-xl prose-p:leading-relaxed prose-a:text-primary-600 max-w-none; +} + +.hb-notebook-raw { + @apply rounded-xl border border-dashed border-zinc-300/80 bg-zinc-50 p-4 font-mono text-sm text-zinc-700; + @apply dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 overflow-auto; +} + +.hb-notebook-outputs { + @apply mt-4 space-y-3 rounded-2xl border border-zinc-100/80 bg-zinc-50/80 p-4; + @apply dark:border-zinc-800/60 dark:bg-zinc-900/50; +} + +.hb-notebook-output { + @apply overflow-auto rounded-xl border border-transparent bg-white/90 p-3 text-sm leading-relaxed text-zinc-700; + @apply dark:bg-zinc-950/50 dark:text-zinc-100; + max-height: var(--hb-notebook-output-max-height, 26rem); +} + +.hb-notebook-output--stream { + @apply font-mono bg-zinc-900 text-zinc-100; +} + +.hb-notebook-output--error { + @apply border-red-200 bg-red-50/90 text-red-700 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-200; +} + +.hb-notebook-output--image { + @apply bg-transparent p-0 border-none; +} + +.hb-notebook-output--image img, +.hb-notebook-output--image svg { + @apply h-auto w-full rounded-xl border border-zinc-100/80 bg-white object-contain dark:border-zinc-800/60 dark:bg-zinc-900; +} + +.hb-notebook-output--markdown { + @apply bg-transparent p-0 border-none; +} + +.hb-notebook-output pre { + @apply m-0; +} + +.hb-notebook-output code { + @apply font-mono text-sm; +} + +.hb-notebook-empty { + @apply mt-4 rounded-2xl border border-dashed border-zinc-300/70 bg-zinc-50/80 px-4 py-3 text-center text-sm text-zinc-500; + @apply dark:border-zinc-700 dark:bg-zinc-900/40 dark:text-zinc-300; +} diff --git a/modules/blox-tailwind/assets/css/framework/base.css b/modules/blox-tailwind/assets/css/framework/base.css index aee9ea67..d666a690 100644 --- a/modules/blox-tailwind/assets/css/framework/base.css +++ b/modules/blox-tailwind/assets/css/framework/base.css @@ -89,4 +89,15 @@ background-color: var(--color-primary-400); color: black; } + + /* Inline Code Styling */ + .prose code:not(:where(pre *)) { + @apply rounded-md bg-neutral-100 px-1.5 py-0.5 text-[0.875em] font-normal text-primary-700; + @apply dark:bg-neutral-700/50 dark:text-primary-300; + } + + .prose code:not(:where(pre *))::before, + .prose code:not(:where(pre *))::after { + content: none !important; + } } diff --git a/modules/blox-tailwind/assets/css/layout-utilities.css b/modules/blox-tailwind/assets/css/layout-utilities.css new file mode 100644 index 00000000..23ecae57 --- /dev/null +++ b/modules/blox-tailwind/assets/css/layout-utilities.css @@ -0,0 +1,81 @@ +/* + Hugo Blox Layout Utilities + + Provides CSS utilities that use the configurable layout tokens: + - --hb-radius: Border radius token + - --hb-spacing-base: Base spacing unit + - --hb-spacing-section: Section padding + - --hb-font-size-base: Base font size + - --hb-font-size-scale: Modular scale ratio +*/ + +/* Border radius utility - use instead of hardcoded rounded-* classes */ +.hb-rounded { + border-radius: var(--hb-radius, 0.5rem); +} + +.hb-rounded-sm { + border-radius: calc(var(--hb-radius, 0.5rem) * 0.5); +} + +.hb-rounded-lg { + border-radius: calc(var(--hb-radius, 0.5rem) * 1.5); +} + +.hb-rounded-xl { + border-radius: calc(var(--hb-radius, 0.5rem) * 2); +} + +/* Section spacing */ +.hb-section { + padding-top: var(--hb-spacing-section, 4rem); + padding-bottom: var(--hb-spacing-section, 4rem); +} + +.hb-section-sm { + padding-top: calc(var(--hb-spacing-section, 4rem) * 0.5); + padding-bottom: calc(var(--hb-spacing-section, 4rem) * 0.5); +} + +/* Component spacing */ +.hb-gap { + gap: var(--hb-spacing-base, 1rem); +} + +.hb-gap-sm { + gap: calc(var(--hb-spacing-base, 1rem) * 0.5); +} + +.hb-gap-lg { + gap: calc(var(--hb-spacing-base, 1rem) * 1.5); +} + +/* Padding utilities */ +.hb-p { + padding: var(--hb-spacing-base, 1rem); +} + +.hb-px { + padding-left: var(--hb-spacing-base, 1rem); + padding-right: var(--hb-spacing-base, 1rem); +} + +.hb-py { + padding-top: var(--hb-spacing-base, 1rem); + padding-bottom: var(--hb-spacing-base, 1rem); +} + +/* Margin utilities */ +.hb-m { + margin: var(--hb-spacing-base, 1rem); +} + +.hb-mx { + margin-left: var(--hb-spacing-base, 1rem); + margin-right: var(--hb-spacing-base, 1rem); +} + +.hb-my { + margin-top: var(--hb-spacing-base, 1rem); + margin-bottom: var(--hb-spacing-base, 1rem); +} diff --git a/modules/blox-tailwind/assets/css/main.css b/modules/blox-tailwind/assets/css/main.css index 9e917a5e..24cac2a9 100644 --- a/modules/blox-tailwind/assets/css/main.css +++ b/modules/blox-tailwind/assets/css/main.css @@ -26,6 +26,9 @@ /* Hugo Blox theme system (color utilities) */ @import "color-utilities.css"; +/* Hugo Blox layout utilities (radius, spacing tokens) */ +@import "layout-utilities.css"; + /* Hugo Blox framework components */ @import "framework/components.css"; diff --git a/modules/blox-tailwind/data/themes/americano.yaml b/modules/blox-tailwind/data/themes/americano.yaml deleted file mode 100644 index a24333fd..00000000 --- a/modules/blox-tailwind/data/themes/americano.yaml +++ /dev/null @@ -1,29 +0,0 @@ -name: "americano" -type: "dark" - -dark: - colors: - primary: "#d49255" # Warm Orange/Brown (approximated from oklch(71.996% 0.123 62.756)) - secondary: "#395260" # Cool Slate Blue (approximated from oklch(34.465% 0.029 199.194)) - neutral: "#2b262b" # Deep Purple/Black (approximated from oklch(16.51% 0.015 326.261)) - ui: - background: "#2b262b" # Deep Espresso - foreground: "#e0cab6" # Crema (approximated from oklch(72.354% 0.092 79.129)) - header: - background: "#2b262b" - foreground: "#e0cab6" - footer: - background: "#231f23" # Darker roast - foreground: "#9ca3af" - -light: - # A light "Cortado" pairing for day mode if needed - colors: - primary: "#d49255" - secondary: "#395260" - ui: - background: "#f5f5f4" - foreground: "#292524" - header: - background: "#ffffff" - foreground: "#292524" diff --git a/modules/blox-tailwind/data/themes/coffee.yaml b/modules/blox-tailwind/data/themes/coffee.yaml new file mode 100644 index 00000000..f2f8b26e --- /dev/null +++ b/modules/blox-tailwind/data/themes/coffee.yaml @@ -0,0 +1,45 @@ +# HugoBlox Theme Pack +# https://docs.hugoblox.com + +hugoblox: + meta: + format: "hugoblox-theme@1" + name: "Coffee" + vendor: "hugoblox" + version: "1.0.0" + license: "MIT" + description: "Warm latte light mode, deep americano dark mode" + + type: "dual" + + light: + # "Latte" - Warm, creamy, light + colors: + primary: "#3b2313" # Mocha/Coffee bean + secondary: "#d97706" # Caramel/Amber + neutral: "#78716c" # Stone + ui: + background: "#fffaf5" # Warm cream/milk foam + foreground: "#3b2313" # Espresso text + header: + background: "#f5efe9" # Visible header band (same as footer) + foreground: "#3b2313" + footer: + background: "#f5efe9" # Slightly darker latte foam + foreground: "#5c4033" + + dark: + # "Americano" - Deep, dark, intense + colors: + primary: "#d49255" # Warm Orange/Brown crema + secondary: "#395260" # Cool Slate Blue + neutral: "#2b262b" # Deep Espresso (Dark Neutral) + ui: + background: "#2b262b" # Deep Espresso + foreground: "#e0cab6" # Crema + header: + background: "#2b262b" + foreground: "#e0cab6" + footer: + background: "#231f23" # Darker roast + foreground: "#9ca3af" diff --git a/modules/blox-tailwind/data/themes/contrast.yaml b/modules/blox-tailwind/data/themes/contrast.yaml index e11dcc27..e5b1805e 100644 --- a/modules/blox-tailwind/data/themes/contrast.yaml +++ b/modules/blox-tailwind/data/themes/contrast.yaml @@ -1,30 +1,41 @@ -name: "contrast" -type: "dual" +# HugoBlox Theme Pack +# https://docs.hugoblox.com -light: - colors: - primary: "indigo" - secondary: "blue" - ui: - background: "#ffffff" - foreground: "#111827" - header: - foreground: "#ffffff" +hugoblox: + meta: + format: "hugoblox-theme@1" + name: "Contrast" + vendor: "hugoblox" + version: "1.0.0" + license: "MIT" + description: "High contrast with inverted header" + + type: "dual" + + light: + colors: + primary: "indigo" + secondary: "blue" + ui: + background: "#ffffff" + foreground: "#111827" + header: + foreground: "#ffffff" + background: "#0f172a" + footer: + background: "#f3f4f6" + foreground: "#0f172a" + + dark: + colors: + primary: "blue" + secondary: "teal" + ui: background: "#0f172a" - footer: - background: "#f3f4f6" - foreground: "#0f172a" - -dark: - colors: - primary: "blue" - secondary: "teal" - ui: - background: "#0f172a" - foreground: "#f8fafc" - header: - foreground: "#0f172a" - background: "#f8fafc" - footer: - background: "#111827" - foreground: "#e5e7eb" + foreground: "#f8fafc" + header: + foreground: "#0f172a" + background: "#f8fafc" + footer: + background: "#111827" + foreground: "#e5e7eb" diff --git a/modules/blox-tailwind/data/themes/cupcake.yaml b/modules/blox-tailwind/data/themes/cupcake.yaml index 725d8d00..225bf01d 100644 --- a/modules/blox-tailwind/data/themes/cupcake.yaml +++ b/modules/blox-tailwind/data/themes/cupcake.yaml @@ -1,29 +1,44 @@ -name: "cupcake" -type: "light" +# HugoBlox Theme Pack +# https://docs.hugoblox.com -light: - colors: - primary: "#e779c1" # Frosting Pink (approximated from oklch(65% 0.241 354.308)) - secondary: "#d946ef" # Deep Purple/Fuchsia (approximated from oklch(62% 0.265 303.9)) - neutral: "#5c4033" # Chocolate/Dark Brown (approximated from oklch(40% 0.153 2.432)) - ui: - background: "#faf7f5" # Vanilla/Sugar (approximated from oklch(97% 0.014 343.198)) - foreground: "#7d1f39" # Berry Jam (approximated from oklch(52% 0.223 3.958)) - header: - background: "#ffffff" - foreground: "#7d1f39" - footer: - background: "#f3e8e8" # Light Pink Foam - foreground: "#7d1f39" +hugoblox: + meta: + format: "hugoblox-theme@1" + name: "Cupcake" + vendor: "hugoblox" + version: "1.0.0" + license: "MIT" + description: "Sweet pastry pinks and berry accents" -dark: - # A darker "Red Velvet" variant - colors: - primary: "#e779c1" - secondary: "#d946ef" - ui: - background: "#2a1b20" # Dark Chocolate - foreground: "#f8e7e7" # Pale Pink Cream - header: - background: "#1f1216" - foreground: "#f8e7e7" + type: "dual" + + light: + colors: + primary: "#e779c1" # Frosting Pink + secondary: "#d946ef" # Deep Purple/Fuchsia + neutral: "#5c4033" # Chocolate/Dark Brown + ui: + background: "#faf7f5" # Vanilla/Sugar + foreground: "#7d1f39" # Berry Jam + header: + background: "#fff0f5" # LavenderBlush - slight pink tint + foreground: "#7d1f39" + footer: + background: "#f3e8e8" # Light Pink Foam + foreground: "#7d1f39" + + dark: + # "Dark Berry" - Rich, vibrant, fruity + colors: + primary: "#f472b6" # Bright Icing Pink (Pink-400) + secondary: "#c084fc" # Purple Sprinkle (Purple-400) + neutral: "#831843" # Deep Berry (Pink-900) + ui: + background: "#4c0519" # Deep Red Velvet / Rose-950 + foreground: "#fce7f3" # Sweet Cream / Pink-100 + header: + background: "#831843" # Vibrant Berry Header / Pink-900 + foreground: "#fce7f3" + footer: + background: "#881337" # Rose-900 + foreground: "#fbcfe8" # Pink-200 diff --git a/modules/blox-tailwind/data/themes/default.yaml b/modules/blox-tailwind/data/themes/default.yaml index 30df3451..38fbfa86 100644 --- a/modules/blox-tailwind/data/themes/default.yaml +++ b/modules/blox-tailwind/data/themes/default.yaml @@ -1,30 +1,40 @@ -name: "default" -type: "dual" +# HugoBlox Theme Pack +# https://docs.hugoblox.com -light: - colors: - primary: "indigo" - secondary: "blue" - ui: - background: "#ffffff" - foreground: "#111827" - header: +hugoblox: + meta: + format: "hugoblox-theme@1" + name: "Default" + vendor: "hugoblox" + version: "1.0.0" + license: "MIT" + + type: "dual" + + light: + colors: + primary: "indigo" + secondary: "blue" + ui: background: "#ffffff" - foreground: "#0f172a" - footer: - background: "#f3f4f6" - foreground: "#0f172a" + foreground: "#111827" + header: + background: "#f1f5f9" # Slate-100 for definition against white content + foreground: "#0f172a" + footer: + background: "#f3f4f6" + foreground: "#0f172a" -dark: - colors: - primary: "blue" - secondary: "teal" - ui: - background: "#0f172a" - foreground: "#f8fafc" - header: + dark: + colors: + primary: "blue" + secondary: "teal" + ui: background: "#0f172a" foreground: "#f8fafc" - footer: - background: "#111827" - foreground: "#e5e7eb" + header: + background: "#0f172a" + foreground: "#f8fafc" + footer: + background: "#111827" + foreground: "#e5e7eb" diff --git a/modules/blox-tailwind/data/themes/dracula.yaml b/modules/blox-tailwind/data/themes/dracula.yaml index d0af84ed..71a892b6 100644 --- a/modules/blox-tailwind/data/themes/dracula.yaml +++ b/modules/blox-tailwind/data/themes/dracula.yaml @@ -1,29 +1,45 @@ -name: "dracula" -type: "dark" +# HugoBlox Theme Pack +# https://docs.hugoblox.com -dark: - colors: - primary: "#ff79c6" # Dracula Pink - secondary: "#bd93f9" # Dracula Purple - neutral: "#6272a4" # Dracula Comment (Blue-Gray) - ui: - background: "#282a36" # Dracula Background - foreground: "#f8f8f2" # Dracula Foreground - header: - background: "#282a36" - foreground: "#f8f8f2" - footer: - background: "#21222c" # Slightly darker selection color - foreground: "#f8f8f2" +hugoblox: + meta: + format: "hugoblox-theme@1" + name: "Dracula" + vendor: "hugoblox" + version: "1.0.0" + license: "MIT" + description: "The iconic dark theme with a light Buffy variant" -# Optional light variant (Dracula usually doesn't have one, but we can provide a high contrast or soft variant) -light: - colors: - primary: "#ff79c6" - secondary: "#bd93f9" - ui: - background: "#f8f8f2" - foreground: "#282a36" - header: - background: "#ffffff" - foreground: "#282a36" + type: "dual" + + dark: + # Official Dracula Dark + colors: + primary: "#ff79c6" # Pink + secondary: "#bd93f9" # Purple + neutral: "#6272a4" # Comment + ui: + background: "#282a36" # Background + foreground: "#f8f8f2" # Foreground + header: + background: "#282a36" + foreground: "#f8f8f2" + footer: + background: "#21222c" # Selection + foreground: "#f8f8f2" + + light: + # Dracula Light (Buffy inspired) - Inverted aesthetic + colors: + primary: "#d03282" # Darker Pink for contrast + secondary: "#9259d6" # Darker Purple for contrast + neutral: "#44475a" # Current Line (Dark Gray) + ui: + background: "#f8f8f2" # Light Gray + foreground: "#282a36" # Dark Gray + header: + background: "#e4e4db" # Slightly darker band + foreground: "#282a36" + footer: + background: "#e4e4db" + foreground: "#282a36" diff --git a/modules/blox-tailwind/data/themes/latte.yaml b/modules/blox-tailwind/data/themes/latte.yaml deleted file mode 100644 index ff8c9c8f..00000000 --- a/modules/blox-tailwind/data/themes/latte.yaml +++ /dev/null @@ -1,32 +0,0 @@ -name: "latte" -type: "light" - -light: - colors: - primary: "#3b2313" # Mocha/Coffee bean - secondary: "#d97706" # Caramel/Amber - neutral: "#78716c" # Stone - ui: - background: "#fffaf5" # Warm cream/milk foam - foreground: "#3b2313" # Espresso text - header: - background: "rgba(255, 250, 245, 0.85)" # Frothy semi-transparent - foreground: "#3b2313" - footer: - background: "#f5efe9" # Slightly darker latte foam - foreground: "#5c4033" - -dark: - # A rich "Espresso Martini" dark mode partner - colors: - primary: "#d97706" # Caramel highlights - secondary: "#f59e0b" # Gold foam - ui: - background: "#1c1917" # Dark roasted bean - foreground: "#e7e5e4" # Steam - header: - background: "#1c1917" - foreground: "#e7e5e4" - footer: - background: "#292524" - foreground: "#a8a29e" diff --git a/modules/blox-tailwind/data/themes/marine.yaml b/modules/blox-tailwind/data/themes/marine.yaml index 16f7d3ff..3a27e524 100644 --- a/modules/blox-tailwind/data/themes/marine.yaml +++ b/modules/blox-tailwind/data/themes/marine.yaml @@ -1,29 +1,40 @@ -name: "marine" -type: "dark" +# HugoBlox Theme Pack +# https://docs.hugoblox.com -dark: - colors: - primary: "#2dd4bf" # Teal/Cyan (approximated from oklch(85.661% 0.144 198.645)) - secondary: "#a855f7" # Purple (approximated from oklch(60.682% 0.108 309.782)) - neutral: "#1e3a8a" # Deep Blue (approximated from oklch(27% 0.146 265.522)) - ui: - background: "#1e3a8a" # Deep Ocean Blue (from oklch(37% 0.146 265.522)) - foreground: "#e0f2fe" # Light Sky (approximated from oklch(90% 0.058 230.902)) - header: - background: "#1e3a8a" - foreground: "#e0f2fe" - footer: - background: "#172554" # Darker depth - foreground: "#93c5fd" +hugoblox: + meta: + format: "hugoblox-theme@1" + name: "Marine" + vendor: "hugoblox" + version: "1.0.0" + license: "MIT" + description: "Deep ocean blues with teal accents" -light: - # A "Beach Day" pairing - colors: - primary: "#2dd4bf" - secondary: "#a855f7" - ui: - background: "#f0f9ff" - foreground: "#0c4a6e" - header: - background: "#ffffff" + type: "dual" + + dark: + colors: + primary: "#2dd4bf" # Teal/Cyan + secondary: "#a855f7" # Purple + neutral: "#1e3a8a" # Deep Blue + ui: + background: "#1e3a8a" # Deep Ocean Blue + foreground: "#e0f2fe" # Light Sky + header: + background: "#1e3a8a" + foreground: "#e0f2fe" + footer: + background: "#172554" # Darker depth + foreground: "#93c5fd" + + light: + # A "Beach Day" pairing + colors: + primary: "#2dd4bf" + secondary: "#a855f7" + ui: + background: "#f0f9ff" foreground: "#0c4a6e" + header: + background: "#e0f2fe" # Sky-100 for visible header bar + foreground: "#0c4a6e" diff --git a/modules/blox-tailwind/data/themes/matcha.yaml b/modules/blox-tailwind/data/themes/matcha.yaml new file mode 100644 index 00000000..770cf54c --- /dev/null +++ b/modules/blox-tailwind/data/themes/matcha.yaml @@ -0,0 +1,45 @@ +# HugoBlox Theme Pack +# https://docs.hugoblox.com + +hugoblox: + meta: + format: "hugoblox-theme@1" + name: "Matcha" + vendor: "hugoblox" + version: "1.0.0" + license: "MIT" + description: "Fresh, organic greens inspired by Japanese tea" + + type: "dual" + + light: + # "Matcha Latte" - Creamy, fresh, organic + colors: + primary: "#65a30d" # Fresh Tea Leaf (Lime-600) + secondary: "#15803d" # Deep Herbal Green (Green-700) + neutral: "#3f6212" # Olive text (Lime-800) + ui: + background: "#f7fee7" # Very pale lime cream (Lime-50) + foreground: "#1a2e05" # Dark moss text + header: + background: "#ecfccb" # Light Matcha Foam (Lime-100) + foreground: "#365314" # Deep olive + footer: + background: "#d9f99d" # Stronger tea green (Lime-200) + foreground: "#14532d" + + dark: + # "Ceremonial Grade" - Deep, rich, meditative + colors: + primary: "#a3e635" # Vibrant Matcha Powder (Lime-400) + secondary: "#4ade80" # Soft green light (Green-400) + neutral: "#1a2f23" # Deep Forest Background + ui: + background: "#14281d" # Deep Nori Green + foreground: "#ecfccb" # Pale tea green text + header: + background: "#0f1f16" # Darker leaf + foreground: "#d9f99d" + footer: + background: "#052e16" # Deepest green (Green-950) + foreground: "#86efac" diff --git a/modules/blox-tailwind/data/themes/minimal.yaml b/modules/blox-tailwind/data/themes/minimal.yaml new file mode 100644 index 00000000..b7c944c0 --- /dev/null +++ b/modules/blox-tailwind/data/themes/minimal.yaml @@ -0,0 +1,45 @@ +# HugoBlox Theme Pack +# https://docs.hugoblox.com + +hugoblox: + meta: + format: "hugoblox-theme@1" + name: "Minimal" + vendor: "hugoblox" + version: "1.0.0" + license: "MIT" + description: "Clean, GitHub-inspired design" + + type: "dual" + + light: + # Inspired by GitHub Light + colors: + primary: "#0969da" # GitHub Blue + secondary: "#1f883d" # GitHub Green + neutral: "#24292f" # GitHub Dark Gray (Text) + ui: + background: "#ffffff" + foreground: "#24292f" + header: + background: "#f6f8fa" # GitHub Header Gray + foreground: "#24292f" + footer: + background: "#ffffff" # Clean + foreground: "#57606a" # Muted text + + dark: + # Inspired by GitHub Dark + colors: + primary: "#58a6ff" # GitHub Blue (Dark Mode) + secondary: "#238636" # GitHub Green (Dark Mode) + neutral: "#c9d1d9" # GitHub Light Gray (Text) + ui: + background: "#0d1117" # GitHub Dimmed BG + foreground: "#c9d1d9" + header: + background: "#161b22" # GitHub Dark Header + foreground: "#f0f6fc" + footer: + background: "#0d1117" + foreground: "#8b949e" # Muted text diff --git a/modules/blox-tailwind/data/themes/retro.yaml b/modules/blox-tailwind/data/themes/retro.yaml index 60d6cdf2..2f598c1d 100644 --- a/modules/blox-tailwind/data/themes/retro.yaml +++ b/modules/blox-tailwind/data/themes/retro.yaml @@ -1,29 +1,45 @@ -name: "retro" -type: "light" +# HugoBlox Theme Pack +# https://docs.hugoblox.com -light: - colors: - primary: "#e38c89" # Desaturated Red/Pink (approximated from oklch(80% 0.114 19.571)) - secondary: "#b4e9d6" # Mint Green (approximated from oklch(92% 0.084 155.995)) - neutral: "#79726b" # Warm Stone (approximated from oklch(44% 0.011 73.639)) - ui: - background: "#ebe6d9" # Vintage Paper / Beige (approximated from oklch(91.637% 0.034 90.515)) - foreground: "#7d5e3c" # Sepia/Brown (approximated from oklch(41% 0.112 45.904)) - header: - background: "#e3dbcd" # Slightly darker paper - foreground: "#7d5e3c" - footer: - background: "#dcd3c3" - foreground: "#5c4033" +hugoblox: + meta: + format: "hugoblox-theme@1" + name: "Retro" + vendor: "hugoblox" + version: "1.0.0" + license: "MIT" + description: "Vintage paper meets midnight arcade" -dark: - # A dark "Polaroid" variant - colors: - primary: "#e38c89" - secondary: "#b4e9d6" - ui: - background: "#292524" # Dark Stone - foreground: "#e7e5e4" # Warm Gray - header: - background: "#1c1917" - foreground: "#e7e5e4" + type: "dual" + + light: + # "Vintage Paper" - Sepia, warm, nostalgic + colors: + primary: "#e38c89" # Desaturated Red/Pink + secondary: "#b4e9d6" # Mint Green + neutral: "#79726b" # Warm Stone + ui: + background: "#ebe6d9" # Vintage Paper / Beige + foreground: "#7d5e3c" # Sepia/Brown + header: + background: "#e3dbcd" # Slightly darker paper + foreground: "#7d5e3c" + footer: + background: "#dcd3c3" + foreground: "#5c4033" + + dark: + # "Midnight Arcade" - Deep petrol, mustard, and neon accents + colors: + primary: "#fbbf24" # Mustard Gold (Amber-400) + secondary: "#f472b6" # Retro Pink (Pink-400) + neutral: "#134e4a" # Dark Teal (Teal-900) + ui: + background: "#042f2e" # Deep Petrol / Teal-950 + foreground: "#ccfbf1" # Pale Mint / Teal-50 + header: + background: "#115e59" # Lighter Petrol / Teal-800 + foreground: "#ccfbf1" + footer: + background: "#0f393b" # Muted Teal + foreground: "#99f6e4" # Teal-200 diff --git a/modules/blox-tailwind/data/themes/solar.yaml b/modules/blox-tailwind/data/themes/solar.yaml new file mode 100644 index 00000000..47e0625f --- /dev/null +++ b/modules/blox-tailwind/data/themes/solar.yaml @@ -0,0 +1,45 @@ +# HugoBlox Theme Pack +# https://docs.hugoblox.com + +hugoblox: + meta: + format: "hugoblox-theme@1" + name: "Solar" + vendor: "hugoblox" + version: "1.0.0" + license: "MIT" + description: "Solarized-inspired, easy on the eyes" + + type: "dual" + + light: + # Inspired by Solarized Light - Low contrast, warm, easy on the eyes + colors: + primary: "#b58900" # Yellow (Solarized) + secondary: "#2aa198" # Cyan (Solarized) + neutral: "#657b83" # Base00 (Primary Content) + ui: + background: "#fdf6e3" # Base3 (Creamy Background) + foreground: "#586e75" # Base01 (Optional darker text for contrast) + header: + background: "#eee8d5" # Base2 (Slightly darker highlights) + foreground: "#586e75" + footer: + background: "#eee8d5" + foreground: "#657b83" + + dark: + # Inspired by Solarized Dark - Deep, cool, high precision + colors: + primary: "#268bd2" # Blue (Solarized) + secondary: "#859900" # Green (Solarized) + neutral: "#839496" # Base0 (Primary Content) + ui: + background: "#002b36" # Base03 (Deep Teal Background) + foreground: "#93a1a1" # Base1 (Light Content) + header: + background: "#073642" # Base02 (Lighter Teal Highlights) + foreground: "#93a1a1" + footer: + background: "#073642" + foreground: "#839496" diff --git a/modules/blox-tailwind/data/themes/synthwave.yaml b/modules/blox-tailwind/data/themes/synthwave.yaml index 670588bc..92783501 100644 --- a/modules/blox-tailwind/data/themes/synthwave.yaml +++ b/modules/blox-tailwind/data/themes/synthwave.yaml @@ -1,29 +1,44 @@ -name: "synthwave" -type: "dark" +# HugoBlox Theme Pack +# https://docs.hugoblox.com -dark: - colors: - primary: "#e779c1" # Neon Pink (approx oklch(71% 0.202 349.761)) - secondary: "#58c7f3" # Cyan (approx oklch(82% 0.111 230.318)) - neutral: "#2a2e37" # Dark Blue-Gray (approx oklch(45% 0.24 277.023) adjusted for readability) - ui: - background: "#1a103d" # Deep Purple (approx oklch(15% 0.09 281.288)) - foreground: "#f9f7fd" # Light Lavender (approx oklch(78% 0.115 274.713)) - header: - background: "rgba(26, 16, 61, 0.9)" # Deep Purple - foreground: "#f9f7fd" - footer: - background: "#110a28" # Darker Deep Purple - foreground: "#b8b2cc" +hugoblox: + meta: + format: "hugoblox-theme@1" + name: "Synthwave" + vendor: "hugoblox" + version: "1.0.0" + license: "MIT" + description: "Neon-drenched 80s retrowave aesthetic" -light: - # Synthwave usually doesn't have a light mode, providing a high contrast fallback - colors: - primary: "#e779c1" - secondary: "#58c7f3" - ui: - background: "#f9f7fd" - foreground: "#1a103d" - header: - background: "#ffffff" - foreground: "#1a103d" + type: "dual" + + dark: + colors: + primary: "#e779c1" # Neon Pink + secondary: "#58c7f3" # Cyan + neutral: "#2a2e37" # Dark Blue-Gray + ui: + background: "#1a103d" # Deep Purple + foreground: "#f9f7fd" # Light Lavender + header: + background: "rgba(26, 16, 61, 0.9)" # Deep Purple + foreground: "#f9f7fd" + footer: + background: "#110a28" # Darker Deep Purple + foreground: "#b8b2cc" + + light: + # "Vaporwave" - A bright, pastel-neon day dream + colors: + primary: "#d946ef" # Electric Fuchsia + secondary: "#06b6d4" # Neon Cyan + neutral: "#701a75" # Deep Magenta (for text utilities) + ui: + background: "#fff0f5" # Lavender Blush + foreground: "#2e1065" # Deep Violet Ink + header: + background: "#fae8ff" # Light Fuchsia Mist + foreground: "#86198f" # Vibrant Purple + footer: + background: "#f0abfc" # Sunset Pink + foreground: "#2e1065" # Dark Violet diff --git a/modules/blox-tailwind/layouts/_partials/components/headers/navbar-simple.html b/modules/blox-tailwind/layouts/_partials/components/headers/navbar-simple.html index e60b55a1..f68b9403 100644 --- a/modules/blox-tailwind/layouts/_partials/components/headers/navbar-simple.html +++ b/modules/blox-tailwind/layouts/_partials/components/headers/navbar-simple.html @@ -72,8 +72,8 @@ > {{ end }} - {{ $show_theme_chooser := site.Params.header.navbar.show_theme_chooser | default true }} - {{ if $show_theme_chooser }} + {{ $show_mode_toggle := site.Params.header.navbar.show_mode_toggle | default site.Params.header.navbar.show_theme_chooser | default true }} + {{ if $show_mode_toggle }}

    • {{ end }} + + {{/* Theme Picker */}} + {{ if site.Params.header.navbar.show_theme_picker }} +
  • + + +
    • + {{ end }} + {{ $show_translations := site.Params.header.navbar.show_translations | default true }} {{ if .IsTranslated | and $show_translations }}