Few css pointers and fixes

Back to Home
1 hour ago
#1
MadRomas

Few pointers and adjustments.

.stat-label
 {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 5px;
}

margin-top: 5px; need to delete that.

.community-user-item .user-stats
 {
    font-size: 0.65rem;
    color: var(--text-muted);
    display: flex;
    gap: 8px;
    margin-top: 2px;
}

display: flex; need to delete that or set it to "block"

Optional .back-to-top too bright. Need to fade it out aka transparency

background: color-mix(in srgb, var(--primary), transparent 70%);

and :hover

background: color-mix(in srgb, var(--primary-hover), transparent 60%);

56 minutes ago
#2
MadRomas
.container
 {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

On mobile padding: 0 24px; is too much... 10px is good enough. Or set

@media (max-width: 800px) {
.container
 {
    padding: 0 10px;
}
}

Same here

.post-body
 {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    padding: 25px;
    min-height: 200px;
}

Too much for mobile. padding: 10px; OK.

53 minutes ago
#3
MadRomas
pre {
  font-family: monospace; /* 1 */
  font-size: .9em; /* 2 */
}

.9 probably better for code fitting. That's up to you. Not important.

48 minutes ago
#4
MadRomas

normalize.css you have a double font on line 98

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
18 minutes ago
#5
MadRomas

I have made all this changes on this forum. Check it, maybe adopt it or not. This is really just visuality and personalization. 😎

16 minutes ago
#6
MadRomas
.post-content-wrapper
 {
    flex: 1;
    min-height: 200px;
    display: flex;
    align-items: center;
}

Don't really need that min-height: 200px;

Join the Conversation

Please log in or register to reply.

Back to Home