b8c8871191
Chroma sets `color` (usually) and `background-color` directly on a `<pre>` element under a `<div class="highlight">` but the theme was interfering with those color settings from both the `code` and `pre code` selectors. Since Chroma highlighting is under a `highlight` class we can `unset` the colors that are set by the `code` selector elsewhere, so that under a `<code>` element that's under a `<div class="highlight">` it will just inherit from the `<pre>` above it where Chroma sets all it's colors. The `color: initial;` instead of `color: unset;` is needed because some Chroma styles don't set a default text color, and if you use `unset` instead that lets the browser use a lighter default text color when using a dark color scheme. That's a sort of long winded way of saying that I think I've fixed the color interference problem in a way that won't mess with anything else in the theme. I've tested this on a wide selection of Chroma styles, with both light and dark color schemes and it seems to work correctly in all cases. Which is to say that Chroma appears to have full control of both `color` and `background-color` for code blocks that it's highlighting. Fixes #19 |
||
|---|---|---|
| .github | ||
| archetypes | ||
| exampleSite | ||
| images | ||
| layouts | ||
| .gitignore | ||
| .jsbeautifyrc | ||
| LICENSE | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| theme.toml | ||
Hugo ʕ•ᴥ•ʔ Bear Blog 
🧸 A Hugo-theme based on Bear Blog.
Free, no-nonsense, super-fast blogging.
Demo
For a current & working demo of this theme, please check out https://janraasch.github.io/hugo-bearblog/ 🎯.
Screenshots
⬜️ Light
⬛️ Dark
When the user's browser is running »dark mode«, the dark color scheme will be used automatically. The default is the light/white color scheme. Check out the style.html-file for the implementation.
Sponsor 💟
Support my work on this theme via GitHub Sponsors (recurring) or PayPal (one-time).
Installation
If you already have a Hugo site on your machine, you can simply add this theme via
git submodule add https://github.com/janraasch/hugo-bearblog.git themes/hugo-bearblog
Then, adjust the config.toml as detailed below.
For more information, read the official setup guide of Hugo.
Adjust configuration / config.toml
Please check out the config.toml included in the exampleSite of this theme.
Content & structure
Starting fresh
If you are starting fresh, simply copy over the contents of the exampleSite-directory included in this theme to your source directory. That should give you a good idea about how things work, and then you can go on from there to make the site your own.
Adding / editing content
Index-Page
The contents of the index-page may be changed by editing your content/_index.md-file.
Page
You can add a new page via running
hugo new my-new-page.md
Blog-Post
You can add a new blog-post via running
hugo new blog/my-new-post.md
Adding your branding / colors / css
Add a custom_head.html-file to your layouts/partials-directory. In there you may add a <style>-tag, or you may add a <link>-tag referencing your own custom.css (in case you prefer to have a separate .css-file). Check out the style.html-file to find out which CSS-styles are applied by default.
Issues / Feedback / Contributing
Please use GitHub issues and Pull Requests.
If you do not have a GitHub-account, please hit me up via e-mail (see janraasch.com).
Special Thanks 🎁
A special thank you goes out to Herman, for creating the original ʕ•ᴥ•ʔ Bear Blog.