updated gen

This commit is contained in:
tree🌴 2024-03-07 11:23:15 +01:00
parent 78a3ccc2de
commit d10407f107
8 changed files with 40 additions and 39 deletions

View File

@ -129,29 +129,31 @@ const tools = {
<div class="w-full flex flex-wrap gap-10 p-10"> <div class="w-full flex flex-wrap gap-10 p-10">
<div> <div>
<div class="mb-4 text-xl text-green-500">Square (1:1)</div> <div class="mb-4 text-xl text-[#909090]">Square (1:1)</div>
<div class="w-[404px] border-2 border-green-500 overflow-hidden"> <div class="w-[404px]">
<Square {event} {image} {tools} /> <Square {event} {image} {tools} />
</div> </div>
</div> </div>
<div> <div>
<div class="mb-4 text-xl text-green-500">Wide-square (4:3)</div> <div class="mb-4 text-xl text-[#909090]">Wide-square (4:3)</div>
<div class="h-[404px] border-2 border-green-500 overflow-hidden"> <div class="h-[404px]">
<WideSquare {event} {image} {tools} /> <WideSquare {event} {image} {tools} />
</div> </div>
</div> </div>
<div> <div>
<div class="mb-4 text-xl text-green-500">Wide (16:9)</div> <div class="mb-4 text-xl text-[#909090]">Wide (16:9)</div>
<Wide {event} {image} {tools} /> <div class="h-[404px]">
<Wide {event} {image} {tools} />
</div>
</div> </div>
<div> <div>
<div class="mb-4 text-xl text-green-500">Square (speaker) (1:1)</div> <div class="mb-4 text-xl text-[#909090]">Square (speaker) (1:1)</div>
<div class="my-4"> <div class="my-4">
Speaker: Speaker:
<select bind:value={$speakerSelected} class="text-black"> <select bind:value={$speakerSelected} class="text-black">
@ -163,23 +165,23 @@ const tools = {
</select> </select>
</div> </div>
<div class="w-[404px] border-2 border-green-500"> <div class="w-[404px]">
<SquareSpeaker {speaker} {event} {image} {tools} /> <SquareSpeaker {speaker} {event} {image} {tools} />
</div> </div>
</div> </div>
<div> <div>
<div class="mb-4 text-xl text-green-500">Poster (3:2)</div> <div class="mb-4 text-xl text-[#909090]">Poster (3:2)</div>
<div class="w-[764px] border-2 border-green-500"> <div class="w-[764px]">
<Poster {topics} {event} {image} {tools} /> <Poster {topics} {event} {image} {tools} />
</div> </div>
</div> </div>
<div> <div>
<div class="mb-4 text-xl text-green-500">Poster (simple) (3:2)</div> <div class="mb-4 text-xl text-[#909090]">Poster (simple) (3:2)</div>
<div class="w-[764px] border-2 border-green-500"> <div class="w-[764px]">
<PosterSimple {event} {image} {tools} /> <PosterSimple {event} {image} {tools} />
</div> </div>
</div> </div>

View File

@ -4,7 +4,7 @@
export let tools; export let tools;
</script> </script>
<div id="img-poster-simple" class="aspect-[2/3] w-[760px] h-[1140px] relative bg-black overflow-hidden"> <div id="img-poster-simple" class="aspect-[2/3] w-[760px] h-[1140px] relative bg-black overflow-hidden text-white">
<img src="/logo.svg" class="absolute top-10 left-10 w-1/3 z-20" /> <img src="/logo.svg" class="absolute top-10 left-10 w-1/3 z-20" />
{#if event.type === 'summit'} {#if event.type === 'summit'}

View File

@ -5,7 +5,7 @@
export let topics; export let topics;
</script> </script>
<div id="img-poster" class="aspect-[2/3] w-[760px] h-[1140px] relative bg-black"> <div id="img-poster" class="aspect-[2/3] w-[760px] h-[1140px] relative bg-black text-white overflow-hidden">
<img src="/logo.svg" class="absolute top-10 left-10 w-1/3 z-20" /> <img src="/logo.svg" class="absolute top-10 left-10 w-1/3 z-20" />
<div class="absolute top-20 left-0 h-36 w-full z-10" style="background: linear-gradient(black, transparent);"></div> <div class="absolute top-20 left-0 h-36 w-full z-10" style="background: linear-gradient(black, transparent);"></div>

View File

@ -8,7 +8,7 @@
</script> </script>
<div id="img-square-speaker" class="aspect-square w-[400px] relative bg-black"> <div id="img-square-speaker" class="aspect-square w-[400px] relative bg-black text-white overflow-hidden">
<img src="/logo.svg" class="absolute top-6 left-6 w-2/6 z-20" /> <img src="/logo.svg" class="absolute top-6 left-6 w-2/6 z-20" />
<img src={image} class="-z-10 opacity-40 blur-sm" /> <img src={image} class="-z-10 opacity-40 blur-sm" />

View File

@ -5,7 +5,7 @@
</script> </script>
<div id="img-square" class="aspect-square w-[400px] relative bg-black"> <div id="img-square" class="aspect-square w-[400px] relative bg-black text-white overflow-hidden">
<img src="/logo.svg" class="absolute top-8 left-8 w-1/2 z-20" /> <img src="/logo.svg" class="absolute top-8 left-8 w-1/2 z-20" />
<div class="absolute top-0 left-0 h-36 w-full z-10" style="background: linear-gradient(black, transparent);"></div> <div class="absolute top-0 left-0 h-36 w-full z-10" style="background: linear-gradient(black, transparent);"></div>

View File

@ -5,7 +5,7 @@
</script> </script>
<div id="img-wide-square" class="aspect-[4/3] h-[400px] relative bg-black"> <div id="img-wide-square" class="aspect-[4/3] h-[400px] relative bg-black text-white overflow-hidden">
<img src="/logo.svg" class="absolute top-8 left-8 w-1/3 z-20" /> <img src="/logo.svg" class="absolute top-8 left-8 w-1/3 z-20" />

View File

@ -5,30 +5,29 @@
</script> </script>
<div class="h-[404px] border-2 border-green-500 overflow-hidden">
<div id="img-wide" class="aspect-video h-[400px] relative bg-black">
<img src="/logo.svg" class="absolute top-8 left-8 w-1/4 z-20" /> <div id="img-wide" class="aspect-video h-[400px] relative bg-black overflow-hidden">
<div class="absolute top-0 left-48 h-full w-1/3 z-10" style="background: linear-gradient(to left, transparent, black);"></div> <img src="/logo.svg" class="absolute top-8 left-8 w-1/4 z-20" />
<img src={image} class="absolute top-0 left-48 -z-0 w-[33rem]" />
<div class="absolute bottom-8 left-8 uppercase z-20 text-xl"> <div class="absolute top-0 left-48 h-full w-1/3 z-10" style="background: linear-gradient(to left, transparent, black);"></div>
<div class="flex"> <img src={image} class="absolute top-0 left-48 -z-0 w-[33rem]" />
<div class="border-2 border-white py-1 px-2 inline-block bg-black">
{tools.dateFormat(event.date)} <div class="absolute bottom-8 left-8 uppercase z-20 text-xl">
</div> <div class="flex">
</div> <div class="border-2 border-white py-1 px-2 inline-block bg-black">
<div class="flex" style="margin-top: -2px;"> {tools.dateFormat(event.date)}
<div class="border-2 border-white py-1 px-2 bg-black">
{event.city}, {event.country}
</div>
</div>
<div class="flex" style="margin-top: -2px;">
<div class="border-2 border-white py-1 px-2 bg-white text-black uppercase">
{event.type}
</div>
</div> </div>
</div> </div>
<div class="flex" style="margin-top: -2px;">
<div class="border-2 border-white py-1 px-2 bg-black">
{event.city}, {event.country}
</div>
</div>
<div class="flex" style="margin-top: -2px;">
<div class="border-2 border-white py-1 px-2 bg-white text-black uppercase">
{event.type}
</div>
</div>
</div> </div>
</div> </div>

View File

@ -16,7 +16,7 @@ let url = Astro.url;
crossorigin crossorigin
/> />
</head> </head>
<body class="bg-gray-900 text-white font-mono font-['DM Mono Regular Latin']"> <body class="bg-[#F0F0F0] text-black font-mono font-['DM Mono Regular Latin']">
<ImageGenerator client:load /> <ImageGenerator client:load />