Update

src/app.css

@@ -19,6 +19,9 @@
         @apply underline hover:no-underline;
     }
 
+    .markdown p {
+    }
+
     .middle-pane-medium {
         @apply max-w-7xl mx-auto px-4 xl:px-0;
     }
@@ -30,7 +33,7 @@
         @apply px-3 py-1.5 text-black bg-white;
     }
     .section-header {
-        @apply text-5xl mb-16 font-bold pt-10;
+        @apply text-3xl md:text-5xl mb-8 md:mb-16 font-bold pt-10;
     }
 
     .text-mild {
@@ -41,7 +44,7 @@
         @apply text-base;
     }
     .table-custom td, .table-custom th {
-        @apply px-4 py-4 align-top;
+        @apply px-2 py-3 md:px-4 md:py-4 align-top;
     }
     .table-custom th {
         @apply text-mild;
@@ -55,4 +58,15 @@
     .table-custom td {
         @apply border border-b-0 border-l-0 border-r-0 border-gray-600;
     }
+    .table-custom td.time {
+        @apply text-sm;
+    }
+
+    .external::after {
+        padding-left: 10px;
+        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.5' height='13.5' aria-hidden='true' viewBox='0 0 24 24' class='iconExternalLink_nPIU'%3E%3Cpath fill='white' d='M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z'%3E%3C/path%3E%3C/svg%3E");
+    }
+    .external.external-mild::after {
+        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.5' height='13.5' aria-hidden='true' viewBox='0 0 24 24' class='iconExternalLink_nPIU'%3E%3Cpath fill='silver' d='M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z'%3E%3C/path%3E%3C/svg%3E");
+    }
 }

src/lib/config.js

@@ -6,20 +6,29 @@ title: Web3Privacy Prague 2023
 shortname: Web3Privacy Summit
 date: Monday, 5. June 2023
 venue: X10, Prague
