diff --git a/examples/react/simple/src/components/card.tsx b/examples/react/simple/src/components/card.tsx index a26498e..a084503 100644 --- a/examples/react/simple/src/components/card.tsx +++ b/examples/react/simple/src/components/card.tsx @@ -1,8 +1,10 @@ import styles from './card.module.css' -export function Card(props: { dark?: boolean, className?: string }) { +export function Card(props: { dark?: boolean; className?: string }) { return ( -
+
- Sync Skeleton Svelte Simple Example App + Sync Skeleton Svelte Simple Example App %sveltekit.head% diff --git a/examples/svelte/simple/src/lib/components/Card.svelte b/examples/svelte/simple/src/lib/components/Card.svelte index 24c6f31..ee057b3 100644 --- a/examples/svelte/simple/src/lib/components/Card.svelte +++ b/examples/svelte/simple/src/lib/components/Card.svelte @@ -25,7 +25,7 @@ background-color: hsl(0 0% 10% / 100%); } } - + .orange-purple-loader { --skeleton-base-color: tomato; --skeleton-highlight-color: darkred; diff --git a/examples/svelte/simple/src/routes/+page.svelte b/examples/svelte/simple/src/routes/+page.svelte index 6c45e34..0bb46c3 100644 --- a/examples/svelte/simple/src/routes/+page.svelte +++ b/examples/svelte/simple/src/routes/+page.svelte @@ -1,39 +1,37 @@
- -
- -
-
- -
+ +
+ +
+
+ +
- - \ No newline at end of file + :global(:root) { + color-scheme: light dark; + background-color: light-dark(white, hsl(0 0% 10%)); + color: light-dark(black, white); + --skeleton-radius: 4px; + } + + .container { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .card2 { + margin-left: 10rem; + } + + .card3 { + margin-left: 20rem; + } + diff --git a/examples/vue/simple/src/components/Card.vue b/examples/vue/simple/src/components/Card.vue index 83e4cc0..0f68bdc 100644 --- a/examples/vue/simple/src/components/Card.vue +++ b/examples/vue/simple/src/components/Card.vue @@ -1,9 +1,9 @@