PrivateCoffee/structables
4
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(css): enhance card design with flex layout

Browse source 
Introduced a flexbox layout to cards for a more adaptive and cohesive structure. This update includes styling for `.card-body` and `.card-footer`, ensuring they occupy space efficiently and maintain visual consistency across different viewport sizes. The `.card-footer` now has a distinct background and top border to clearly delineate it from the body content, enhancing readability and aesthetic appeal.

This enhancement addresses the need for more flexible layout options within cards, improving the overall user experience by ensuring content is well-organized and visually appealing across devices.
This commit is contained in:
Kumi 2024-05-22 18:17:37 +02:00
parent b0adb37ce7
commit 9eee296c81
Signed by: kumi
GPG key ID: ECBCC9082395383F
1 changed files with 14 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
static/css/style.css
View file

@ -73,6 +73,20 @@ blockquote {
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: column;
}
.card-body {
flex: 1;
padding: 1rem;
}
.card-footer {
padding: 1rem;
background-color: #f8f9fa;
border-top: 1px solid #ddd;
margin-top: auto;
} }
.card-img-top { .card-img-top {