Skip to content
This repository has been archived by the owner on Jul 1, 2024. It is now read-only.

Fix CSS background color to be more readable for code listings with highlighted lines #4269

Merged
merged 4 commits into from
May 13, 2024

Conversation

thoward
Copy link
Contributor

@thoward thoward commented May 13, 2024

This makes a small change to the CSS for code blocks that have highlighted lines. I ran the bundler to update the bundle.css file and also changed it in the source .scss file.

A code block like this:

import * as aws from "@pulumi/aws";
import * as childProcess from "child_process";

Will currently render with this background color, which is hard to read:

Screenshot 2024-05-13 at 1 39 19 PM

After this change it will look like this:

Screenshot 2024-05-13 at 1 39 05 PM

@pulumi-bot
Copy link
Collaborator

Your site preview for commit ce65026 is ready! 🎉

http://pulumi-hugo-origin-pr-4269-ce65026f.s3-website.us-west-2.amazonaws.com.

Copy link
Contributor

@cnunciato cnunciato left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Much better, thanks! ⭐

FWIW and for future reference, we also have a color palette with a bunch of grays and other colors that we use to power TailwindCSS. You'll find the Tailwind config itself here:

https://github.com/pulumi/pulumi-hugo/blob/master/themes/default/theme/tailwind.config.js

... and the tokens that back that config here:

https://github.com/pulumi/pulumi-hugo/blob/master/themes/default/theme/tokens.json

In general we try to keep to only the colors that belong to this palette (for overall consistency), but that needn't block here. If you do see one you think works well, by all means feel free to use it, but up to you. This is definitely an improvement for now. Thanks again!

@thoward
Copy link
Contributor Author

thoward commented May 13, 2024

In general we try to keep to only the colors that belong to this palette (for overall consistency), but that needn't block here. If you do see one you think works well, by all means feel free to use it, but up to you. This is definitely an improvement for now. Thanks again!

Good call! I'll update to use one of the colors defined there

@thoward
Copy link
Contributor Author

thoward commented May 13, 2024

In general we try to keep to only the colors that belong to this palette (for overall consistency), but that needn't block here. If you do see one you think works well, by all means feel free to use it, but up to you. This is definitely an improvement for now. Thanks again!

Good call! I'll update to use one of the colors defined there

New color:

Screenshot 2024-05-13 at 3 53 33 PM

@pulumi-bot
Copy link
Collaborator

Your site preview for commit 76de9c5 is ready! 🎉

http://pulumi-hugo-origin-pr-4269-76de9c5d.s3-website.us-west-2.amazonaws.com.

@pulumi-bot
Copy link
Collaborator

Your site preview for commit e71a339 is ready! 🎉

http://pulumi-hugo-origin-pr-4269-e71a3391.s3-website.us-west-2.amazonaws.com.

@thoward thoward merged commit bf5ab39 into master May 13, 2024
2 checks passed
@thoward thoward deleted the thoward/fix_code_highlight_background_color branch May 13, 2024 23:29
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants