31 líneas de Css

Tenía preparado un post sobre el rediseño de esta web, de como había buscado inspiración en el minimalismo, de las bondades de Figma y como había planificado el diseño de cada página hasta el último detalle antes de empezar a escribir código. Código con variables globales, semánticas y de componente, con @mixins, de como aplicaría la metodología BEM y como usar clases de utilidad en un proyecto pequeño.

Pero no, por un error (disléxico) la web se quedó sin css, y vi las entrañas y me di cuenta de que había asumido que el recurso gráfico basta para dar contexto al contenido y no es así.

Así que hice una lista, me encantan las listas:

• La jerarquía en la pagina de post no era correcta.
• Las migas de pan (breadcrums) eran innecesarias y redundantes en cada post.
• El contenido del <footer> era prescindible.
• El contenido aparece desordenado.
• Faltan titulares.
• etc ...

Así que eso he hecho, he borrado la Css y el javascript y he ordenado un poco la información de los posts y algunas páginas.

31 líneas de css es lo que he necesitado. Para controlar el texto dar algo de color y ajustar la paginación para que sea usable. De momento he dejado la Css de eleventy-plugin-syntaxhighlight en los post, ya veremos.

/* lacss.css  */

body {
    color: #222;
    font-family: system-ui;
    line-height: 1.6;
    max-width: 65ch;
}

h1 {
    line-height: 1.2;
}

a:hover {
    color: darkblue;
}

kbd, 
p code,
blockquote code {
    background-color: #eee;
    display: inline-block;
    padding-inline: .25rem;
}

.co-pagination__list {
    display: flex;
    gap: 1rem;
}

.co-pagination__item {
    list-style: none;
}