Replace top gradient PNG with linear-gradient
#166
Merged
Conversation
This file contains 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
…he original is 198px but we only need the top 99px
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
First.. big thanks to #132 and #88 (@xplosionmind and @jakeparis) who both did similar work. But I've been a super stickler for accuracy and wanted a pixel perfect match to the YT gradient.
Turns out 13 years ago Nicole Sullivan inspired some folks to make exactly the tool that we needed: https://www.stubbornella.org/2011/04/25/css-3-gradients/
I used https://github.com/bluesmoon/pngtocss/ to get the exact gradient definition. (Perfect alpha values are typically the part that's hard to get by hand).
YT's png file is 198px but is displayed within a div thats 98px tall. So then we just needed to take half of the values, double the color stop positions.. and then code-golf the bytes down.
Overall it's a 161 byte savings. But more importantly one less network request (yes data-uri's still invoke a whole bunch of network request stuff in the browser).