Modify card style.

src/lib/card/card.svelte

@@ -2,29 +2,53 @@
 	import { type ComponentProps} from 'svelte';
 	import Frame from "../frame/frame.svelte";
   import { twMerge } from 'tailwind-merge';
+  import type { SizeType } from '$lib/types.js';
 
   export let href: string | null | undefined = undefined;
   export let img: string | undefined = undefined;
   export let reverse: boolean = false;
   export let imgClass: string = '';
-  export let bodyClass: string = '';
   export let isMouseEntered:boolean = false;
+  export let padding: SizeType | 'none' = 'lg';
+
 	
 	interface $$Props extends ComponentProps<Frame> {
     img?:string;
     imgClass?:string;
-    bodyClass?:string;
     reverse?: boolean;
+    padding?: SizeType | 'none';
   }
 
+  const paddings: Record<SizeType | 'none', string> = {
+    none: '',
+    xs: 'p-2',
+    sm: 'p-4',
+    md: 'p-4 sm:p-5',
+    lg: 'p-4 sm:p-6',
+    xl: 'p-4 sm:p-8'
+  };
+
+  const yPaddings: Record<SizeType | 'none', string> = {
+    none: '',
+    xs: 'py-2',
+    sm: 'py-4',
+    md: 'py-4 sm:py-5',
+    lg: 'py-4 sm:py-6',
+    xl: 'py-4 sm:py-8'
+  };
+
+  let innerPadding: string;
+  $: innerPadding = paddings[padding];
+  let innerYpadding: string;
+  $: innerYpadding = yPaddings[padding];  
   let cardClass: string;
