Add workshop stage

src/app.css

@@ -82,7 +82,7 @@
 	.person-item:hover img {
 		@apply grayscale-0 invert-0 blur-none;
 	}
-	.person-item:hover .text-mild, .person-item:hover .text-supermild, .topic-item:hover .text-mild {
+	.person-item:hover .text-mild, .person-item:hover .text-supermild, .topic-item:hover .text-mild, .topic-item:hover .text-supermild {
 		@apply text-black;
 	}
 }

src/lib/config.yaml

@@ -95,7 +95,6 @@ faq:
     text: Yes, we're planning both. A livestream of the conference and recordings of the talks and panels will be publicly available after the conference.
   - title: I have another question, where can I contact you?
     text: "You can contact the organizing team or the community around the event in our public Signal group: [chat.web3privacy.info](https://chat.web3privacy.info/)"
-
 people:
 - id: mykola
   name: Mykola Siusko
@@ -133,7 +132,6 @@ people:
   img: manu-alzuru.jpeg
   caption: Humanist,  solarpunk, Founder of [DoinGud](https://doingud.com/) & [ETH Barcelona](https://ethbarcelona.com/)
   country: es
-
 speakers:
   - guy-zyskind
   - manu-alzuru
@@ -142,7 +140,13 @@ speakers:
 hosts:
   - mykola
   - tree
+stages:
+  - id: main
+    name: Main stage
+  - id: second
+    name: Workshop stage
 program:
+  main:
     - time: 9:00 - 9:30
       title: Registration & networking
     - time: 9:30 - 9:35
@@ -151,25 +155,47 @@ program:
       - name: TBA
       desc: Welcoming visitors to our private-centric research, community and conference
     - time: 9:35 - 10:55
-  title: Talks I.
+      title: Talks I. - TBA
     - time: 10:55 - 11:20
       title: 25min Coffee Break
+      type: other
     - time: 11:25 - 12:40
-  title: Talks II.
+      title: Talks II. - TBA
     - time: 12:40 - 14:00
       title: Lunch & Networking
+      type: other
     - time: 14:00 - 15:40
-  title: Talks III.
+      title: Talks III. - TBA
     - time: 15:40 - 16:05
       title: 25min Coffee Break
+      type: other
     - time: 16:10 - 18:30
-  title: Talks IV.
+      title: Talks IV. - TBA
     - time: 18:30 - 18:35
       title: Closing Remarks
       speakers:
         - name: TBA
     - time: 18:30 - 20:00
       title: Networking & Drinks
+      type: other
     - time: 20:00 - 4:00
       title: "#Lunarpunk party"
       desc: Enjoy our afterparty in Lunarpunk style with quality Prague rave DJs, which will take place in the same venue until the morning (4am).
+  second:
+    - time: 09:35 - 10:55
+      title: Workshops I. - TBA
+    - time: 10:55 - 11:20
+      title: 25min Coffee Break
+      type: other
+    - time: 11:25 - 12:40
+      title: Workshops II. - TBA
+    - time: 12:40 - 14:00
+      title: Lunch & Networking
+      type: other
+    - time: 14:00 - 15:40
+      title: Workshops III. - TBA
+    - time: 15:40 - 16:05
+      title: 25min Coffee Break
+      type: other
+    - time: 16:10 - 18:30
+      title: Workshops IV.

src/routes/+page.svelte

@@ -69,6 +69,10 @@
 <div class="bg-black" id="program">
 	<div class="middle-pane-medium pt-16 text-xl text-center mx-auto pb-32">
 		<div class="section-header" on:mouseenter={animateText}>Program</div>
+		<div class="program xl:flex gap-10 xl:gap-4">
+			{#each data.config.stages.map(s => ({ ...s, program: data.config.program[s.id]})).filter(s => s.program) as stage}
+				<div class="w-auto xl:w-1/2 mb-10 xl:mb-0">
+					<div class="text-3xl font-bold mb-4">{stage.name}</div>
 					<table class="table-auto table-custom w-full mx-0 lg:mx-8">
 						<thead>
 							<tr>
@@ -76,17 +80,18 @@
 								<th class="text-left">topic</th>
 							</tr>
 						</thead>
+
 						<tbody>
-				{#each data.config.program as pi}
+							{#each stage.program as pi}
 								<tr class="" on:mouseenter={animateSection(35)}>
-						<td class="text-right time xl:whitespace-nowrap sm:w-16 xl:w-36"
+									<td class="text-right time xl:whitespace-nowrap sm:w-16 xl:w-36 {pi.type==="other" ? 'text-mild' : ''}"
 										>{@html pi.time
 											.split('-')
 											.map((x) => x)
 											.join('<div class="xl:inline-block hidden mx-1">-</div>')}
 									</td>
 									<td class="text-left">
-							<div class="text-xl"><span class="animate-section">{pi.title}</span> {pi.speakers ? '― ' + pi.speakers[0]?.name : ''}</div>
+										<div class="text-xl"><span class="animate-section {pi.type==="other" ? 'text-mild' : ''}">{pi.title}</span> {pi.speakers ? '― ' + pi.speakers[0]?.name : ''}</div>
 										{#if pi.desc}
 											<div class="mt-2 text-base description text-mild markdown">
 												<SvelteMarkdown source={pi.desc} />
@@ -98,6 +103,9 @@
 						</tbody>
 					</table>
 				</div>
+			{/each}
+		</div>
+	</div>
 </div>
 
 <div class="" id="sponsors">