Por eso, me he pasado un buen rato trasteando con el CSS para que este rincón tenga personalidad propia. He buscado una estética que llamo “Base Kadence Cálida”: colores que no cansen la vista, una tipografía clara y una disposición parecida al tema Kadence de Wordpress .

A diferencia de los diseños pesados de otras plataformas, aquí no hay scripts que te sigan ni florituras que ralenticen la carga. He apostado por:

• Una rejilla universal: En la portada, los posts se ven en dos columnas (en escritorio) para que de un vistazo veas de qué va la cosa.

• Tonos crema y carbón: He buscado un fondo suave para que la pantalla no parezca una linterna.

• Tarjetas: Cada entrada tiene su espacio, con un ligero efecto al pasar el ratón para que sepa que ahí hay algo que contar.

• Legibilidad en el móvil: Porque sé que muchos me leéis desde el teléfono.

Como creo en compartir y en el conocimiento libre, aquí os dejo el CSS que utilizo. Es totalmente válido para cualquier blog en WriteFreely. Si tienes un blog en el Fediverso y quieres darle un aire más acogedor, solo tienes que copiar y pegar esto en tu configuración, y si deseas modificarlo a tu gusto:

/* --- BASE KADENCE CÁLIDA --- */
body {
    background-color: #fdfaf6;
    color: #3e3e3e;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
}

/* --- TÍTULO PRINCIPAL --- */
header h1 {
    margin: 80px 0 15px 0;
    text-align: center;
}

header h1 a {
    font-family: "Playfair Display", "Didot", "Bodoni MT", "Georgia", serif;
    font-weight: 700;
    font-style: italic;
    font-size: 3.2rem;
    color: #1a1a1a !important;
    text-decoration: none;
    border: none !important;
}

header p.description {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #9e938a;
    text-align: center;
    margin-bottom: 70px;
}

/* --- REJILLA UNIVERSAL (Portada, Tags y Búsquedas) --- */
#posts {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 70px 40px !important; 
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}

/* --- TARJETA KADENCE --- */
body:not(#post) article {
    background: #ffffff;
    border: 1px solid #f0ece8;
    border-radius: 16px;
    height: 260px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px; 
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    position: relative;
    box-sizing: border-box;
}

body:not(#post) article:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(184, 161, 142, 0.15);
    border-color: #d4a373;
}

body:not(#post) article h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

body:not(#post) article h2 a {
    color: #1a1a1a;
    border: none !important;
}

body:not(#post) article nav.edit-meta {
    display: none;
}

body:not(#post) article time, .post-date {
    font-size: 0.75rem;
    color: #b8a18e;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
}

body:not(#post) article > *:not(h2):not(time):not(.post-date):not(nav) {
    font-size: 0.9rem;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- FIRMA (POST SIGNATURE) --- */
.post-signature {
    margin: 80px auto;
    padding: 40px;
    max-width: 700px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f0ece8;
    text-align: center;
}

.post-signature a {
    color: #d4a373;
    font-weight: 600;
    text-decoration: none;
}

/* --- RESPONSIVO --- */
@media (max-width: 800px) {
    #posts { 
        grid-template-columns: 1fr !important; 
        gap: 40px !important;
    }
    header h1 a { font-size: 2.2rem; }
}

/* --- VISTA DE LECTURA (Aquí aplicamos el margen para móvil) --- */
#post article { 
    max-width: 720px; 
    margin: 60px auto; 
    height: auto; 
    display: block; 
    background: transparent;
    border: none;
    box-shadow: none;
    /* Cambio clave: 0 arriba/abajo, 20px a los lados para que no pegue al filo */
    padding: 0 20px; 
    box-sizing: border-box;
}

/* Aseguramos que las imágenes tampoco peguen al filo */
#post article img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

Espero que os guste el nuevo aire del blog.

#Writefreely #CSS #Estilos

El rincón de ferlagod — Si dejas tu comentario en Mastodon te leeré.

Contenido bajo licencia Creative Commons BY-SA 4.0.

Me puedes encontrar en Mastodon