+slogan: |
+  We need to protect our privacy, and that's why we're coming together on June 5 to Prague to sit down and discuss different aspects of privacy in the Web3 industry - how we can help shape it and make it more accessible - building a shared culture. Conference was created to complement the [Web3Privacy Now](http://web3privacy.info/) research project.
 themes:
 - title: Human rights DAOs (pro-privacy)
 - title: Identity (ID)
 - title: Mixnets → Full-Stack Privacy
+  desc: Imagine a Full-Stack Privacy -> how would it even look alike!
 - title: Cryptography
 - title: Tech journalists
+  desc: Ethical crypto vs global cyberwars agenda
 - title: Asian community
+  desc: It's rare to see asians in Europe, but there are so many of them doing privacy solutions
 - title: Privacy wars
+  desc: Why are privacy-blockchain socials so toxic? We should stop hating each other & work together
 - title: Privacy workforce
 - title: "Privacy activist's"
 - title: R&D (ZK, MPC)
 - title: Network states (with a privacy focus)
+  desc: The network state-as-a-grassroots movement
 - title: Solarpunk vs Lunarpunk
+  desc: For solarpunk to succeed it must integrate the lunarpunk unconscious. The only hope for solarpunk is to [go dark](https://www.egirlcapital.com/writings/107533289). Do you agree?
 - title: Veksl
+  desc: Easy onboarding to cryptocurrencies without KYC/AML using P2P tools is crucial for privacy. What options do we have today?
 tickets:
 - title: All-day Access
   price: 2350 CZK (~99 EUR)
@@ -31,21 +40,20 @@ tickets:
 - title: "#Lunarpunk Party"
   price: 350 CZK (~15 EUR)
   includes:
-  - 20:00 - morning
+  - 8pm - morning
   - Prague rave from top DJs
   - VJs and projections
   - Networking with attendees, speakers & sponsors
   note: "*Party access is included in the All-day Pass"
 faq:
 - title: Who is the event for?
-  text: |
+  text: Our event is for anyone interested in privacy topics in the Web3 industry. There will be space for about 300 enthusiasts.
-    Our event is for anyone interested in privacy topics in the Web3 industry. There will be space for about 300 enthusiasts.
+- title: Will the talks be livestreamed and/or recorded?
+  text: Yes, we plan do both. Livestream of the whole conference and recordings of the lectures will be publicly available.
 - title: How do I get to the venue?
-  text: |
+  text: Venue X10 (full name "[Divadlo X10](https://divadlox10.cz)") is located in the centre of Prague near the metro station *Národní Třída* (Line B) and *Můstek* (Line A,C). The address is [Charvátova 10/39, Prague 1, 110 00](https://goo.gl/maps/Yh8qWagnqB1DvK676) ([Google Maps](https://goo.gl/maps/Yh8qWagnqB1DvK676)).
-    Venue X10 (full name "[Divadlo X10](https://divadlox10.cz)") is located in the centre of Prague near the metro station *Národní Třída* (Line B) and *Můstek* (Line A,C). The address is [Charvátova 10/39, Prague 1, 110 00](https://goo.gl/maps/Yh8qWagnqB1DvK676) ([Google Maps](https://goo.gl/maps/Yh8qWagnqB1DvK676)).
 - title: Will there be any food or drink?
-  text: |
+  text: We don't know, but we'll do our best. This unfortunately depends on the sponsors.
-    We don't know, but we'll do our best. This unfortunately depends on the sponsors.
 program:
 - time: 9:00 - 9:30
   title: Registration & networking
@@ -53,8 +61,7 @@ program:
   title: Welcome to Web3Privacy
   speakers:
   - name: TBA
-  desc: |
+  desc: Welcoming visitors to our private-centric research, community and conference
-    Welcoming visitors to our private-centric research, community and conference
 - time: 9:35 - 10:55
   title: Talks I.
 - time: 10:55 - 11:20
@@ -77,8 +84,7 @@ program:
   title: Networking & Drinks
 - time: 20:00 - 4:00
   title: "#Lunarpunk party"
-  desc: |
+  desc: Enjoy our afterparty in Lunarpunk style with quality Prague rave DJs, which will take place in the same venue until the morning (4am).
-    Enjoy our afterparty in Lunarpunk style with quality Prague rave DJs, which will take place in the same venue until the morning (4am).
 
 `);
 

src/routes/+layout.svelte

@@ -33,12 +33,12 @@
   <div class="w-full h-screen">
     <div class="w-full h-full flex items-center text-center">
       <div class="mx-auto">
-        <div class="text-8xl font-bold uppercase mb-8">{data.config.shortname}</div>
+        <div class="text-5xl md:text-8xl font-bold uppercase mb-4 md:mb-8">{data.config.shortname}</div>
-        <div class="text-5xl mb-4">{data.config.date}</div>
+        <div class="text-3xl md:text-5xl md:mb-4">{data.config.date}</div>
-        <div class="text-5xl">{data.config.venue}</div>
+        <div class="text-3xl md:text-5xl">{data.config.venue}</div>
-        <div class="mt-8 text-lg text-mild">
+        <div class="mt-8 text-lg text-mild mx-4">
           <p>Diving into the culture of the Web3 privacy industry</p>
-          <p><a href="https://prgblockweek.com" class="underline hover:no-underline">Prague Blockchain Week 2023</a></p>
+          <p><a href="https://prgblockweek.com" class="underline hover:no-underline external external-mild">Prague Blockchain Week 2023</a></p>
         </div>
       </div>
 
@@ -67,7 +67,7 @@
             </a>
           </div>
           <div class="mt-4 text-mild">
-            💛 Collaboration of <a href="https://web3privacy.info">Web3Privacy Now</a> & <a href="https://ethbrno.cz">ETHBrno</a> team
+            💛 Collaboration of <a href="https://web3privacy.info" class="external external-mild">Web3Privacy Now</a> & <a href="https://ethbrno.cz" class="external external-mild">ETHBrno</a> team
           </div>
         </div>
       </div>

src/routes/+page.svelte

@@ -9,17 +9,18 @@
 </svelte:head>
 
 <div class="bg-black" id="about">
-    <div class="middle-pane-medium pb-20 text-xl text-center mx-auto">
+    <div class="middle-pane-medium pb-16 text-xl text-center mx-auto">
-        <div class="py-32 w-1/2 mx-auto">
+        <div class="py-16 md:py-32 md:w-1/2 mx-auto markdown">
-            For the first time in the internet’s history, web3 has made meaningful ownership of our own data possible. DeData Salon will bring 18th Century salons up to speed, inviting leaders in the space to discuss what data ownership will mean in the Web3 economy.
+            <SvelteMarkdown source={data.config.slogan} />
         </div>
         <div class="section-header">Key themes</div>
-        <div class="grid grid-cols-3 gap-10">
+        <div class="grid md:grid-cols-3 gap-4 md:gap-10">
             {#each data.config.themes as ti}
                 <div class="bg-[#0d1117] hover:text-black hover:bg-white px-4 py-6">
                     <div class="text-2xl uppercase">{ti.title}</div>
-                    <div class="mt-4 text-lg">
+                    <div class="mt-4 text-lg markdown">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tincidunt eros eu malesuada. Vivamus in urna at ex dictum pretium quis a erat.</div>
+                        <SvelteMarkdown source={ti.desc} />
+                    </div>
                 </div>
             {/each}
         </div>
@@ -27,16 +28,16 @@
 </div>
 
 <div class="" id="speakers">
-    <div class="middle-pane-medium pt-20 text-xl text-center mx-auto">
+    <div class="middle-pane-medium pt-16 text-xl text-center mx-auto">
         <div class="section-header">Speakers</div>
-        <div class="h-screen"></div>
+        <div class="pb-16 text-mild">To-be-announced</div>
     </div>
 </div>
 
 <div class="bg-black" id="program">
-    <div class="middle-pane-medium pt-20 text-xl text-center mx-auto pb-32">
+    <div class="middle-pane-medium pt-16 text-xl text-center mx-auto pb-32">
         <div class="section-header">Program</div>
-        <table class="table-auto table-custom w-full">
+        <table class="table-auto table-custom w-full mx-0 lg:mx-8">
             <thead>
                 <tr>
                     <th class="text-right">time</th>
@@ -46,11 +47,11 @@
             <tbody>
                 {#each data.config.program as pi}
                     <tr class="">
-                        <td class="text-right">{pi.time}</td>
+                        <td class="text-right time xl:whitespace-nowrap sm:w-16 xl:w-36">{@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">{pi.title} {pi.speakers ? '― '+pi.speakers[0]?.name : ''}</div>
                             {#if pi.desc}
-                                <div class="mt-2 text-base description text-mild">
+                                <div class="mt-2 text-base description text-mild markdown">
                                     <SvelteMarkdown source={pi.desc} />
                                 </div>
                             {/if}
@@ -63,18 +64,21 @@
 </div>
 
 <div class="" id="sponsors">
-    <div class="middle-pane-medium pt-20 text-xl text-center mx-auto pb-32">
+    <div class="middle-pane-medium pt-16 text-xl text-center mx-auto pb-32">
         <div class="section-header">Sponsors</div>
+        <div>
+            <a href="https://matrix.to/#/@tree:gwei.cz" target="_blank"><button class="py-2 px-5 bg-white text-black hover:bg-black border border-bg-white hover:text-white">Become a Sponsor</button></a>
+        </div>
     </div>
 </div>
 
 <div class="bg-black" id="ticket">
-    <div class="middle-pane-medium pt-20 text-xl text-center mx-auto pb-32">
+    <div class="middle-pane-medium pt-16 text-xl text-center mx-auto pb-32">
         <div class="section-header">Ticket</div>
-        <div class="grid grid-cols-2 gap-10 w-2/3 mx-auto">
+        <div class="grid lg:grid-cols-2 gap-10 md:w-2/3 mx-auto">
             {#each data.config.tickets as tt}
-                <div class="bg-[#0d1117] hover:border-0 px-3 py-10 hover:text-black hover:bg-white px-10 cursor-pointer">
+                <div class="bg-[#0d1117] hover:border-0 py-10 hover:text-black hover:bg-white px-10 cursor-pointer">
-                    <div class="text-3xl">{tt.title}</div>
+                    <div class="text-3xl uppercase">{tt.title}</div>
                     <div class="text-xl mt-6">{tt.price}</div>
                     <ul class="mt-6 text-lg text-left list-disc px-6">
                         {#each tt.includes as ti}
@@ -96,7 +100,7 @@
 <div class="mb-36" id="faq">
     <div class="middle-pane-medium pt-20 text-xl text-center mx-auto">
         <div class="section-header">FAQ</div>
-        <div class="grid grid-cols-2 gap-10">
+        <div class="grid md:grid-cols-2 gap-2 md:gap-10">
             {#each data.config.faq as fi}
                 <div class="py-10 px-4 hover:bg-white hover:text-black">
                     <div class="text-2xl font-bold mb-6">{fi.title}</div>