-  $: cardClass = twMerge('flex w-full ', reverse ? 'flex-col-reverse' : 'flex-col', $$props.class);
+  $: cardClass = twMerge('flex w-full  ', reverse ? 'flex-col-reverse ' : 'flex-col', $$props.class, innerPadding, $$restProps.imgHoverTransform && 'img-hover', $$restProps.hoverTransform && 'hover');
 
 </script>
 <Frame tag={href ? 'a' : 'div'} {...$$restProps} class={cardClass} bind:isMouseEntered><!--bind:isMouseEntered-->
   {#if img}
     <img class={imgClass} src={img} alt="" />
-    <div class={bodyClass}>
+    <div class={innerYpadding}>
       <slot />
     </div>
   {:else}

src/lib/constants.ts

@@ -1,4 +1,4 @@
-import type { DispAsset, SizeType, NFTToken } from "$lib/types.js";
+import type { DispAsset, SizeType } from "$lib/types.js";
 
 export const xlm_display: DispAsset = {
   image:

src/lib/frame/frame.svelte

@@ -167,18 +167,22 @@
 	
 	
 	let divClass;
-	$:divClass = twMerge('ms-frame ', $$props.rounded && 'rounded-lg', hoverTransform && "hover", $$props.class, imgHoverTransform && ("img-hover"))
+	// $:divClass = twMerge('ms-frame ', $$props.rounded && 'rounded-lg', hoverTransform && "hover", $$props.class, imgHoverTransform && ("img-hover"))
+	$:divClass = twMerge('ms-frame ', $$props.rounded && 'rounded-lg',  $$props.class)
 
 </script>
 
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<svelte:element this={"div"} {...$$restProps} 
-		class={divClass} 
-		on:click 
-		on:mouseenter ={handleMouseEnter}
-		on:mouseleave ={handleMouseLeave}
-		on:focusin 
-		on:focusout 
-		on:mousemove={handleMouseMove}>
-    <slot />
-  </svelte:element>
+	<div  style="perspective: 1000px;"> 
+		<svelte:element this={"div"} {...$$restProps} 
+			class={divClass} 
+			bind:this={containerRef}
+			on:click 
+			on:mouseenter ={handleMouseEnter}
+			on:mouseleave ={handleMouseLeave}
+			on:focusin 
+			on:focusout 
+			on:mousemove={handleMouseMove}>
+			<slot />
+		</svelte:element>
+	</div>

src/lib/frame/style.css

@@ -1,43 +1,40 @@
-.ms-frame{
+.ms-frame {
   cursor: pointer;
-	box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
 }
-.ms-frame.hover:hover{
-  animation: both 3s float infinite;
-	&.img-hover img {
-  	animation: both 3s floatItem infinite;
-	}
+.ms-frame.hover:hover {
+  &.img-hover img {
+    animation: both 3s floatItem infinite;
+  }
 }
 
 @keyframes float {
-	0% {
-		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
-		transform: translatey(0px) scale(1);
-	}
-	50% {
-		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
-		transform: translatey(-5px) scale(1.01);
-
-	}
-	100% {
-		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
-		transform: translatey(0px) scale(1);
-	}
+  0% {
+    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
+    transform: translatey(0px) scale(1);
+  }
+  50% {
+    box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
+    transform: translatey(-5px) scale(1.01);
+  }
+  100% {
+    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
+    transform: translatey(0px) scale(1);
+  }
 }
 
 @keyframes floatItem {
-	0% {
-		transform: translatez(0px) scale(1);
-	}
-	50% {
-		box-shadow: 0 15px 10px 0px rgba(0,0,0,0.2);
-		transform: translatez(30px) scale(1.02);
-
-	}
-	100% {
-		transform: translatez(0px) scale(1);
-	}
+  0% {
+    transform: translatez(0px) scale(1);
+  }
+  50% {
+    box-shadow: 0 15px 10px 0px rgba(0, 0, 0, 0.2);
+    transform: translatez(30px) scale(1.02);
+  }
+  100% {
+    transform: translatez(0px) scale(1);
+  }
 }
-.ms-card__item.hover:hover  {
+.ms-card__item.hover:hover {
   animation: both 3s float infinite;
 }

src/lib/imagePoster/imagePoster.svelte

@@ -10,6 +10,7 @@
 
 	export let img: string | undefined = undefined;
 	export let imgClass: string | undefined = undefined;
+  export let padding: SizeType | 'none' = 'lg';
 
 	interface $$Props extends ComponentProps<Frame> {
     img?: string;
@@ -18,11 +19,22 @@
     size?: SizeType | 'none';
 	}
 
+	const paddings: Record<SizeType | 'none', string> = {
+    none: '',
+    xs: 'p-2',
+    sm: 'p-4',
+    md: 'p-4 sm:p-5',
+    lg: 'p-4 sm:p-6',
+    xl: 'p-4 sm:p-8'
+  };
+	
+ 	let innerPadding: string;
+  $: innerPadding = paddings[padding];
  	let cardClass: string;
-  $: cardClass = twMerge('flex w-full', $$props.class);
+  $: cardClass = twMerge('flex w-full', $$props.class, innerPadding);
 
 	let imgCls:string;
-	$:imgCls = twMerge('hover:cursor-pointer', imgClass)
+	$:imgCls = twMerge('hover:cursor-pointer', imgClass, )
 
 </script>
 

src/lib/nftPoster/nftPoster.svelte

@@ -5,19 +5,44 @@
   import { twMerge } from 'tailwind-merge';
 
 	import Frame from "../frame/frame.svelte";
-	import type {AssetAccount, AssetRaw, AssetMetaData} from '$lib/types.js';
+	import type {AssetAccount, AssetRaw, AssetMetaData, SizeType} from '$lib/types.js';
 	import {baseURL} from '$lib/constants.js';
 
 	let showModal = false;
 
   export let assetAccount: AssetAccount;
   export let imgClass: string | undefined = undefined;
+  export let padding: SizeType | 'none' = 'lg';
 
 	interface $$Props extends ComponentProps<Frame> {
     assetAccount: AssetAccount;
     imgClass?:string;
+    padding?: SizeType | 'none';
 	}
 
+  const paddings: Record<SizeType | 'none', string> = {
+    none: '',
+    xs: 'p-2',
+    sm: 'p-4',
+    md: 'p-4 sm:p-5',
+    lg: 'p-4 sm:p-6',
+    xl: 'p-4 sm:p-8'
+  };
+
+  const yPaddings: Record<SizeType | 'none', string> = {
+    none: '',
+    xs: 'py-2',
+    sm: 'py-4',
+    md: 'py-4 sm:py-5',
+    lg: 'py-4 sm:py-6',
+    xl: 'py-4 sm:py-8'
+  };
+
+  let innerPadding: string;
+  $: innerPadding = paddings[padding];
+  let innerYpadding: string;
+  $: innerYpadding = yPaddings[padding];
+
   let assetInfo: AssetRaw;
   let assetMetadata: AssetMetaData;
 
@@ -103,6 +128,7 @@
 
   let cardClass: string;
   $: cardClass = twMerge('flex w-full', $$props.class);
+  $: cardClass = twMerge('flex w-full',  $$props.class, innerPadding, $$restProps.imgHoverTransform && 'img-hover', $$restProps.hoverTransform && 'hover');
 
 
 	let imgCls:string;

src/lib/types.ts

@@ -38,6 +38,7 @@ const sm = "sm";
 const md = "md";
 const lg = "lg";
 const xl = "xl";
+
 export declare type SizeType =
   | typeof xs
   | typeof sm
@@ -171,42 +172,42 @@ export interface message {
 }
 
 export interface Toml {
-  href: string
+  href: string;
 }
 
 export interface links {
-  toml: Toml
+  toml: Toml;
 }
 
 export interface AssetExtra {
-  authorized: number,
-  authorized_to_maintain_liabilities: number,
-  unauthorized: number
+  authorized: number;
+  authorized_to_maintain_liabilities: number;
+  unauthorized: number;
 }
 
 export interface AssetFlag {
-  auth_required: boolean,
-  auth_revocable: boolean,
-  auth_immutable: boolean
+  auth_required: boolean;
+  auth_revocable: boolean;
+  auth_immutable: boolean;
 }
 
 // FT Token
 export interface AssetRaw {
-  asset_type: string, // This asset's type. Either credit_alphanum4 or credit_alphanum12.
-  asset_code: string, // This asset's code
-  asset_issuer: string, // The Stellar address of this asset’s issuer.
-  accounts: AssetExtra, // The number of accounts grouped by each trustline flag state.
-  num_claimable_balances: number, // The current number of claimable_balances for this asset.
-  num_contracts: number, // The current number of Soroban contracts holding this asset.
-  num_liquidity_pools: number, // The current number of liquidity pools holding this asset.
-  balances: AssetExtra, // The number of units issued for this asset grouped by each trustline flag state.
-  claimable_balances_amount: string, // The number of units for this asset held by all claimable balances.
-  contracts_amount: string, // The number of units for this asset held by all Soroban contracts.
-  liquidity_pools_amount: string, // The number of units for this asset held by all liquidity pools.
-  amount: string, // The number of authorized units issued for this asset. This will be deprecated in Horizon v3.
-  num_accounts: number, // The number of accounts that have issued a trustline to this asset. If the auth_required flag for this asset's issuer is set to true, this number only includes the accounts who have both set up a trustline to the asset and have been authorized to hold the asset. This will be deprecated in Horizon v3.
-  flags: AssetFlag,
-  _links: links,
+  asset_type: string; // This asset's type. Either credit_alphanum4 or credit_alphanum12.
+  asset_code: string; // This asset's code
+  asset_issuer: string; // The Stellar address of this asset’s issuer.
+  accounts: AssetExtra; // The number of accounts grouped by each trustline flag state.
+  num_claimable_balances: number; // The current number of claimable_balances for this asset.
+  num_contracts: number; // The current number of Soroban contracts holding this asset.
+  num_liquidity_pools: number; // The current number of liquidity pools holding this asset.
+  balances: AssetExtra; // The number of units issued for this asset grouped by each trustline flag state.
+  claimable_balances_amount: string; // The number of units for this asset held by all claimable balances.
+  contracts_amount: string; // The number of units for this asset held by all Soroban contracts.
+  liquidity_pools_amount: string; // The number of units for this asset held by all liquidity pools.
+  amount: string; // The number of authorized units issued for this asset. This will be deprecated in Horizon v3.
+  num_accounts: number; // The number of accounts that have issued a trustline to this asset. If the auth_required flag for this asset's issuer is set to true, this number only includes the accounts who have both set up a trustline to the asset and have been authorized to hold the asset. This will be deprecated in Horizon v3.
+  flags: AssetFlag;
+  _links: links;
 }
 
 export interface AssetMetaData {
@@ -221,8 +222,8 @@ export interface AssetMetaData {
 
 // FT Token
 export interface AssetAccount {
-  code: string, // This asset's code
-  issuer: string, // The Stellar address of this asset’s issuer.
+  code: string; // This asset's code
+  issuer: string; // The Stellar address of this asset’s issuer.
 }
 
-// Token Ends ---------------------------------------------------------------------------------------------------------------------------------------
+// Token Ends ---------------------------------------------------------------------------------------------------------------------------------------