mirror of
https://github.com/dergigi/boris.git
synced 2026-01-11 02:44:42 +01:00
53a6053464
- Add horizontal margin (0 1rem) to author-card-container on mobile - Set max-width to calc(100vw - 2rem) to ensure it fits within screen bounds - Add box-sizing: border-box to both container and card for proper sizing - Ensures profile element has equal left/right margins and doesn't exceed screen width
30 lines
1.6 KiB
CSS
30 lines
1.6 KiB
CSS
/* Profile UI fragments */
|
|
.author-card-container { display: flex; justify-content: center; padding: 2rem 1rem; }
|
|
.author-card { display: flex; gap: 1rem; padding: 1.5rem; background: #1a1a1a; border: 1px solid #333; border-radius: 12px; max-width: 600px; width: 100%; }
|
|
.author-card-avatar { flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: #2a2a2a; display: flex; align-items: center; justify-content: center; color: #666; }
|
|
.author-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|
.author-card-avatar svg { font-size: 2.5rem; }
|
|
.author-card-content { flex: 1; min-width: 0; text-align: left; }
|
|
.author-card-name { font-size: 1rem; font-weight: 600; color: #ddd; margin-bottom: 0.5rem; text-align: left; }
|
|
.author-card-bio { font-size: 0.9rem; color: #999; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-align: left; }
|
|
|
|
@media (max-width: 768px) {
|
|
.author-card-container {
|
|
padding: 1.5rem 1rem;
|
|
margin: 0 1rem; /* Add horizontal margin to prevent bleeding */
|
|
max-width: calc(100vw - 2rem); /* Ensure it doesn't exceed screen width */
|
|
box-sizing: border-box;
|
|
}
|
|
.author-card {
|
|
padding: 1rem;
|
|
max-width: 100%; /* Ensure card doesn't exceed container */
|
|
box-sizing: border-box;
|
|
}
|
|
.author-card-avatar { width: 48px; height: 48px; }
|
|
.author-card-avatar svg { font-size: 2rem; }
|
|
.author-card-name { font-size: 0.95rem; }
|
|
.author-card-bio { font-size: 0.85rem; -webkit-line-clamp: 2; }
|
|
}
|
|
|
|
|