feat(UI): enhance accordion and icon styling for consistency
All checks were successful
Build and Deploy Static Site / build (push) Successful in 58s

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.
This commit is contained in:
Kumi 2024-08-04 13:24:42 +02:00
parent e623762b15
commit 2a054a7f78
Signed by: kumi
GPG key ID: ECBCC9082395383F
2 changed files with 26 additions and 14 deletions

View file

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

View file

@ -41,16 +41,15 @@
service.exclude_from_index %} service.exclude_from_index %}
<details class="accordion-item"> <details class="accordion-item">
<summary class="accordion-header"> <summary class="accordion-header">
{{ service.name }}{% if service.tiny_description %} - {{
service.tiny_description }}{% endif %}
</summary>
<div class="accordion-body">
{% if service.icon %} {% if service.icon %}
<div <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 }}" 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 <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" 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" title="Made by Private.coffee"
@ -58,8 +57,8 @@
{{ "coffee" | icon | safe }} {{ "coffee" | icon | safe }}
</div> </div>
{% endif %} {% endif %}
</div> </summary>
{% endif %} <div class="accordion-body">
<p class="text-muted card-text mb-4"> <p class="text-muted card-text mb-4">
{{ service.long_description }} {{ service.long_description }}
</p> </p>