Skip to content

Commit

Permalink
Misc post-launch touchups (#117)
Browse files Browse the repository at this point in the history 
- Fixes both GitHub Security options being highlighted, regardless of
which is active, on account settings page
- Slows down particles on homepage
- Tweaks type and logo size on homepage
- Fixes rounded score display displaying as an oval on Safari
  • Loading branch information
@josh-collinsworth
josh-collinsworth authored Mar 1, 2024
1 parent 6227094 commit c6ba506
Show file tree
Hide file tree
Showing 5 changed files with 12 additions and 12 deletions.
2 changes: 1 addition & 1 deletion frontend/components/AnimatedLogo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export function AnimatedLogo() {
aria-hidden="true"
>
<style>
{`#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)}}`}
{`#jsr-logo{height:99px}@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)}}`}
</style>
<g transform="matrix(1,0,0,1,98,98)">
<rect x="98" y="0" width="49" height="49" style="fill:#083344" />
Expand Down
2 changes: 1 addition & 1 deletion frontend/components/QuotaCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export function QuotaCard(
},
) {
return (
<div class="ring-1 ring-jsr-cyan-950 rounded-md px-4 py-5 flex flex-col justify-between">
<div class="border-1.5 border-jsr-cyan-950 rounded-md px-4 py-5 flex flex-col justify-between">
<div>
<p class="font-semibold text-gray-900">{props.title}</p>
<p class="text-gray-600 text-sm">{props.description}</p>
Expand Down
4 changes: 2 additions & 2 deletions frontend/islands/HomepageHero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const config = {
},
move: {
enable: true,
speed: 0.6,
speed: 0.45,
direction: "top",
random: false,
straight: false,
Expand Down Expand Up @@ -158,7 +158,7 @@ export function HomepageHero(
<span className="sr-only">JSR</span>
<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 -mt-6 max-w-[20em] font-light"
class="text-2xl text-balance leading-[1.1] sm:text-3xl md:text-3xl lg:text-4xl opsize-normal md:opsize-sm text-center -mt-5 md:-mt-6 max-w-[20em]"
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;"
>
The <b class="font-semibold">open-source package registry</b>{" "}
Expand Down
12 changes: 6 additions & 6 deletions frontend/routes/@[scope]/~/settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ Reason: `;

return (
<div class="mt-8">
<h2 class="text-lg font-semibold">Quotas</h2>
<h2 class="text-lg sm:text-xl font-semibold">Quotas</h2>
<div class="flex flex-col gap-8">
<p class="text-gray-600 max-w-2xl">
Scopes have certain quotas to help prevent abuse. We are happy to
Expand Down Expand Up @@ -95,7 +95,7 @@ Reason: `;
function GitHubActionsSecurity({ scope }: { scope: FullScope }) {
return (
<div class="mb-12 mt-12">
<h2 class="text-lg font-semibold">GitHub Actions security</h2>
<h2 class="text-lg sm:text-xl font-semibold">GitHub Actions security</h2>
<p class="mt-2 text-gray-600 max-w-2xl">
GitHub Actions can be used to publish packages to JSR without having to
set up authentication tokens. Publishing is permitted only if the
Expand Down Expand Up @@ -157,8 +157,8 @@ interface CardButtonProps {
function CardButton(props: CardButtonProps) {
return (
<button
class={`grid text-left rounded-xl p-6 group focus-visible:bg-jsr-yellow-50/30 hover:bg-jsr-yellow-50/30 focus-visible:ring-2 ring-jsr-yellow-400 outline-none active:bg-gray-300 ring-2 ${
props.selected ? "ring-jsr-yellow-400" : "ring-jsr-gray-300/50"
class={`grid text-left rounded-xl p-6 group focus-visible:bg-jsr-yellow-50/30 hover:bg-jsr-yellow-50/30 focus-visible:ring-2 outline-none active:bg-gray-100 ring-2 ${
props.selected ? "ring-jsr-yellow-400" : "ring-jsr-gray-100/50"
}`}
type={props.type}
name={props.name}
Expand All @@ -169,11 +169,11 @@ function CardButton(props: CardButtonProps) {
<div
class={`-mt-2 -mr-2 h-6 w-6 rounded-full flex-shrink-0 flex justify-center items-center group-focus-visible:ring-2 ring-jsr-yellow-700 ${
props.selected
? "border-2 border-gray-900 bg-gray-900 text-white"
? "border-1.5 border-jsr-cyan-950 bg-jsr-cyan-950 text-jsr-yellow"
: "border"
}`}
>
{props.selected && <Check />}
{props.selected && <Check class="stroke-2 size-9" />}
</div>
</div>
<p class="mt-2 w-5/6 text-gray-600 text-sm">{props.description}</p>
Expand Down
4 changes: 2 additions & 2 deletions frontend/routes/package/(_components)/PackageHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,12 @@ export function PackageHeader(
>
<span class="max-sm:hidden">Score</span>
<div
class={`flex w-full max-w-24 items-center justify-center aspect-square rounded-full p-1 ${
class={`flex w-12 h-12 items-center justify-center aspect-square rounded-full p-1 ${
getScoreBgColorClass(pkg.score)
}`}
style={`background-image: conic-gradient(transparent, transparent ${pkg.score}%, #e7e8e8 ${pkg.score}%)`}
>
<span class="rounded-full w-full h-full bg-white flex justify-center items-center text-center font-bold p-1 min-w-12">
<span class="rounded-full w-full h-full bg-white flex justify-center items-center text-center font-bold">
{pkg.score}%
</span>
</div>
Expand Down

0 comments on commit c6ba506

Please sign in to comment.