feat(UI): enhance accordion and icon styling for consistency

Improved the styling of homemade icons by setting explicit height and
width, ensuring they are consistently sized. Refined the layout of the
accordion header by adding flex display and centering alignment for
better visual alignment. Introduced new icon container styles to
standardize icon presentation and spacing.

These changes aim to provide a more polished and uniform user interface
experience, addressing inconsistencies and enhancing visual clarity.

assets/css/base.css

@@ -120,8 +120,9 @@ h5 {
 }
 
 .homemade {
-  top: -0.5rem;
   right: -0.5rem;
+  height: 1.5rem;
+  width: 1.5rem;
   position: absolute;
 }
 
@@ -287,6 +288,8 @@ h5 {
 }
 
 .accordion-header {
+  display: flex;
+  align-items: center;
   padding: 1rem;
   cursor: pointer;
   background-color: #f9f9f9;
@@ -299,6 +302,16 @@ h5 {
   background-color: #e9e9e9;
 }
 
+.icon-container {
+  display: flex;
+  align-items: center;
+  margin-right: 1rem;
+}
+
+.bs-icon {
+  position: relative;
+}
+
 .accordion-body {
   padding: 1rem;
   display: none;

templates/index.html

@@ -41,16 +41,15 @@
         service.exclude_from_index %}
         <details class="accordion-item">
           <summary class="accordion-header">
-            {{ service.name }}{% if service.tiny_description %} - {{
-            service.tiny_description }}{% endif %}
-          </summary>
-          <div class="accordion-body">
             {% if service.icon %}
             <div
-              class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
+              class="bs-icon-lg d-flex justify-content-center align-items-center bs-icon"
               title="{{ service.name }}"
             >
-              {{ service.icon | icon | safe }} {% if service.homemade %}
+              {{ service.icon | icon | safe }}
+            </div>
+            {% endif %} {{ service.name }}{% if service.tiny_description %} - {{
+            service.tiny_description }}{% endif %} {% if service.homemade %}
             <div
               class="bs-icon-sm bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-sm homemade"
               title="Made by Private.coffee"
@@ -58,8 +57,8 @@
               {{ "coffee" | icon | safe }}
             </div>
             {% endif %}
-            </div>
+          </summary>
-            {% endif %}
+          <div class="accordion-body">
             <p class="text-muted card-text mb-4">
               {{ service.long_description }}
             </p>