src/components/Profile/Header/index.module.css
.grid {
composes: box from '@shared/atoms/Box.module.css';
background: var(--background-body-transparent);
backdrop-filter: blur(3px);
position: relative;
}
.description {
color: var(--color-secondary);
font-size: var(--font-size-small);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin-top: var(--spacer);
}
.description p:last-child {
margin-bottom: 0;
}
.directMessage {
margin-top: calc(var(--spacer) / 2);
text-align: center;
}
@media (min-width: 50rem) {
.grid {
display: grid;
gap: var(--spacer);
/* lazy golden ratio */
grid-template-columns: 1.618fr 1fr;
}
.description {
margin-top: calc(var(--spacer) / 2);
-webkit-line-clamp: 7 !important;
}
.directMessage {
margin-top: 0;
text-align: end;
}
}
.publisherLinks {
margin-top: calc(var(--spacer) / 2);
margin-bottom: calc(var(--spacer) / 2);
}
.more {
font-size: var(--font-size-mini);
margin-left: calc(var(--spacer) / 8);
cursor: pointer;
}
.meta {
color: var(--color-secondary);
font-size: var(--font-size-mini);
position: absolute;
right: calc(var(--spacer) / 3);
bottom: calc(var(--spacer) / 6);
}