From 7420f6e59bad9bc18879402b53a3d5655cde8d12 Mon Sep 17 00:00:00 2001
From: tree <tree@hidden.cz>
Date: Thu, 7 Mar 2024 11:23:15 +0100
Subject: [PATCH] updated gen

---
 src/components/EventImageGenerator.svelte     | 26 ++++++------
 .../event-formats/poster-simple.svelte        |  2 +-
 src/components/event-formats/poster.svelte    |  2 +-
 .../event-formats/square-speaker.svelte       |  2 +-
 src/components/event-formats/square.svelte    |  2 +-
 .../event-formats/wide-square.svelte          |  2 +-
 src/components/event-formats/wide.svelte      | 41 +++++++++----------
 src/pages/gen/event.astro                     |  2 +-
 8 files changed, 40 insertions(+), 39 deletions(-)

diff --git a/src/components/EventImageGenerator.svelte b/src/components/EventImageGenerator.svelte
index fa1e511..c3acaed 100644
--- a/src/components/EventImageGenerator.svelte
+++ b/src/components/EventImageGenerator.svelte
@@ -129,29 +129,31 @@ const tools = {
 <div class="w-full flex flex-wrap gap-10 p-10">
 
     <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} />
         </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} />
         </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 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">
             Speaker: 
             <select bind:value={$speakerSelected} class="text-black">
@@ -163,23 +165,23 @@ const tools = {
             </select>
         </div>
 
-        <div class="w-[404px] border-2 border-green-500">
+        <div class="w-[404px]">
             <SquareSpeaker {speaker} {event} {image} {tools} />
         </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} />
         </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} />
         </div>
     </div>
diff --git a/src/components/event-formats/poster-simple.svelte b/src/components/event-formats/poster-simple.svelte
index 15cb3e0..ac771cd 100644
--- a/src/components/event-formats/poster-simple.svelte
+++ b/src/components/event-formats/poster-simple.svelte
@@ -4,7 +4,7 @@
     export let tools;
 </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" />
 
     {#if event.type === 'summit'}
diff --git a/src/components/event-formats/poster.svelte b/src/components/event-formats/poster.svelte
index ad2c8c4..59e2790 100644
--- a/src/components/event-formats/poster.svelte
+++ b/src/components/event-formats/poster.svelte
@@ -5,7 +5,7 @@
     export let topics;
 </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" />
 
     <div class="absolute top-20 left-0 h-36 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
diff --git a/src/components/event-formats/square-speaker.svelte b/src/components/event-formats/square-speaker.svelte
index 42d292d..7cb45dd 100644
--- a/src/components/event-formats/square-speaker.svelte
+++ b/src/components/event-formats/square-speaker.svelte
@@ -8,7 +8,7 @@
 </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={image} class="-z-10 opacity-40 blur-sm" />
diff --git a/src/components/event-formats/square.svelte b/src/components/event-formats/square.svelte
index cda3860..e0523ca 100644
--- a/src/components/event-formats/square.svelte
+++ b/src/components/event-formats/square.svelte
@@ -5,7 +5,7 @@
 </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" />
 
     <div class="absolute top-0 left-0 h-36 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
diff --git a/src/components/event-formats/wide-square.svelte b/src/components/event-formats/wide-square.svelte
index 6f4590f..a065245 100644
--- a/src/components/event-formats/wide-square.svelte
+++ b/src/components/event-formats/wide-square.svelte
@@ -5,7 +5,7 @@
 </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" />
 
diff --git a/src/components/event-formats/wide.svelte b/src/components/event-formats/wide.svelte
index 5034dd2..a2187f3 100644
--- a/src/components/event-formats/wide.svelte
+++ b/src/components/event-formats/wide.svelte
@@ -5,30 +5,29 @@
 </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={image} class="absolute top-0 left-48 -z-0 w-[33rem]" />
+    <img src="/logo.svg" class="absolute top-8 left-8 w-1/4 z-20" />
 
-        <div class="absolute bottom-8 left-8 uppercase z-20 text-xl">
-            <div class="flex">
-                <div class="border-2 border-white py-1 px-2 inline-block bg-black">
-                    {tools.dateFormat(event.date)}
-                </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 class="absolute top-0 left-48 h-full w-1/3 z-10" style="background: linear-gradient(to left, transparent, black);"></div>
+    <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="flex">
+            <div class="border-2 border-white py-1 px-2 inline-block bg-black">
+                {tools.dateFormat(event.date)}
             </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>
\ No newline at end of file
+</div>
diff --git a/src/pages/gen/event.astro b/src/pages/gen/event.astro
index 81d28fa..b5a41af 100644
--- a/src/pages/gen/event.astro
+++ b/src/pages/gen/event.astro
@@ -16,7 +16,7 @@ let url = Astro.url;
         crossorigin
 />
 </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 />