chore: Utilize main and sub splides (#60)

pythonph · Feb 6, 2024 · e8d6c76 · e8d6c76
1 parent 8c5caf9
commit e8d6c76
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 20 deletions.
diff --git a/config/static/css/pycon.css b/config/static/css/pycon.css
@@ -99,6 +99,10 @@ h4 {
     pointer-events: none !important;
 }
 
+.speakers-desc {
+    margin: 0 auto;
+}
+
 /* Additional styles for the sponsor hover */
 
 .tooltip {

diff --git a/pyconph/home/templates/home/_keynotes.html b/pyconph/home/templates/home/_keynotes.html
@@ -1,7 +1,7 @@
 {% load wagtailimages_tags %}
 {% load static %}
 
-<div class="pb-200 md:pb-300 keynote" id="keynote-speakers">
+<div class="pb-200 md:pb-300" id="keynote-speakers">
   <div class="max-w-975 mx-auto px-25 lg:px-0">
     <p class="font-baybayinsisil text-20 md:text-24 text-yellow">
     {{ page.keynote_subtitle }}
@@ -14,25 +14,35 @@ <h3 class="text-24 md:text-32 text-white mb-50">
     </h3>
   </div>
 
-  <div class="max-w-975 mx-auto">
-    <div class="keynote-container flex-col md:flex-row">
-      {% for speaker in page.keynote_speakers.all %}
-      <div class="flex w-full md:w-1/2 md:mx-10">
-        <div class="keynote-img">
-          {% image speaker.display_photo original fill-1000x1000 %}
-        </div>
-        <p class="text-center text-32 text-white mb-10 pt-20">
-        {{ speaker.first_name }} {{ speaker.last_name }}
-        </p>
-        <p class="text-center text-24 text-white-8">
-        {{ speaker.title }}
-        </p>
-        <p class="desc text-center text-16 text-white-80 md:mx-10">
-        {{ speaker.introduction }}
-        </p>
+  <div class="">
+    <div class="splide slider1">
+      <div class="splide__track">
+        <ul class="splide__list">
+          {% for speaker in page.keynote_speakers.all %}
+          <li class="splide__slide">
+
+            {% image speaker.display_photo original fill-1000x1000 %}
+            <p
+                class="text-center text-32 text-white mb-10 pt-20"
+                >
+                {{ speaker.full_name }}
+            </p>
+            <p
+                class="text-center text-24 text-white-80"
+                >
+                {{ speaker.description }}
+            </p>
+            <p
+                class="desc text-center text-16 text-white-80"
+                >
+                {{ speaker.introduction }}
+            </p>
+          </li>
+          {% endfor %}
+        </ul>
       </div>
-      {% endfor %}
     </div>
   </div>
+
 </div>
 
diff --git a/pyconph/home/templates/home/_speakers.html b/pyconph/home/templates/home/_speakers.html
@@ -16,7 +16,7 @@ <h3 class="text-24 md:text-32 text-white mb-50">
         </h3>
     </div>
     <div class="">
-      <div class="splide slider1">
+      <div class="splide slider2">
         <div class="splide__track">
           <ul class="splide__list">
             {% for speaker in page.speakers.all %}
@@ -34,7 +34,7 @@ <h3 class="text-24 md:text-32 text-white mb-50">
                   {{ speaker.description }}
               </p>
               <p
-                  class="desc text-center text-16 text-white-80"
+                  class="speakers-desc text-center text-16 text-white-80"
                   >
                   {{ speaker.introduction }}
               </p>