dda-masto-embed/public/post.css
2024-05-29 14:29:59 +02:00

405 lines
8.1 KiB
CSS

.section.account-mode {
--large: 1em;
--medium: 0.5em;
--small: 0.25em;
margin-bottom: var(--large);
display: grid;
grid: ". post ." / auto auto auto;
.mastodon-post {
grid-area: post;
justify-self: center;
display: grid;
grid:
"header"
"content"
"image"
"link-preview"
"footer" /
minmax(380px, 450px);
border: 1px solid #ccc;
padding: var(--small);
.mastodon-post-header {
grid-area: header;
justify-self: stretch;
display: grid;
grid: "avatar names . date" / max-content max-content auto 20%;
margin: var(--medium);
.mastodon-post-avatar {
grid-area: avatar;
width: auto;
max-height: 60px;
object-fit: contain;
align-self: center;
}
.mastodon-post-names {
grid-area: names;
display: grid;
grid:
"dp-name"
"ac-name" /
auto;
justify-self: start;
margin-left: var(--medium);
.display-name {
grid-area: dp-name;
align-self: end;
text-decoration: none;
color: inherit;
}
.account-name {
grid-area: ac-name;
align-self: start;
text-decoration: none;
color: inherit;
}
}
.mastodon-post-date {
font-size: 85%;
grid-area: date;
justify-self: end;
align-self: center;
margin-right: 1em;
}
}
.mastodon-post-content {
grid-area: content;
display: grid;
grid:
"text"
"image" / 100%;
padding: var(--medium);
.mastodon-post-text {
grid-area: text;
}
.mastodon-post-image {
grid-area: image;
max-width: 100%;
height: auto;
align-self: center;
justify-self: center;
border-radius: 1em;
}
}
.mastodon-post-link-preview {
grid-area: link-preview;
justify-self: center;
display: grid;
grid:
"image"
"info" / 100%;
text-decoration: none;
border: 1px solid #ccc;
border-radius: var(--small);
margin: var(--medium);
.mastodon-post-link-image{
grid-area: image;
justify-self: center;
width: 100%;
height: auto;
object-fit: cover;
border-radius:var(--small);
margin-bottom: var(--small);
}
.mastodon-post-link-info {
grid-area: info;
grid:
"." "link-title" "."
"." "link-description" "."
"." "link-url" "." / auto auto auto;
padding: var(--small);
.mastodon-post-link-title {
grid-area: link-title;
color: #383838;
font-weight: bold;
}
.mastodon-post-link-description {
color: #383838;
grid-area: link-description;
}
.mastodon-post-link-url {
grid-area: link-url;
color: #666;
}
}
}
.mastodon-post-footer {
margin-right: var(--medium);
margin-left: var(--medium);
grid-area: footer;
display: grid;
justify-content: space-between;
grid:
"replies retoots likes"
/ auto auto auto;
padding-top: var(--small);
.footer-button {
background: none;
border: none;
display: flex;
svg {
width: 24px;
height: 24px;
margin-right: var(--small);
}
}
.replies {
justify-self: center;
grid-area: replies;
}
.retoots {
justify-self: center;
grid-area: retoots;
}
.likes {
justify-self: center;
grid-area: likes;
}
.like-count {
justify-self: center;
grid-area: like-count;
}
.retoot-count {
justify-self: center;
grid-area: retoot-count;
}
.reply-count {
justify-self: center;
grid-area: reply-count;
}
}
}
@media screen and (max-width: 575px) {
font-size: 2.1vw;
}
@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;
}
@media screen and (min-width: 2004px) {
font-size: 1vw;
}
}
.section.replies-mode {
--large: 1em;
--medium: 0.5em;
--small: 0.25em;
margin-bottom: var(--large);
display: grid;
grid: ". post ." / auto auto auto;
.mastodon-post {
grid-area: post;
justify-self: center;
align-self: start;
display: grid;
grid:
"header"
"content"
"image"
"link-preview"
"footer" /
minmax(380px, 450px);
border: 1px solid #ccc;
padding: var(--small);
.mastodon-post-header {
grid-area: header;
justify-self: stretch;
display: grid;
grid: "avatar names . date" / max-content max-content auto 20%;
margin: var(--medium);
.mastodon-post-avatar {
grid-area: avatar;
width: auto;
max-height: 60px;
object-fit: contain;
align-self: center;
}
.mastodon-post-names {
grid-area: names;
display: grid;
grid:
"dp-name"
"ac-name" /
auto;
justify-self: start;
margin-left: var(--medium);
.display-name {
grid-area: dp-name;
align-self: end;
text-decoration: none;
color: inherit;
}
.account-name {
grid-area: ac-name;
align-self: start;
text-decoration: none;
color: inherit;
}
}
.mastodon-post-date {
font-size: 85%;
grid-area: date;
justify-self: end;
align-self: center;
margin-right: 1em;
}
}
.mastodon-post-content {
grid-area: content;
display: grid;
grid:
"image text" / auto;
padding: var(--medium);
.mastodon-post-text {
grid-area: text;
align-self: center;
padding: var(--medium);
}
.mastodon-post-image {
grid-area: image;
max-width: 100%;
height: auto;
align-self: center;
justify-self: center;
border-radius: 1em;
}
}
.mastodon-post-link-preview {
grid-area: link-preview;
justify-self: center;
display: grid;
grid:
"image"
"info" / 100%;
text-decoration: none;
border: 1px solid #ccc;
border-radius: var(--small);
margin: var(--medium);
.mastodon-post-link-image{
grid-area: image;
justify-self: center;
width: 100%;
height: auto;
object-fit: cover;
border-radius: var(--small);
margin-bottom: var(--small);
}
.mastodon-post-link-info {
grid-area: info;
grid:
"." "link-title" "."
"." "link-description" "."
"." "link-url" "." / auto auto auto;
padding: var(--small);
.mastodon-post-link-title {
grid-area: link-title;
color: #383838;
font-weight: bold;
}
.mastodon-post-link-description {
color: #383838;
grid-area: link-description;
}
.mastodon-post-link-url {
grid-area: link-url;
color: #666;
}
}
}
.mastodon-post-footer {
display: none;
}
}
@media screen and (max-width: 575px) {
font-size: 2.1vw;
}
@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;
}
@media screen and (min-width: 2004px) {
font-size: 1vw;
}
}