{{ message }}
Added Dynamic Theme fixes for 'writings.stephenwolfram.com'#15666
Open
pmcintyre3 wants to merge 2 commits into
Open
Added Dynamic Theme fixes for 'writings.stephenwolfram.com'#15666pmcintyre3 wants to merge 2 commits into
pmcintyre3 wants to merge 2 commits into
Conversation
Added CSS rules for dynamic theme fixes for Stephen Wolfram's Blog. - Inverted dark images in posts - Inverted socials images (when not hovered) - Fixed message box "tails" from appearing the wrong color
- Fixed an issue with the comment "tail" looking incorrect in light mode. - Minor fix to a picture outside of the post body
Author
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
Added Dynamic Theme fixes for Stephen Wolfram's Blog Writings.
You may use this blog post as an example.
Blog Post Body Images
A lot of the "images" on this site are rendered code examples. Inverting all instances of
div.post_content imgfixes this issue.Before
After
Social Media Link Images
The un-hovered state of the social media link images were a little too bright. Hovering over them revealed the actual icon colors. Adding
#nav ul li .social a:not(:hover)as anINVERTentry inverts the images to help bring the default state to match. Include:not(:hover)to keep it from reverting the actual brand logo color on hover.Before
After
Without
:not(:hover)With
:not(:hover)Message box "tails"
Each comment in the comments list looks like a speech bubble, and the "tails" appear the incorrect color. These tails are defined in the
::afterselector of the.comment-bylineclass, and are a background image. Inverting it just a bit and setting it to be somewhat transparent mitigates the jarring change a bit. It's not exact, but it gets close.Before
After
Tested in Edge (pictured)