refactor: Enhance bullet implementation (#53)

pythonph · Jan 18, 2024 · b46004f · b46004f
1 parent fd4c650
commit b46004f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 44 deletions.
diff --git a/config/static/css/pycon.css b/config/static/css/pycon.css
@@ -152,11 +152,25 @@ h4 {
 
 /* Styles for the bullet contents */
 
+ul {
+    margin-left: 1em;
+}
+
 ul > li {
-    color: white !important;
-    list-style-type: "✦ ";
+    color: hsla(0,0%,100%,.8) !important;
+    list-style-type: "✦  ";
+    margin-left: 2rem;
+    margin-bottom: 1.25rem;
+    font-weight: 400;
 }
 
 .no-bullet {
     list-style-type: none !important;
+    margin-left: unset !important;
+    margin-bottom: unset !important;
+}
+
+.topic-bullet {
+    margin-left: unset !important;
+    margin-bottom: unset !important;
 }
diff --git a/pyconph/home/models.py b/pyconph/home/models.py
@@ -148,6 +148,20 @@ def day1_date(self):
     def day2_date(self):
         return self.date_end.strftime("%B %d")
 
+    @property
+    def content_topics(self):
+        return (
+            "Beginner & General Programming",
+            "Backend / DevOps",
+            "Machine Learning & Artificial Intelligence",
+            "Distributed Computing",
+            "Personal & Professional Development",
+            "Platform / Framework / Architecture / Security",
+            "Data Science / Analysis / Engineering",
+            "Web / Mobile",
+            "Practices",
+        )
+
     def keynote_speakers(self):
         return Speaker.objects.filter(
             is_featured=True,

diff --git a/pyconph/home/templates/home/home_page.html b/pyconph/home/templates/home/home_page.html
@@ -263,51 +263,13 @@ <h2 class="font-medium text-48 md:text-80 text-white mb-20">
                     <ul
                         class="md:columns-2 list-disc px-20 md:px-40 gap-45"
                     >
+                        {% for topic in page.content_topics %}
                         <li
-                            class="text-16 text-white-80 px-10 py-5 break-words"
+                            class="text-16 text-white-80 px-10 py-7 break-words topic-bullet"
                         >
-                            Beginner & General Programming
-                        </li>
-                        <li
-                            class="text-16 text-white-80 px-10 py-5 break-words"
-                        >
-                            Backend/DevOps
-                        </li>
-                        <li
-                            class="text-16 text-white-80 px-10 py-5 break-words"
-                        >
-                            Machine Learning & Artificial Intelligence
-                        </li>
-                        <li
-                            class="text-16 text-white-80 px-10 py-5 break-words"
-                        >
-                            Distributed Computing
-                        </li>
-                        <li
-                            class="text-16 text-white-80 px-10 py-5 break-words"
-                        >
-                            Personal & Professional Development
-                        </li>
-                        <li
-                            class="text-16 text-white-80 px-10 py-5 break-words"
-                        >
-                            Platform/Framework/Architecture, Security
-                        </li>
-                        <li
-                            class="text-16 text-white-80 px-10 py-5 break-words"
-                        >
-                            Data Science/Analysis/Engineering
-                        </li>
-                        <li
-                            class="text-16 text-white-80 px-10 py-5 break-words"
-                        >
-                            Web/Mobile
-                        </li>
-                        <li
-                            class="text-16 text-white-80 px-10 py-5 break-words"
-                        >
-                            Practices
+                            {{ topic }}
                         </li>
+                        {% endfor %}
                     </ul>
                 </div>
             </div>