Skip to content

Commit

Permalink
add new styles and support css to preview
Browse files Browse the repository at this point in the history
  • Loading branch information
@DiegPS
DiegPS committed Mar 1, 2024
1 parent 9dfd5f6 commit 92c9ad4
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 3 deletions.
4 changes: 2 additions & 2 deletions src/components/Card.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ const { backgroundTW, backgroundCSS } = Astro.props;
---

<article class="relative min-h-72 w-full overflow-hidden rounded-md">
<Fragment set:html={backgroundTW} />
<Fragment set:html={backgroundTW.length > 5 ? backgroundTW : backgroundCSS} />

<footer class="absolute right-0 flex gap-1 z-10 mr-1 mt-1">
<button
button-preview
aria-label="Preview Background in this page"
class="rounded-md p-2 bg-zinc-800 hover:cursor-pointer transition hover:scale-110 "
value={backgroundTW}
value={backgroundTW.length > 5 ? backgroundTW : backgroundCSS}
>
<IconPreview class="text-zinc-300" />
<p class="text-zinc-300 text-xs font-semibold right-1 top-0">PW</p>
Expand Down
107 changes: 106 additions & 1 deletion src/components/backgrounds.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,4 +122,109 @@ export const backgrounds:Backgrounds[] = [
background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(140deg, rgb(72, 145, 161) 25%, rgb(0, 49, 61) 90%);"></div>`
},
]
{background_css: `<div style="position:absolute; width:100%; height:100%; background-image: linear-gradient(140deg, rgb(255, 100, 50) 12.8%, rgb(255, 0, 101) 43.52%, rgb(123, 46, 255) 84.34%);"></div>`,
background_tailwind: ``
},

{background_css: `<div style="position:absolute; width:100%; height:100%; background-image: linear-gradient(140deg, rgb(244, 229, 240), rgb(229, 54, 171), rgb(92, 3, 188), rgb(14, 7, 37));">
</div>`,
background_tailwind: ``
},
{background_css: `<div style="position:absolute; width:100%; height:100%; background-image: linear-gradient(135deg, rgb(238, 221, 243), rgb(238, 146, 177), rgb(99, 48, 180));"></div>`,
background_tailwind: ``
},

{background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(113.96deg, rgb(69, 190, 232) 13.54%, rgb(214, 161, 172) 50%, rgb(232, 140, 93) 85.42%);"></div>`,
background_tailwind: ``
},

{background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(113.96deg, rgb(69, 233, 159) 11.98%, rgb(213, 168, 155) 50%, rgb(232, 70, 152) 85.42%);"></div>`,
background_tailwind: ``
},

{background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(113.96deg, rgb(69, 223, 232) 11.98%, rgb(211, 170, 175) 50%, rgb(232, 103, 100) 85.42%);"></div>`,
background_tailwind: ``
},

{background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(293.96deg, rgb(160, 233, 125) 11.46%, rgb(169, 203, 177) 50%, rgb(192, 128, 232) 88.54%);"></div>`,
background_tailwind: ``
},

{background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(-45deg, rgb(114, 122, 154), rgb(216, 219, 233));"></div>`,
background_tailwind: ``
},

{background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(135deg, rgb(48, 48, 48), rgb(16, 16, 16));"></div>`,
background_tailwind: ``
},

{background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(135deg, rgb(10, 207, 254), rgb(73, 90, 255));"></div>`,
background_tailwind: ``
},

{background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(-45deg, rgb(61, 78, 129) 0%, rgb(87, 83, 201) 48%, rgb(110, 127, 243) 100%);"></div>`,
background_tailwind: ``
},

{background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(135deg, rgb(198, 255, 221), rgb(251, 215, 134), rgb(247, 121, 125));"></div>`,
background_tailwind: ``
},

{background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(135deg, rgb(248, 208, 129), rgb(238, 129, 68));"></div>`,
background_tailwind: ``
},

{background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(-45deg, rgb(248, 54, 0) 0%, rgb(249, 212, 35) 100%);"></div>`,
background_tailwind: ``
},

{background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(135deg, rgb(212, 252, 121), rgb(150, 230, 161));"></div>`,
background_tailwind: ``
},

{background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(135deg, rgb(67, 233, 123), rgb(56, 249, 215));"></div>`,
background_tailwind: ``
},

{background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(135deg, rgb(249, 240, 71), rgb(15, 216, 80));"></div>`,
background_tailwind: ``
},

{background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(-225deg, rgb(105, 234, 203) 0%, rgb(234, 204, 248) 48%, rgb(102, 84, 241) 100%);"></div>`,
background_tailwind: ``
},

{background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(135deg, rgb(215, 235, 235), rgb(244, 175, 233), rgb(157, 126, 243));"></div>`,
background_tailwind: ``
},

{background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(-45deg, rgb(80, 82, 133) 0%, rgb(88, 94, 146) 12%, rgb(101, 104, 159) 25%, rgb(116, 116, 176) 37%, rgb(126, 126, 187) 50%, rgb(131, 137, 199) 62%, rgb(151, 149, 212) 75%, rgb(162, 161, 220) 87%, rgb(181, 174, 228) 100%);"></div>`,
background_tailwind: ``
},

{background_css: `<div
style="position:absolute; width:100%; height:100%; background-image: linear-gradient(140deg, rgb(72, 145, 161) 25%, rgb(0, 49, 61) 90%);"></div>`,
background_tailwind: ``
},




]

0 comments on commit 92c9ad4

Please sign in to comment.