Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: subpixel rendering on homepage logo #26

Merged
merged 2 commits into from
Feb 28, 2024
Merged

fix: subpixel rendering on homepage logo #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ecde43d
Fix subpixel rendering on animated homepage logo
josh-collinsworth Feb 28, 2024
293a6cf
Fix subpixel rendering on animated homepage logo
josh-collinsworth Feb 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/components/AnimatedLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export function AnimatedLogo() {
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
>
<style>
{`#jsr-logo g,#jsr-logo g rect{transform-origin:center}#jsr-logo g:nth-of-type(28) rect,#jsr-logo g:nth-of-type(36) rect{animation-duration:1287ms}#jsr-logo g:first-of-type rect,#jsr-logo g:nth-of-type(18) rect,#jsr-logo g:nth-of-type(20) rect,#jsr-logo g:nth-of-type(22) rect,#jsr-logo g:nth-of-type(32) rect,#jsr-logo g:nth-of-type(33) rect,#jsr-logo g:nth-of-type(36) rect,#jsr-logo g:nth-of-type(38) rect,#jsr-logo g:nth-of-type(44) rect,#jsr-logo g:nth-of-type(45) rect,#jsr-logo g:nth-of-type(5) rect,#jsr-logo g:nth-of-type(53) rect,#jsr-logo g:nth-of-type(56) rect{animation-name:jsr_logo_square_slide_in_down}#jsr-logo g:nth-of-type(12) rect,#jsr-logo g:nth-of-type(58) rect{animation-duration:1841ms}#jsr-logo g:nth-of-type(10) rect,#jsr-logo g:nth-of-type(15) rect,#jsr-logo g:nth-of-type(16) rect,#jsr-logo g:nth-of-type(23) rect,#jsr-logo g:nth-of-type(26) rect,#jsr-logo g:nth-of-type(27) rect,#jsr-logo g:nth-of-type(29) rect,#jsr-logo g:nth-of-type(34) rect,#jsr-logo g:nth-of-type(35) rect,#jsr-logo g:nth-of-type(40) rect,#jsr-logo g:nth-of-type(49) rect,#jsr-logo g:nth-of-type(52) rect,#jsr-logo g:nth-of-type(55) rect,#jsr-logo g:nth-of-type(58) rect,#jsr-logo g:nth-of-type(8) rect,#jsr-logo g:nth-of-type(9) rect{animation-name:jsr_logo_square_slide_in_left}#jsr-logo g:nth-of-type(11) rect,#jsr-logo g:nth-of-type(12) rect,#jsr-logo g:nth-of-type(19) rect,#jsr-logo g:nth-of-type(21) rect,#jsr-logo g:nth-of-type(24) rect,#jsr-logo g:nth-of-type(28) rect,#jsr-logo g:nth-of-type(30) rect,#jsr-logo g:nth-of-type(31) rect,#jsr-logo g:nth-of-type(37) rect,#jsr-logo g:nth-of-type(39) rect,#jsr-logo g:nth-of-type(48) rect,#jsr-logo g:nth-of-type(57) rect,#jsr-logo g:nth-of-type(59) rect{animation-name:jsr_logo_square_slide_in_right}#jsr-logo g:nth-of-type(13) rect,#jsr-logo g:nth-of-type(14) rect,#jsr-logo g:nth-of-type(17) rect,#jsr-logo g:nth-of-type(2) rect,#jsr-logo g:nth-of-type(25) rect,#jsr-logo g:nth-of-type(3) rect,#jsr-logo g:nth-of-type(41) rect,#jsr-logo g:nth-of-type(42) rect,#jsr-logo g:nth-of-type(43) rect,#jsr-logo g:nth-of-type(47) rect,#jsr-logo g:nth-of-type(50) rect,#jsr-logo g:nth-of-type(51) rect,#jsr-logo g:nth-of-type(54) rect,#jsr-logo g:nth-of-type(6) rect,#jsr-logo g:nth-of-type(60) rect,#jsr-logo g:nth-of-type(7) rect{animation-name:jsr_logo_square_slide_in_up}#jsr-logo g rect{animation:.5s cubic-bezier(.77,0,.175,1) forwards jsr_logo_square_slide_in_up;transform-box:fill-box;opacity:1}#jsr-logo g:first-of-type rect{animation-duration:1697ms}#jsr-logo g:nth-of-type(2) rect{animation-duration:1186ms}#jsr-logo g:nth-of-type(3) rect{animation-duration:1754ms}#jsr-logo g:nth-of-type(4) rect,#jsr-logo g:nth-of-type(46) rect{animation-duration:923ms;animation-name:jsr_logo_square_slide_in_right}#jsr-logo g:nth-of-type(5) rect{animation-duration:715ms}#jsr-logo g:nth-of-type(6) rect{animation-duration:601ms}#jsr-logo g:nth-of-type(7) rect{animation-duration:401ms}#jsr-logo g:nth-of-type(8) rect{animation-duration:1345ms}#jsr-logo g:nth-of-type(9) rect{animation-duration:684ms}#jsr-logo g:nth-of-type(10) rect{animation-duration:1051ms}#jsr-logo g:nth-of-type(11) rect{animation-duration:579ms}#jsr-logo g:nth-of-type(13) rect{animation-duration:844ms}#jsr-logo g:nth-of-type(14) rect{animation-duration:958ms}#jsr-logo g:nth-of-type(15) rect{animation-duration:1041ms}#jsr-logo g:nth-of-type(16) rect{animation-duration:786ms}#jsr-logo g:nth-of-type(17) rect{animation-duration:1022ms}#jsr-logo g:nth-of-type(18) rect{animation-duration:849ms}#jsr-logo g:nth-of-type(19) rect{animation-duration:823ms}#jsr-logo g:nth-of-type(20) rect{animation-duration:614ms}#jsr-logo g:nth-of-type(21) rect{animation-duration:1628ms}#jsr-logo g:nth-of-type(22) rect{animation-duration:1008ms}#jsr-logo g:nth-of-type(23) rect{animation-duration:1382ms}#jsr-logo g:nth-of-type(24) rect{animation-duration:1873ms}#jsr-logo g:nth-of-type(25) rect{animation-duration:1059ms}#jsr-logo g:nth-of-type(26) rect{animation-duration:1175ms}#jsr-logo g:nth-of-type(27) rect{animation-duration:570ms}#jsr-logo g:nth-of-type(29) rect{animation-duration:1.47s}#jsr-logo g:nth-of-type(30) rect{animation-duration:1879ms}#jsr-logo g:nth-of-type(31) rect{animation-duration:1488ms}#jsr-logo g:nth-of-type(32) rect{animation-duration:653ms}#jsr-logo g:nth-of-type(33) rect{animation-duration:1409ms}#jsr-logo g:nth-of-type(34) rect{animation-duration:1953ms}#jsr-logo g:nth-of-type(35) rect{animation-duration:1558ms}#jsr-logo g:nth-of-type(37) rect{animation-duration:603ms}#jsr-logo g:nth-of-type(38) rect{animation-duration:1154ms}#jsr-logo g:nth-of-type(39) rect{animation-duration:678ms}#jsr-logo g:nth-of-type(40) rect{animation-duration:1959ms}#jsr-logo g:nth-of-type(41) rect{animation-duration:1862ms}#jsr-logo g:nth-of-type(42) rect{animation-duration:1044ms}#jsr-logo g:nth-of-type(43) rect{animation-duration:1713ms}#jsr-logo g:nth-of-type(44) rect{animation-duration:1159ms}#jsr-logo g:nth-of-type(45) rect{animation-duration:872ms}#jsr-logo g:nth-of-type(47) rect{animation-duration:1.88s}#jsr-logo g:nth-of-type(48) rect{animation-duration:1085ms}#jsr-logo g:nth-of-type(49) rect{animation-duration:685ms}#jsr-logo g:nth-of-type(50) rect{animation-duration:1352ms}#jsr-logo g:nth-of-type(51) rect{animation-duration:683ms}#jsr-logo g:nth-of-type(52) rect{animation-duration:1546ms}#jsr-logo g:nth-of-type(53) rect{animation-duration:605ms}#jsr-logo g:nth-of-type(54) rect{animation-duration:1848ms}#jsr-logo g:nth-of-type(55) rect{animation-duration:1133ms}#jsr-logo g:nth-of-type(56) rect{animation-duration:1635ms}#jsr-logo g:nth-of-type(57) rect{animation-duration:959ms}#jsr-logo g:nth-of-type(59) rect{animation-duration:1411ms}#jsr-logo g:nth-of-type(60) rect{animation-duration:678ms}@keyframes fade_in{from{opacity:0}to{opacity:1}}@keyframes jsr_logo_square_slide_in_up{0%,60%{transform:translateY(200%)}100%{transform:translateY(0)}}@keyframes jsr_logo_square_slide_in_right{0%,60%{transform:translateX(-200%)}100%{transform:translateX(0)}}@keyframes jsr_logo_square_slide_in_down{0%,60%{transform:translateY(-200%)}100%{transform:translateY(0)}}@keyframes jsr_logo_square_slide_in_left{0%,60%{transform:translateX(200%)}100%{transform:translateX(0)}}`}
{`#jsr-logo{height:110px}@media(min-width:768px){#jsr-logo{height:143px}}#jsr-logo g,#jsr-logo g rect{transform-origin:center}#jsr-logo g:nth-of-type(28) rect,#jsr-logo g:nth-of-type(36) rect{animation-duration:1287ms}#jsr-logo g:first-of-type rect,#jsr-logo g:nth-of-type(18) rect,#jsr-logo g:nth-of-type(20) rect,#jsr-logo g:nth-of-type(22) rect,#jsr-logo g:nth-of-type(32) rect,#jsr-logo g:nth-of-type(33) rect,#jsr-logo g:nth-of-type(36) rect,#jsr-logo g:nth-of-type(38) rect,#jsr-logo g:nth-of-type(44) rect,#jsr-logo g:nth-of-type(45) rect,#jsr-logo g:nth-of-type(5) rect,#jsr-logo g:nth-of-type(53) rect,#jsr-logo g:nth-of-type(56) rect{animation-name:jsr_logo_square_slide_in_down}#jsr-logo g:nth-of-type(12) rect,#jsr-logo g:nth-of-type(58) rect{animation-duration:1841ms}#jsr-logo g:nth-of-type(10) rect,#jsr-logo g:nth-of-type(15) rect,#jsr-logo g:nth-of-type(16) rect,#jsr-logo g:nth-of-type(23) rect,#jsr-logo g:nth-of-type(26) rect,#jsr-logo g:nth-of-type(27) rect,#jsr-logo g:nth-of-type(29) rect,#jsr-logo g:nth-of-type(34) rect,#jsr-logo g:nth-of-type(35) rect,#jsr-logo g:nth-of-type(40) rect,#jsr-logo g:nth-of-type(49) rect,#jsr-logo g:nth-of-type(52) rect,#jsr-logo g:nth-of-type(55) rect,#jsr-logo g:nth-of-type(58) rect,#jsr-logo g:nth-of-type(8) rect,#jsr-logo g:nth-of-type(9) rect{animation-name:jsr_logo_square_slide_in_left}#jsr-logo g:nth-of-type(11) rect,#jsr-logo g:nth-of-type(12) rect,#jsr-logo g:nth-of-type(19) rect,#jsr-logo g:nth-of-type(21) rect,#jsr-logo g:nth-of-type(24) rect,#jsr-logo g:nth-of-type(28) rect,#jsr-logo g:nth-of-type(30) rect,#jsr-logo g:nth-of-type(31) rect,#jsr-logo g:nth-of-type(37) rect,#jsr-logo g:nth-of-type(39) rect,#jsr-logo g:nth-of-type(48) rect,#jsr-logo g:nth-of-type(57) rect,#jsr-logo g:nth-of-type(59) rect{animation-name:jsr_logo_square_slide_in_right}#jsr-logo g:nth-of-type(13) rect,#jsr-logo g:nth-of-type(14) rect,#jsr-logo g:nth-of-type(17) rect,#jsr-logo g:nth-of-type(2) rect,#jsr-logo g:nth-of-type(25) rect,#jsr-logo g:nth-of-type(3) rect,#jsr-logo g:nth-of-type(41) rect,#jsr-logo g:nth-of-type(42) rect,#jsr-logo g:nth-of-type(43) rect,#jsr-logo g:nth-of-type(47) rect,#jsr-logo g:nth-of-type(50) rect,#jsr-logo g:nth-of-type(51) rect,#jsr-logo g:nth-of-type(54) rect,#jsr-logo g:nth-of-type(6) rect,#jsr-logo g:nth-of-type(60) rect,#jsr-logo g:nth-of-type(7) rect{animation-name:jsr_logo_square_slide_in_up}#jsr-logo g rect{animation:.5s cubic-bezier(.77,0,.175,1) forwards jsr_logo_square_slide_in_up;transform-box:fill-box;opacity:1}#jsr-logo g:first-of-type rect{animation-duration:1697ms}#jsr-logo g:nth-of-type(2) rect{animation-duration:1186ms}#jsr-logo g:nth-of-type(3) rect{animation-duration:1754ms}#jsr-logo g:nth-of-type(4) rect,#jsr-logo g:nth-of-type(46) rect{animation-duration:923ms;animation-name:jsr_logo_square_slide_in_right}#jsr-logo g:nth-of-type(5) rect{animation-duration:715ms}#jsr-logo g:nth-of-type(6) rect{animation-duration:601ms}#jsr-logo g:nth-of-type(7) rect{animation-duration:401ms}#jsr-logo g:nth-of-type(8) rect{animation-duration:1345ms}#jsr-logo g:nth-of-type(9) rect{animation-duration:684ms}#jsr-logo g:nth-of-type(10) rect{animation-duration:1051ms}#jsr-logo g:nth-of-type(11) rect{animation-duration:579ms}#jsr-logo g:nth-of-type(13) rect{animation-duration:844ms}#jsr-logo g:nth-of-type(14) rect{animation-duration:958ms}#jsr-logo g:nth-of-type(15) rect{animation-duration:1041ms}#jsr-logo g:nth-of-type(16) rect{animation-duration:786ms}#jsr-logo g:nth-of-type(17) rect{animation-duration:1022ms}#jsr-logo g:nth-of-type(18) rect{animation-duration:849ms}#jsr-logo g:nth-of-type(19) rect{animation-duration:823ms}#jsr-logo g:nth-of-type(20) rect{animation-duration:614ms}#jsr-logo g:nth-of-type(21) rect{animation-duration:1628ms}#jsr-logo g:nth-of-type(22) rect{animation-duration:1008ms}#jsr-logo g:nth-of-type(23) rect{animation-duration:1382ms}#jsr-logo g:nth-of-type(24) rect{animation-duration:1873ms}#jsr-logo g:nth-of-type(25) rect{animation-duration:1059ms}#jsr-logo g:nth-of-type(26) rect{animation-duration:1175ms}#jsr-logo g:nth-of-type(27) rect{animation-duration:570ms}#jsr-logo g:nth-of-type(29) rect{animation-duration:1.47s}#jsr-logo g:nth-of-type(30) rect{animation-duration:1879ms}#jsr-logo g:nth-of-type(31) rect{animation-duration:1488ms}#jsr-logo g:nth-of-type(32) rect{animation-duration:653ms}#jsr-logo g:nth-of-type(33) rect{animation-duration:1409ms}#jsr-logo g:nth-of-type(34) rect{animation-duration:1953ms}#jsr-logo g:nth-of-type(35) rect{animation-duration:1558ms}#jsr-logo g:nth-of-type(37) rect{animation-duration:603ms}#jsr-logo g:nth-of-type(38) rect{animation-duration:1154ms}#jsr-logo g:nth-of-type(39) rect{animation-duration:678ms}#jsr-logo g:nth-of-type(40) rect{animation-duration:1959ms}#jsr-logo g:nth-of-type(41) rect{animation-duration:1862ms}#jsr-logo g:nth-of-type(42) rect{animation-duration:1044ms}#jsr-logo g:nth-of-type(43) rect{animation-duration:1713ms}#jsr-logo g:nth-of-type(44) rect{animation-duration:1159ms}#jsr-logo g:nth-of-type(45) rect{animation-duration:872ms}#jsr-logo g:nth-of-type(47) rect{animation-duration:1.88s}#jsr-logo g:nth-of-type(48) rect{animation-duration:1085ms}#jsr-logo g:nth-of-type(49) rect{animation-duration:685ms}#jsr-logo g:nth-of-type(50) rect{animation-duration:1352ms}#jsr-logo g:nth-of-type(51) rect{animation-duration:683ms}#jsr-logo g:nth-of-type(52) rect{animation-duration:1546ms}#jsr-logo g:nth-of-type(53) rect{animation-duration:605ms}#jsr-logo g:nth-of-type(54) rect{animation-duration:1848ms}#jsr-logo g:nth-of-type(55) rect{animation-duration:1133ms}#jsr-logo g:nth-of-type(56) rect{animation-duration:1635ms}#jsr-logo g:nth-of-type(57) rect{animation-duration:959ms}#jsr-logo g:nth-of-type(59) rect{animation-duration:1411ms}#jsr-logo g:nth-of-type(60) rect{animation-duration:678ms}@keyframes fade_in{from{opacity:0}to{opacity:1}}@keyframes jsr_logo_square_slide_in_up{0%,60%{transform:translateY(200%)}100%{transform:translateY(0)}}@keyframes jsr_logo_square_slide_in_right{0%,60%{transform:translateX(-200%)}100%{transform:translateX(0)}}@keyframes jsr_logo_square_slide_in_down{0%,60%{transform:translateY(-200%)}100%{transform:translateY(0)}}@keyframes jsr_logo_square_slide_in_left{0%,60%{transform:translateX(200%)}100%{transform:translateX(0)}}`}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This looks like a lot but the first couple of selectors are all that's changed.

</style>
<g transform="matrix(1,0,0,1,98,98)">
<rect x="98" y="0" width="49" height="49" style="fill:#083344" />
Expand Down
4 changes: 1 addition & 3 deletions frontend/islands/HomepageHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,9 +157,7 @@ export function HomepageHero(
<div class="text-center">
<h1 class="relative z-10 flex flex-col items-center gap-6 lg:gap-8">
<span className="sr-only">JSR</span>
<div class="h-24 md:h-36">
<AnimatedLogo />
</div>
<AnimatedLogo />
<div
class="text-xl text-balance leading-tight sm:text-2xl md:text-3xl lg:text-4xl opsize-normal md:opsize-sm text-center"
style="text-shadow: 0 0 2em white, 0 0 1em white, 0 0 0.5em white, 0 0 0.25em white, 0 0 3em white, 0 0 0.5em white;"
Expand Down
Loading