Comments (10)
Some variables which would be nice:
max-width
for the whole thing (withnormal
,wide
andfull
being preset values)- Foreground color palette (a Tailwind palette)
- Background color palette (a Tailwind palette)
- Primary color palette (a Tailwind palette)
This should cover 99% of all theming things I think
I am not sure about a nice way to let the user provide Tailwind palettes though.
The most flexible would be that each variable is one color, like fg-500
, bg-950
and primary-300
.
This with a reference to tools like https://www.tints.dev/purple/A855F7 and https://uicolors.app/create would make it easy to customize and provide those palettes based on one color.
I could try to get a PR going for this. Never used Hugo, nor do I know Go, but this is just Tailwind, so I can give it a shot :D
from hextra.
Overall, I think it would be nice, if the theme uses variables for its colors which fall back to the Tailwind colors, if not defined
from hextra.
I found this Tailwind plugin https://github.com/mertasan/tailwindcss-variables ,which should make this much easier.
Turning everything into a variable would be too much work I think, but background and text colors would be nice :)
from hextra.
what would also be cool is if the Tailwind config gets exposed or if it can be overridden somehow
from hextra.
I found this Tailwind plugin mertasan/tailwindcss-variables ,which should make this much easier.
Turning everything into a variable would be too much work I think, but background and text colors would be nice :)
that would be very ideal. not sure tailwindcss-variables
would work with PostCSS as it's not mentioned in the README afaik.
what would also be cool is if the Tailwind config gets exposed or if it can be overridden somehow
it may be possible to override via a custom postcss config file: https://gohugo.io/hugo-pipes/postcss/
currently the postcss config is defined at: https://github.com/imfing/hextra/blob/main/postcss.config.js
but by overriding the config, users will need to set up many things incl. nodejs, npm, postcss, tailwind css, and proper hugo config (e.g. dev.toml) to trigger rebuild during styles change
will need to carefully think about the use case and how to expose this while keeping a nice dev experience
from hextra.
PostCss
is used by default by Tailwind, so plugins work with it by default.
And yes, exposing the config and thus requiring the whole JS techstack would defeat the purpose of using Hugo :D
from hextra.
Some variables which would be nice:
max-width
for the whole thing (withnormal
,wide
andfull
being preset values)- Text color palette (a Tailwind palette)
- Background color palette (a Tailwind palette)
- Primary color palette (a Tailwind palette)
This should cover 99% of all theming things I think
I am not sure about a nice way to let the user provide Tailwind palettes though.
The most flexible would be that each variable is one color, like fg-500
, bg-950
and primary-300
.
This with a reference to tools like https://www.tints.dev/purple/A855F7 and https://uicolors.app/create would make it easy to customize and provide those palettes based on one color.
from hextra.
Some variables which would be nice:
max-width
for the whole thing (withnormal
,wide
andfull
being preset values)- Text color palette (a Tailwind palette)
- Background color palette (a Tailwind palette)
- Primary color palette (a Tailwind palette)
This should cover 99% of all theming things I think
I am not sure about a nice way to let the user provide Tailwind palettes though.
The most flexible would be that each variable is one color, like fg-500
, bg-950
and primary-300
.
This with a reference to tools like https://www.tints.dev/purple/A855F7 and https://uicolors.app/create would make it easy to customize and provide those palettes based on one color.
from hextra.
@Visual-Dawg Thanks, I think it would be nice to make everything override-able via CSS vars. It would be great if you could try it out and send me a PR.
Side note, there are some pretty exciting things in Tailwind CSS v4 which would make customization much easier
from hextra.
@imfing Will do. I also saw the news about Tailwind v4. Looks really cool
I might try it out for the PR, if it works
from hextra.
Related Issues (20)
- CSS syntax error HOT 1
- The steps shortcode is not working HOT 5
- backslash in KaTeX is wrong HOT 3
- Pagination for blog listing page
- footnotes within callout shortcodes do not render correctly HOT 3
- Search bar in left sidebar menu (at top) HOT 1
- Show table of contents at top of content when there isn't enough width HOT 1
- Show "summary" and "last modified" under the title at the top of the page HOT 2
- Nested steps breaks the counter HOT 2
- Expanding the browser window keeps the footer hidden HOT 2
- Implement hextra/hero-container with optional front-page logo HOT 1
- Implement hextra/hero-section, defining a h2 heading on front-page HOT 9
- Make / page in docs mode visible in Menu HOT 1
- Make selected entry in sidebar always visible HOT 1
- Usage of additional module breaks certain Hextra features HOT 5
- Images show in local, but not when deployed to GH pages HOT 3
- Html 5 validator issues on template HOT 3
- Enhanced Hover Animations for Feature Cards HOT 2
- Allow text in cards to be longer than 3 lines HOT 2
- Sidebar menu is missing on screen > 768px HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hextra.