Style CSS

En tant qu'associé Amazon, je gagne des achats éligibles.





Par rapport au volume original qui nécessitait plus de 350 lignes de CSS, le volume remasterisé en utilise moins de 50. Mais pourquoi avons-nous besoin de CSS alors que Blocks fait tout ? Je vous entends demander. Eh bien, il y a des choses que j'aime juste peaufiner et parfois un peu de CSS est nécessaire.

Le CSS ajouté au site se trouve dans Customizer > CSS supplémentaire. Regardons de plus près ce que chacun d'eux fait

Navigation des articles

le comportement par défaut de l'élément Post Navigation Block consiste à afficher une ligne 50/50 montrant la publication précédente et suivante. Le CSS suivant supprime l'espace vide lorsqu'un utilisateur est sur le premier ou le dernier message afin que le bloc s'étende sur toute la largeur.



/* Custom Post Navigation remove empty classes */
.featured-navigation .gb-grid-column:empty {
    flex: 0 1;
}
@media(min-width: 769px) {
    .featured-navigation .gb-grid-column:not(:empty) {
        flex: 1 0;
    }
}

Images en vedette à message unique

le CSS suivant ajuste la taille d'arrière-plan de l'image en vedette pour la tablette et la supprime de Mobile

/* Single Post Hero image responsive controls */
@media(max-width: 1024px) and (min-width: 769px) {
    .page-hero-block:before {
        background-size: cover;
    }
    .featured-column,
    .featured-column img.wp-post-image {
        width: 100% !important;
    }
}
@media(max-width: 768px) {
    .page-hero-block:before {
        background: none;
    }
}

Les archives de publication alignent la méta au bas de la publication

Un simple flex box CSS pour pousser le dernier élément du post-résumé (le post meta) à aligner verticalement en bas du post.

/* Post Archives - force post meta to vertically align bottom */
.generate-columns-container .post>.gb-container,
.generate-columns-container .post>.gb-container>.gb-inside-container,
.post-summary>.gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.post-summary {
    flex: 1;
}
.post-summary>.gb-inside-container>*:last-child {
    margin-top: auto;
}

Rayon de la bordure sur les images post-archives

/* Add border radius to post archive images */
.generate-columns-container .dynamic-featured-image {
    border-radius: 4px;
}

Amazon et le logo Amazon sont des marques commerciales d'Amazon.com, Inc ou de ses sociétés affiliées.