Skip to content

Commit

Permalink
Use rems for proper scale
Browse files Browse the repository at this point in the history
  • Loading branch information
joonassandell committed Aug 21, 2024
1 parent 56ecb7d commit d1bba54
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 3 deletions.
4 changes: 2 additions & 2 deletions app/dynamic-pay-button/components/Card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
CARDS,
useDynamicPayButton,
} from '../';
import { cn } from '@/lib/utils';
import { cn, rem } from '@/lib/utils';
import { DelayedRender } from '@/components/DelayedRender';
import {
type DragHandlers,
Expand Down Expand Up @@ -46,7 +46,7 @@ export const Card = ({
<m.div
animate={{
scale: 1 - index * 0.06,
y: index * -16,
y: rem(index * -1),
zIndex: CARDS.length - index,
}}
className={cn('u-absolute u-h-full u-w-full', {
Expand Down
3 changes: 3 additions & 0 deletions lib/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,6 @@ export const move = (array: any[], moveIndex: number, toIndex: number) => {
};

export const sleep = (ms: number) => new Promise(r => setTimeout(r, ms));

export const rem = (rem: number) =>
rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@joonassandell/ui-lab",
"description": "User interface laboratory by Joonas Sandell",
"version": "0.1.9",
"version": "0.1.10",
"type": "module",
"author": {
"name": "Joonas Sandell",
Expand Down

0 comments on commit d1bba54

Please sign in to comment.