mirror of
https://github.com/discourse/discourse-rewind.git
synced 2025-07-31 16:13:32 +00:00
77 lines
1.7 KiB
SCSS
77 lines
1.7 KiB
SCSS
.-fbff {
|
|
.rewind-card {
|
|
@include rewind-border;
|
|
display: grid;
|
|
grid-template-columns: 1fr 400px 1fr;
|
|
@media screen and (width <= 625px) {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: min-content min-content;
|
|
grid-template-areas: "gif gif gif" "friend nothing you";
|
|
}
|
|
}
|
|
--border-size: 6px;
|
|
@media screen and (width <= 768px) {
|
|
--border-size: 4px;
|
|
}
|
|
@media screen and (width <= 475px) {
|
|
--border-size: 3px;
|
|
}
|
|
.fbff-gif-container {
|
|
position: relative;
|
|
width: 90%;
|
|
border-radius: var(--rewind-border-radius);
|
|
align-self: center;
|
|
justify-self: center;
|
|
z-index: 10;
|
|
@media screen and (width <= 625px) {
|
|
grid-area: gif;
|
|
}
|
|
}
|
|
.fbff-gif {
|
|
width: 100%;
|
|
border-radius: var(--rewind-border-radius);
|
|
}
|
|
.fbff-avatar-container {
|
|
z-index: 10;
|
|
@media screen and (width <= 625px) {
|
|
&:first-of-type {
|
|
grid-area: friend;
|
|
}
|
|
&:last-of-type {
|
|
grid-area: you;
|
|
}
|
|
}
|
|
}
|
|
.fbff-avatar-container img.avatar {
|
|
align-self: center;
|
|
justify-self: center;
|
|
width: 75px;
|
|
height: 75px;
|
|
@media screen and (width <= 768px) {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
@media screen and (width <= 475px) {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
}
|
|
.fbff-avatar-container {
|
|
display: grid;
|
|
grid-template-rows: 1fr min-content;
|
|
flex-direction: column;
|
|
}
|
|
.fbff-avatar-name {
|
|
margin: 0;
|
|
align-self: center;
|
|
justify-self: center;
|
|
margin-top: auto;
|
|
height: min-content;
|
|
font-size: var(--font-down-1);
|
|
font-family: Pixelify Sans;
|
|
@media screen and (width <= 475px) {
|
|
font-size: var(--font-down-3);
|
|
}
|
|
}
|
|
}
|