Como ya sabéis, mi mudanza a escritura.social fue por recuperar el placer de escribir en un entorno limpio y sin distracciones. Pero claro, el minimalismo extremo de WriteFreely a veces puede resultar un poco frío.

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