Style and responsiveness tweaks

This commit is contained in:
erik 2024-05-16 14:46:22 +02:00
parent b8cbac40f6
commit 52c4574a3b
2 changed files with 22 additions and 4 deletions

View file

@ -33,6 +33,7 @@
width: auto; width: auto;
max-height: 60px; max-height: 60px;
object-fit: contain; object-fit: contain;
align-self: center;
} }
.mastodon-post-names { .mastodon-post-names {
@ -48,16 +49,20 @@
.display-name { .display-name {
grid-area: dp-name; grid-area: dp-name;
align-self: end; align-self: end;
text-decoration: none;
color: inherit;
} }
.account-name { .account-name {
grid-area: ac-name; grid-area: ac-name;
align-self: start; align-self: start;
text-decoration: none;
color: inherit;
} }
} }
.mastodon-post-date { .mastodon-post-date {
font-size: 0.95vw; font-size: 85%;
grid-area: date; grid-area: date;
justify-self: end; justify-self: end;
align-self: center; align-self: center;
@ -191,7 +196,7 @@
} }
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
font-size: 2vw; font-size: 2.1vw;
} }
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
@ -214,4 +219,8 @@
font-size: 1.1vw; font-size: 1.1vw;
} }
@media screen and (min-width: 2004px) {
font-size: 1vw;
}
} }

View file

@ -33,6 +33,7 @@
width: auto; width: auto;
max-height: 60px; max-height: 60px;
object-fit: contain; object-fit: contain;
align-self: center;
} }
.mastodon-post-names { .mastodon-post-names {
@ -48,16 +49,20 @@
.display-name { .display-name {
grid-area: dp-name; grid-area: dp-name;
align-self: end; align-self: end;
text-decoration: none;
color: inherit;
} }
.account-name { .account-name {
grid-area: ac-name; grid-area: ac-name;
align-self: start; align-self: start;
text-decoration: none;
color: inherit;
} }
} }
.mastodon-post-date { .mastodon-post-date {
font-size: 0.95vw; font-size: 85%;
grid-area: date; grid-area: date;
justify-self: end; justify-self: end;
align-self: center; align-self: center;
@ -191,7 +196,7 @@
} }
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
font-size: 2vw; font-size: 2.1vw;
} }
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
@ -214,4 +219,8 @@
font-size: 1.1vw; font-size: 1.1vw;
} }
@media screen and (min-width: 2004px) {
font-size: 1vw;
}
} }