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

Hoy os traigo un emocionante proyecto: montar tu propia instancia de WriteFreely , lo que te permitirá tener tu blog minimalista. En este artículo, describiré los pasos que he seguido para crear mi propio blog en una instancia de WriteFreely.

Paso 1: Preparativos

Lo primero que debes hacer es crear un usuario llamado «writefreely». A continuación, ingresa a este usuario utilizando los siguientes comandos:

useradd -r -m -d /srv/writefreely -s /bin/bash writefreely usermod -a -G www-data writefreely su - writefreely

Paso 2: Descargar WriteFreely

Descarga la última versión de WriteFreely desde GitHub y descomprímelo. Asegúrate de reemplazar «dominio.com» con tu propio dominio.

wget https://github.com/writefreely/writefreely/releases/download/v0.13.2/writefreely_0.13.2_linux_amd64.tar.gz

tar xvzf writefreely_0.13.2_linux_amd64.tar.gz

mv writefreely dominio.com

exit

chown writefreely.www-data -R /srv/writefreely/

Paso 3: Configura la Base de Datos

Instala MariaDB y crea una base de datos. Sustituye «usuarioqueelijas» y «contraseñaqueelijas» por los valores que prefieras.

apt install mariadb-server

mysql -u root -p

CREATE DATABASE writefreely;

GRANT ALL PRIVILEGES ON writefreely.* TO 'usuarioqueelijas'@'localhost' IDENTIFIED BY 'contraseñaqueelijas';

exit

Paso 4: Genera la Configuración de WriteFreely

Accede al usuario «writefreely» y crea la configuración de WriteFreely. Asegúrate de reemplazar «dominio.com», «usuarioqueelijas», «contraseñaqueelijas» y otros valores según tus preferencias.

su - writefreely

cd dominio.com./writefreely --create-config

Modifica el archivo de configuración con los siguientes datos:

username = usuarioqueelijas

password = contraseñaqueelijas

database = writefreely

site_name          = WriteFreely de usuario

site_description   = Tutorial de como instalar WriteFreely

host               = https://nuestrodominio

default_visibility = unlisted

Una vez hecho, guarda el archivo.

Paso 5: Genera la Clave de Cifrado y el Usuario Administrador

Desde el usuario «writefreely,» genera la clave de cifrado y crea el usuario administrador.

    ./writefreely db init

    ./writefreely keys generate

    ./writefreely --create-admin usuarioqueelijas:contraseñaqueelijas

Paso 6: Crea el Servicio en Systemd

Sal del usuario «writefreely» y crea un servicio Systemd.

nano /etc/systemd/system/writefreely.service

Pega el siguiente contenido en el archivo:

[Unit]
Description=WriteFreely Instance
After=syslog.target network.target mysql.service

[Service]
Type=simple
StandardOutput=syslog
StandardError=syslog
User=writefreely
Group=writefreely
WorkingDirectory=/srv/writefreely/nuestrodominio.com
ExecStart=/srv/writefreely/nuestrodominio.com/writefreely
Restart=always

[Install]
WantedBy=multi-user.target

Guarda el archivo y ejecuta los siguientes comandos:

systemctl daemon-reload
systemctl start writefreely
systemctl enable writefreely

Paso 7: Configura Nginx

Instala Nginx y Certbot , luego crea el archivo de configuración de Nginx.

apt install nginx certbot python3-certbot-nginx nano /etc/nginx/sites-available/writefreely.conf

En el archivo de configuración, agrega la siguiente configuración. Asegúrate de reemplazar «dominio.com» con tu propio dominio:

server {
    listen 80;
    listen [::]:80;

    server_name nuestrodominio.com;

    gzip on;
    gzip_types
      application/javascript
      application/x-javascript
      application/json
      application/rss+xml
      application/xml
      image/svg+xml
      image/x-icon
      application/vnd.ms-fontobject
      application/font-sfnt
      text/css
      text/plain;
    gzip_min_length 256;
    gzip_comp_level 5;
    gzip_http_version 1.1;
    gzip_vary on;

    location ~ ^/.well-known/(webfinger|nodeinfo|host-meta) {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_pass http://127.0.0.1:8080;
        proxy_redirect off;
    }

    location ~ ^/(css|img|js|fonts)/ {
        root /srv/writefreely/nuestrodominio.com/static;
        # Optionally cache these files in the browser:
        # expires 12M;
    }

    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_pass http://127.0.0.1:8080;
        proxy_redirect off;
    }
}

Guarda el archivo y habilita el sitio:

cd /etc/nginx/sites-enabled/
ln -s ../sites-available/writefreely.conf
nginx -t
systemctl reload nginx

Paso 8: Configura Certbot

Finalmente, configura Certbot para obtener un certificado SSL.

    
apt install -y 
certbot python3-certbot-nginx
certbot

Sigue las instrucciones de Certbot para obtener un certificado SSL.

¡Listo! Ahora puedes acceder a tu blog ingresando tu dominio en el navegador y utilizar el

usuario y la contraseña que configuraste anteriormente. Si encuentras algún error o necesitas ayuda, no dudes en contactarme en Mastodon.

¡Espero que disfrutes de tu nuevo blog minimalista creado con WriteFreely!

#Tecnología #Writefreely #Tutorial