meissa/dda-masto-embed
6
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity

Make responsive

Browse source
This commit is contained in:
erik 2024-05-16 13:24:37 +02:00
parent 6a99a4a9ea
commit b8cbac40f6
2 changed files with 72 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
public/post-container.css
View file

@ -4,13 +4,12 @@
--medium: 0.5em; --medium: 0.5em;
--small: 0.25em; --small: 0.25em;
margin-bottom: var(--large); margin-bottom: var(--large);
display: grid; display: grid;
grid: ". post ." / 33% 33% 33%; grid: ". post ." / auto 66% auto;
.mastodon-post { .mastodon-post {
grid-area: post; grid-area: post;
justify-self: center; justify-self: stretch;
display: grid; display: grid;
grid: grid:
"header" "header"
@ -18,7 +17,7 @@
"image" "image"
"link-preview" "link-preview"
"footer" / "footer" /
420px; 100%;
border: 1px solid #ccc; border: 1px solid #ccc;
padding: var(--small); padding: var(--small);
@ -26,13 +25,13 @@
grid-area: header; grid-area: header;
justify-self: stretch; justify-self: stretch;
display: grid; display: grid;
grid: "avatar names . date" / 60px; grid: "avatar names . date" / max-content max-content auto 20%;
margin: var(--medium); margin: var(--medium);
.mastodon-post-avatar { .mastodon-post-avatar {
grid-area: avatar; grid-area: avatar;
width: auto; width: auto;
height: 116%; max-height: 60px;
object-fit: contain; object-fit: contain;
} }
@ -58,6 +57,7 @@
} }
.mastodon-post-date { .mastodon-post-date {
font-size: 0.95vw;
grid-area: date; grid-area: date;
justify-self: end; justify-self: end;
align-self: center; align-self: center;
@ -70,7 +70,7 @@
display: grid; display: grid;
grid: grid:
"text" "text"
"image" / auto; "image" / 100%;
padding: var(--medium); padding: var(--medium);
.mastodon-post-text { .mastodon-post-text {
@ -79,10 +79,10 @@
.mastodon-post-image { .mastodon-post-image {
grid-area: image; grid-area: image;
width: 100%; /* Adjust as needed */ max-width: 100%; /* Adjust as needed */
height: auto;
align-self: center; align-self: center;
justify-self: center; justify-self: center;
height: auto;
border-radius: 1em; border-radius: 1em;
} }
} }
@ -102,7 +102,7 @@
.mastodon-post-link-image{ .mastodon-post-link-image{
grid-area: image; grid-area: image;
justify-self: center; justify-self: center;
width: 100%; max-width: 100%;
height: auto; height: auto;
object-fit: cover; object-fit: cover;
border-radius: 0.25em; border-radius: 0.25em;
@ -189,4 +189,29 @@
} }
} }
} }
@media screen and (max-width: 575px) {
font-size: 2vw;
}
@media screen and (min-width: 576px) {
font-size: 2vw;
}
@media screen and (min-width: 768px) {
font-size: 2vw;
}
@media screen and (min-width: 992px) {
font-size: 1.5vw;
}
@media screen and (min-width: 1200px) {
font-size: 1.25vw;
}
@media screen and (min-width: 1400px) {
font-size: 1.1vw;
}
} }

45
src/main/dda/masto_embed/resources/post-container.scss
View file

@ -4,13 +4,12 @@
--medium: 0.5em; --medium: 0.5em;
--small: 0.25em; --small: 0.25em;
margin-bottom: var(--large); margin-bottom: var(--large);
display: grid; display: grid;
grid: ". post ." / 33% 33% 33%; grid: ". post ." / auto 66% auto;
.mastodon-post { .mastodon-post {
grid-area: post; grid-area: post;
justify-self: center; justify-self: stretch;
display: grid; display: grid;
grid: grid:
"header" "header"
@ -18,7 +17,7 @@
"image" "image"
"link-preview" "link-preview"
"footer" / "footer" /
420px; 100%;
border: 1px solid #ccc; border: 1px solid #ccc;
padding: var(--small); padding: var(--small);
@ -26,13 +25,13 @@
grid-area: header; grid-area: header;
justify-self: stretch; justify-self: stretch;
display: grid; display: grid;
grid: "avatar names . date" / 60px; grid: "avatar names . date" / max-content max-content auto 20%;
margin: var(--medium); margin: var(--medium);
.mastodon-post-avatar { .mastodon-post-avatar {
grid-area: avatar; grid-area: avatar;
width: auto; width: auto;
height: 116%; max-height: 60px;
object-fit: contain; object-fit: contain;
} }
@ -58,6 +57,7 @@
} }
.mastodon-post-date { .mastodon-post-date {
font-size: 0.95vw;
grid-area: date; grid-area: date;
justify-self: end; justify-self: end;
align-self: center; align-self: center;
@ -70,7 +70,7 @@
display: grid; display: grid;
grid: grid:
"text" "text"
"image" / auto; "image" / 100%;
padding: var(--medium); padding: var(--medium);
.mastodon-post-text { .mastodon-post-text {
@ -79,10 +79,10 @@
.mastodon-post-image { .mastodon-post-image {
grid-area: image; grid-area: image;
width: 100%; /* Adjust as needed */ max-width: 100%; /* Adjust as needed */
height: auto;
align-self: center; align-self: center;
justify-self: center; justify-self: center;
height: auto;
border-radius: 1em; border-radius: 1em;
} }
} }
@ -102,7 +102,7 @@
.mastodon-post-link-image{ .mastodon-post-link-image{
grid-area: image; grid-area: image;
justify-self: center; justify-self: center;
width: 100%; max-width: 100%;
height: auto; height: auto;
object-fit: cover; object-fit: cover;
border-radius: 0.25em; border-radius: 0.25em;
@ -189,4 +189,29 @@
} }
} }
} }
@media screen and (max-width: 575px) {
font-size: 2vw;
}
@media screen and (min-width: 576px) {
font-size: 2vw;
}
@media screen and (min-width: 768px) {
font-size: 2vw;
}
@media screen and (min-width: 992px) {
font-size: 1.5vw;
}
@media screen and (min-width: 1200px) {
font-size: 1.25vw;
}
@media screen and (min-width: 1400px) {
font-size: 1.1vw;
}
} }