Add post css
This commit is contained in:
parent
14f66cb2e1
commit
643541f798
1 changed files with 405 additions and 0 deletions
405
src/main/dda/masto_embed/resources/post.css
Normal file
405
src/main/dda/masto_embed/resources/post.css
Normal file
|
|
@ -0,0 +1,405 @@
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in a new issue
