moanos/Notfellchen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Display block for small screens so buttons don't float out

Browse Source
This commit is contained in:
moanos [he/him] 2024-08-09 08:42:17 +02:00
parent 5f077edeb6
commit 986723d4b2
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/fellchensammlung/static/fellchensammlung/css/styles.css
View File

@ -333,6 +333,12 @@ select, .button {
justify-content: space-between; justify-content: space-between;
} }
@media screen and (max-width: 800px) {
.detail-animal-header {
display: block;
}
}
.tag { .tag {
border: black 1px solid; border: black 1px solid;
border-radius: 0.3rem; border-radius: 0.3rem;
@ -379,7 +385,7 @@ select, .button {
color: var(--text-two); color: var(--text-two);
} }
.card h1 { .card h1 {
color: var(--text-three); color: var(--text-three);
text-shadow: 1px 1px var(--shadow-three); text-shadow: 1px 1px var(--shadow-three);
} }
@ -426,18 +432,19 @@ select, .button {
position: relative; position: relative;
padding: 0; padding: 0;
} }
/* Make the badge float in the top right corner of the button */ /* Make the badge float in the top right corner of the button */
.button__badge { .button__badge {
background-color: #fa3e3e; background-color: #fa3e3e;
border-radius: 2px; border-radius: 2px;
color: white; color: white;
padding: 1px 3px; padding: 1px 3px;
font-size: 10px; font-size: 10px;
position: absolute; /* Position the badge within the relatively positioned button */ position: absolute; /* Position the badge within the relatively positioned button */
top: 0; top: 0;
right: 0; right: 0;
} }
.adoption-card-report-link, .notification-card-mark-read { .adoption-card-report-link, .notification-card-mark-read {